@esri/calcite-components 1.0.0-next.370 → 1.0.0-next.374

package/dist/cjs/calcite-checkbox.cjs.entry.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const guid = require('./guid-b270f0db.js');
-const form = require('./form-4b7c317e.js');
-const label = require('./label-1bca211b.js');
-require('./dom-0de9fb18.js');
+const form = require('./form-237cf392.js');
+const label = require('./label-6b18ca08.js');
+require('./dom-f3df220d.js');
 
 const calciteCheckboxCss = "@-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{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host .toggle:focus .check-svg,:host .toggle:active .check-svg{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:var(--calcite-animation-timing);transition:var(--calcite-animation-timing)}:host([disabled]){pointer-events:none;cursor:default;opacity:var(--calcite-ui-opacity-disabled)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 

package/dist/cjs/calcite-chip.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const guid = require('./guid-b270f0db.js');
 const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./observers-79bfb8bc.js');

package/dist/cjs/calcite-color-picker_3.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const utils = require('./utils-55d67711.js');
 const math = require('./math-145c80e2.js');
 const debounce = require('./debounce-95979061.js');

package/dist/cjs/calcite-combobox_3.cjs.entry.js

@@ -9,12 +9,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6b5d2de5.js');
 const debounce = require('./debounce-95979061.js');
 const forIn = require('./forIn-a5d553af.js');
-const popper = require('./popper-09105f6f.js');
+const popper = require('./popper-13a2bb46.js');
 const guid = require('./guid-b270f0db.js');
-const dom = require('./dom-0de9fb18.js');
-const label = require('./label-1bca211b.js');
-const form = require('./form-4b7c317e.js');
+const dom = require('./dom-f3df220d.js');
+const label = require('./label-6b18ca08.js');
+const form = require('./form-237cf392.js');
 const observers = require('./observers-79bfb8bc.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -744,7 +745,6 @@ let CalciteCombobox = class {
       const item = document.createElement(ComboboxItem);
       item.value = value;
       item.textLabel = value;
-      item.guid = `${chipUidPrefix}${guid.guid()}`;
       item.selected = true;
       this.el.appendChild(item);
       this.resetText();
@@ -794,7 +794,9 @@ let CalciteCombobox = class {
   focusChip() {
     var _a;
     const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
-    const chip = this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`);
+    const chip = guid
+      ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
+      : null;
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
@@ -849,7 +851,7 @@ let CalciteCombobox = class {
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
       const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-      return (index.h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: `${chipUidPrefix}${item.guid}`, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
+      return (index.h("calcite-chip", { class: chipClasses, dismissLabel: intlRemoveTag, dismissible: true, icon: item.icon, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, onCalciteChipDismiss: (event) => this.calciteChipDismissHandler(event, item), scale: scale, title: label, value: item.value }, label));
     });
   }
   renderInput() {
@@ -872,7 +874,7 @@ let CalciteCombobox = class {
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
-    return this.visibleItems.map((item) => (index.h("li", { "aria-selected": (!!item.selected).toString(), id: `${itemUidPrefix}${item.guid}`, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (index.h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, maxScrollerHeight, setMenuEl, setListContainerEl, hideList, open } = this;
@@ -972,9 +974,10 @@ let CalciteComboboxItem = class {
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
     this.scale = dom.getElementProp(this.el, "scale", this.scale);
+    conditionalSlot.connectConditionalSlotComponent(this);
   }
-  componentWillLoad() {
-    this.hasDefaultSlot = this.el.querySelector(":not([slot])") !== null;
+  disconnectedCallback() {
+    conditionalSlot.disconnectConditionalSlotComponent(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -1014,10 +1017,10 @@ let CalciteComboboxItem = class {
       }, icon: icon || iconPath, scale: "s" }));
   }
   renderChildren() {
-    if (!this.hasDefaultSlot) {
-      return null;
+    if (dom.getSlotted(this.el)) {
+      return (index.h("ul", { key: "default-slot-container" }, index.h("slot", null)));
     }
-    return (index.h("ul", null, index.h("slot", null)));
+    return null;
   }
   render() {
     const isSingleSelect = dom.getElementProp(this.el, "selection-mode", "multi") === "single";

package/dist/cjs/calcite-date-picker_4.cjs.entry.js

@@ -7,8 +7,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const resources = require('./resources-9f0994fb.js');
-const dom = require('./dom-0de9fb18.js');
+const resources = require('./resources-f70fb01b.js');
+const dom = require('./dom-f3df220d.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
 require('./locale-02462821.js');
 require('./number-e813e801.js');

package/dist/cjs/calcite-dropdown_3.cjs.entry.js

@@ -7,8 +7,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
-const popper = require('./popper-09105f6f.js');
+const dom = require('./dom-f3df220d.js');
+const popper = require('./popper-13a2bb46.js');
 const observers = require('./observers-79bfb8bc.js');
 require('./guid-b270f0db.js');
 
@@ -79,7 +79,7 @@ let CalciteDropdown = class {
     //--------------------------------------------------------------------------
     this.updateItems = () => {
       this.updateSelectedItems();
-      this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
+      this.triggers = dom.getSlotted(this.el, "dropdown-trigger", { all: true });
       this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
       this.reposition();
     };

package/dist/cjs/calcite-fab.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 require('./guid-b270f0db.js');
 
 const CSS = {

package/dist/cjs/calcite-filter.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const debounce = require('./debounce-95979061.js');
 const forIn = require('./forIn-a5d553af.js');
 require('./guid-b270f0db.js');

package/dist/cjs/calcite-graph_2.cjs.entry.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6b5d2de5.js');
 const guid = require('./guid-b270f0db.js');
 const observers = require('./observers-79bfb8bc.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const math = require('./math-145c80e2.js');
-const label = require('./label-1bca211b.js');
-const form = require('./form-4b7c317e.js');
+const label = require('./label-6b18ca08.js');
+const form = require('./form-237cf392.js');
 
 /**
  * Calculate slope of the tangents
@@ -283,9 +283,7 @@ let CalciteSlider = class {
       }
     };
     this.dragEnd = (event) => {
-      document.removeEventListener("pointermove", this.dragUpdate);
-      document.removeEventListener("pointerup", this.dragEnd);
-      document.removeEventListener("pointercancel", this.dragEnd);
+      this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
       if (this.lastDragPropValue != this[this.dragProp]) {
         this.emitChange();
@@ -320,6 +318,7 @@ let CalciteSlider = class {
   disconnectedCallback() {
     label.disconnectLabel(this);
     form.disconnectForm(this);
+    this.removeDragListeners();
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
@@ -655,6 +654,11 @@ let CalciteSlider = class {
   emitChange() {
     this.calciteSliderChange.emit();
   }
+  removeDragListeners() {
+    document.removeEventListener("pointermove", this.dragUpdate);
+    document.removeEventListener("pointerup", this.dragEnd);
+    document.removeEventListener("pointercancel", this.dragEnd);
+  }
   /**
    * Set the prop value if changed at the component level
    * @param valueProp

package/dist/cjs/calcite-icon.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const observers = require('./observers-79bfb8bc.js');
 require('./guid-b270f0db.js');
 

package/dist/cjs/calcite-inline-editable.cjs.entry.js

@@ -7,8 +7,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
-const label = require('./label-1bca211b.js');
+const dom = require('./dom-f3df220d.js');
+const label = require('./label-6b18ca08.js');
+const observers = require('./observers-79bfb8bc.js');
 require('./guid-b270f0db.js');
 
 const CSS = {
@@ -59,26 +60,31 @@ let CalciteInlineEditable = class {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT.intlConfirmChanges;
+    this.mutationObserver = observers.createObserver("mutation", () => this.mutationObserverCallback());
     this.transitionEnd = () => {
       if (!this.editingEnabled && !!this.shouldEmitCancel) {
         this.calciteInlineEditableEditCancel.emit();
       }
     };
     this.enableEditing = () => {
-      this.valuePriorToEditing = this.inputElement.value;
+      var _a, _b;
+      this.valuePriorToEditing = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
       this.editingEnabled = true;
-      this.inputElement.setFocus();
+      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setFocus();
       this.calciteInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
       this.editingEnabled = false;
     };
     this.cancelEditing = () => {
-      this.inputElement.value = this.valuePriorToEditing;
+      if (this.inputElement) {
+        this.inputElement.value = this.valuePriorToEditing;
+      }
       this.disableEditing();
       this.enableEditingButton.setFocus();
     };
     this.escapeKeyHandler = async (e) => {
+      var _a;
       if (e.key !== "Escape") {
         if (e.key === "Tab" && this.shouldShowControls) {
           if (!e.shiftKey && e.target === this.inputElement) {
@@ -88,7 +94,7 @@ let CalciteInlineEditable = class {
           if (!!e.shiftKey && e.target === this.cancelEditingButton) {
             e.preventDefault();
             e.stopPropagation();
-            this.inputElement.setFocus();
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
           }
         }
         return;
@@ -130,10 +136,14 @@ let CalciteInlineEditable = class {
     };
   }
   disabledWatcher(disabled) {
-    this.inputElement.disabled = disabled;
+    if (this.inputElement) {
+      this.inputElement.disabled = disabled;
+    }
   }
   editingEnabledWatcher(newValue, oldValue) {
-    this.inputElement.editingEnabled = newValue;
+    if (this.inputElement) {
+      this.inputElement.editingEnabled = newValue;
+    }
     if (!newValue && !!oldValue) {
       this.shouldEmitCancel = true;
     }
@@ -144,17 +154,15 @@ let CalciteInlineEditable = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     label.connectLabel(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserverCallback();
   }
   disconnectedCallback() {
+    var _a;
     label.disconnectLabel(this);
-  }
-  componentWillLoad() {
-    this.inputElement = this.el.querySelector("calcite-input");
-    this.inputElement.disabled = this.disabled;
-    this.inputElement.label = this.inputElement.label || label.getLabelText(this);
-    this.scale =
-      this.scale || this.inputElement.scale || dom.getElementProp(this.el, "scale", undefined);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     return (index.h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd }, index.h("div", { class: CSS.inputWrapper }, index.h("slot", null)), index.h("div", { class: CSS.controlsWrapper }, index.h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
@@ -194,9 +202,26 @@ let CalciteInlineEditable = class {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  mutationObserverCallback() {
+    var _a;
+    this.updateSlottedInput();
+    this.scale =
+      this.scale || ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.scale) || dom.getElementProp(this.el, "scale", undefined);
+  }
   onLabelClick() {
     this.setFocus();
   }
+  updateSlottedInput() {
+    const inputElement = dom.getSlotted(this.el, {
+      matches: "calcite-input"
+    });
+    this.inputElement = inputElement;
+    if (!inputElement) {
+      return;
+    }
+    this.inputElement.disabled = this.disabled;
+    this.inputElement.label = this.inputElement.label || label.getLabelText(this);
+  }
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }

package/dist/cjs/calcite-input-date-picker.cjs.entry.js

@@ -7,13 +7,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const resources = require('./resources-9f0994fb.js');
-const label = require('./label-1bca211b.js');
-const form = require('./form-4b7c317e.js');
-const popper = require('./popper-09105f6f.js');
+const resources = require('./resources-f70fb01b.js');
+const label = require('./label-6b18ca08.js');
+const form = require('./form-237cf392.js');
+const popper = require('./popper-13a2bb46.js');
 require('./locale-02462821.js');
 require('./number-e813e801.js');
-require('./dom-0de9fb18.js');
+require('./dom-f3df220d.js');
 require('./guid-b270f0db.js');
 
 const calciteInputDatePickerCss = "@-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{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host .menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host .menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host .menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host .menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host .menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host .menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.calendar-picker-wrapper{position:static;width:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-top:0px;padding-bottom:0px;padding-left:0.25rem;padding-right:0.25rem}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{top:1.5rem;position:absolute;left:0px;z-index:10;margin-left:1px;margin-right:1px;background-color:var(--calcite-ui-foreground-1);padding-left:0.625rem;padding-right:0.625rem}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{width:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{width:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{width:398px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);pointer-events:none;visibility:hidden}:host([active]) .menu-container{pointer-events:auto;visibility:visible}.input .calcite-input__wrapper{margin-top:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{top:1.5rem;padding-left:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{height:0.75rem;width:0.75rem;min-width:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{top:2.25rem;padding-left:0.875rem;padding-right:0.875rem}:host([range][layout=vertical][active]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";

package/dist/cjs/calcite-input-message.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 require('./guid-b270f0db.js');
 
 var StatusIconDefaults;

package/dist/cjs/calcite-input-time-picker_2.cjs.entry.js

@@ -9,9 +9,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6b5d2de5.js');
 const guid = require('./guid-b270f0db.js');
 const number = require('./number-e813e801.js');
-const label = require('./label-1bca211b.js');
-const form = require('./form-4b7c317e.js');
-require('./dom-0de9fb18.js');
+const label = require('./label-6b18ca08.js');
+const form = require('./form-237cf392.js');
+require('./dom-f3df220d.js');
 
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter(locale, includeSeconds = true) {

package/dist/cjs/calcite-input.cjs.entry.js

@@ -7,12 +7,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
-const label = require('./label-1bca211b.js');
-const form = require('./form-4b7c317e.js');
+const dom = require('./dom-f3df220d.js');
+const label = require('./label-6b18ca08.js');
+const form = require('./form-237cf392.js');
 const locale = require('./locale-02462821.js');
 const number = require('./number-e813e801.js');
 const math = require('./math-145c80e2.js');
+const observers = require('./observers-79bfb8bc.js');
 require('./guid-b270f0db.js');
 
 const CSS = {
@@ -111,6 +112,7 @@ let CalciteInput = class {
     this.childElType = "input";
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
+    this.mutationObserver = observers.createObserver("mutation", () => this.setDisabledAction());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -149,7 +151,8 @@ let CalciteInput = class {
       }
     };
     this.inputFocusHandler = (event) => {
-      if (event.target !== this.slottedActionEl) {
+      const slottedActionEl = dom.getSlotted(this.el, "action");
+      if (event.target !== slottedActionEl) {
         this.setFocus();
       }
       this.calciteInputFocus.emit({
@@ -393,6 +396,7 @@ let CalciteInput = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.scale = dom.getElementProp(this.el, "scale", this.scale);
     this.status = dom.getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -409,10 +413,14 @@ let CalciteInput = class {
     }
     label.connectLabel(this);
     form.connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.setDisabledAction();
   }
   disconnectedCallback() {
+    var _a;
     label.disconnectLabel(this);
     form.disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   componentWillLoad() {
     var _a, _b;
@@ -421,10 +429,6 @@ let CalciteInput = class {
     this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
     this.requestedIcon = dom.setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
-  componentDidLoad() {
-    this.slottedActionEl = this.el.querySelector("[slot=action]");
-    this.setDisabledAction();
-  }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !number.isValidNumber(newValue)) {
       this.setValue({
@@ -496,10 +500,10 @@ let CalciteInput = class {
     }
   }
   setDisabledAction() {
-    if (!this.slottedActionEl) {
+    const slottedActionEl = dom.getSlotted(this.el, "action");
+    if (!slottedActionEl) {
       return;
     }
-    const slottedActionEl = this.slottedActionEl;
     this.disabled
       ? slottedActionEl.setAttribute("disabled", "")
       : slottedActionEl.removeAttribute("disabled");

package/dist/cjs/calcite-link.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 require('./guid-b270f0db.js');
 
 const calciteLinkCss = "@-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{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:inline}:host a,:host span{position:relative;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host a:focus,:host span:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}calcite-icon{width:1em;height:1em;min-width:unset;min-height:unset}.calcite-link--icon{vertical-align:text-top;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;margin-top:0.125rem}:host([disabled]){pointer-events:none}:host([disabled]) span,:host([disabled]) a{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host .calcite-link--icon.icon-start{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-ui-text-link);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;line-height:inherit;white-space:initial;background-image:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)), -webkit-gradient(linear, left top, left bottom, from(var(--calcite-link-blue-underline)), to(var(--calcite-link-blue-underline)));background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-link-blue-underline), var(--calcite-link-blue-underline));background-position:0% 100%, 100% 100%;background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}";

package/dist/cjs/calcite-list_3.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const conditionalSlot = require('./conditionalSlot-92505fba.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
 require('./guid-b270f0db.js');

package/dist/cjs/calcite-modal.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const observers = require('./observers-79bfb8bc.js');
 const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
@@ -227,7 +227,7 @@ let CalciteModal = class {
       }
     };
     this.updateFooterVisibility = () => {
-      this.hasFooter = !!this.el.querySelector(`[slot=${SLOTS.back}], [slot=${SLOTS.secondary}], [slot=${SLOTS.primary}]`);
+      this.hasFooter = !!dom.getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
   }
   //--------------------------------------------------------------------------

package/dist/cjs/calcite-notice.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const interfaces = require('./interfaces-54651c1c.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
 require('./observers-79bfb8bc.js');
@@ -83,9 +83,6 @@ let CalciteNotice = class {
   componentWillLoad() {
     this.requestedIcon = dom.setRequestedIcon(interfaces.StatusIcons, this.icon, this.color);
   }
-  componentDidLoad() {
-    this.noticeLinkEl = this.el.querySelector("calcite-link");
-  }
   render() {
     const { el } = this;
     const closeButton = (index.h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, index.h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -99,11 +96,12 @@ let CalciteNotice = class {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    if (!this.closeButton && !this.noticeLinkEl) {
+    const noticeLinkEl = this.el.querySelector("calcite-link");
+    if (!this.closeButton && !noticeLinkEl) {
       return;
     }
-    if (this.noticeLinkEl) {
-      this.noticeLinkEl.setFocus();
+    if (noticeLinkEl) {
+      noticeLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();

package/dist/cjs/calcite-option_3.cjs.entry.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const observers = require('./observers-79bfb8bc.js');
-const dom = require('./dom-0de9fb18.js');
-const label = require('./label-1bca211b.js');
-const form = require('./form-4b7c317e.js');
+const dom = require('./dom-f3df220d.js');
+const label = require('./label-6b18ca08.js');
+const form = require('./form-237cf392.js');
 require('./guid-b270f0db.js');
 
 const calciteOptionCss = "@-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{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{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{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}";

package/dist/cjs/calcite-panel.cjs.entry.js

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const dom = require('./dom-0de9fb18.js');
+const dom = require('./dom-f3df220d.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
 const resources = require('./resources-ffe563a2.js');
 const conditionalSlot = require('./conditionalSlot-92505fba.js');
@@ -155,6 +155,20 @@ let CalcitePanel = class {
     }
     (_c = this.containerEl) === null || _c === void 0 ? void 0 : _c.focus();
   }
+  /** Scrolls panel content to a particular set of coordinates.
+   *
+   * ```
+   *   myCalcitePanel.scrollContentTo({
+   *     left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *     top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   *   });
+   * ```
+   */
+  async scrollContentTo(options) {
+    var _a;
+    (_a = this.panelScrollEl) === null || _a === void 0 ? void 0 : _a.scrollTo(options);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -223,7 +237,9 @@ let CalcitePanel = class {
   renderContent() {
     const { el } = this;
     const hasFab = dom.getSlotted(el, SLOTS.fab);
-    return hasFab ? (index.h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 }, index.h("section", { class: CSS.contentContainer }, index.h("slot", null)), this.renderFab())) : (index.h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 }, index.h("slot", null)));
+    const defaultSlotNode = index.h("slot", { key: "default-slot" });
+    const contentWrapperKey = "content-wrapper";
+    return hasFab ? (index.h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, index.h("section", { class: CSS.contentContainer }, defaultSlotNode), this.renderFab())) : (index.h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: (el) => (this.panelScrollEl = el), tabIndex: 0 }, defaultSlotNode));
   }
   renderFab() {
     return (index.h("div", { class: CSS.fabContainer }, index.h("slot", { name: SLOTS.fab })));