@esri/calcite-components 1.0.0-next.365 → 1.0.0-next.369

package/dist/components/calcite-chip2.js

@@ -5,6 +5,7 @@
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 import { g as guid } from './guid.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$1 } from './calcite-icon2.js';
 
 const CSS = {
@@ -61,6 +62,17 @@ let CalciteChip = class extends HTMLElement {
     };
     this.guid = guid();
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -79,7 +91,7 @@ let CalciteChip = class extends HTMLElement {
   renderChipImage() {
     const { el } = this;
     const hasChipImage = getSlotted(el, SLOTS.image);
-    return hasChipImage ? (h("div", { class: CSS.chipImageContainer }, h("slot", { name: SLOTS.image }))) : null;
+    return hasChipImage ? (h("div", { class: CSS.chipImageContainer, key: "image" }, h("slot", { name: SLOTS.image }))) : null;
   }
   render() {
     const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));

package/dist/components/calcite-link2.js

@@ -20,6 +20,11 @@ let CalciteLink = class extends HTMLElement {
     //--------------------------------------------------------------------------
     /** 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";
     //--------------------------------------------------------------------------
@@ -43,13 +48,19 @@ let CalciteLink = class extends HTMLElement {
     this.childElType = this.href ? "a" : "span";
   }
   render() {
-    const dir = getElementDir(this.el);
+    const { download, el } = this;
+    const dir = getElementDir(el);
     const iconStartEl = (h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (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 (h(Host, { role: "presentation" }, h(Tag, { class: { [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, h("slot", null), this.iconEnd ? iconEndEl : null)));
+    return (h(Host, { role: "presentation" }, h(Tag, { class: { [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, h("slot", null), this.iconEnd ? iconEndEl : null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -68,6 +79,7 @@ let CalciteLink = class extends HTMLElement {
 };
 CalciteLink = /*@__PURE__*/ proxyCustomElement(CalciteLink, [1, "calcite-link", {
     "disabled": [516],
+    "download": [520],
     "href": [513],
     "iconEnd": [513, "icon-end"],
     "iconFlipRtl": [513, "icon-flip-rtl"],

package/dist/components/calcite-list-item.js

@@ -4,6 +4,7 @@
  */
 import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 
 const CSS = {
   container: "container",
@@ -48,6 +49,17 @@ let CalciteListItem$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/calcite-modal.js

@@ -5,6 +5,7 @@
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { f as focusElement, b as getSlotted, h as ensureId, i as isCalciteFocusable } from './dom.js';
 import { c as createObserver } from './observers.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$4 } from './calcite-icon2.js';
 import { d as defineCustomElement$3 } from './calcite-loader2.js';
 import { d as defineCustomElement$2 } from './calcite-scrim2.js';
@@ -244,11 +245,13 @@ let CalciteModal$1 = class extends HTMLElement {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
+    connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
     var _a;
     this.removeOverflowHiddenClass();
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectConditionalSlotComponent(this);
   }
   render() {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: "modal", onTransitionEnd: this.transitionEnd }, h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }), h("div", { class: CSS.header }, this.renderCloseButton(), h("header", { class: CSS.title }, h("slot", { name: CSS.header }))), h("div", { class: {
@@ -258,10 +261,10 @@ let CalciteModal$1 = class extends HTMLElement {
       }, ref: (el) => (this.modalContent = el) }, h("slot", { name: SLOTS.content })), this.renderFooter(), h("div", { "data-focus-fence": true, onFocus: this.focusFirstElement, tabindex: "0" }))));
   }
   renderFooter() {
-    return this.hasFooter ? (h("div", { class: CSS.footer }, h("span", { class: CSS.back }, h("slot", { name: SLOTS.back })), h("span", { class: CSS.secondary }, h("slot", { name: SLOTS.secondary })), h("span", { class: CSS.primary }, h("slot", { name: SLOTS.primary })))) : null;
+    return this.hasFooter ? (h("div", { class: CSS.footer, key: "footer" }, h("span", { class: CSS.back }, h("slot", { name: SLOTS.back })), h("span", { class: CSS.secondary }, h("slot", { name: SLOTS.secondary })), h("span", { class: CSS.primary }, h("slot", { name: SLOTS.primary })))) : null;
   }
   renderCloseButton() {
-    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+    return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose }, 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/components/calcite-notice.js

@@ -5,6 +5,7 @@
 import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { S as StatusIcons } from './interfaces.js';
 import { s as setRequestedIcon, b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 
 const TEXT = {
@@ -70,6 +71,12 @@ let CalciteNotice$1 = class extends HTMLElement {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }

package/dist/components/calcite-panel.js

@@ -6,6 +6,7 @@ import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@sten
 import { a as getElementDir, b as getSlotted } from './dom.js';
 import { C as CalciteHeading } from './CalciteHeading.js';
 import { S as SLOTS$1, d as defineCustomElement$7 } from './calcite-action-menu2.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$8 } from './calcite-action2.js';
 import { d as defineCustomElement$6 } from './calcite-icon2.js';
 import { d as defineCustomElement$5 } from './calcite-loader2.js';
@@ -129,6 +130,17 @@ let CalcitePanel$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Methods
   //
   // --------------------------------------------------------------------------
@@ -168,7 +180,7 @@ let CalcitePanel$1 = class extends HTMLElement {
    * Allows user to override the entire header-content node.
    */
   renderHeaderSlottedContent() {
-    return (h("div", { class: CSS.headerContent, key: "header-content" }, h("slot", { name: SLOTS.headerContent })));
+    return (h("div", { class: CSS.headerContent, key: "slotted-header-content" }, h("slot", { name: SLOTS.headerContent })));
   }
   renderHeaderStartActions() {
     const { el } = this;
@@ -186,7 +198,7 @@ let CalcitePanel$1 = class extends HTMLElement {
   renderMenu() {
     const { el, intlOptions, menuOpen } = this;
     const hasMenuItems = getSlotted(el, SLOTS.headerMenuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" }, h("calcite-action", { icon: ICONS.menu, slot: SLOTS$1.trigger, text: intlOptions || TEXT.options }), h("slot", { name: SLOTS.headerMenuActions }))) : null;
+    return hasMenuItems ? (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], key: "menu", label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" }, h("calcite-action", { icon: ICONS.menu, slot: SLOTS$1.trigger, text: intlOptions || TEXT.options }), h("slot", { name: SLOTS.headerMenuActions }))) : null;
   }
   renderHeaderNode() {
     const { el, showBackButton } = this;
@@ -204,18 +216,11 @@ let CalcitePanel$1 = class extends HTMLElement {
       headerMenuNode ||
       showBackButton ? (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 = getSlotted(el, SLOTS.footer);
-    return hasFooterSlottedContent ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
-  }
-  renderFooterActions() {
-    const { el } = this;
     const hasFooterActions = getSlotted(el, SLOTS.footerActions);
-    return hasFooterActions ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerActions }))) : null;
+    return hasFooterSlottedContent || hasFooterActions ? (h("footer", { class: CSS.footer, key: "footer" }, hasFooterSlottedContent ? h("slot", { key: "footer-slot", name: SLOTS.footer }) : null, hasFooterActions ? h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions }) : null)) : null;
   }
   renderContent() {
     const { el } = this;
@@ -227,7 +232,7 @@ let CalcitePanel$1 = class extends HTMLElement {
   }
   render() {
     const { dismissed, disabled, dismissible, loading, panelKeyDownHandler } = this;
-    const panelNode = (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 = (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 (h(Fragment, null, loading || disabled ? h("calcite-scrim", { loading: loading }) : null, panelNode));
   }
   get el() { return this; }

package/dist/components/calcite-pick-list-group.js

@@ -5,6 +5,7 @@
 import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 import { C as CalciteHeading, c as constrainHeadingLevel } from './CalciteHeading.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 
 const CSS = {
   heading: "heading",
@@ -26,6 +27,17 @@ let CalcitePickListGroup$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/calcite-pick-list-item2.js

@@ -5,6 +5,7 @@
 import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { I as ICON_TYPES } from './resources3.js';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$3 } from './calcite-action2.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 import { d as defineCustomElement$1 } from './calcite-loader2.js';
@@ -125,6 +126,17 @@ let CalcitePickListItem = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/calcite-shell-center-row.js

@@ -4,6 +4,7 @@
  */
 import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 
 const CSS = {
   actionBarContainer: "action-bar-container",
@@ -40,6 +41,17 @@ let CalciteShellCenterRow$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -47,7 +59,7 @@ let CalciteShellCenterRow$1 = class extends HTMLElement {
     const { el } = this;
     const contentNode = (h("div", { class: CSS.content }, h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
-    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer }, h("slot", { name: SLOTS.actionBar }))) : null;
+    const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer, key: "action-bar" }, h("slot", { name: SLOTS.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
       children.reverse();

package/dist/components/calcite-shell-panel.js

@@ -5,6 +5,7 @@
 import { HTMLElement, createEvent, h, forceUpdate, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir, b as getSlotted } from './dom.js';
 import { c as clamp } from './math.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 
 const CSS = {
   container: "container",
@@ -169,7 +170,11 @@ let CalciteShellPanel$1 = class extends HTMLElement {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
   disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
     this.disconnectSeparator();
   }
   componentDidLoad() {
@@ -183,14 +188,14 @@ let CalciteShellPanel$1 = class extends HTMLElement {
   renderHeader() {
     const { el } = this;
     const hasHeader = getSlotted(el, SLOTS.header);
-    return hasHeader ? (h("div", { class: CSS.contentHeader }, h("slot", { name: SLOTS.header }))) : null;
+    return hasHeader ? (h("div", { class: CSS.contentHeader, key: "header" }, h("slot", { name: SLOTS.header }))) : null;
   }
   render() {
     const { collapsed, detached, position, initialContentWidth, contentWidth, contentWidthMax, contentWidthMin, intlResize, resizable } = this;
     const allowResizing = !detached && resizable;
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null }, this.renderHeader(), h("div", { class: CSS.contentBody }, h("slot", null))));
-    const separatorNode = allowResizing ? (h("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
-    const actionBarNode = h("slot", { name: SLOTS.actionBar });
+    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, key: "content", ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null }, this.renderHeader(), h("div", { class: CSS.contentBody }, h("slot", null))));
+    const separatorNode = allowResizing ? (h("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
+    const actionBarNode = h("slot", { key: "action-bar", name: SLOTS.actionBar });
     const mainNodes = [actionBarNode, contentNode, separatorNode];
     if (position === "end") {
       mainNodes.reverse();

package/dist/components/calcite-shell.js

@@ -4,6 +4,7 @@
  */
 import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 
 const CSS = {
   main: "main",
@@ -39,12 +40,23 @@ let CalciteShell$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
   renderHeader() {
     const hasHeader = !!getSlotted(this.el, SLOTS.header);
-    return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+    return hasHeader ? h("slot", { key: "header", name: SLOTS.header }) : null;
   }
   renderContent() {
     const content = !!this.contentBehind
@@ -62,7 +74,7 @@ let CalciteShell$1 = class extends HTMLElement {
   }
   renderFooter() {
     const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-    return hasFooter ? (h("div", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
+    return hasFooter ? (h("div", { class: CSS.footer, key: "footer" }, h("slot", { name: SLOTS.footer }))) : null;
   }
   renderMain() {
     const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);

package/dist/components/calcite-slider.js

@@ -10,7 +10,7 @@ import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
 import { d as defineCustomElement$2 } from './calcite-graph2.js';
 
-const calciteSliderCss = "@charset \"UTF-8\";@-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}.scale--s{--calcite-slider-handle-size:10px;--calcite-slider-handle-extension-height:6.5px;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:14px;--calcite-slider-handle-extension-height:8px;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:16px;--calcite-slider-handle-extension-height:10.5px;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;padding:calc(var(--calcite-slider-handle-size) * 0.5);margin:calc(var(--calcite-slider-handle-size) * 0.5) 0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  )}:host([disabled]){pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-6px}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-8px}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-9px}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-width:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;-webkit-transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;top:0px;bottom:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);outline-offset:0;outline-color:transparent;height:var(--calcite-slider-handle-size);width:var(--calcite-slider-handle-size);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease, -webkit-box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{width:0.125rem;height:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb.thumb--minValue{-webkit-transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-2px}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-23px}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-30px}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-32px}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-top:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-bottom:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-33px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-44px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-49px}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{position:relative;height:0.125rem;border-radius:0px;background-color:var(--calcite-ui-border-2);-webkit-transition:all var(--calcite-internal-animation-timing-medium) ease-in;transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;top:0px;height:0.125rem;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;width:100%;content:\"\";top:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);height:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}.tick{position:absolute;height:0.25rem;width:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-ui-border-input);border-color:var(--calcite-ui-foreground-1);top:-2px;pointer-events:none;-webkit-margin-start:calc(-1 * 0.125rem);margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{pointer-events:none;margin-top:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.tick__label--min{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing)}.tick__label--max{-webkit-transition:opacity var(--calcite-internal-animation-timing-fast);transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3);height:48px}:host([label-ticks][ticks]) .container{padding-bottom:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-bottom:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-bottom:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-top:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-bottom:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::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}";
+const calciteSliderCss = "@charset \"UTF-8\";@-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}.scale--s{--calcite-slider-handle-size:10px;--calcite-slider-handle-extension-height:6.5px;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:14px;--calcite-slider-handle-extension-height:8px;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:16px;--calcite-slider-handle-extension-height:10.5px;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;padding:calc(var(--calcite-slider-handle-size) * 0.5);margin:calc(var(--calcite-slider-handle-size) * 0.5) 0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  )}:host([disabled]){pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-6px}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-8px}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-9px}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-width:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;-webkit-transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;top:0px;bottom:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle__label.hyphen--wrap{display:-ms-flexbox;display:flex}.thumb .handle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);outline-offset:0;outline-color:transparent;height:var(--calcite-slider-handle-size);width:var(--calcite-slider-handle-size);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease, -webkit-box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{width:0.125rem;height:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb.thumb--minValue{-webkit-transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-2px}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-23px}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-30px}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-32px}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-top:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-bottom:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-33px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-44px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-49px}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{position:relative;height:0.125rem;border-radius:0px;background-color:var(--calcite-ui-border-2);-webkit-transition:all var(--calcite-internal-animation-timing-medium) ease-in;transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;top:0px;height:0.125rem;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;width:100%;content:\"\";top:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);height:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}.tick{position:absolute;height:0.25rem;width:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-ui-border-input);border-color:var(--calcite-ui-foreground-1);top:-2px;pointer-events:none;-webkit-margin-start:calc(-1 * 0.125rem);margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{pointer-events:none;margin-top:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.tick__label--min{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing)}.tick__label--max{-webkit-transition:opacity var(--calcite-internal-animation-timing-fast);transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3);height:48px}:host([label-ticks][ticks]) .container{padding-bottom:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-bottom:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-bottom:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-top:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-bottom:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::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}";
 
 let CalciteSlider$1 = class extends HTMLElement {
   constructor() {
@@ -574,7 +574,7 @@ let CalciteSlider$1 = class extends HTMLElement {
     const hyphenLabel = leftValueLabel;
     const labelOffset = labelFontSize / 2;
     if (labelTransformedOverlap > 0) {
-      hyphenLabel.classList.add("hyphen");
+      hyphenLabel.classList.add("hyphen", "hyphen--wrap");
       if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
         // Neither handle overlaps the host boundary
         let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
@@ -620,7 +620,7 @@ let CalciteSlider$1 = class extends HTMLElement {
       }
     }
     else {
-      hyphenLabel.classList.remove("hyphen");
+      hyphenLabel.classList.remove("hyphen", "hyphen--wrap");
       leftValueLabel.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
       rightValueLabel.style.transform = `translateX(${rightValueLabelStaticHostOffset}px)`;

package/dist/components/calcite-tile2.js

@@ -4,6 +4,7 @@
  */
 import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 import { d as defineCustomElement$1 } from './calcite-link2.js';
 
@@ -42,6 +43,17 @@ let CalciteTile = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/calcite-tip.js

@@ -6,6 +6,7 @@ import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@sten
 import { H as HEADING_LEVEL$1 } from './resources4.js';
 import { b as getSlotted } from './dom.js';
 import { C as CalciteHeading, c as constrainHeadingLevel } from './CalciteHeading.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$4 } from './calcite-action2.js';
 import { d as defineCustomElement$3 } from './calcite-icon2.js';
 import { d as defineCustomElement$2 } from './calcite-loader2.js';
@@ -67,6 +68,17 @@ let CalciteTip$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -85,7 +97,7 @@ let CalciteTip$1 = class extends HTMLElement {
   }
   renderImageFrame() {
     const { el } = this;
-    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame }, h("slot", { name: SLOTS.thumbnail }))) : null;
+    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame, key: "thumbnail" }, h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderInfoNode() {
     return (h("div", { class: CSS.info }, h("slot", null)));

package/dist/components/calcite-tree-item.js

@@ -5,6 +5,7 @@
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { T as TreeSelectionMode } from './interfaces2.js';
 import { b as getSlotted, a as getElementDir, C as CSS_UTILITY, e as filterDirectChildren, n as nodeListToArray } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$3 } from './calcite-checkbox2.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 
@@ -99,6 +100,10 @@ let CalciteTreeItem$1 = class extends HTMLElement {
       const { expanded } = this.parentTreeItem;
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
     }
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");

package/dist/components/calcite-value-list-item.js

@@ -7,6 +7,7 @@ import { I as ICON_TYPES } from './resources3.js';
 import { g as guid } from './guid.js';
 import { S as SLOTS$1, a as CSS, d as defineCustomElement$2 } from './calcite-pick-list-item2.js';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$5 } from './calcite-action2.js';
 import { d as defineCustomElement$4 } from './calcite-icon2.js';
 import { d as defineCustomElement$3 } from './calcite-loader2.js';
@@ -78,6 +79,17 @@ let CalciteValueListItem$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/conditionalSlot.js

@@ -0,0 +1,40 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { forceUpdate } from '@stencil/core/internal/client';
+import { c as createObserver } from './observers.js';
+
+const observed = new Set();
+let mutationObserver;
+const observerOptions = { childList: true };
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ */
+function connectConditionalSlotComponent(component) {
+  if (!mutationObserver) {
+    mutationObserver = createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(component.el, observerOptions);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ */
+function disconnectConditionalSlotComponent(component) {
+  observed.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element] of observed.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    forceUpdate(target);
+  });
+}
+
+export { connectConditionalSlotComponent as c, disconnectConditionalSlotComponent as d };