@esri/calcite-components 1.0.0-next.311 → 1.0.0-next.315

package/hydrate/index.js

@@ -5737,6 +5737,12 @@ function nodeListToArray(nodeList) {
 function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;
@@ -8319,13 +8325,11 @@ class CalciteAlert {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.autoDismissTimeout = null;
-    this.trackTimer = new Date();
+    this.autoDismissTimeoutId = null;
+    this.trackTimer = Date.now();
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
-      if (this.autoDismissTimeout) {
-        this.autoDismissTimeout = null;
-      }
+      this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
@@ -8349,10 +8353,10 @@ class CalciteAlert {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  updateDuration(newDuration, prevDuration) {
-    if (this.autoDismiss && prevDuration !== newDuration && this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-      this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (new Date().valueOf() - this.trackTimer.valueOf()));
+  updateDuration() {
+    if (this.autoDismiss && this.autoDismissTimeoutId) {
+      window.clearTimeout(this.autoDismissTimeoutId);
+      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
     }
   }
   //--------------------------------------------------------------------------
@@ -8372,9 +8376,7 @@ class CalciteAlert {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
   disconnectedCallback() {
-    if (this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-    }
+    window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
     const dir = getElementDir(this.el);
@@ -8382,14 +8384,13 @@ class CalciteAlert {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (hAsync("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, hAsync("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progressBar = hAsync("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (hAsync(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, hAsync("div", { class: {
         container: true,
         queued,
         [CSS_UTILITY.rtl]: dir === "rtl"
-      } }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$l.title }), hAsync("slot", { name: SLOTS$l.message }), hAsync("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? progressBar : null)));
+      } }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$l.title }), hAsync("slot", { name: SLOTS$l.message }), hAsync("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -8435,9 +8436,9 @@ class CalciteAlert {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      if (this.autoDismiss && !this.autoDismissTimeout) {
-        this.trackTimer = new Date();
-        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+        this.trackTimer = Date.now();
+        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
     else {
@@ -13345,29 +13346,32 @@ function getBasePlacement(placement) {
   return placement.split('-')[0];
 }
 
-// import { isHTMLElement } from './instanceOf';
-function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars
-includeScale) {
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getBoundingClientRect(element, includeScale) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
 
   var rect = element.getBoundingClientRect();
   var scaleX = 1;
-  var scaleY = 1; // FIXME:
-  // `offsetWidth` returns an integer while `getBoundingClientRect`
-  // returns a float. This results in `scaleX` or `scaleY` being
-  // non-1 when it should be for elements that aren't a full pixel in
-  // width or height.
-  // if (isHTMLElement(element) && includeScale) {
-  //   const offsetHeight = element.offsetHeight;
-  //   const offsetWidth = element.offsetWidth;
-  //   // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-  //   // Fallback to 1 in case both values are `0`
-  //   if (offsetWidth > 0) {
-  //     scaleX = rect.width / offsetWidth || 1;
-  //   }
-  //   if (offsetHeight > 0) {
-  //     scaleY = rect.height / offsetHeight || 1;
-  //   }
-  // }
+  var scaleY = 1;
+
+  if (isHTMLElement(element) && includeScale) {
+    var offsetHeight = element.offsetHeight;
+    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+    // Fallback to 1 in case both values are `0`
+
+    if (offsetWidth > 0) {
+      scaleX = round(rect.width) / offsetWidth || 1;
+    }
+
+    if (offsetHeight > 0) {
+      scaleY = round(rect.height) / offsetHeight || 1;
+    }
+  }
 
   return {
     width: rect.width / scaleX,
@@ -13522,13 +13526,13 @@ function getMainAxisFromPlacement(placement) {
   return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 }
 
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
-
 function within(min$1, value, max$1) {
   return max(min$1, min(value, max$1));
 }
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
 
 function getFreshSideObject() {
   return {
@@ -13651,8 +13655,8 @@ function roundOffsetsByDPR(_ref) {
   var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
-    x: round(round(x * dpr) / dpr) || 0,
-    y: round(round(y * dpr) / dpr) || 0
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
   };
 }
 
@@ -13667,7 +13671,8 @@ function mapToStyles(_ref2) {
       position = _ref2.position,
       gpuAcceleration = _ref2.gpuAcceleration,
       adaptive = _ref2.adaptive,
-      roundOffsets = _ref2.roundOffsets;
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
 
   var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
       _ref3$x = _ref3.x,
@@ -13699,16 +13704,18 @@ function mapToStyles(_ref2) {
     offsetParent = offsetParent;
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
-      sideY = bottom; // $FlowFixMe[prop-missing]
-
-      y -= offsetParent[heightProp] - popperRect.height;
+      sideY = bottom;
+      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
     }
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
-      sideX = right; // $FlowFixMe[prop-missing]
-
-      x -= offsetParent[widthProp] - popperRect.width;
+      sideX = right;
+      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
   }
@@ -13741,7 +13748,8 @@ function computeStyles(_ref4) {
     variation: getVariation(state.placement),
     popper: state.elements.popper,
     popperRect: state.rects.popper,
-    gpuAcceleration: gpuAcceleration
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
   };
 
   if (state.modifiersData.popperOffsets != null) {
@@ -13999,7 +14007,7 @@ function getInnerBoundingClientRect(element) {
 }
 
 function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -14016,7 +14024,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle$1(clippingParent).position !== 'static' : true);
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -14512,6 +14520,14 @@ function preventOverflow(_ref) {
   var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
     placement: state.placement
   })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
   var data = {
     x: 0,
     y: 0
@@ -14521,13 +14537,15 @@ function preventOverflow(_ref) {
     return;
   }
 
-  if (checkMainAxis || checkAltAxis) {
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
     var mainSide = mainAxis === 'y' ? top : left;
     var altSide = mainAxis === 'y' ? bottom : right;
     var len = mainAxis === 'y' ? 'height' : 'width';
     var offset = popperOffsets[mainAxis];
-    var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
-    var max$1 = popperOffsets[mainAxis] - overflow[altSide];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
     var additive = tether ? -popperRect[len] / 2 : 0;
     var minLen = variation === start ? referenceRect[len] : popperRect[len];
     var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -14547,36 +14565,45 @@ function preventOverflow(_ref) {
     // width or height)
 
     var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
     var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
     var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-    var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-    var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-    var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
 
-    if (checkMainAxis) {
-      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
-      popperOffsets[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset;
-    }
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
 
-    if (checkAltAxis) {
-      var _mainSide = mainAxis === 'x' ? top : left;
+    var _mainSide = mainAxis === 'x' ? top : left;
 
-      var _altSide = mainAxis === 'x' ? bottom : right;
+    var _altSide = mainAxis === 'x' ? bottom : right;
 
-      var _offset = popperOffsets[altAxis];
+    var _offset = popperOffsets[altAxis];
 
-      var _min = _offset + overflow[_mainSide];
+    var _len = altAxis === 'y' ? 'height' : 'width';
 
-      var _max = _offset - overflow[_altSide];
+    var _min = _offset + overflow[_mainSide];
 
-      var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
+    var _max = _offset - overflow[_altSide];
 
-      popperOffsets[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
-    }
+    var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
   }
 
   state.modifiersData[name] = data;
@@ -14608,8 +14635,8 @@ function getNodeScroll(node) {
 
 function isElementScaled(element) {
   var rect = element.getBoundingClientRect();
-  var scaleX = rect.width / element.offsetWidth || 1;
-  var scaleY = rect.height / element.offsetHeight || 1;
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
   return scaleX !== 1 || scaleY !== 1;
 } // Returns the composite rect of an element relative to its offsetParent.
 // Composite means it takes into account transforms as well as layout.
@@ -14621,9 +14648,9 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   }
 
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -14640,7 +14667,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     }
 
     if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent);
+      offsets = getBoundingClientRect(offsetParent, true);
       offsets.x += offsetParent.clientLeft;
       offsets.y += offsetParent.clientTop;
     } else if (documentElement) {
@@ -17196,7 +17223,7 @@ class CalciteDropdown {
     //
     //--------------------------------------------------------------------------
     this.items = [];
-    this.activeTransitionProp = "opacity";
+    this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver();
     //--------------------------------------------------------------------------
     //
@@ -20777,7 +20804,7 @@ class CalciteModal {
     return this.hasFooter ? (hAsync("div", { class: CSS$m.footer }, hAsync("span", { class: CSS$m.back }, hAsync("slot", { name: SLOTS$e.back })), hAsync("span", { class: CSS$m.secondary }, hAsync("slot", { name: SLOTS$e.secondary })), hAsync("span", { class: CSS$m.primary }, hAsync("slot", { name: SLOTS$e.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (hAsync("button", { "aria-label": this.intlClose, class: CSS$m.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, hAsync("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : "l" }))) : null;
+    return !this.disableCloseButton ? (hAsync("button", { "aria-label": this.intlClose, class: CSS$m.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, hAsync("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
@@ -21364,6 +21391,7 @@ const CSS$j = {
   headerActionsStart: "header-actions--start",
   contentWrapper: "content-wrapper",
   contentContainer: "content-container",
+  contentHeight: "content-height",
   fabContainer: "fab-container",
   footer: "footer",
   menuContainer: "menu-container",
@@ -21394,7 +21422,7 @@ const TEXT$8 = {
 };
 const HEADING_LEVEL$4 = 3;
 
-const calcitePanelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-panel:root{--calcite-animation-timing:300ms}/*!@.calcite-animate*/.calcite-animate.sc-calcite-panel{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-panel{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-panel{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-panel{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-panel{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:host*/.sc-calcite-panel-h{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:root*/.sc-calcite-panel:root{--calcite-popper-transition:150ms ease-in-out}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@:host*/.sc-calcite-panel-h{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;position:relative;width:100%;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-max-height:unset;--calcite-panel-width:100%;--calcite-panel-min-width:unset;--calcite-panel-max-width:unset}/*!@.header*/.header.sc-calcite-panel{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between;color:var(--calcite-ui-text-2);}/*!@.heading*/.heading.sc-calcite-panel{font-weight:var(--calcite-font-weight-medium);margin:0;padding:0}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}/*!@h1.heading*/h1.heading.sc-calcite-panel{font-size:var(--calcite-font-size-2);line-height:1.5rem}/*!@h2.heading*/h2.heading.sc-calcite-panel{font-size:var(--calcite-font-size-1);line-height:1.5rem}/*!@h3.heading*/h3.heading.sc-calcite-panel{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@h4.heading,\nh5.heading*/h4.heading.sc-calcite-panel,h5.heading.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@.container*/.container.sc-calcite-panel{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);width:100%;padding:0;margin:0;max-height:var(--calcite-panel-max-height);width:var(--calcite-panel-width);max-width:var(--calcite-panel-max-width);min-width:var(--calcite-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, width 150ms ease-in-out;transition:max-height 150ms ease-in-out, width 150ms ease-in-out}/*!@:host([height-scale=s])*/[height-scale=s].sc-calcite-panel-h{--calcite-panel-max-height:40vh}/*!@:host([height-scale=m])*/[height-scale=m].sc-calcite-panel-h{--calcite-panel-max-height:60vh}/*!@:host([height-scale=l])*/[height-scale=l].sc-calcite-panel-h{--calcite-panel-max-height:80vh}/*!@:host([width-scale=s])*/[width-scale=s].sc-calcite-panel-h{--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}/*!@:host([width-scale=m])*/[width-scale=m].sc-calcite-panel-h{--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}/*!@:host([width-scale=l])*/[width-scale=l].sc-calcite-panel-h{--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@:host([loading]) .container,\n:host([disabled]) .container*/[loading].sc-calcite-panel-h .container.sc-calcite-panel,[disabled].sc-calcite-panel-h .container.sc-calcite-panel{position:relative;z-index:1}/*!@.header*/.header.sc-calcite-panel{border-bottom:1px solid;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start;position:-webkit-sticky;position:sticky;top:0;border-bottom-color:var(--calcite-ui-border-3);width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;z-index:2}/*!@.header-content*/.header-content.sc-calcite-panel{overflow:hidden;margin-right:auto;padding-left:0.75rem;padding-right:0.75rem;padding-top:1rem;padding-bottom:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}/*!@.header-content .heading,\n.header-content .summary*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .summary.sc-calcite-panel{padding:0;display:block;overflow:hidden;white-space:nowrap;width:100%;text-overflow:ellipsis}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{font-weight:var(--calcite-font-weight-medium);margin-top:0;margin-left:0;margin-right:0;margin-bottom:0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-bottom:0}/*!@.header-content .summary*/.header-content.sc-calcite-panel .summary.sc-calcite-panel{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1);line-height:1rem}/*!@.back-button*/.back-button.sc-calcite-panel{border-color:var(--calcite-ui-border-3);border-style:solid;border-width:0;border-right-width:1px}/*!@.calcite--rtl .back-button*/.calcite--rtl.sc-calcite-panel .back-button.sc-calcite-panel{border-right-width:0;border-left-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-left:auto}/*!@.menu-container:only-child*/.menu-container.sc-calcite-panel:only-child{margin-left:auto}/*!@.menu-button*/.menu-button.sc-calcite-panel{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}/*!@.menu*/.menu.sc-calcite-panel{min-width:10rem;-ms-flex-flow:column nowrap;flex-flow:column nowrap}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{height:100%;overflow:auto}/*!@.content-container*/.content-container.sc-calcite-panel{-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:column;flex-direction:column}/*!@.footer*/.footer.sc-calcite-panel{border-top:1px solid;background-color:var(--calcite-ui-foreground-1);border-top-color:var(--calcite-ui-border-3);display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly;position:-webkit-sticky;position:sticky;bottom:0;width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;padding:0.5rem}/*!@.calcite--rtl .header-content*/.calcite--rtl.sc-calcite-panel .header-content.sc-calcite-panel{margin-left:auto;margin-right:unset}/*!@.calcite--rtl .header-actions--end*/.calcite--rtl.sc-calcite-panel .header-actions--end.sc-calcite-panel{margin-right:auto;margin-left:unset}/*!@.calcite--rtl .menu-container:only-child*/.calcite--rtl.sc-calcite-panel .menu-container.sc-calcite-panel:only-child{margin-right:auto;margin-left:unset}/*!@.fab-container*/.fab-container.sc-calcite-panel{display:block;position:-webkit-sticky;position:sticky;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;padding:0.5rem;bottom:0;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;z-index:1}";
+const calcitePanelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-panel:root{--calcite-animation-timing:300ms}/*!@.calcite-animate*/.calcite-animate.sc-calcite-panel{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-panel{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-panel{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-panel{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-panel{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:host*/.sc-calcite-panel-h{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:root*/.sc-calcite-panel:root{--calcite-popper-transition:150ms ease-in-out}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@:host*/.sc-calcite-panel-h{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;position:relative;width:100%;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-max-height:unset;--calcite-panel-width:100%;--calcite-panel-min-width:unset;--calcite-panel-max-width:unset}/*!@.header*/.header.sc-calcite-panel{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between;color:var(--calcite-ui-text-2);}/*!@.heading*/.heading.sc-calcite-panel{font-weight:var(--calcite-font-weight-medium);margin:0;padding:0}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}/*!@h1.heading*/h1.heading.sc-calcite-panel{font-size:var(--calcite-font-size-2);line-height:1.5rem}/*!@h2.heading*/h2.heading.sc-calcite-panel{font-size:var(--calcite-font-size-1);line-height:1.5rem}/*!@h3.heading*/h3.heading.sc-calcite-panel{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@h4.heading,\nh5.heading*/h4.heading.sc-calcite-panel,h5.heading.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@.container*/.container.sc-calcite-panel{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);width:100%;padding:0;margin:0;max-height:var(--calcite-panel-max-height);width:var(--calcite-panel-width);max-width:var(--calcite-panel-max-width);min-width:var(--calcite-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, width 150ms ease-in-out;transition:max-height 150ms ease-in-out, width 150ms ease-in-out}/*!@:host([height-scale=s])*/[height-scale=s].sc-calcite-panel-h{--calcite-panel-max-height:40vh}/*!@:host([height-scale=m])*/[height-scale=m].sc-calcite-panel-h{--calcite-panel-max-height:60vh}/*!@:host([height-scale=l])*/[height-scale=l].sc-calcite-panel-h{--calcite-panel-max-height:80vh}/*!@:host([width-scale=s])*/[width-scale=s].sc-calcite-panel-h{--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}/*!@:host([width-scale=m])*/[width-scale=m].sc-calcite-panel-h{--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}/*!@:host([width-scale=l])*/[width-scale=l].sc-calcite-panel-h{--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@:host([loading]) .container,\n:host([disabled]) .container*/[loading].sc-calcite-panel-h .container.sc-calcite-panel,[disabled].sc-calcite-panel-h .container.sc-calcite-panel{position:relative;z-index:1}/*!@.header*/.header.sc-calcite-panel{border-bottom:1px solid;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start;position:-webkit-sticky;position:sticky;top:0;border-bottom-color:var(--calcite-ui-border-3);width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;z-index:2}/*!@.header-content*/.header-content.sc-calcite-panel{overflow:hidden;margin-right:auto;padding-left:0.75rem;padding-right:0.75rem;padding-top:1rem;padding-bottom:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}/*!@.header-content .heading,\n.header-content .summary*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .summary.sc-calcite-panel{padding:0;display:block;overflow:hidden;white-space:nowrap;width:100%;text-overflow:ellipsis}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{font-weight:var(--calcite-font-weight-medium);margin-top:0;margin-left:0;margin-right:0;margin-bottom:0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-bottom:0}/*!@.header-content .summary*/.header-content.sc-calcite-panel .summary.sc-calcite-panel{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1);line-height:1rem}/*!@.back-button*/.back-button.sc-calcite-panel{border-color:var(--calcite-ui-border-3);border-style:solid;border-width:0;border-right-width:1px}/*!@.calcite--rtl .back-button*/.calcite--rtl.sc-calcite-panel .back-button.sc-calcite-panel{border-right-width:0;border-left-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-left:auto}/*!@.menu-container:only-child*/.menu-container.sc-calcite-panel:only-child{margin-left:auto}/*!@.menu-button*/.menu-button.sc-calcite-panel{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}/*!@.menu*/.menu.sc-calcite-panel{min-width:10rem;-ms-flex-flow:column nowrap;flex-flow:column nowrap}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{overflow:auto}/*!@.content-height*/.content-height.sc-calcite-panel{height:100%}/*!@.content-container*/.content-container.sc-calcite-panel{-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:column;flex-direction:column}/*!@.footer*/.footer.sc-calcite-panel{border-top:1px solid;background-color:var(--calcite-ui-foreground-1);border-top-color:var(--calcite-ui-border-3);display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly;position:-webkit-sticky;position:sticky;bottom:0;width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;padding:0.5rem}/*!@.calcite--rtl .header-content*/.calcite--rtl.sc-calcite-panel .header-content.sc-calcite-panel{margin-left:auto;margin-right:unset}/*!@.calcite--rtl .header-actions--end*/.calcite--rtl.sc-calcite-panel .header-actions--end.sc-calcite-panel{margin-right:auto;margin-left:unset}/*!@.calcite--rtl .menu-container:only-child*/.calcite--rtl.sc-calcite-panel .menu-container.sc-calcite-panel:only-child{margin-right:auto;margin-left:unset}/*!@.fab-container*/.fab-container.sc-calcite-panel{display:block;position:-webkit-sticky;position:sticky;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;padding:0.5rem;bottom:0;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;z-index:1}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -21564,12 +21592,12 @@ class CalcitePanel {
     return hasFooterActions ? (hAsync("footer", { class: CSS$j.footer }, hAsync("slot", { name: SLOTS$c.footerActions }))) : null;
   }
   renderContent() {
-    return (hAsync("div", { class: CSS$j.contentWrapper, onScroll: this.panelScrollHandler, tabIndex: 0 }, hAsync("section", { class: CSS$j.contentContainer }, hAsync("slot", null)), this.renderFab()));
-  }
-  renderFab() {
     const { el } = this;
     const hasFab = getSlotted(el, SLOTS$c.fab);
-    return hasFab ? (hAsync("div", { class: CSS$j.fabContainer }, hAsync("slot", { name: SLOTS$c.fab }))) : null;
+    return hasFab ? (hAsync("div", { class: { [CSS$j.contentWrapper]: true, [CSS$j.contentHeight]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 }, hAsync("section", { class: CSS$j.contentContainer }, hAsync("slot", null)), this.renderFab())) : (hAsync("section", { class: { [CSS$j.contentWrapper]: true, [CSS$j.contentContainer]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 }, hAsync("slot", null)));
+  }
+  renderFab() {
+    return (hAsync("div", { class: CSS$j.fabContainer }, hAsync("slot", { name: SLOTS$c.fab })));
   }
   render() {
     const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
@@ -24084,7 +24112,7 @@ const TEXT$3 = {
   resize: "Resize"
 };
 
-const calciteShellPanelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-animation-timing:300ms}/*!@.calcite-animate*/.calcite-animate.sc-calcite-shell-panel{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-shell-panel{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-shell-panel{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-shell-panel{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-shell-panel{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-popper-transition:150ms ease-in-out}/*!@:host([hidden])*/[hidden].sc-calcite-shell-panel-h{display:none}/*!@:host*/.sc-calcite-shell-panel-h{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 1 auto;flex:0 1 auto;--calcite-shell-panel-detached-max-height:unset}/*!@.container*/.container.sc-calcite-shell-panel{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;-ms-flex:1 1 auto;flex:1 1 auto;pointer-events:none;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@.container **/.container.sc-calcite-shell-panel *.sc-calcite-shell-panel{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:host(:hover) .separator:not(:hover):not(:focus),\n:host(:focus-within) .separator:not(:hover):not(:focus)*/.sc-calcite-shell-panel-h:hover .separator.sc-calcite-shell-panel:not(:hover):not(:focus),.sc-calcite-shell-panel-h:focus-within .separator.sc-calcite-shell-panel:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-ui-border-3)}/*!@.separator*/.separator.sc-calcite-shell-panel{position:absolute;background-color:transparent;bottom:0;display:-ms-flexbox;display:flex;height:100%;opacity:0;pointer-events:auto;top:0;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;width:0.125rem;z-index:10;cursor:col-resize;outline:none}/*!@.separator:hover*/.separator.sc-calcite-shell-panel:hover{opacity:1;background-color:var(--calcite-ui-border-2)}/*!@.separator:focus*/.separator.sc-calcite-shell-panel:focus{background-color:var(--calcite-ui-brand);opacity:1}/*!@:host([position=start]) .separator*/[position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-end:-2px}/*!@:host([position=end]) .separator*/[position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-start:-2px}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-s>calcite-flow{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;width:100%;max-height:unset;max-width:unset}/*!@::slotted(.calcite-match-height)*/.sc-calcite-shell-panel-s>.calcite-match-height{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}/*!@.content*/.content.sc-calcite-shell-panel{-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;padding:0;pointer-events:auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:var(--calcite-shell-panel-width);max-width:var(--calcite-shell-panel-max-width);min-width:var(--calcite-shell-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out;transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out}/*!@.content__header*/.content__header.sc-calcite-shell-panel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch}/*!@.content__body*/.content__body.sc-calcite-shell-panel{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;overflow:hidden}/*!@:host([width-scale=s]) .content*/[width-scale=s].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}/*!@:host([width-scale=m]) .content*/[width-scale=m].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}/*!@:host([width-scale=l]) .content*/[width-scale=l].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}/*!@:host([detached-height-scale=s]) .content--detached*/[detached-height-scale=s].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:40vh}/*!@:host([detached-height-scale=m]) .content--detached*/[detached-height-scale=m].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:60vh}/*!@:host([detached-height-scale=l]) .content--detached*/[detached-height-scale=l].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:80vh}/*!@.content--detached*/.content--detached.sc-calcite-shell-panel{border-radius:0.25rem;-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);height:auto;overflow:hidden;margin-top:0.5rem;margin-bottom:auto;margin-left:0.5rem;margin-right:0.5rem;max-height:var(--calcite-shell-panel-detached-max-height)}/*!@.content--detached ::slotted(calcite-panel),\n.content--detached ::slotted(calcite-flow)*/.content--detached .sc-calcite-shell-panel-s>calcite-panel,.content--detached .sc-calcite-shell-panel-s>calcite-flow{max-height:unset}/*!@:host([position=start]) .content--detached ::slotted(calcite-panel),\n:host([position=start]) .content--detached ::slotted(calcite-flow),\n:host([position=end]) .content--detached ::slotted(calcite-panel),\n:host([position=end]) .content--detached ::slotted(calcite-flow)*/.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-flow{border-style:none}/*!@.content[hidden]*/.content[hidden].sc-calcite-shell-panel{display:none}/*!@slot[name=action-bar]::slotted(calcite-action-bar),\n.content ::slotted(calcite-flow),\n.content ::slotted(calcite-panel)*/slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.content .sc-calcite-shell-panel-s>calcite-flow,.content .sc-calcite-shell-panel-s>calcite-panel{border-width:1px;border-color:var(--calcite-ui-border-3);border-style:solid}/*!@:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=start]) .content ::slotted(calcite-flow),\n:host([position=start]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=start] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-panel{-webkit-border-start:none;border-inline-start:none}/*!@:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=end]) .content ::slotted(calcite-flow),\n:host([position=end]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=end] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-panel{-webkit-border-end:none;border-inline-end:none}";
+const calciteShellPanelCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-animation-timing:300ms}/*!@.calcite-animate*/.calcite-animate.sc-calcite-shell-panel{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-shell-panel{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-shell-panel{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-shell-panel{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-shell-panel{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-shell-panel:root{--calcite-popper-transition:150ms ease-in-out}/*!@:host([hidden])*/[hidden].sc-calcite-shell-panel-h{display:none}/*!@:host*/.sc-calcite-shell-panel-h{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 1 auto;flex:0 1 auto;pointer-events:none;--calcite-shell-panel-detached-max-height:unset}/*!@.container*/.container.sc-calcite-shell-panel{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;-ms-flex:1 1 auto;flex:1 1 auto;pointer-events:none;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@.container **/.container.sc-calcite-shell-panel *.sc-calcite-shell-panel{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:host(:hover) .separator:not(:hover):not(:focus),\n:host(:focus-within) .separator:not(:hover):not(:focus)*/.sc-calcite-shell-panel-h:hover .separator.sc-calcite-shell-panel:not(:hover):not(:focus),.sc-calcite-shell-panel-h:focus-within .separator.sc-calcite-shell-panel:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-ui-border-3)}/*!@.separator*/.separator.sc-calcite-shell-panel{position:absolute;background-color:transparent;bottom:0;display:-ms-flexbox;display:flex;height:100%;opacity:0;pointer-events:auto;top:0;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;width:0.125rem;z-index:10;cursor:col-resize;outline:none}/*!@.separator:hover*/.separator.sc-calcite-shell-panel:hover{opacity:1;background-color:var(--calcite-ui-border-2)}/*!@.separator:focus*/.separator.sc-calcite-shell-panel:focus{background-color:var(--calcite-ui-brand);opacity:1}/*!@:host([position=start]) .separator*/[position=start].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-end:-2px}/*!@:host([position=end]) .separator*/[position=end].sc-calcite-shell-panel-h .separator.sc-calcite-shell-panel{inset-inline-start:-2px}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-s>calcite-flow{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;width:100%;max-height:unset;max-width:unset}/*!@::slotted(.calcite-match-height)*/.sc-calcite-shell-panel-s>.calcite-match-height{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}/*!@.content*/.content.sc-calcite-shell-panel{-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;padding:0;pointer-events:auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:var(--calcite-shell-panel-width);max-width:var(--calcite-shell-panel-max-width);min-width:var(--calcite-shell-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out;transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out}/*!@.content__header*/.content__header.sc-calcite-shell-panel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch}/*!@.content__body*/.content__body.sc-calcite-shell-panel{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;overflow:hidden}/*!@:host([width-scale=s]) .content*/[width-scale=s].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}/*!@:host([width-scale=m]) .content*/[width-scale=m].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}/*!@:host([width-scale=l]) .content*/[width-scale=l].sc-calcite-shell-panel-h .content.sc-calcite-shell-panel{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}/*!@:host([detached-height-scale=s]) .content--detached*/[detached-height-scale=s].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:40vh}/*!@:host([detached-height-scale=m]) .content--detached*/[detached-height-scale=m].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:60vh}/*!@:host([detached-height-scale=l]) .content--detached*/[detached-height-scale=l].sc-calcite-shell-panel-h .content--detached.sc-calcite-shell-panel{--calcite-shell-panel-detached-max-height:80vh}/*!@.content--detached*/.content--detached.sc-calcite-shell-panel{border-radius:0.25rem;-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);height:auto;overflow:hidden;margin-top:0.5rem;margin-bottom:auto;margin-left:0.5rem;margin-right:0.5rem;max-height:var(--calcite-shell-panel-detached-max-height)}/*!@.content--detached ::slotted(calcite-panel),\n.content--detached ::slotted(calcite-flow)*/.content--detached .sc-calcite-shell-panel-s>calcite-panel,.content--detached .sc-calcite-shell-panel-s>calcite-flow{max-height:unset}/*!@:host([position=start]) .content--detached ::slotted(calcite-panel),\n:host([position=start]) .content--detached ::slotted(calcite-flow),\n:host([position=end]) .content--detached ::slotted(calcite-panel),\n:host([position=end]) .content--detached ::slotted(calcite-flow)*/.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=start] .content--detached .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-panel,.sc-calcite-shell-panel-h[position=end] .content--detached .sc-calcite-shell-panel-s>calcite-flow{border-style:none}/*!@.content[hidden]*/.content[hidden].sc-calcite-shell-panel{display:none}/*!@slot[name=action-bar]::slotted(calcite-action-bar),\n.content ::slotted(calcite-flow),\n.content ::slotted(calcite-panel)*/slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.content .sc-calcite-shell-panel-s>calcite-flow,.content .sc-calcite-shell-panel-s>calcite-panel{border-width:1px;border-color:var(--calcite-ui-border-3);border-style:solid}/*!@:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=start]) .content ::slotted(calcite-flow),\n:host([position=start]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=start] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=start] .content .sc-calcite-shell-panel-s>calcite-panel{-webkit-border-start:none;border-inline-start:none}/*!@:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),\n:host([position=end]) .content ::slotted(calcite-flow),\n:host([position=end]) .content ::slotted(calcite-panel)*/.sc-calcite-shell-panel-h[position=end] slot[name=action-bar].sc-calcite-shell-panel-s>calcite-action-bar,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-flow,.sc-calcite-shell-panel-h[position=end] .content .sc-calcite-shell-panel-s>calcite-panel{-webkit-border-end:none;border-inline-end:none}";
 
 /**
  * @slot - A slot for adding content to the shell panel.
@@ -24136,7 +24164,7 @@ class CalciteShellPanel {
     };
     this.getKeyAdjustedWidth = (event) => {
       const { key } = event;
-      const { step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
+      const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
       const multipliedStep = step * stepMultiplier;
       const MOVEMENT_KEYS = [
         "ArrowUp",
@@ -24151,15 +24179,20 @@ class CalciteShellPanel {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const increaseKeys = key === "ArrowUp" || (position === "end" ? key === "ArrowLeft" : key === "ArrowRight");
+      const dir = getElementStyleDir(el);
+      const directionKeys = ["ArrowLeft", "ArrowRight"];
+      const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
+      const increaseKeys = key === "ArrowUp" ||
+        (position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
       if (increaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth + stepValue;
+        return initialContentWidth + directionFactor * stepValue;
       }
-      const decreaseKeys = key === "ArrowDown" || (position === "end" ? key === "ArrowRight" : key === "ArrowLeft");
+      const decreaseKeys = key === "ArrowDown" ||
+        (position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
       if (decreaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth - stepValue;
+        return initialContentWidth - directionFactor * stepValue;
       }
       if (typeof contentWidthMin === "number" && key === "Home") {
         return contentWidthMin;
@@ -24184,9 +24217,13 @@ class CalciteShellPanel {
     };
     this.separatorPointerMove = (event) => {
       event.preventDefault();
-      const { initialContentWidth, position, initialClientX } = this;
+      const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      this.setContentWidth(position === "end" ? initialContentWidth - offset : initialContentWidth + offset);
+      const dir = getElementStyleDir(el);
+      const adjustmentDirection = dir === "rtl" ? -1 : 1;
+      const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
+      const width = initialContentWidth + adjustedOffset;
+      this.setContentWidth(width);
     };
     this.separatorPointerUp = (event) => {
       event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.311",
+  "version": "1.0.0-next.315",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -19,7 +19,7 @@
     "build": "npm run util:copy-icons && stencil build",
     "build:watch": "npm run util:copy-icons && stencil build --watch",
     "build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch",
-    "deps:update": "updtr --exclude typescript tailwindcss @types/jest jest jest-cli puppeteer && git add package*.json && git commit -q -m \"build(deps): bump versions\"",
+    "deps:update": "updtr --exclude chalk typescript tailwindcss @types/jest jest jest-cli puppeteer && git add package*.json && git commit -q -m \"build(deps): bump versions\"",
     "docs": "concurrently --kill-others --raw \"npm:util:build-docs && build-storybook --static-dir ./__docs-temp__ --output-dir ./docs\"  \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
     "docs:preview": "concurrently --raw \"npm:util:build-docs && start-storybook --static-dir ./__docs-temp__\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
     "lint": "concurrently npm:lint:*",
@@ -47,6 +47,7 @@
     "util:copy-icons": "cpy ./node_modules/@esri/calcite-ui-icons/js/*.json ./src/components/calcite-icon/assets/calcite-icon/",
     "util:deploy-next-from-existing-build": "npm run util:prep-next-from-existing-build && npm run util:push-tags && npm run util:publish-next",
     "util:deploy-next-from-ci": "ts-node --project ./tsconfig-node-scripts.json support/deployNextFromCI.ts",
+    "util:check-squash-mergeable-branch": "ts-node --project ./tsconfig-node-scripts.json support/checkSquashMergeableBranch.ts",
     "util:prep-next-from-existing-build": "ts-node --project ./tsconfig-node-scripts.json support/prepReleaseCommit.ts --next",
     "util:publish-next": "npm publish --tag next",
     "util:push-tags": "git push --follow-tags",
@@ -58,7 +59,7 @@
   },
   "dependencies": {
     "@a11y/focus-trap": "1.0.5",
-    "@popperjs/core": "2.10.2",
+    "@popperjs/core": "2.11.0",
     "@stencil/core": "2.11.0",
     "@types/color": "3.0.2",
     "color": "4.0.2",
@@ -79,7 +80,7 @@
     "@stencil/state-tunnel": "^1.0.1",
     "@storybook/addon-a11y": "6.4.1",
     "@storybook/addon-docs": "6.4.1",
-    "@storybook/addon-knobs": "6.3.1",
+    "@storybook/addon-knobs": "6.4.0",
     "@storybook/cli": "6.4.1",
     "@storybook/html": "6.4.1",
     "@storybook/storybook-deployer": "2.8.10",
@@ -96,7 +97,7 @@
     "@types/standard-version": "7.0.1",
     "@types/yargs": "17.0.7",
     "@typescript-eslint/eslint-plugin": "5.5.0",
-    "@typescript-eslint/parser": "5.4.0",
+    "@typescript-eslint/parser": "5.5.0",
     "@whitespace/storybook-addon-html": "5.0.0",
     "autoprefixer": "10.3.7",
     "axe-core": "4.3.5",
@@ -123,7 +124,7 @@
     "jest-cli": "26.6.3",
     "lint-staged": "12.1.2",
     "pify": "5.0.0",
-    "postcss": "8.3.11",
+    "postcss": "8.4.4",
     "posthtml": "0.16.5",
     "prettier": "2.5.0",
     "puppeteer": "10.0.0",
@@ -144,7 +145,7 @@
     "typescript": "4.2.4",
     "updtr": "4.0.0",
     "workbox-build": "6.4.1",
-    "yargs": "17.2.1"
+    "yargs": "17.3.0"
   },
   "license": "SEE LICENSE IN copyright.txt"
 }

package/readme.md

@@ -17,12 +17,12 @@ The simplest way to set up the components in your project is to add the followin
 ```html
 <script
   type="module"
-  src="https://unpkg.com/@esri/calcite-components@1.0.0-next.311/dist/calcite/calcite.esm.js"
+  src="https://unpkg.com/@esri/calcite-components@1.0.0-next.315/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://unpkg.com/@esri/calcite-components@1.0.0-next.311/dist/calcite/calcite.css"
+  href="https://unpkg.com/@esri/calcite-components@1.0.0-next.315/dist/calcite/calcite.css"
 />
 ```