@esri/calcite-components 1.0.0-beta.74 → 1.0.0-beta.75

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

@@ -7,9 +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 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');
@@ -109,6 +109,8 @@ let CalciteInput = class {
     this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
+    /** whether the value of the input was changed as a result of user typing or not */
+    this.internalValueChange = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -128,11 +130,15 @@ let CalciteInput = class {
       }
     };
     this.clearInputValue = (nativeEvent) => {
-      this.setValue("", nativeEvent, true);
+      this.setValue({
+        committing: true,
+        nativeEvent,
+        value: ""
+      });
     };
     this.inputBlurHandler = () => {
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        this.setValue({ value: this.value });
       }
       this.calciteInputBlur.emit({
         element: this.childEl,
@@ -156,7 +162,10 @@ let CalciteInput = class {
       if (this.disabled || this.readOnly) {
         return;
       }
-      this.setValue(nativeEvent.target.value, nativeEvent);
+      this.setValue({
+        nativeEvent,
+        value: nativeEvent.target.value
+      });
     };
     this.inputKeyDownHandler = (event) => {
       if (this.disabled || this.readOnly) {
@@ -176,11 +185,17 @@ let CalciteInput = class {
         if (!number.isValidNumber(delocalizedValue)) {
           nativeEvent.preventDefault();
         }
-        this.setValue(number.parseNumberString(delocalizedValue), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: number.parseNumberString(delocalizedValue)
+        });
         this.childNumberEl.value = this.localizedValue;
       }
       else {
-        this.setValue(locale.delocalizeNumberString(value, this.locale), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: locale.delocalizeNumberString(value, this.locale)
+        });
       }
     };
     this.inputNumberKeyDownHandler = (event) => {
@@ -250,6 +265,9 @@ let CalciteInput = class {
       const inputMin = this.minString ? parseFloat(this.minString) : null;
       const valueNudgeDelayInMs = 100;
       this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      if (this.nudgeNumberValueIntervalId) {
+        window.clearInterval(this.nudgeNumberValueIntervalId);
+      }
       let firstValueNudge = true;
       this.nudgeNumberValueIntervalId = window.setInterval(() => {
         if (firstValueNudge) {
@@ -273,18 +291,44 @@ let CalciteInput = class {
     this.setChildNumberElRef = (el) => {
       this.childNumberEl = el;
     };
-    this.setLocalizedValue = (value) => {
-      this.localizedValue = locale.localizeNumberString(value, this.locale, this.groupSeparator);
+    this.setInputValue = (newInputValue) => {
+      if (this.type === "text" && !this.childEl) {
+        return;
+      }
+      if (this.type === "number" && !this.childNumberEl) {
+        return;
+      }
+      this[`child${this.type === "number" ? "Number" : ""}El`].value = newInputValue;
+    };
+    this.setPreviousValue = (newPreviousValue) => {
+      this.previousValue =
+        this.type === "number"
+          ? number.isValidNumber(newPreviousValue)
+            ? newPreviousValue
+            : ""
+          : newPreviousValue;
     };
-    this.setValue = (value, nativeEvent, committing = false) => {
-      const previousValue = this.value;
+    this.setValue = ({ committing = false, nativeEvent, origin = "internal", value }) => {
+      const previousLocalizedValue = this.type === "number"
+        ? locale.localizeNumberString(this.previousValue, this.locale, this.groupSeparator)
+        : "";
+      const sanitizedValue = this.type === "number" ? number.sanitizeNumberString(value) : value;
+      const newValue = this.type === "number" && value && !sanitizedValue
+        ? number.isValidNumber(this.previousValue)
+          ? this.previousValue
+          : ""
+        : sanitizedValue;
+      const newLocalizedValue = this.type === "number"
+        ? locale.localizeNumberString(newValue, this.locale, this.groupSeparator)
+        : "";
+      this.internalValueChange = origin === "internal";
+      this.setPreviousValue(this.value);
+      this.value = newValue;
       if (this.type === "number") {
-        const sanitizedValue = number.sanitizeNumberString(value);
-        this.value = sanitizedValue;
-        this.setLocalizedValue(sanitizedValue);
+        this.localizedValue = newLocalizedValue;
       }
-      else {
-        this.value = value;
+      if (origin === "external") {
+        this.setInputValue(this.type === "number" ? newLocalizedValue : newValue);
       }
       if (nativeEvent) {
         const calciteInputInputEvent = this.calciteInputInput.emit({
@@ -293,8 +337,8 @@ let CalciteInput = class {
           value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
-          this.value = previousValue;
-          this.setLocalizedValue(previousValue);
+          this.value = this.previousValue;
+          this.localizedValue = previousLocalizedValue;
         }
         else if (committing) {
           this.calciteInputChange.emit();
@@ -319,17 +363,20 @@ let CalciteInput = class {
     this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
   }
   valueWatcher(newValue) {
-    if (newValue == null) {
-      this.value = "";
-      return;
-    }
-    if (this.type === "number" &&
-      this.localizedValue !== locale.localizeNumberString(newValue, this.locale)) {
-      this.setLocalizedValue(newValue);
-    }
-    else if (this.childEl && this.childEl.value !== newValue) {
-      this.childEl.value = newValue;
+    if (!this.internalValueChange) {
+      this.setValue({
+        origin: "external",
+        value: newValue == null
+          ? ""
+          : this.type === "number"
+            ? number.isValidNumber(newValue)
+              ? newValue
+              : this.previousValue || ""
+            : newValue
+      });
+      this.warnAboutInvalidNumberValue(newValue);
     }
+    this.internalValueChange = false;
   }
   updateRequestedIcon() {
     this.requestedIcon = dom.setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -352,13 +399,13 @@ let CalciteInput = class {
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    if (this.type === "number" && this.value) {
-      if (number.isValidNumber(this.value)) {
-        this.localizedValue = locale.localizeNumberString(this.value, this.locale, this.groupSeparator);
-      }
-      else {
-        this.value = "";
-      }
+    this.setPreviousValue(this.value);
+    if (this.type === "number") {
+      this.warnAboutInvalidNumberValue(this.value);
+      this.setValue({
+        origin: "loading",
+        value: number.isValidNumber(this.value) ? this.value : ""
+      });
     }
     label.connectLabel(this);
     form.connectForm(this);
@@ -380,7 +427,9 @@ let CalciteInput = class {
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !number.isValidNumber(newValue)) {
-      this.value = oldValue;
+      this.setValue({
+        value: oldValue
+      });
       return false;
     }
     return true;
@@ -415,10 +464,16 @@ let CalciteInput = class {
       : nudgedValue;
     const inputValPlaces = math.decimalPlaces(inputVal);
     const inputStepPlaces = math.decimalPlaces(inputStep);
-    this.setValue(finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces)), nativeEvent, true);
+    this.setValue({
+      committing: true,
+      nativeEvent,
+      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+    });
   }
   onFormReset() {
-    this.setValue(this.defaultValue);
+    this.setValue({
+      value: this.defaultValue
+    });
   }
   syncHiddenFormInput(input) {
     var _a, _b, _c, _d;
@@ -449,6 +504,11 @@ let CalciteInput = class {
       ? slottedActionEl.setAttribute("disabled", "")
       : slottedActionEl.removeAttribute("disabled");
   }
+  warnAboutInvalidNumberValue(value) {
+    if (this.type === "number" && value && !number.isValidNumber(value)) {
+      console.warn(`The specified value "${value}" cannot be parsed, or is out of range.`);
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

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%}";
@@ -22,6 +22,11 @@ let CalciteLink = class {
     //--------------------------------------------------------------------------
     /** is the link disabled  */
     this.disabled = false;
+    /** Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+     * Without a value, the browser will suggest a filename/extension
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+     */
+    this.download = false;
     /** the node type of the rendered child element */
     this.childElType = "span";
     //--------------------------------------------------------------------------
@@ -45,13 +50,19 @@ let CalciteLink = class {
     this.childElType = this.href ? "a" : "span";
   }
   render() {
-    const dir = dom.getElementDir(this.el);
+    const { download, el } = this;
+    const dir = dom.getElementDir(el);
     const iconStartEl = (index.h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (index.h("calcite-icon", { class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const Tag = this.childElType;
     const role = this.childElType === "span" ? "link" : null;
     const tabIndex = this.disabled ? -1 : this.childElType === "span" ? 0 : null;
-    return (index.h(index.Host, { role: "presentation" }, index.h(Tag, { class: { [dom.CSS_UTILITY.rtl]: dir === "rtl" }, href: Tag === "a" && this.href, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, index.h("slot", null), this.iconEnd ? iconEndEl : null)));
+    return (index.h(index.Host, { role: "presentation" }, index.h(Tag, { class: { [dom.CSS_UTILITY.rtl]: dir === "rtl" },
+      /*
+      When the 'download' property of type 'boolean | string' is set to true, the value is "".
+      This works around that issue for now.
+      */
+      download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, index.h("slot", null), this.iconEnd ? iconEndEl : null)));
   }
   //--------------------------------------------------------------------------
   //

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

@@ -7,9 +7,11 @@
 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');
+require('./observers-79bfb8bc.js');
 
 const CSS$2 = {
   container: "container"
@@ -84,6 +86,17 @@ let CalciteListItem = class {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    conditionalSlot.connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

package/dist/cjs/calcite-modal.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 observers = require('./observers-41837607.js');
+const dom = require('./dom-f3df220d.js');
+const observers = require('./observers-79bfb8bc.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
 
 /**
@@ -244,11 +245,13 @@ let CalciteModal = class {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
+    conditionalSlot.connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
     var _a;
     this.removeOverflowHiddenClass();
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    conditionalSlot.disconnectConditionalSlotComponent(this);
   }
   render() {
     return (index.h(index.Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, index.h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), index.h("div", { class: "modal", onTransitionEnd: this.transitionEnd }, index.h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), index.h("div", { class: CSS.header }, this.renderCloseButton(), index.h("header", { class: CSS.title }, index.h("slot", { name: CSS.header }))), index.h("div", { class: {
@@ -258,10 +261,10 @@ let CalciteModal = class {
       }, ref: (el) => (this.modalContent = el) }, index.h("slot", { name: SLOTS.content })), this.renderFooter(), index.h("div", { "data-focus-fence": true, onFocus: this.focusFirstElement, tabindex: "0" }))));
   }
   renderFooter() {
-    return this.hasFooter ? (index.h("div", { class: CSS.footer }, index.h("span", { class: CSS.back }, index.h("slot", { name: SLOTS.back })), index.h("span", { class: CSS.secondary }, index.h("slot", { name: SLOTS.secondary })), index.h("span", { class: CSS.primary }, index.h("slot", { name: SLOTS.primary })))) : null;
+    return this.hasFooter ? (index.h("div", { class: CSS.footer, key: "footer" }, index.h("span", { class: CSS.back }, index.h("slot", { name: SLOTS.back })), index.h("span", { class: CSS.secondary }, index.h("slot", { name: SLOTS.secondary })), index.h("span", { class: CSS.primary }, index.h("slot", { name: SLOTS.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (index.h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, index.h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+    return !this.disableCloseButton ? (index.h("button", { "aria-label": this.intlClose, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, index.h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));

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

@@ -8,8 +8,10 @@ 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');
 
 const TEXT = {
   close: "Close"
@@ -72,6 +74,12 @@ let CalciteNotice = class {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    conditionalSlot.connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+  }
   componentWillLoad() {
     this.requestedIcon = dom.setRequestedIcon(interfaces.StatusIcons, this.icon, this.color);
   }

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

@@ -7,10 +7,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const observers = require('./observers-41837607.js');
-const dom = require('./dom-0de9fb18.js');
-const label = require('./label-1bca211b.js');
-const form = require('./form-4b7c317e.js');
+const observers = require('./observers-79bfb8bc.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,10 +7,12 @@
 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');
 require('./guid-b270f0db.js');
+require('./observers-79bfb8bc.js');
 
 const CSS = {
   backButton: "back-button",
@@ -126,6 +128,17 @@ let CalcitePanel = class {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    conditionalSlot.connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Methods
   //
   // --------------------------------------------------------------------------
@@ -165,7 +178,7 @@ let CalcitePanel = class {
    * Allows user to override the entire header-content node.
    */
   renderHeaderSlottedContent() {
-    return (index.h("div", { class: CSS.headerContent, key: "header-content" }, index.h("slot", { name: SLOTS.headerContent })));
+    return (index.h("div", { class: CSS.headerContent, key: "slotted-header-content" }, index.h("slot", { name: SLOTS.headerContent })));
   }
   renderHeaderStartActions() {
     const { el } = this;
@@ -183,7 +196,7 @@ let CalcitePanel = class {
   renderMenu() {
     const { el, intlOptions, menuOpen } = this;
     const hasMenuItems = dom.getSlotted(el, SLOTS.headerMenuActions);
-    return hasMenuItems ? (index.h("calcite-action-menu", { flipPlacements: ["top", "bottom"], label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" }, index.h("calcite-action", { icon: ICONS.menu, slot: resources.SLOTS.trigger, text: intlOptions || TEXT.options }), index.h("slot", { name: SLOTS.headerMenuActions }))) : null;
+    return hasMenuItems ? (index.h("calcite-action-menu", { flipPlacements: ["top", "bottom"], key: "menu", label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" }, index.h("calcite-action", { icon: ICONS.menu, slot: resources.SLOTS.trigger, text: intlOptions || TEXT.options }), index.h("slot", { name: SLOTS.headerMenuActions }))) : null;
   }
   renderHeaderNode() {
     const { el, showBackButton } = this;
@@ -201,18 +214,11 @@ let CalcitePanel = class {
       headerMenuNode ||
       showBackButton ? (index.h("header", { class: CSS.header }, backButtonNode, actionsNodeStart, headerContentNode, actionsNodeEnd, headerMenuNode)) : null;
   }
-  /**
-   * Allows user to override the entire footer node.
-   */
-  renderFooterSlottedContent() {
+  renderFooterNode() {
     const { el } = this;
     const hasFooterSlottedContent = dom.getSlotted(el, SLOTS.footer);
-    return hasFooterSlottedContent ? (index.h("footer", { class: CSS.footer }, index.h("slot", { name: SLOTS.footer }))) : null;
-  }
-  renderFooterActions() {
-    const { el } = this;
     const hasFooterActions = dom.getSlotted(el, SLOTS.footerActions);
-    return hasFooterActions ? (index.h("footer", { class: CSS.footer }, index.h("slot", { name: SLOTS.footerActions }))) : null;
+    return hasFooterSlottedContent || hasFooterActions ? (index.h("footer", { class: CSS.footer, key: "footer" }, hasFooterSlottedContent ? index.h("slot", { key: "footer-slot", name: SLOTS.footer }) : null, hasFooterActions ? index.h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions }) : null)) : null;
   }
   renderContent() {
     const { el } = this;
@@ -224,7 +230,7 @@ let CalcitePanel = class {
   }
   render() {
     const { dismissed, disabled, dismissible, loading, panelKeyDownHandler } = this;
-    const panelNode = (index.h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderFooterSlottedContent() || this.renderFooterActions()));
+    const panelNode = (index.h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderFooterNode()));
     return (index.h(index.Fragment, null, loading || disabled ? index.h("calcite-scrim", { loading: loading }) : null, panelNode));
   }
   get el() { return index.getElement(this); }

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

@@ -7,10 +7,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const resources = require('./resources-405cc2c4.js');
-const observers = require('./observers-41837607.js');
-const dom = require('./dom-0de9fb18.js');
+const resources = require('./resources-95073e41.js');
+const observers = require('./observers-79bfb8bc.js');
+const dom = require('./dom-f3df220d.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./array-a5dedf5a.js');
 require('./debounce-95979061.js');
 require('./guid-b270f0db.js');
@@ -155,6 +156,17 @@ let CalcitePickListGroup = class {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    conditionalSlot.connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -263,6 +275,17 @@ let CalcitePickListItem = class {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    conditionalSlot.connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    conditionalSlot.disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

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

@@ -7,9 +7,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.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 dom = require('./dom-f3df220d.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
 
 const CSS = {

package/dist/cjs/calcite-radio-button.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 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 array = require('./array-a5dedf5a.js');
 
 const CSS = {

package/dist/cjs/calcite-radio-group_2.cjs.entry.js

@@ -7,9 +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 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 calciteRadioGroupCss = "@-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:-ms-flexbox;display:flex;background-color:var(--calcite-ui-foreground-1);width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:start;align-self:flex-start}:host([width=full]){width:100%;min-width:-moz-fit-content;min-width:-webkit-fit-content;min-width:fit-content}:host([width=full]) ::slotted(calcite-radio-group-item){-ms-flex:1 1 auto;flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-radio-group-item){-ms-flex-pack:start;justify-content:flex-start}::slotted(calcite-radio-group-item[checked]),::slotted(calcite-radio-group-item:focus){z-index:0}:host([disabled]){pointer-events:none;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-rating.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 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 TEXT = {
   rating: "Rating",