@esri/solutions-components 0.8.12 → 0.8.13

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

@@ -7,41 +7,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const conditionalSlot = require('./conditionalSlot-9d7b60d1.js');
-const dom = require('./dom-c9c2c835.js');
-const locale = require('./locale-d237c9d5.js');
-const math = require('./math-318a1646.js');
-const t9n = require('./t9n-993a84de.js');
-const resources = require('./resources-9447c777.js');
-const guid = require('./guid-ae73cd27.js');
-const observers = require('./observers-db4527e4.js');
-const interactive = require('./interactive-3ab7044d.js');
-const component = require('./component-ac7c3bd8.js');
-const loadable = require('./loadable-5a794992.js');
-const sharedListRender = require('./shared-list-render-410f421e.js');
-const sortableComponent = require('./sortableComponent-c111c036.js');
-const resources$2 = require('./resources-1d88e9d6.js');
-const resources$1 = require('./resources-baef554d.js');
-const locale$1 = require('./locale-3d0a4bc2.js');
-const solutionStore = require('./solution-store-67bcf552.js');
+const index = require('./index-79b35510.js');
+const conditionalSlot = require('./conditionalSlot-93779916.js');
+const dom = require('./dom-1c78fa73.js');
+const locale = require('./locale-5efdf085.js');
+const math = require('./math-11993213.js');
+const t9n = require('./t9n-9d199056.js');
+const resources = require('./resources-1c0e54c1.js');
+const guid = require('./guid-a7528dfa.js');
+const core = require('./core-b459e4f2.js');
+const observers = require('./observers-4fa351d9.js');
+const interactive = require('./interactive-f08f0369.js');
+const component = require('./component-d48747c9.js');
+const loadable = require('./loadable-b374ef4b.js');
+const sharedListRender = require('./shared-list-render-b6b23d9e.js');
+const sortableComponent = require('./sortableComponent-b1b229bf.js');
+const resources$2 = require('./resources-c35bef76.js');
+const resources$1 = require('./resources-5ba856a7.js');
+const locale$1 = require('./locale-48d76c59.js');
+const solutionStore = require('./solution-store-8ba2ab4b.js');
 const interfaces = require('./interfaces-7cd0a48a.js');
-const solutionResource = require('./solution-resource-97186521.js');
+const solutionResource = require('./solution-resource-a577e84f.js');
 require('./index-f64944ad.js');
-require('./key-c5504030.js');
-require('./browser-d08a5f99.js');
-require('./array-6ea3edb8.js');
-require('./resources-c4fe74a9.js');
-require('./debounce-30afab47.js');
-require('./esri-loader-ce6c3d3d.js');
-require('./_commonjsHelpers-480c2e77.js');
-require('./index-ae65e42f.js');
-require('./restHelpersGet-2ed729ab.js');
+require('./key-7ed07912.js');
+require('./browser-a96d0614.js');
+require('./array-550d54b1.js');
+require('./resources-35c28ff1.js');
+require('./debounce-7f1e04d6.js');
+require('./esri-loader-fce6a9cb.js');
+require('./index-c078ea5f.js');
+require('./restHelpersGet-dbaa28df.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS$4 = {
     container: "container",
@@ -57,7 +57,8 @@ const SLOTS$2 = {
     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:all 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-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 CalciteShellPanelStyle0 = shellPanelCss;
 
 const ShellPanel = class {
     constructor(hostRef) {
@@ -429,19 +430,20 @@ const ShellPanel = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-ShellPanel.style = shellPanelCss;
+ShellPanel.style = CalciteShellPanelStyle0;
 
 /*!
  * 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$3 = {
     container: "container",
     content: "content",
 };
 
-const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
+const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.content{box-sizing:border-box;padding-block:var(--calcite-internal-tab-content-block-padding)}.scale-s{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.25rem);font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.5rem);font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l{--calcite-internal-tab-content-block-padding:var(--calcite-tab-content-block-padding, 0.625rem);font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}.container{outline-color:transparent}.container: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          )}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTabStyle0 = tabCss;
 
 const Tab = class {
     constructor(hostRef) {
@@ -460,7 +462,7 @@ const Tab = class {
     //--------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (index.h(index.Host, { "aria-labelledby": this.labeledBy, id: id }, index.h("div", { class: { [CSS$3.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, index.h("section", { class: CSS$3.content }, index.h("slot", null)))));
+        return (index.h(index.Host, { key: '71074d2c26a860d7934fbd9b236f9a264ab3c34f', "aria-labelledby": this.labeledBy, id: id }, index.h("div", { key: '3fcf14f4aaddf9ad579c26c962ad75803febcea0', class: { [CSS$3.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, index.h("section", { key: 'ba967be2e5121636d81754ec959452160bc4bb0d', class: CSS$3.content }, index.h("slot", { key: 'fae921d6fe2ae713bddc83adacbcf7e418aa1b7c' })))));
     }
     connectedCallback() {
         this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -526,47 +528,159 @@ const Tab = class {
     }
     get el() { return index.getElement(this); }
 };
-Tab.style = tabCss;
+Tab.style = CalciteTabStyle0;
 
 /*!
  * 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 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",
+    scrollButton: "scroll-button",
+    scrollButtonContainer: "scroll-button-container",
+    scrollBackwardContainerButton: "scroll-button-container--backward",
+    scrollForwardContainerButton: "scroll-button-container--forward",
+    tabTitleSlotWrapper: "tab-titles-slot-wrapper",
 };
 
-const tabNavCss = ":host{position:relative;display:flex}.scale-s{min-block-size:1.5rem}.scale-m{min-block-size:2rem}.scale-l{min-block-size:2.75rem}:host([layout=center]:not([bordered])){padding-inline:1.25rem}:host([layout=center]:not([bordered])) .tab-nav ::slotted(calcite-tab-title:last-child){margin-inline-end:0px}:host(:not([bordered])) .scale-l ::slotted(calcite-tab-title){margin-inline-end:1.5rem}:host(:not([bordered])) .scale-m ::slotted(calcite-tab-title){margin-inline-end:1.25rem}:host(:not([bordered])) .scale-s ::slotted(calcite-tab-title){margin-inline-end:1rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.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)}:host([layout=center]) .tab-nav{justify-content:space-evenly}: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-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 CalciteTabNavStyle0 = tabNavCss;
 
 const TabNav = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.calciteTabChange = index.createEvent(this, "calciteTabChange", 6);
         this.calciteInternalTabChange = index.createEvent(this, "calciteInternalTabChange", 6);
-        this.animationActiveDuration = 0.3;
+        this.effectiveDir = "ltr";
+        this.lastScrollWheelAxis = "x";
         this.resizeObserver = observers.createObserver("resize", () => {
+            this.updateScrollingState();
             if (!this.activeIndicatorEl) {
                 return;
             }
-            // remove active indicator transition duration during resize to prevent wobble
-            this.activeIndicatorEl.style.transitionDuration = "0s";
-            this.updateActiveWidth();
-            this.updateOffsetPosition();
+            this.updateActiveIndicator();
         });
-        //--------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        //--------------------------------------------------------------------------
+        this.onTabTitleWheel = (event) => {
+            event.preventDefault();
+            const { deltaX, deltaY } = event;
+            const x = Math.abs(deltaX);
+            const y = Math.abs(deltaY);
+            let scrollBy;
+            if (x === y) {
+                scrollBy = this.lastScrollWheelAxis === "x" ? deltaX : deltaY;
+            }
+            else if (x > y) {
+                scrollBy = deltaX;
+                this.lastScrollWheelAxis = "x";
+            }
+            else {
+                scrollBy = deltaY;
+                this.lastScrollWheelAxis = "y";
+            }
+            const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
+            event.currentTarget.scrollBy(scrollByX, 0);
+            requestAnimationFrame(() => this.updateActiveIndicator());
+        };
+        this.onSlotChange = (event) => {
+            var _a;
+            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            const slottedChildren = event.target.assignedElements();
+            slottedChildren.forEach((child) => {
+                var _a;
+                (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(child);
+            });
+        };
+        this.storeContainerRef = (el) => (this.containerEl = el);
+        this.storeTabTitleWrapperRef = (el) => {
+            this.tabTitleContainerEl = el;
+            this.intersectionObserver = observers.createObserver("intersection", () => this.updateScrollingState(), {
+                root: el,
+                threshold: [0, 0.5, 1],
+            });
+        };
+        this.scrollToTabTitles = (direction) => {
+            index.readTask(() => {
+                const tabTitleContainer = this.tabTitleContainerEl;
+                const containerBounds = tabTitleContainer.getBoundingClientRect();
+                const tabTitles = Array.from(this.el.querySelectorAll("calcite-tab-title"));
+                const { effectiveDir } = this;
+                if (direction === "forward") {
+                    tabTitles.reverse();
+                }
+                let closestToEdge = null;
+                tabTitles.forEach((tabTitle) => {
+                    const tabTitleBounds = tabTitle.getBoundingClientRect();
+                    const containerEndX = containerBounds.x + containerBounds.width;
+                    const tabTitleEndX = tabTitleBounds.x + tabTitleBounds.width;
+                    if ((direction === "forward" && effectiveDir === "ltr") ||
+                        (direction === "backward" && effectiveDir === "rtl")) {
+                        const afterContainerEnd = tabTitleBounds.x > containerEndX;
+                        if (afterContainerEnd) {
+                            closestToEdge = tabTitle;
+                        }
+                        else {
+                            const crossingContainerEnd = tabTitleEndX > containerEndX && tabTitleBounds.x > containerBounds.x;
+                            if (crossingContainerEnd) {
+                                closestToEdge = tabTitle;
+                            }
+                        }
+                    }
+                    else {
+                        const beforeContainerStart = tabTitleEndX < containerBounds.x;
+                        if (beforeContainerStart) {
+                            closestToEdge = tabTitle;
+                        }
+                        else {
+                            const crossingContainerStart = tabTitleEndX < containerEndX && tabTitleBounds.x < containerBounds.x;
+                            if (crossingContainerStart) {
+                                closestToEdge = tabTitle;
+                            }
+                        }
+                    }
+                });
+                if (closestToEdge) {
+                    const { scrollerButtonWidth } = this;
+                    const offsetAdjustment = (direction === "forward" && effectiveDir === "ltr") ||
+                        (direction === "backward" && effectiveDir === "rtl")
+                        ? -scrollerButtonWidth
+                        : closestToEdge.offsetWidth - tabTitleContainer.clientWidth + scrollerButtonWidth;
+                    const scrollTo = closestToEdge.offsetLeft + offsetAdjustment;
+                    tabTitleContainer.scrollTo({
+                        left: scrollTo,
+                        behavior: "smooth",
+                    });
+                }
+            });
+        };
+        this.scrollToNextTabTitles = () => this.scrollToTabTitles("forward");
+        this.scrollToPreviousTabTitles = () => this.scrollToTabTitles("backward");
         this.handleTabFocus = (event, el, destination) => {
-            dom.focusElementInGroup(this.enabledTabTitles, el, destination);
+            const focused = dom.focusElementInGroup(this.enabledTabTitles, el, destination);
+            this.scrollTabTitleIntoView(focused, "instant");
             event.stopPropagation();
         };
-        this.handleContainerScroll = () => {
-            // remove active indicator transition duration while container is scrolling to prevent wobble
-            this.activeIndicatorEl.style.transitionDuration = "0s";
-            this.updateOffsetPosition();
+        this.onTabTitleScroll = () => {
+            this.updateActiveIndicator();
+            this.updateScrollingState();
+        };
+        this.renderScrollButton = (overflowDirection) => {
+            const { bordered, messages, hasOverflowingStartTabTitle, hasOverflowingEndTabTitle, scale } = this;
+            const isEnd = overflowDirection === "end";
+            return (index.h("div", { class: {
+                    [CSS$2.scrollButtonContainer]: true,
+                    [CSS$2.scrollBackwardContainerButton]: !isEnd,
+                    [CSS$2.scrollForwardContainerButton]: isEnd,
+                }, hidden: (isEnd && !hasOverflowingEndTabTitle) || (!isEnd && !hasOverflowingStartTabTitle), key: overflowDirection }, index.h("calcite-button", { appearance: bordered ? "outline-fill" : "transparent", "aria-label": isEnd ? messages.nextTabTitles : messages.previousTabTitles, class: {
+                    [CSS$2.scrollButton]: true,
+                }, iconFlipRtl: "both", iconStart: isEnd ? ICON.chevronRight : ICON.chevronLeft, kind: "neutral", onClick: isEnd ? this.scrollToNextTabTitles : this.scrollToPreviousTabTitles, scale: scale, tabIndex: -1 })));
         };
         this.storageId = undefined;
         this.syncId = undefined;
@@ -577,8 +691,17 @@ const TabNav = class {
         this.bordered = false;
         this.indicatorOffset = undefined;
         this.indicatorWidth = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.hasOverflowingStartTabTitle = false;
+        this.hasOverflowingEndTabTitle = false;
         this.selectedTabId = undefined;
     }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
     async selectedTabIdChanged() {
         if (localStorage &&
             this.storageId &&
@@ -592,10 +715,7 @@ const TabNav = class {
         this.selectedTitle = await this.getTabTitleById(this.selectedTabId);
     }
     selectedTitleChanged() {
-        this.updateOffsetPosition();
-        this.updateActiveWidth();
-        // reset the animation time on tab selection
-        this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;
+        this.updateActiveIndicator();
     }
     //--------------------------------------------------------------------------
     //
@@ -606,21 +726,27 @@ const TabNav = class {
         var _a;
         this.parentTabsEl = this.el.closest("calcite-tabs");
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+        locale.connectLocalized(this);
+        t9n.connectMessages(this);
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         const storageKey = `calcite-tab-nav-${this.storageId}`;
         if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
             const storedTab = JSON.parse(localStorage.getItem(storageKey));
             this.selectedTabId = storedTab;
         }
+        await t9n.setUpMessages(this);
+    }
+    componentDidLoad() {
+        this.scrollTabTitleIntoView(this.selectedTitle, "instant");
     }
     componentWillRender() {
         const { parentTabsEl } = this;
         this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
         this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
-        // fix issue with active tab-title not lining up with blue indicator
+        this.effectiveDir = dom.getElementDir(this.el);
         if (this.selectedTitle) {
-            this.updateOffsetPosition();
+            this.updateActiveIndicator();
         }
     }
     componentDidRender() {
@@ -638,23 +764,38 @@ const TabNav = class {
     disconnectedCallback() {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        locale.disconnectLocalized(this);
+        t9n.disconnectMessages(this);
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    //--------------------------------------------------------------------------
     render() {
-        const dir = dom.getElementDir(this.el);
         const width = `${this.indicatorWidth}px`;
         const offset = `${this.indicatorOffset}px`;
-        const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
-        return (index.h(index.Host, { role: "tablist" }, index.h("div", { class: {
+        const indicatorStyle = this.effectiveDir !== "rtl" ? { width, left: offset } : { width, right: offset };
+        return (index.h(index.Host, { key: '0824dd4470393b0e186b0fdf238420454fed396c', role: "tablist" }, index.h("div", { key: '205551441feaaa61e2b4b603a7b37ce3d18bdba8', class: {
                 [CSS$2.container]: true,
+                [CSS$2.containerHasStartTabTitleOverflow]: !!this.hasOverflowingStartTabTitle,
+                [CSS$2.containerHasEndTabTitleOverflow]: !!this.hasOverflowingEndTabTitle,
                 [`scale-${this.scale}`]: true,
                 [`position-${this.position}`]: true,
-            }, onScroll: this.handleContainerScroll,
+                [resources.CSS_UTILITY.rtl]: this.effectiveDir === "rtl",
+            },
+            // 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.storeContainerRef }, this.renderScrollButton("start"), index.h("div", { key: '64844ffd05363fe55e2ae9d4d820dc5113da57d8', class: {
+                [CSS$2.tabTitleSlotWrapper]: true,
+            }, onScroll: this.onTabTitleScroll, onWheel: this.onTabTitleWheel,
             // 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.tabNavEl = el) }, index.h("slot", null), index.h("div", { class: "tab-nav-active-indicator-container",
+            ref: this.storeTabTitleWrapperRef }, index.h("slot", { key: 'a77b898cac87d4fa190ad717a3c0ca4474a962fe', onSlotchange: this.onSlotChange })), index.h("div", { key: '0bf812fe39d07fbddd54ddb515e2eb31adea9a74', class: {
+                [CSS$2.activeIndicatorContainer]: true,
+            },
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.activeIndicatorContainerEl = el) }, index.h("div", { class: "tab-nav-active-indicator", style: indicatorStyle,
+            ref: (el) => (this.activeIndicatorContainerEl = el) }, index.h("div", { key: 'e1624e7b9845ea37eea06ca7a85816d782530c79', class: "tab-nav-active-indicator", style: indicatorStyle,
             // 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.activeIndicatorEl = el) })))));
+            ref: (el) => (this.activeIndicatorEl = el) })), this.renderScrollButton("end"))));
     }
     //--------------------------------------------------------------------------
     //
@@ -674,10 +815,42 @@ const TabNav = class {
         this.handleTabFocus(event, event.target, "last");
     }
     internalActivateTabHandler(event) {
+        const activatedTabTitle = event.target;
         this.selectedTabId = event.detail.tab
             ? event.detail.tab
-            : this.getIndexOfTabTitle(event.target);
+            : this.getIndexOfTabTitle(activatedTabTitle);
         event.stopPropagation();
+        this.scrollTabTitleIntoView(activatedTabTitle);
+    }
+    scrollTabTitleIntoView(activatedTabTitle, behavior = "smooth") {
+        if (!activatedTabTitle) {
+            return;
+        }
+        index.readTask(() => {
+            const isLTR = this.effectiveDir === "ltr";
+            const tabTitleContainer = this.tabTitleContainerEl;
+            const containerBounds = tabTitleContainer.getBoundingClientRect();
+            const tabTitleBounds = activatedTabTitle.getBoundingClientRect();
+            const scrollPosition = tabTitleContainer.scrollLeft;
+            const overflowingStartTabTitle = isLTR
+                ? this.hasOverflowingStartTabTitle
+                : this.hasOverflowingEndTabTitle;
+            const overflowingEndTabTitle = isLTR
+                ? this.hasOverflowingEndTabTitle
+                : this.hasOverflowingStartTabTitle;
+            if (tabTitleBounds.left <
+                containerBounds.left + (overflowingStartTabTitle ? this.scrollerButtonWidth : 0)) {
+                const left = scrollPosition + (tabTitleBounds.left - containerBounds.left) - this.scrollerButtonWidth;
+                tabTitleContainer.scrollTo({ left, behavior });
+            }
+            else if (tabTitleBounds.right >
+                containerBounds.right - (overflowingEndTabTitle ? this.scrollerButtonWidth : 0)) {
+                const left = scrollPosition +
+                    (tabTitleBounds.right - containerBounds.right) +
+                    this.scrollerButtonWidth;
+                tabTitleContainer.scrollTo({ left, behavior });
+            }
+        });
     }
     activateTabHandler(event) {
         this.calciteTabChange.emit();
@@ -708,22 +881,53 @@ const TabNav = class {
         event.stopPropagation();
     }
     iconStartChangeHandler() {
-        this.updateActiveWidth();
-        this.updateOffsetPosition();
+        this.updateActiveIndicator();
     }
-    updateOffsetPosition() {
-        var _a, _b, _c, _d, _e;
-        const dir = dom.getElementDir(this.el);
-        const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-        const tabLeft = (_b = this.selectedTitle) === null || _b === void 0 ? void 0 : _b.offsetLeft;
-        const tabWidth = (_c = this.selectedTitle) === null || _c === void 0 ? void 0 : _c.offsetWidth;
-        const offsetRight = navWidth - (tabLeft + tabWidth);
-        this.indicatorOffset =
-            dir !== "rtl" ? tabLeft - ((_d = this.tabNavEl) === null || _d === void 0 ? void 0 : _d.scrollLeft) : offsetRight + ((_e = this.tabNavEl) === null || _e === void 0 ? void 0 : _e.scrollLeft);
-    }
-    updateActiveWidth() {
-        var _a;
-        this.indicatorWidth = (_a = this.selectedTitle) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    effectiveLocaleChange() {
+        t9n.updateMessages(this, this.effectiveLocale);
+    }
+    get scrollerButtonWidth() {
+        const { scale } = this;
+        return parseInt(scale === "s" ? core.calciteSize24 : scale === "m" ? core.calciteSize32 : core.calciteSize44);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    updateActiveIndicator() {
+        var _a, _b, _c, _d, _e, _f;
+        const tabTitleScrollLeft = (_a = this.tabTitleContainerEl) === null || _a === void 0 ? void 0 : _a.scrollLeft;
+        const containerScrollLeft = (_b = this.containerEl) === null || _b === void 0 ? void 0 : _b.scrollLeft;
+        const navWidth = (_c = this.activeIndicatorContainerEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+        const tabLeft = (_d = this.selectedTitle) === null || _d === void 0 ? void 0 : _d.offsetLeft;
+        const tabWidth = (_e = this.selectedTitle) === null || _e === void 0 ? void 0 : _e.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 = (_f = this.selectedTitle) === null || _f === void 0 ? void 0 : _f.offsetWidth;
+    }
+    updateScrollingState() {
+        const tabTitleContainer = this.tabTitleContainerEl;
+        if (!tabTitleContainer) {
+            return;
+        }
+        let isOverflowStart;
+        let isOverflowEnd;
+        const scrollPosition = tabTitleContainer.scrollLeft;
+        const visibleWidth = tabTitleContainer.clientWidth;
+        const totalContentWidth = tabTitleContainer.scrollWidth;
+        if (this.effectiveDir === "ltr") {
+            isOverflowStart = scrollPosition > 0;
+            isOverflowEnd = scrollPosition + visibleWidth < totalContentWidth;
+        }
+        else {
+            isOverflowStart = scrollPosition < 0;
+            isOverflowEnd = scrollPosition !== -(totalContentWidth - visibleWidth);
+        }
+        this.hasOverflowingStartTabTitle = isOverflowStart;
+        this.hasOverflowingEndTabTitle = isOverflowEnd;
     }
     getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
         // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
@@ -762,23 +966,25 @@ const TabNav = class {
             }
         }
         requestAnimationFrame(() => {
-            this.updateOffsetPosition();
-            this.updateActiveWidth();
+            this.updateActiveIndicator();
             tabTitles[this.selectedTabId].focus();
         });
     }
+    static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
         "selectedTabId": ["selectedTabIdChanged"],
-        "selectedTitle": ["selectedTitleChanged"]
+        "selectedTitle": ["selectedTitleChanged"],
+        "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-TabNav.style = tabNavCss;
+TabNav.style = CalciteTabNavStyle0;
 
 /*!
  * 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$1 = {
     closeButton: "close-button",
@@ -794,7 +1000,8 @@ 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}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;text-align:center;flex-basis:12rem}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable]) .scale-s .content{padding-inline-start:36px}:host([layout=center][bordered][closable]) .scale-m .content{padding-inline-start:40px}:host([layout=center][closable]) .scale-l .content{padding-inline-start:40px}:host([layout=center][closable][bordered]) .scale-s .content{padding-inline-start:52px}: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}.container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(: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);-webkit-text-decoration-line:none;text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}: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}.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}.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);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all 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);color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button: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          );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,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}: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]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}: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([bordered]) .content{padding-inline:0.75rem}:host([bordered]) .scale-s .content{padding-inline:0.5rem}:host([bordered]) .scale-l .content{padding-inline:1rem}@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{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);-webkit-text-decoration-line:none;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 CalciteTabTitleStyle0 = tabTitleCss;
 
 const TabTitle = class {
     constructor(hostRef) {
@@ -893,15 +1100,15 @@ const TabTitle = class {
     render() {
         const { el, closed } = this;
         const id = el.id || this.guid;
-        const iconStartEl = (index.h("calcite-icon", { class: { [CSS$1.titleIcon]: true, [CSS$1.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: component.getIconScale(this.scale) }));
-        const iconEndEl = (index.h("calcite-icon", { class: { [CSS$1.titleIcon]: true, [CSS$1.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: component.getIconScale(this.scale) }));
-        return (index.h(index.Host, { "aria-controls": this.controls, "aria-selected": dom.toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { class: {
+        const iconStartEl = (index.h("calcite-icon", { key: 'dc31a68fd20ffcf451d5b23e2aaae683249aa50a', class: { [CSS$1.titleIcon]: true, [CSS$1.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: component.getIconScale(this.scale) }));
+        const iconEndEl = (index.h("calcite-icon", { key: 'b8b85c799e950e050bb6c953cec61ab871894c9c', class: { [CSS$1.titleIcon]: true, [CSS$1.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: component.getIconScale(this.scale) }));
+        return (index.h(index.Host, { key: '532a18e093cd481a1058e55f1ac936489cad3ddb', "aria-controls": this.controls, "aria-selected": dom.toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, index.h(interactive.InteractiveContainer, { key: 'dede575160963d2463e50f6e8baab92319acda9f', disabled: this.disabled }, index.h("div", { key: '79e9c6d5f15626cd84101e7b85365c9af2c1453b', class: {
                 container: true,
                 [CSS$1.iconPresent]: !!this.iconStart || !!this.iconEnd,
                 [`scale-${this.scale}`]: true,
             }, hidden: closed,
             // 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) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, index.h("div", { class: { [CSS$1.content]: true, [CSS$1.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, index.h("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
+            ref: (el) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, index.h("div", { key: '8076d17c92940370363d9bc1dae416fdcdf4b716', class: { [CSS$1.content]: true, [CSS$1.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, index.h("slot", { key: 'b25df3722162e58cb196ca500a7b4c718d5f2ed7' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
     }
     renderCloseButton() {
         const { closable, messages } = this;
@@ -1042,18 +1249,19 @@ const TabTitle = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-TabTitle.style = tabTitleCss;
+TabTitle.style = CalciteTabTitleStyle0;
 
 /*!
  * 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 SLOTS$1 = {
     titleGroup: "title-group",
 };
 
-const tabsCss = ":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabsCss = ":host{display:flex;flex-direction:column}:host([bordered]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-1)}:host([bordered]) section{border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1)}:host([bordered][position=bottom]){box-shadow:inset 0 1px 0 var(--calcite-color-border-1), inset 0 -1px 0 var(--calcite-color-border-1)}:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav){margin-block-end:-1px}:host([bordered][scale=s]) section{padding:0.75rem}:host([bordered][scale=m]) section{padding:0.5rem}:host([bordered][scale=l]) section{padding:1rem}:host([position=bottom]){flex-direction:column-reverse}section{display:flex;flex-grow:1;overflow:hidden;border-block-start-width:1px;border-block-start-color:var(--calcite-color-border-1);border-block-start-style:solid}:host([position=bottom]) section{flex-direction:column-reverse;border-block-start-width:0px;border-block-end-width:1px;border-block-end-color:var(--calcite-color-border-1)}:host([position=bottom]:not([bordered])) section{border-block-end-style:solid}@media (forced-colors: active){:host([bordered]) section{border-block-start-width:0px;border-block-end-width:1px}:host([position=bottom][bordered]) section{border-block-start-width:1px;border-block-end-width:0px}}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTabsStyle0 = tabsCss;
 
 const Tabs = class {
     constructor(hostRef) {
@@ -1095,7 +1303,7 @@ const Tabs = class {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("slot", { name: SLOTS$1.titleGroup }), index.h("section", null, index.h("slot", null))));
+        return (index.h(index.Fragment, { key: '3298379f9625744b770c10f0f86fc1b2bc990cad' }, index.h("slot", { key: 'fd0be78d348a01b701d58f37663d392ee04ca6a9', name: SLOTS$1.titleGroup }), index.h("section", { key: '31212d582a0e6367ed38d250c1acc39cad3fa987' }, index.h("slot", { key: '179bdacefed784c60dd000101e606d5e678d93c9' }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1207,26 +1415,25 @@ const Tabs = class {
         "scale": ["handleInheritableProps"]
     }; }
 };
-Tabs.style = tabsCss;
+Tabs.style = CalciteTabsStyle0;
 
 /*!
  * 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",
     handle: "handle",
 };
-var ICON_TYPES;
-(function (ICON_TYPES) {
-    ICON_TYPES["grip"] = "grip";
-})(ICON_TYPES || (ICON_TYPES = {}));
+const ICON_TYPES = {
+    grip: "grip",
+};
 
 /*!
  * 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 getScreenReaderText(item, status, valueList) {
     const { items, messages } = valueList;
@@ -1257,6 +1464,7 @@ 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;
 
 const ValueList = class {
     constructor(hostRef) {
@@ -1493,7 +1701,7 @@ const ValueList = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(sharedListRender.List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
+        return (index.h(sharedListRender.List, { key: 'c212dc4be12b594c4cc69a8a368c523d3187c289', onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -1502,12 +1710,12 @@ const ValueList = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-ValueList.style = valueListCss;
+ValueList.style = CalciteValueListStyle0;
 
 /*!
  * 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 ICONS = {
     drag: "drag",
@@ -1517,7 +1725,8 @@ const SLOTS = {
     actionsStart: "actions-start",
 };
 
-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-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 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;
 
 const ValueListItem = class {
     constructor(hostRef) {
@@ -1631,15 +1840,16 @@ const ValueListItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { id: this.el.id || this.guid }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, this.renderHandle(), index.h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, value: this.value,
+        return (index.h(index.Host, { key: '14e426411cb528504d9b0e89d4378b6c22664878', id: this.el.id || this.guid }, index.h(interactive.InteractiveContainer, { key: '75e7cf666c5aae3e62c21d9160083ca17c926c15', disabled: this.disabled }, this.renderHandle(), index.h("calcite-pick-list-item", { key: '9e82a64e2022bfb5c052112e9e804f98db8c45bb', description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, value: this.value,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: this.getPickListRef }, this.renderActionsStart(), this.renderActionsEnd()))));
     }
     get el() { return index.getElement(this); }
 };
-ValueListItem.style = valueListItemCss;
+ValueListItem.style = CalciteValueListItemStyle0;
 
 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 = class {
     constructor(hostRef) {
@@ -1720,7 +1930,7 @@ const JsonEditor = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, null, index.h("div", { id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, index.h("div", { class: "editor-controls" }, index.h("div", { class: "editor-buttons" }, index.h("calcite-icon", { id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), index.h("calcite-button", { id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { icon: "undo", scale: "s" })), index.h("calcite-button", { id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { icon: "redo", scale: "s" })), index.h("calcite-button", { id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { icon: "compare", scale: "s" })), index.h("calcite-button", { id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, index.h("calcite-icon", { icon: "search", scale: "s" })), index.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" }, index.h("calcite-icon", { icon: "reset", scale: "s" })))), index.h("div", { class: "edit-parent" }, index.h("div", { id: `${this.instanceid}-container`, class: "json-edit-container" }), index.h("div", { id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (index.h(index.Host, { key: '00ea91a9373e5cecbe52bd51ac7bf3b06b22ccc8' }, index.h("div", { key: '7afe9bd7953b0c06cd2a4eaf107dd9654a16c37e', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, index.h("div", { key: 'c9bed17775348e586366b81bb37ab1b959300b8c', class: "editor-controls" }, index.h("div", { key: '846a0f27a14fcf200e473575fa772d68cdc546e7', class: "editor-buttons" }, index.h("calcite-icon", { key: '723cdd672261b9439750e6fb05a270aa46d97789', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), index.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" }, index.h("calcite-icon", { key: 'e423f0f1b8fad1db9bd2b94d53ce2a5625ee87d1', icon: "undo", scale: "s" })), index.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" }, index.h("calcite-icon", { key: 'c864583f66374d5d1d63f630e4069a11a98b8bcd', icon: "redo", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '8bf4e985982d227086d3b11ab94b58ad84657970', icon: "compare", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '1979a27bef07cfdd122e5bd0a2cb27c2ada29f6e', icon: "search", scale: "s" })), index.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" }, index.h("calcite-icon", { key: 'bfa24ac26db7ce6f8ed4ffa7cf39950fc8b959c9', icon: "reset", scale: "s" })))), index.h("div", { key: '671db1db990eedd2863cca9de51bc376e55085bf', class: "edit-parent" }, index.h("div", { key: 'a2cb3c42fb1edd5d26f8c52ee2ca2c0124e5d02a', id: `${this.instanceid}-container`, class: "json-edit-container" }), index.h("div", { key: '9ec65340bb37c54a77d82e47129b5e07ec7b37cc', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2027,9 +2237,10 @@ const JsonEditor = class {
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
 };
-JsonEditor.style = jsonEditorCss;
+JsonEditor.style = JsonEditorStyle0;
 
 const solutionItemDetailsCss = ".inputBottomSeparation{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1.5rem}.icon-inline--on-left,.icon-inline--on-right{display:inline;vertical-align:middle;margin-inline-end:0.375rem;fill:#0079c1}.scale-down{-o-object-fit:scale-down;object-fit:scale-down}.img-container{display:inline;margin-inline-end:1rem;max-width:363px}.summary-count-container{display:inline;flex-grow:1;margin-inline-start:0.75rem}.snippet-count-container{width:calc(100vw - 363px)}.parent-container{max-width:100%;padding:1rem}label{position:relative;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1.5rem;display:block;min-width:-moz-min-content;min-width:min-content}";
+const SolutionItemDetailsStyle0 = solutionItemDetailsCss;
 
 const SolutionItemDetails = class {
     constructor(hostRef) {
@@ -2071,7 +2282,7 @@ const SolutionItemDetails = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, null, index.h("div", { class: "parent-container" }, index.h("div", { class: "inputBottomSeparation" }, index.h("calcite-input", { id: "item-title", value: this.itemDetails.title })), index.h("div", { class: "inputBottomSeparation" }, index.h("input", { accept: ".jpg,.gif,.png,image/jpg,image/gif,image/png", class: "display-none", onChange: (event) => (this._updateThumbnail(event)), ref: (el) => (this.browseForThumbnail = el), type: "file" }), index.h("button", { class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, index.h("svg", { class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, index.h("path", { d: "M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z" })), this._translations.editThumbnail), index.h("div", { class: "flex" }, index.h("div", { class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, index.h("img", { class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), index.h("div", { class: "snippet-count-container" }, index.h("calcite-input", { id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), index.h("label", { class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), index.h("calcite-label", null, this._translations.description, index.h("label", { id: "item-description-label" }, index.h("calcite-input", { id: "item-description", type: "textarea", value: this.itemDetails.description }))), index.h("calcite-label", null, this._translations.tags, index.h("label", { id: "item-tags-label" }, index.h("calcite-input", { id: "item-tags", value: (this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(",") }))), this.itemType !== "Group" ? index.h("calcite-label", null, this._translations.credits, index.h("label", { id: "item-credits-label" }, index.h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? index.h("calcite-label", null, index.h("label", { id: "item-terms-label" }, this._translations.termsOfUse, index.h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
+        return (index.h(index.Host, { key: 'b024dd7e92270d93643a1ca7844387e7d9286d22' }, index.h("div", { key: 'af20723425ccb1e99fea5109950cc79ba79cb038', class: "parent-container" }, index.h("div", { key: 'a96c1a9692cdf1dc24e371a25dfa83a749d14e2f', class: "inputBottomSeparation" }, index.h("calcite-input", { key: '578ab10eb0191760a90077c36b208e5f41305712', id: "item-title", value: this.itemDetails.title })), index.h("div", { key: 'b8eb46d621dced49afbe42a1cce376e067521386', class: "inputBottomSeparation" }, index.h("input", { key: 'c6ab5acbd0064b4214f062d1864ae7b54caea4cd', accept: ".jpg,.gif,.png,image/jpg,image/gif,image/png", class: "display-none", onChange: (event) => (this._updateThumbnail(event)), ref: (el) => (this.browseForThumbnail = el), type: "file" }), index.h("button", { key: '9bd35cf2da98f3b3725afcca05f65abd4c7e2165', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, index.h("svg", { key: 'c2daa2b714ccb86d6bca6676d144f8466aaefe5c', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, index.h("path", { key: '88eb1adaf5790a4adceb8600df483cbfe143f799', d: "M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z" })), this._translations.editThumbnail), index.h("div", { key: '8d894bb4b84b5d1e4bbcc10926156dc3c011468e', class: "flex" }, index.h("div", { key: '149ada9181ec9c479f37dcb449b67b4a61ba85b6', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, index.h("img", { key: 'e885543499b816432fd54271df84db3f70ed01df', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), index.h("div", { key: '6acf404d210c4b8f904ac39022f50e458a642172', class: "snippet-count-container" }, index.h("calcite-input", { key: '89bfc2acb3288ac6bee9892fdda5ea0907c55474', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), index.h("label", { key: 'eea362da2aed987549c39982b1801fa6e9cdf515', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), index.h("calcite-label", { key: 'b0d046164d0f892fdc8a151e7cf66f6d27dcbe56' }, this._translations.description, index.h("label", { key: 'e5ecbd825898edab2373250259ba8ed7659897af', id: "item-description-label" }, index.h("calcite-input", { key: '1a2d590ddd98461b6a1b731f6dbcd5efdf0c3cd9', id: "item-description", type: "textarea", value: this.itemDetails.description }))), index.h("calcite-label", { key: 'a5b70cc0634bab9dc41857172b6e68c313da5716' }, this._translations.tags, index.h("label", { key: 'eb5931bcaa7e35d86814cb2798035d9193549e5b', id: "item-tags-label" }, index.h("calcite-input", { key: '2fb2184ee1b5e48a92eb40ef5dc128fe8cf24388', id: "item-tags", value: (this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(",") }))), this.itemType !== "Group" ? index.h("calcite-label", null, this._translations.credits, index.h("label", { id: "item-credits-label" }, index.h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? index.h("calcite-label", null, index.h("label", { id: "item-terms-label" }, this._translations.termsOfUse, index.h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
     }
     componentDidRender() {
         this._loadThumb();
@@ -2205,9 +2416,10 @@ const SolutionItemDetails = class {
     }
     get el() { return index.getElement(this); }
 };
-SolutionItemDetails.style = solutionItemDetailsCss;
+SolutionItemDetails.style = SolutionItemDetailsStyle0;
 
 const solutionItemSharingCss = ":host{display:block}.container-border{padding:1rem}.icon-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+const SolutionItemSharingStyle0 = solutionItemSharingCss;
 
 const SolutionItemSharing = class {
     constructor(hostRef) {
@@ -2235,7 +2447,7 @@ const SolutionItemSharing = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, null, index.h("div", { class: "container-border" }, index.h("calcite-label", null, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (index.h(index.Host, { key: '657a2174982d6942663a83c169ab502be0c69434' }, index.h("div", { key: 'c2639e6e48fd5ceeded9b71736207edfa4c8b26f', class: "container-border" }, index.h("calcite-label", { key: 'e11466b5fdebdd068d13bdf821b8b2e3e47c6321' }, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2323,9 +2535,10 @@ const SolutionItemSharing = class {
         "groupId": ["itemIdWatchHandler"]
     }; }
 };
-SolutionItemSharing.style = solutionItemSharingCss;
+SolutionItemSharing.style = SolutionItemSharingStyle0;
 
 const solutionOrganizationVariablesCss = ":host{display:block}.container-border{overflow-y:auto}.org-var-header{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1rem}";
+const SolutionOrganizationVariablesStyle0 = solutionOrganizationVariablesCss;
 
 const SolutionOrganizationVariables = class {
     constructor(hostRef) {
@@ -2353,7 +2566,7 @@ const SolutionOrganizationVariables = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, null, index.h("div", null, index.h("h4", { class: "org-var-header" }, this._translations.orgVariables)), index.h("div", { class: "container-border" }, index.h("calcite-tree", { id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (index.h(index.Host, { key: '95351bd18894c2ebd9be825859fc69fba20fa423' }, index.h("div", { key: '0decb53f2575a2c09ca7c355aa9189d356980bdf' }, index.h("h4", { key: '1dba6ec3e8e5df0e80072705a590c40c1b03333c', class: "org-var-header" }, this._translations.orgVariables)), index.h("div", { key: '3c3f96660454bd66ec518bb5ac45f5c7f966fa5e', class: "container-border" }, index.h("calcite-tree", { key: 'a37f5706819c7caabf9e3ca2498c0dd57c1e099c', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2402,9 +2615,10 @@ const SolutionOrganizationVariables = class {
         "value": ["valueWatchHandler"]
     }; }
 };
-SolutionOrganizationVariables.style = solutionOrganizationVariablesCss;
+SolutionOrganizationVariables.style = SolutionOrganizationVariablesStyle0;
 
 const solutionResourceItemCss = ":host{display:block}.resource-item{padding:1rem}.resource-button{margin-inline-end:1rem}.resource-progress{padding-top:1rem}.resources-container{border:1px #808080 solid}.margin-bottom-1{margin-bottom:1rem}";
+const SolutionResourceItemStyle0 = solutionResourceItemCss;
 
 const SolutionResourceItem = class {
     constructor(hostRef) {
@@ -2440,7 +2654,7 @@ const SolutionResourceItem = class {
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (index.h(index.Host, null, index.h("div", { class: "resource-item" }, index.h("div", { class: "margin-bottom-1" }, index.h("calcite-button", { appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), index.h("calcite-button", { appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), index.h("div", { class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (index.h(index.Host, { key: '02074f7f10921e975b52c13c55f4b3f71d8c7cf5' }, index.h("div", { key: 'c85c4acf1899e009ace234bb393d98e6d41ba0df', class: "resource-item" }, index.h("div", { key: '7650c0f83cab10dfde8cad2876c8208015e36ef5', class: "margin-bottom-1" }, index.h("calcite-button", { key: '555ff36b4a53ac5146d8017d9b602027ea6d6223', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), index.h("calcite-button", { key: '1973334d9061b2ec78695e7422cae2c4ba4f0e36', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), index.h("div", { key: 'd047f35fc949f996c8e40ff23334a0e4a9f3760f', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2665,9 +2879,10 @@ const SolutionResourceItem = class {
         "itemId": ["itemIdWatchHandler"]
     }; }
 };
-SolutionResourceItem.style = solutionResourceItemCss;
+SolutionResourceItem.style = SolutionResourceItemStyle0;
 
 const solutionTemplateDataCss = ":host{display:flexbox}.solution-data-container{position:absolute;height:-moz-available;height:calc(100% - 48px);height:-webkit-fill-available;height:stretch;width:-moz-available;width:100%;width:-webkit-fill-available;width:stretch}.solution-data-child-container{display:flex;height:100%;width:100%;flex-direction:column;overflow-y:auto}.solution-data-editor-container{height:100%}.solution-data-child-container-collapsed{display:flex;height:100%;flex-direction:column;overflow:auto;width:50px}.inputBottomSeparation{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:1.5rem}.json-editor{margin:1rem;width:auto;width:-webkit-fill-available -moz-available}.collapse-btn{padding-left:1rem;padding-right:1rem;padding-top:1rem;padding-bottom:0px}.org-vars{padding-left:1rem;padding-right:1rem;padding-top:1rem;padding-bottom:0px}.sol-vars{padding-top:0px;padding-bottom:0px;padding-left:1rem;padding-right:1rem;min-height:45%}.padding-1{padding:1rem}.light{background-color:#F4F4F4}";
+const SolutionTemplateDataStyle0 = solutionTemplateDataCss;
 
 const SolutionTemplateData = class {
     itemIdWatchHandler() {
@@ -2721,7 +2936,7 @@ const SolutionTemplateData = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, null, index.h("div", { class: "solution-data-container" }, index.h("calcite-shell", { class: "light var-container", dir: "ltr" }, index.h("calcite-panel", { class: "json-editor" }, index.h("div", { class: "solution-data-child-container calcite-match-height" }, index.h("json-editor", { class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), index.h("calcite-shell-panel", { "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, index.h("div", { class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, index.h("calcite-button", { appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), index.h("div", { class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, index.h("solution-organization-variables", { value: this.organizationVariables })), index.h("div", { class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, index.h("solution-variables", { value: this.solutionVariables }))))))));
+        return (index.h(index.Host, { key: '22705ebd3a386a84f4592856bdc9649c2cba30b8' }, index.h("div", { key: 'd0a814b481b061a9ed1ab30fd969045e50ba5c57', class: "solution-data-container" }, index.h("calcite-shell", { key: '59b716b131212438271699969faef49ea98e056e', class: "light var-container", dir: "ltr" }, index.h("calcite-panel", { key: '06dd9ab60db4c7e1301030cd27a9a917527ddad8', class: "json-editor" }, index.h("div", { key: '745bb83632217731bea14d066af4781e358c86a4', class: "solution-data-child-container calcite-match-height" }, index.h("json-editor", { key: 'df07ee691600b663dc7e44b962ab34a3bf55dc9c', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), index.h("calcite-shell-panel", { key: 'e1c3bde76aec90b857a4c7314ce2f4c1ec664d50', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, index.h("div", { key: '9765a724bb1f526381e5e04e7d2bfe36a3b511a6', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, index.h("calcite-button", { key: '2ff758dd95bfb295db9af8724ddc7299edf4ca41', appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), index.h("div", { key: '0e478e966b71dc8de85bdcef299ace2814d14ffd', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, index.h("solution-organization-variables", { key: 'c45e1217a012c63c1d839a313bc4a09da387ab60', value: this.organizationVariables })), index.h("div", { key: '39a42601f18825b0075838912ca9b9d233829ae7', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, index.h("solution-variables", { key: '0a8b98737e2674bca82553a3ed637e3ec336b8d8', value: this.solutionVariables }))))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2763,9 +2978,10 @@ const SolutionTemplateData = class {
         "itemId": ["itemIdWatchHandler"]
     }; }
 };
-SolutionTemplateData.style = solutionTemplateDataCss;
+SolutionTemplateData.style = SolutionTemplateDataStyle0;
 
 const solutionVariablesCss = ":host{display:block}.container-border{overflow-y:hidden}.org-var-header{margin-top:1rem;margin-bottom:1rem;margin-left:0px;margin-right:0px}.icon-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+const SolutionVariablesStyle0 = solutionVariablesCss;
 
 const SolutionVariables = class {
     constructor(hostRef) {
@@ -2793,7 +3009,7 @@ const SolutionVariables = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, null, index.h("div", null, index.h("h4", { class: "org-var-header" }, this._translations.solVariables)), index.h("div", { class: "container-border" }, index.h("calcite-tree", { id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
+        return (index.h(index.Host, { key: 'fdd3472c972374a0a4af6d5584a2ce8031627c4b' }, index.h("div", { key: 'ff13d6fabe162f55421547fd94bce7b301206acd' }, index.h("h4", { key: 'dbd2c5e15f9c8abb8b86c0bd2f57df6526e8bdfe', class: "org-var-header" }, this._translations.solVariables)), index.h("div", { key: 'b0d045725d76c07e15ac4a9f616ba6892faa4f7c', class: "container-border" }, index.h("calcite-tree", { key: 'b7a315e65515a84342f753764063ed747cfcfe63', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2854,7 +3070,7 @@ const SolutionVariables = class {
         "value": ["valueWatchHandler"]
     }; }
 };
-SolutionVariables.style = solutionVariablesCss;
+SolutionVariables.style = SolutionVariablesStyle0;
 
 exports.calcite_shell_panel = ShellPanel;
 exports.calcite_tab = Tab;