@esri/solutions-components 0.10.3 → 0.10.5

package/dist/esm/calcite-shell-panel_14.entry.js

@@ -4,31 +4,33 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, f as forceUpdate, g as getElement, H as Host, d as readTask, F as Fragment } from './index-e3f04fa1.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-0618f140.js';
-import { a as getElementDir, i as isPrimaryPointerButton, h as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, n as nodeListToArray, d as focusElementInGroup, B as filterDirectChildren, t as toAriaBoolean, e as focusElement, g as getSlotted } from './dom-adaa346d.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-f6556a2c.js';
-import { c as clamp } from './math-fd9c999c.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-22159fb9.js';
-import { C as CSS_UTILITY } from './resources-60c8dbbc.js';
-import { g as guid } from './guid-58589598.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-33053690.js';
+import { a as getElementDir, i as isPrimaryPointerButton, h as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, n as nodeListToArray, d as focusElementInGroup, B as filterDirectChildren, t as toAriaBoolean, C as getSlotAssignedElements, e as focusElement, g as getSlotted } from './dom-982585e7.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-53748f98.js';
+import { c as clamp } from './math-dbb62ccf.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-5371b7ab.js';
+import { C as CSS_UTILITY } from './resources-3bc82696.js';
+import { g as guid } from './guid-5c959cfd.js';
 import { c as calciteSize24, a as calciteSize32, b as calciteSize44 } from './core-6a3c13ac.js';
-import { c as createObserver } from './observers-2621ada9.js';
-import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-8a1c50b8.js';
-import { g as getIconScale } from './component-ea2e5ffe.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3166a45.js';
-import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render-2101b438.js';
-import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-065a4e74.js';
-import { C as CSS$5, S as SLOTS$3 } from './resources-7b48e8fd.js';
-import { I as ICON_TYPES$1 } from './resources-c48f3e92.js';
+import { c as createObserver } from './observers-0f4a5f9e.js';
+import { c as connectInteractive, d as disconnectInteractive, I as InteractiveContainer, u as updateHostInteraction } from './interactive-1d03c7ff.js';
+import { g as getIconScale } from './component-e3f05da5.js';
+import { i as isBrowser } from './browser-8c71dd57.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-869378d9.js';
+import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render-d8c49a1f.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-173802fd.js';
+import { l as logger } from './logger-c6b14fe1.js';
+import { C as CSS$5, S as SLOTS$3 } from './resources-124c42d1.js';
+import { I as ICON_TYPES$1 } from './resources-a4ff051c.js';
 import { g as getLocaleComponentStrings } from './locale-7162b55a.js';
 import { s as state } from './solution-store-e2690620.js';
 import { d as EUpdateType } from './interfaces-659e3836.js';
 import { E as EFileType } from './solution-resource-ab63a236.js';
-import './key-bc256b99.js';
-import './browser-f1924ed5.js';
-import './array-17cb1195.js';
-import './resources-4a2ba5b1.js';
+import './key-7f394a98.js';
+import './array-5ce54fce.js';
+import './resources-0bf41f5d.js';
 import './debounce-6e9ade8c.js';
+import './config-6d8fa5c8.js';
 import './esri-loader-c6842c6b.js';
 import './_commonjsHelpers-089957fe.js';
 import './index-1dc14abf.js';
@@ -37,23 +39,25 @@ import './restHelpersGet-0a15c2f4.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$4 = {
     container: "container",
     content: "content",
     contentHeader: "content__header",
     contentBody: "content__body",
-    contentFloat: "content--float",
+    floatContent: "float--content",
     contentOverlay: "content--overlay",
     separator: "separator",
+    float: "float",
+    floatAll: "float-all",
 };
 const SLOTS$2 = {
     actionBar: "action-bar",
     header: "header",
 };
 
-const shellPanelCss = ":host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-detached-max-height:unset;--calcite-shell-panel-max-height:unset;--calcite-shell-panel-shadow-block-start-internal:0 4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-block-end-internal:0 -4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-inline-start-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-inline-end-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl.content--overlay{--calcite-shell-panel-shadow-inline-start-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-shell-panel-shadow-inline-end-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][width-scale=s]) .content{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 12vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 300px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=m]) .content{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 20vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 420px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=l]) .content{--calcite-shell-panel-width-internal:var(--calcite-shell-panel-width, 45vw);--calcite-shell-panel-max-width-internal:var(--calcite-shell-panel-max-width, 680px);--calcite-shell-panel-min-width-internal:var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal][height-scale=s]) .content{--calcite-shell-panel-max-height-internal:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 20vh)\n  )}:host([layout=horizontal]) .content{--calcite-shell-panel-min-height-internal:var(--calcite-shell-panel-min-height, 5vh);--calcite-shell-panel-max-height-internal:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 30vh)\n  )}:host([layout=horizontal][height-scale=l]) .content{--calcite-shell-panel-max-height-internal:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 40vh)\n  )}.container{pointer-events:none;box-sizing:border-box;display:flex;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}.container *{box-sizing:border-box}:host([layout=horizontal]) .container{flex-direction:column}:host(:hover) .separator:not(:hover):not(:focus),:host(:focus-within) .separator:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-color-border-3)}.separator{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;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;cursor:col-resize;outline:none}.separator:hover{opacity:1;background-color:var(--calcite-color-border-2)}.separator:focus{background-color:var(--calcite-color-brand);opacity:1}:host([layout=vertical]) .separator{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}:host([layout=horizontal][position=start]) .separator{inset-block-end:0px}:host([layout=horizontal][position=end]) .separator{inset-block-start:0px}:host([layout=horizontal]) .separator{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}:host([layout=vertical][position=start]) .separator{inset-inline-end:-2px}:host([layout=horizontal][position=start]) .separator{inset-block-end:-2px}:host([layout=vertical][position=end]) .separator{inset-inline-start:-2px}:host([layout=horizontal][position=end]) .separator{inset-block-start:-2px}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.content{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]) .content{inline-size:var(--calcite-shell-panel-width-internal);max-inline-size:var(--calcite-shell-panel-max-width-internal);min-inline-size:var(--calcite-shell-panel-min-width-internal)}:host([layout=horizontal]) .content{block-size:var(--calcite-shell-panel-height-internal);max-block-size:var(--calcite-shell-panel-max-height-internal);min-block-size:var(--calcite-shell-panel-min-height-internal)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-shell-panel-shadow-inline-start-internal)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-shell-panel-shadow-inline-end-internal)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-shell-panel-shadow-block-start-internal)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-shell-panel-shadow-block-end-internal)}.content--float{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-shell-panel-max-height-internal, calc(100% - 1rem))}.content--float ::slotted(calcite-panel),.content--float ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .content--float{margin-block:0.5rem}:host([position=start]) .content--float ::slotted(calcite-panel),:host([position=start]) .content--float ::slotted(calcite-flow),:host([position=end]) .content--float ::slotted(calcite-panel),:host([position=end]) .content--float ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}:host([position=start]:not([slot=panel-end])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}";
+const shellPanelCss = ":host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-detached-max-height:unset;--calcite-shell-panel-max-height:unset;--calcite-internal-shell-panel-shadow-block-start:0 4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-block-end:0 -4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-start:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical][width-scale=s]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=s][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=m]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=m][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=l]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][width-scale=l][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal][height-scale=s]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 20vh)\n  )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height:var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 30vh)\n  )}:host([layout=horizontal][height-scale=l]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 40vh)\n  )}.container{pointer-events:none;box-sizing:border-box;display:flex;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}.container *{box-sizing:border-box}.container.float-all{margin-block:0.5rem;margin-inline:0.5rem}:host([layout=horizontal]) .container{flex-direction:column}:host(:hover) .separator:not(:hover):not(:focus),:host(:focus-within) .separator:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-color-border-3)}.separator{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;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;cursor:col-resize;outline:none}.separator:hover{opacity:1;background-color:var(--calcite-color-border-2)}.separator:focus{background-color:var(--calcite-color-brand);opacity:1}:host([layout=vertical]) .separator{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}:host([layout=horizontal][position=start]) .separator{inset-block-end:0px}:host([layout=horizontal][position=end]) .separator{inset-block-start:0px}:host([layout=horizontal]) .separator{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}:host([layout=vertical][position=start]) .separator{inset-inline-end:-2px}:host([layout=horizontal][position=start]) .separator{inset-block-end:-2px}:host([layout=vertical][position=end]) .separator{inset-inline-start:-2px}:host([layout=horizontal][position=end]) .separator{inset-block-start:-2px}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.content{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem))}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:0.5rem}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]:not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteShellPanelStyle0 = shellPanelCss;
 
 const ShellPanel = class {
@@ -251,14 +255,14 @@ const ShellPanel = class {
     }
     handleDetached(value) {
         if (value) {
-            this.displayMode = "float";
+            this.displayMode = "float-content";
         }
-        else if (this.displayMode === "float") {
+        else if (this.displayMode === "float-content" || this.displayMode === "float") {
             this.displayMode = "dock";
         }
     }
     handleDisplayMode(value) {
-        this.detached = value === "float";
+        this.detached = value === "float-content" || value === "float";
     }
     handleDetachedHeightScale(value) {
         this.heightScale = value;
@@ -308,7 +312,7 @@ const ShellPanel = class {
     render() {
         const { collapsed, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout, displayMode, } = this;
         const dir = getElementDir(this.el);
-        const allowResizing = displayMode !== "float" && resizable;
+        const allowResizing = displayMode !== "float-content" && displayMode !== "float" && resizable;
         const style = allowResizing
             ? layout === "horizontal"
                 ? contentHeight
@@ -319,8 +323,8 @@ const ShellPanel = class {
                     : null
             : null;
         const separatorNode = !collapsed && allowResizing ? (h("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
-                ? contentHeight ?? initialContentHeight
-                : contentWidth ?? initialContentWidth, class: CSS$4.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
+                ? (contentHeight ?? initialContentHeight)
+                : (contentWidth ?? initialContentWidth), class: CSS$4.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
         const getAnimationDir = () => {
             if (layout === "horizontal") {
                 return position === "start"
@@ -336,7 +340,7 @@ const ShellPanel = class {
                 [CSS_UTILITY.rtl]: dir === "rtl",
                 [CSS$4.content]: true,
                 [CSS$4.contentOverlay]: displayMode === "overlay",
-                [CSS$4.contentFloat]: displayMode === "float",
+                [CSS$4.floatContent]: displayMode === "float-content" || displayMode === "float",
                 [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
                 [getAnimationDir()]: displayMode === "overlay",
             }, hidden: collapsed, key: "content", ref: this.storeContentEl, style: style }, this.renderHeader(), h("div", { class: CSS$4.contentBody }, h("slot", null)), separatorNode));
@@ -345,7 +349,7 @@ const ShellPanel = class {
         if (position === "end") {
             mainNodes.reverse();
         }
-        return h("div", { class: { [CSS$4.container]: true } }, mainNodes);
+        return (h("div", { class: { [CSS$4.container]: true, [CSS$4.floatAll]: displayMode === "float-all" } }, mainNodes));
     }
     // --------------------------------------------------------------------------
     //
@@ -424,7 +428,7 @@ ShellPanel.style = CalciteShellPanelStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$3 = {
     container: "container",
@@ -437,7 +441,6 @@ const CalciteTabStyle0 = tabCss;
 const Tab = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.calciteInternalTabRegister = createEvent(this, "calciteInternalTabRegister", 6);
         this.guid = `calcite-tab-title-${guid()}`;
         this.tab = undefined;
         this.selected = false;
@@ -451,14 +454,11 @@ const Tab = class {
     //--------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (h(Host, { key: '34f25633afec73b771fba5a8d2c35e647dbc7abe', "aria-labelledby": this.labeledBy, id: id }, h("div", { key: '8ee7f4025cc393cfb3f4d53a6762a50017abbfe8', class: { [CSS$3.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { key: 'eda53c19a48f0a96b52362a588292139f8526da4', class: CSS$3.content }, h("slot", { key: 'c1da92b857f33df134cbaf5eeddc3f8fcda1f5dc' })))));
+        return (h(Host, { key: '03e398db2023e422338659deb076c6e6c63cd866', "aria-labelledby": this.labeledBy, id: id }, h("div", { key: '371846888e92a0791d2a5a725d1525808241132e', class: { [CSS$3.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { key: '48e3af2254269734886ed512dc3577dfafed52fa', class: CSS$3.content }, h("slot", { key: 'e25dd14ed3972ed4b488f7abb07484cf5e48681f' })))));
     }
     connectedCallback() {
         this.parentTabsEl = this.el.closest("calcite-tabs");
     }
-    componentDidLoad() {
-        this.calciteInternalTabRegister.emit();
-    }
     disconnectedCallback() {
         // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
         document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister", {
@@ -521,14 +521,13 @@ Tab.style = CalciteTabStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const ICON = {
     chevronRight: "chevron-right",
     chevronLeft: "chevron-left",
 };
 const CSS$2 = {
-    activeIndicatorContainer: "tab-nav-active-indicator-container",
     container: "tab-nav",
     containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
     containerHasStartTabTitleOverflow: "tab-nav--start-overflow",
@@ -539,23 +538,25 @@ const CSS$2 = {
     tabTitleSlotWrapper: "tab-titles-slot-wrapper",
 };
 
-const tabNavCss = ":host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-nav-active-indicator-container,.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-color-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:\"\";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabNavCss = ":host{--calcite-internal-tab-nav-gradient-start-side:left;--calcite-internal-tab-nav-gradient-end-side:right;position:relative;display:flex}.scale-s{--calcite-internal-tab-nav-scroller-button-width:24px;min-block-size:1.5rem}.scale-m{--calcite-internal-tab-nav-scroller-button-width:32px;min-block-size:2rem}.scale-l{--calcite-internal-tab-nav-scroller-button-width:44px;min-block-size:2.75rem}.calcite--rtl{--calcite-internal-tab-nav-gradient-start-side:right;--calcite-internal-tab-nav-gradient-end-side:left}.tab-nav--start-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%)}.tab-nav--start-overflow.tab-nav--end-overflow .tab-titles-slot-wrapper{-webkit-mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%);mask-image:linear-gradient(to var(--calcite-internal-tab-nav-gradient-end-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%), linear-gradient(to var(--calcite-internal-tab-nav-gradient-start-side), transparent, transparent var(--calcite-internal-tab-nav-scroller-button-width), white var(--calcite-internal-tab-nav-scroller-button-width), white 51%, transparent 51%)}.tab-nav::-webkit-scrollbar{display:none;-ms-overflow-style:none;scrollbar-width:none}:host([layout=center]) ::slotted(calcite-tab-title){display:flex;flex-grow:1;flex-shrink:0;min-inline-size:auto;white-space:nowrap}:host([layout=center]) ::slotted(calcite-tab-title[selected]){overflow:unset}:host(:not([bordered])) .scale-l{--calcite-internal-tab-nav-gap:var(--calcite-size-xxl)}:host(:not([bordered])) .scale-m{--calcite-internal-tab-nav-gap:var(--calcite-size-xl)}:host(:not([bordered])) .scale-s{--calcite-internal-tab-nav-gap:var(--calcite-size-lg)}:host(:not([bordered])) .tab-titles-slot-wrapper{gap:var(--calcite-internal-tab-nav-gap)}:host([layout=center]:not([bordered])) .tab-titles-slot-wrapper{padding-inline:var(--calcite-spacing-xxl)}.tab-nav,.tab-titles-slot-wrapper{display:flex;inline-size:100%;justify-content:flex-start;overflow:hidden;white-space:nowrap}.scroll-button-container{position:absolute;inset-block:0px}.scroll-button-container calcite-button{--calcite-offset-invert-focus:1;--calcite-color-text-1:var(--calcite-color-text-3);block-size:100%}.scroll-button-container calcite-button:hover{--calcite-color-text-1:unset;--calcite-color-foreground-1:var(--calcite-color-transparent-hover);--calcite-color-foreground-3:var(--calcite-color-transparent)}.scroll-button-container--forward{inset-inline-end:0;z-index:var(--calcite-z-index)}.scroll-button-container--backward{inset-inline-start:0;z-index:var(--calcite-z-index)}:host(:not([bordered])) .scroll-button-container--backward::before,:host(:not([bordered])) .scroll-button-container--forward::before{background-color:var(--calcite-color-border-3);content:\"\";inline-size:var(--calcite-border-width-sm);inset-block-start:var(--calcite-border-width-md);inset-block-end:var(--calcite-border-width-md);position:absolute}:host(:not([bordered])) .scroll-button-container--backward::before{inset-inline-end:0}:host(:not([bordered])) .scroll-button-container--forward::before{inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteTabNavStyle0 = tabNavCss;
 
 const TabNav = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
+        this.calciteInternalTabNavSlotChange = createEvent(this, "calciteInternalTabNavSlotChange", 7);
         this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
         this.effectiveDir = "ltr";
         this.lastScrollWheelAxis = "x";
         this.resizeObserver = createObserver("resize", () => {
             this.updateScrollingState();
-            if (!this.activeIndicatorEl) {
-                return;
-            }
-            this.updateActiveIndicator();
         });
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
         this.onTabTitleWheel = (event) => {
             event.preventDefault();
             const { deltaX, deltaY } = event;
@@ -575,16 +576,15 @@ const TabNav = class {
             }
             const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
             event.currentTarget.scrollBy(scrollByX, 0);
-            requestAnimationFrame(() => this.updateActiveIndicator());
         };
         this.onSlotChange = (event) => {
             this.intersectionObserver?.disconnect();
-            const slottedChildren = event.target.assignedElements();
-            slottedChildren.forEach((child) => {
+            const slottedElements = slotChangeGetAssignedElements(event, "calcite-tab-title");
+            slottedElements.forEach((child) => {
                 this.intersectionObserver?.observe(child);
             });
+            this.calciteInternalTabNavSlotChange.emit(slottedElements);
         };
-        this.storeContainerRef = (el) => (this.containerEl = el);
         this.storeTabTitleWrapperRef = (el) => {
             this.tabTitleContainerEl = el;
             this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
@@ -654,7 +654,6 @@ const TabNav = class {
             event.stopPropagation();
         };
         this.onTabTitleScroll = () => {
-            this.updateActiveIndicator();
             this.updateScrollingState();
         };
         this.renderScrollButton = (overflowDirection) => {
@@ -675,8 +674,6 @@ const TabNav = class {
         this.layout = "inline";
         this.position = "bottom";
         this.bordered = false;
-        this.indicatorOffset = undefined;
-        this.indicatorWidth = undefined;
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.defaultMessages = undefined;
@@ -685,23 +682,13 @@ const TabNav = class {
         this.hasOverflowingEndTabTitle = false;
         this.selectedTabId = undefined;
     }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    async selectedTabIdChanged() {
-        if (localStorage &&
-            this.storageId &&
-            this.selectedTabId !== undefined &&
-            this.selectedTabId !== null) {
-            localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
-        }
+    selectedTitleChanged() {
         this.calciteInternalTabChange.emit({
             tab: this.selectedTabId,
         });
-        this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
-    selectedTitleChanged() {
-        this.updateActiveIndicator();
+    onMessagesChange() {
+        /* wired up by t9n util */
     }
     //--------------------------------------------------------------------------
     //
@@ -730,9 +717,6 @@ const TabNav = class {
         this.layout = parentTabsEl?.layout;
         this.bordered = parentTabsEl?.bordered;
         this.effectiveDir = getElementDir(this.el);
-        if (this.selectedTitle) {
-            this.updateActiveIndicator();
-        }
     }
     componentDidRender() {
         // if every tab title is active select the first tab.
@@ -757,21 +741,16 @@ const TabNav = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        const width = `${this.indicatorWidth}px`;
-        const offset = `${this.indicatorOffset}px`;
-        const indicatorStyle = this.effectiveDir !== "rtl" ? { width, left: offset } : { width, right: offset };
-        return (h(Host, { key: '174cd3c34b59be8c237cb1bd2e143d8d9369198c', role: "tablist" }, h("div", { key: '3431edaba38c8875d6077a649610d2f21173df47', class: {
+        return (h(Host, { key: 'dd1f2b015a83e243b6d5b74f5d75f6e15a380326', role: "tablist" }, h("div", { key: 'b855759e9b8f549fe804ed6eeae6da3c1a48ff71', class: {
                 [CSS$2.container]: true,
                 [CSS$2.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,
                 [CSS$2.containerHasEndTabTitleOverflow]: !!this.hasOverflowingEndTabTitle,
                 [`scale-${this.scale}`]: true,
                 [`position-${this.position}`]: true,
                 [CSS_UTILITY.rtl]: this.effectiveDir === "rtl",
-            }, ref: this.storeContainerRef }, this.renderScrollButton("start"), h("div", { key: '1fee2edb04f475641523b66d5fbe4e62a7403c26', class: {
+            } }, this.renderScrollButton("start"), h("div", { key: '83290a1781ffe3644be2c33b4df23e02c9bc322e', class: {
                 [CSS$2.tabTitleSlotWrapper]: true,
-            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel, ref: this.storeTabTitleWrapperRef }, h("slot", { key: 'e14eea620096ffa9bc6d518ce31ebe0f623bdf4e', onSlotchange: this.onSlotChange })), h("div", { key: '1ec5cff7490ac9ae87b0dab467ca3890c217a3b3', class: {
-                [CSS$2.activeIndicatorContainer]: true,
-            }, ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { key: 'e0e10bbeedcae6bcf1f5d5957d35e06e555fd14c', class: "tab-nav-active-indicator", ref: (el) => (this.activeIndicatorEl = el), style: indicatorStyle })), this.renderScrollButton("end"))));
+            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel, ref: this.storeTabTitleWrapperRef }, h("slot", { key: '3564fbf9bfd1c05f1cec10ec330240b8d9572e07', onSlotchange: this.onSlotChange })), this.renderScrollButton("end"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -796,6 +775,7 @@ const TabNav = class {
             ? event.detail.tab
             : this.getIndexOfTabTitle(activatedTabTitle);
         event.stopPropagation();
+        this.selectedTitle = activatedTabTitle;
         this.scrollTabTitleIntoView(activatedTabTitle);
     }
     scrollTabTitleIntoView(activatedTabTitle, behavior = "smooth") {
@@ -842,9 +822,10 @@ const TabNav = class {
      *
      * @param event
      */
-    updateTabTitles(event) {
+    async updateTabTitles(event) {
         if (event.target.selected) {
             this.selectedTabId = event.detail;
+            this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
         }
     }
     globalInternalTabChangeHandler(event) {
@@ -856,33 +837,24 @@ const TabNav = class {
         }
         event.stopPropagation();
     }
-    iconStartChangeHandler() {
-        this.updateActiveIndicator();
-    }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);
     }
+    async selectedTabIdChanged() {
+        if (localStorage &&
+            this.storageId &&
+            this.selectedTabId !== undefined &&
+            this.selectedTabId !== null) {
+            localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTabId));
+        }
+        this.calciteInternalTabChange.emit({
+            tab: this.selectedTabId,
+        });
+    }
     get scrollerButtonWidth() {
         const { scale } = this;
         return parseInt(scale === "s" ? calciteSize24 : scale === "m" ? calciteSize32 : calciteSize44);
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    updateActiveIndicator() {
-        const tabTitleScrollLeft = this.tabTitleContainerEl?.scrollLeft;
-        const containerScrollLeft = this.containerEl?.scrollLeft;
-        const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
-        const tabLeft = this.selectedTitle?.offsetLeft;
-        const tabWidth = this.selectedTitle?.offsetWidth;
-        const offsetRight = navWidth - tabLeft - tabWidth;
-        const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
-        const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-        this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
-        this.indicatorWidth = this.selectedTitle?.offsetWidth;
-    }
     updateScrollingState() {
         const tabTitleContainer = this.tabTitleContainerEl;
         if (!tabTitleContainer) {
@@ -941,17 +913,16 @@ const TabNav = class {
             }
         }
         requestAnimationFrame(() => {
-            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "messageOverrides": ["onMessagesChange"],
-        "selectedTabId": ["selectedTabIdChanged"],
         "selectedTitle": ["selectedTitleChanged"],
-        "effectiveLocale": ["effectiveLocaleChange"]
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "selectedTabId": ["selectedTabIdChanged"]
     }; }
 };
 TabNav.style = CalciteTabNavStyle0;
@@ -959,23 +930,26 @@ TabNav.style = CalciteTabNavStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$1 = {
     closeButton: "close-button",
     container: "container",
+    containerBottom: "container--bottom",
     content: "content",
     contentHasText: "content--has-text",
     iconEnd: "icon-end",
     iconPresent: "icon-present",
     iconStart: "icon-start",
     titleIcon: "calcite-tab-title--icon",
+    scale: (scale) => `scale-${scale}`,
+    selectedIndicator: "selected-indicator",
 };
 const ICONS$1 = {
     close: "x",
 };
 
-const tabTitleCss = ":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;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{display:flex;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);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-color:transparent;border-block-end-style:solid}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{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(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{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}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);padding:0.25rem;color:var(--calcite-color-text-3);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;background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button: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          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabTitleCss = ":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;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{position:relative;margin-block-end:0.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-s .close-button{inline-size:1.25rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-m .close-button{inline-size:1.75rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.scale-l .close-button{inline-size:2rem}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);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}.selected-indicator{position:absolute;display:block;block-size:0.125rem;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;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]) .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered]) .container:not(.container--bottom){border-block-end:1px solid transparent}:host([bordered]:not([selected]):hover) .container:not(.container--bottom){border-block-end:1px solid var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([bordered][selected]) .container::after{position:absolute;display:block;block-size:0.125rem;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;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;background:var(--calcite-color-foreground-1);content:\"\"}:host([bordered][selected]) .container.container--bottom::after{inset-block-start:-1px}:host([bordered][selected]:hover) .container::after{background:var(--calcite-color-foreground-2)}:host([bordered][selected]:focus) .container::after{background:transparent}:host([bordered]) .container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator{background-color:var(--calcite-color-brand)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-color-brand)}@media (forced-colors: active){.selected-indicator{background-color:highlight}}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{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(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{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}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}.close-button{display:flex;block-size:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);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;margin-inline-start:var(--calcite-spacing-sm);margin-inline-end:var(--calcite-spacing-px);block-size:calc(100% - var(--calcite-spacing-xxs))}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([bordered]) .container:not(.container--bottom) .close-button{block-size:calc(100% - var(--calcite-spacing-px));margin-block-start:-1px}:host([bordered]) .container .close-button calcite-icon{margin-block-start:var(--calcite-spacing-px)}:host([bordered]) .container .close-button:focus,:host([bordered]) .container .close-button:hover,:host([bordered]) .container .close-button:active{box-shadow:0 2px 0 0 var(--calcite-color-foreground-3)}:host([bordered]) .container.container--bottom .close-button{box-shadow:0 -2px 0 0 transparent}:host([bordered]) .container.container--bottom .close-button calcite-icon{margin-block-end:var(--calcite-spacing-px)}:host([bordered]) .container.container--bottom .close-button:focus,:host([bordered]) .container.container--bottom .close-button:hover,:host([bordered]) .container.container--bottom .close-button:active{box-shadow:0 -2px 0 0 var(--calcite-color-foreground-3)}:host([bordered][selected]){box-shadow:inset 0 -1px var(--calcite-color-foreground-1)}:host([bordered]:not([selected])) .container .close-button{box-shadow:0 2px 0 0 transparent}:host([bordered]:hover) .container{background-color:var(--calcite-color-foreground-2)}:host([bordered]) .container{border-inline:var(--calcite-spacing-px) solid transparent}:host([selected][bordered]) .container{border-inline-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered]) .container--bottom{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteTabTitleStyle0 = tabTitleCss;
 
 const TabTitle = class {
@@ -1058,7 +1032,7 @@ const TabTitle = class {
     }
     async componentWillLoad() {
         await setUpMessages(this);
-        {
+        if (isBrowser()) {
             this.updateHasText();
         }
         if (this.tab && this.selected) {
@@ -1074,13 +1048,14 @@ const TabTitle = class {
     render() {
         const { el, closed } = this;
         const id = el.id || this.guid;
-        const iconStartEl = (h("calcite-icon", { key: 'c6c7baa28fe5aa5ed07d85815d0a0ebac4318368', class: { [CSS$1.titleIcon]: true, [CSS$1.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (h("calcite-icon", { key: 'fc5e9d925510867e451df60bed298b158a10054b', class: { [CSS$1.titleIcon]: true, [CSS$1.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        return (h(Host, { key: 'd84446a2e6fb8a9007c70a798e997d2f8bae485e', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: '0130123cde98ed0f0e5065387156293fda2d1c4b', disabled: this.disabled }, h("div", { key: 'c37a2e097b38dd17588a7eb81fa4fa2c5f3977a9', class: {
-                container: true,
+        const iconStartEl = (h("calcite-icon", { key: 'ad1702b0148764ff6e4aebb00ea87497d112c293', class: { [CSS$1.titleIcon]: true, [CSS$1.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (h("calcite-icon", { key: '8e7b1d4960585f34a03f40b05f9328c02a706c93', class: { [CSS$1.titleIcon]: true, [CSS$1.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        return (h(Host, { key: 'bd822a327a486c08dad7c9033054863de46591d6', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: '23f47db639bbe21922c8c8aa3bbcfe9b0433f2f5', disabled: this.disabled }, h("div", { key: 'c02773329f60ddcba7869df57f83ef5781346f62', class: {
+                [CSS$1.container]: true,
+                [CSS$1.containerBottom]: this.position === "bottom",
                 [CSS$1.iconPresent]: !!this.iconStart || !!this.iconEnd,
-                [`scale-${this.scale}`]: true,
-            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, h("div", { key: '53065b8558e4e0732aaeb60624367547a0aee7f8', class: { [CSS$1.content]: true, [CSS$1.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: 'c05fdb2126495f59fe88e32b5368e8ad8a79b303' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
+                [CSS$1.scale(this.scale)]: true,
+            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, h("div", { key: '1cc60233446099ee25cf5231ca22ab7c96647dd8', class: { [CSS$1.content]: true, [CSS$1.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: 'd4c96c09ee2853b2053ed346fd1221cdfbbe750b' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), h("div", { key: '487f585d1c3137a4c7354d9881bf1a777d77238c', class: CSS$1.selectedIndicator })))));
     }
     renderCloseButton() {
         const { closable, messages } = this;
@@ -1223,7 +1198,7 @@ TabTitle.style = CalciteTabTitleStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const SLOTS$1 = {
     titleGroup: "title-group",
@@ -1235,16 +1210,10 @@ const CalciteTabsStyle0 = tabsCss;
 const Tabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.mutationObserver = createObserver("mutation", (mutationsList) => {
-            for (const mutation of mutationsList) {
-                const target = mutation.target;
-                if (target.nodeName === "CALCITE-TAB-NAV" ||
-                    target.nodeName === "CALCITE-TAB-TITLE" ||
-                    target.nodeName === "CALCITE-TAB") {
-                    this.updateItems();
-                }
-            }
-        });
+        this.defaultSlotChangeHandler = (event) => {
+            this.tabs = slotChangeGetAssignedElements(event, "calcite-tab");
+        };
+        this.setDefaultSlotRef = (el) => (this.slotEl = el);
         this.layout = "inline";
         this.position = "top";
         this.scale = "m";
@@ -1257,79 +1226,22 @@ const Tabs = class {
     }
     //--------------------------------------------------------------------------
     //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        this.mutationObserver.observe(this.el, { childList: true });
-        this.updateItems();
-    }
-    async componentWillLoad() {
-        this.updateItems();
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    render() {
-        return (h(Fragment, { key: '8f47fe2cdeb7897a888891ba33b3fcda0d1d2b10' }, h("slot", { key: 'e19648c5138807be98e46ff6a343989a8d931c86', name: SLOTS$1.titleGroup }), h("section", { key: '64880a376a2cda485d608ba00fe3431fdb7ea011' }, h("slot", { key: '2cbd9deb8203448212357a4de42f5ac4a1f5daad' }))));
-    }
-    //--------------------------------------------------------------------------
-    //
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    /**
-     * @param event
-     * @internal
-     */
-    calciteInternalTabTitleRegister(event) {
-        this.titles = [...this.titles, event.target];
-        this.registryHandler();
-        event.stopPropagation();
-    }
-    /**
-     * @param event
-     * @internal
-     */
-    calciteTabTitleUnregister(event) {
-        this.titles = this.titles.filter((el) => el !== event.detail);
-        this.registryHandler();
-        event.stopPropagation();
-    }
-    /**
-     * @param event
-     * @internal
-     */
-    calciteInternalTabRegister(event) {
-        this.tabs = [...this.tabs, event.target];
-        this.registryHandler();
+    calciteInternalTabNavSlotChangeHandler(event) {
         event.stopPropagation();
+        if (event.detail.length !== this.titles.length) {
+            this.titles = event.detail;
+        }
     }
-    /**
-     * @param event
-     * @internal
-     */
-    calciteTabUnregister(event) {
-        this.tabs = this.tabs.filter((el) => el !== event.detail);
-        this.registryHandler();
-        event.stopPropagation();
+    titlesWatcher() {
+        this.updateAriaSettings();
+        this.updateItems();
     }
-    updateItems() {
-        const { position, scale } = this;
-        const nav = this.el.querySelector("calcite-tab-nav");
-        if (nav) {
-            nav.position = position;
-            nav.scale = scale;
-        }
-        Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab) => {
-            if (tab.parentElement === this.el) {
-                tab.scale = scale;
-            }
-        });
-        Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((title) => {
-            title.position = position;
-            title.scale = scale;
-        });
+    tabsWatcher() {
+        this.updateAriaSettings();
+        this.updateItems();
     }
     //--------------------------------------------------------------------------
     //
@@ -1342,14 +1254,15 @@ const Tabs = class {
      * update the ARIA attributes and link `<calcite-tab>` and
      * `<calcite-tab-title>` components.
      */
-    async registryHandler() {
+    async updateAriaSettings() {
         let tabIds;
         let titleIds;
+        const tabs = getSlotAssignedElements(this.slotEl, "calcite-tab");
         // determine if we are using `tab` based or `index` based tab identifiers.
-        if (this.tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
+        if (tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
             // if we are using `tab` based identifiers sort by `tab` to account for
             // possible out of order tabs and get the id of each tab
-            tabIds = this.tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
+            tabIds = tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
             titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
         }
         else {
@@ -1358,12 +1271,12 @@ const Tabs = class {
             // order of `this.tabs` and `this.titles` might not reflect the DOM state,
             // and might not match each other so we need to get the index of all the
             // tabs and titles in the DOM order to match them up as a source of truth
-            const tabDomIndexes = await Promise.all(this.tabs.map((el) => el.getTabIndex()));
+            const tabDomIndexes = await Promise.all(tabs.map((el) => el.getTabIndex()));
             const titleDomIndexes = await Promise.all(this.titles.map((el) => el.getTabIndex()));
             // once we have the DOM order as a source of truth we can build the
             // matching tabIds and titleIds arrays
             tabIds = tabDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
-                ids[indexInDOM] = this.tabs[registryIndex].id;
+                ids[indexInDOM] = tabs[registryIndex].id;
                 return ids;
             }, []);
             titleIds = titleDomIndexes.reduce((ids, indexInDOM, registryIndex) => {
@@ -1374,13 +1287,47 @@ const Tabs = class {
         // pass all our new aria information to each `<calcite-tab>` and
         // `<calcite-tab-title>` which will check if they can update their internal
         // `controlled` or `labeledBy` states and re-render if necessary
-        this.tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
+        tabs.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
         this.titles.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
     }
+    updateItems() {
+        const { position, scale } = this;
+        const nav = this.el.querySelector("calcite-tab-nav");
+        if (nav) {
+            nav.position = position;
+            nav.scale = scale;
+        }
+        Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab) => {
+            if (tab.parentElement === this.el) {
+                tab.scale = scale;
+            }
+        });
+        Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((title) => {
+            title.position = position;
+            title.scale = scale;
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        this.updateItems();
+    }
+    async componentWillLoad() {
+        this.updateItems();
+    }
+    disconnectedCallback() { }
+    render() {
+        return (h(Fragment, { key: 'fbdc57d4dbdde7b3dd75afef8d58139559fce80f' }, h("slot", { key: 'ecbd722566a4372f1d3ba156870bd2a7659d6e03', name: SLOTS$1.titleGroup }), h("section", { key: '8df862476d3a83acfce631bf815582cab1d7f5d2' }, h("slot", { key: '06c4deb3e46c92fdbd06b66663617c1bee81c26d', onSlotchange: this.defaultSlotChangeHandler, ref: this.setDefaultSlotRef }))));
+    }
     get el() { return getElement(this); }
     static get watchers() { return {
         "position": ["handleInheritableProps"],
-        "scale": ["handleInheritableProps"]
+        "scale": ["handleInheritableProps"],
+        "titles": ["titlesWatcher"],
+        "tabs": ["tabsWatcher"]
     }; }
 };
 Tabs.style = CalciteTabsStyle0;
@@ -1388,7 +1335,7 @@ Tabs.style = CalciteTabsStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     container: "container",
@@ -1401,7 +1348,7 @@ const ICON_TYPES = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 function getScreenReaderText(item, status, valueList) {
     const { items, messages } = valueList;
@@ -1434,6 +1381,11 @@ function replacePlaceholders(text, label, position, total) {
 const valueListCss = ":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{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-value-list-item:last-of-type{--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)}:host([filter-enabled]) header{margin-block-end:0.25rem;display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1);--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)}:host([filter-enabled]) header.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky)}calcite-filter{margin-block-end:1px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteValueListStyle0 = valueListCss;
 
+logger.deprecated("component", {
+    name: "value-list",
+    removalVersion: 3,
+    suggested: "list",
+});
 const ValueList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -1663,7 +1615,7 @@ const ValueList = class {
         event.stopPropagation();
     }
     render() {
-        return (h(List, { key: '7b7e6672040336078e883b0e7495cacc45d29344', onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
+        return (h(List, { key: '226659128d8b783ff03fabc4ad086291d3ec749c', onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -1677,7 +1629,7 @@ ValueList.style = CalciteValueListStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const ICONS = {
     drag: "drag",
@@ -1690,6 +1642,11 @@ const SLOTS = {
 const valueListItemCss = ":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{margin-block-end:1px;box-sizing:border-box;display:flex;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2);--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);transition:background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}:host *{box-sizing:border-box}calcite-pick-list-item{position:relative;margin:0px;flex-grow:1;--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)}:host([active]),:host([selected]){--tw-shadow:0 0 0 1px var(--calcite-color-brand);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.handle{display:flex;cursor:move;align-items:center;justify-content:center;border-style:none;background-color:transparent;padding-block:0px;padding-inline:0.25rem;color:var(--calcite-color-border-input);outline-color:transparent}.handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.handle: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          )}.handle--activated{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.handle calcite-icon{color:inherit}: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 CalciteValueListItemStyle0 = valueListItemCss;
 
+logger.deprecated("component", {
+    name: "value-list-item",
+    removalVersion: 3,
+    suggested: "list-item",
+});
 const ValueListItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -1799,7 +1756,7 @@ const ValueListItem = class {
         }
     }
     render() {
-        return (h(Host, { key: 'd89ea77d31ede37aebb655ee1ab7e667df1b76b9', id: this.el.id || this.guid }, h(InteractiveContainer, { key: 'aa4bec39005964d0aad6b58ffc74ee34218cf58c', disabled: this.disabled }, this.renderHandle(), h("calcite-pick-list-item", { key: 'b3788f4ac44bec53f5b7d09a5fccc9fb0db39f49', description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd()))));
+        return (h(Host, { key: 'd1d853c660a3a48f447a56f8635c1488f9b1f5d9', id: this.el.id || this.guid }, h(InteractiveContainer, { key: 'a443b18162f5bd6a76509fbf2a834259ea480dfc', disabled: this.disabled }, this.renderHandle(), h("calcite-pick-list-item", { key: '36475ef4beb9d9e874434bab09910f3034289a1f', description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd()))));
     }
     get el() { return getElement(this); }
 };