@esri/solutions-components 0.6.5 → 0.6.6

package/dist/components/popover.js

@@ -6,14 +6,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
-import { i as isPrimaryPointerButton, t as toAriaBoolean, j as focusFirstTabbable, q as queryElementRoots } from './dom.js';
+import { i as isPrimaryPointerButton, t as toAriaBoolean, h as focusFirstTabbable, q as queryElementRoots } from './dom.js';
 import { g as guid } from './guid.js';
-import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { H as Heading } from './Heading.js';
-import { c as connectLocalized, a as disconnectLocalized } from './locale2.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { i as isActivationKey } from './key.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
 import { F as FloatingArrow } from './FloatingArrow.js';
 import { d as defineCustomElement$3 } from './action.js';
@@ -22,8 +22,8 @@ import { d as defineCustomElement$1 } from './loader.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
   container: "container",
@@ -34,7 +34,7 @@ const CSS = {
   hasHeader: "has-header",
   header: "header",
   headerContent: "header-content",
-  heading: "heading"
+  heading: "heading",
 };
 const defaultPopoverPlacement = "auto";
 const ARIA_CONTROLS = "aria-controls";
@@ -42,8 +42,8 @@ const ARIA_EXPANDED = "aria-expanded";
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 class PopoverManager {
   constructor() {
@@ -124,7 +124,7 @@ class PopoverManager {
   }
 }
 
-const popoverCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity: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;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{--calcite-floating-ui-z-index:var(--calcite-popover-z-index, var(--calcite-app-z-index-popup));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}.calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-app-z-index) * -1);fill:var(--calcite-ui-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-ui-border-3)}:host([scale=s]) .heading{padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .heading{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .heading{padding-inline:1.25rem;padding-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:flex;block-size:100%;flex-direction:row;flex-wrap:nowrap;border-radius:0.25rem;color:var(--calcite-ui-text-1)}.container.has-header{flex-direction:column}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:flex;overflow:hidden;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%}";
+const popoverCss = ":host{--calcite-floating-ui-z-index:var(--calcite-popover-z-index, var(--calcite-app-z-index-popup));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}.calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-app-z-index) * -1);fill:var(--calcite-ui-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-ui-border-3)}:host([scale=s]) .heading{padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .heading{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .heading{padding-inline:1.25rem;padding-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-ui-border-3)}.heading{margin:0px;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:flex;block-size:100%;flex-direction:row;flex-wrap:nowrap;border-radius:0.25rem;color:var(--calcite-ui-text-1)}.container.has-header{flex-direction:column}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:flex;overflow:hidden;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
 
 const manager = new PopoverManager();
 const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLElement {
@@ -152,7 +152,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     // --------------------------------------------------------------------------
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
-      connectOpenCloseComponent(this);
     };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
@@ -167,7 +166,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
       const { el, referenceElement, effectiveReferenceElement } = this;
       if (warn && referenceElement && !effectiveReferenceElement) {
         console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
-          el
+          el,
         });
       }
       this.addReferences();
@@ -238,7 +237,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     this.effectiveReferenceElement = undefined;
     this.defaultMessages = undefined;
   }
-  handlefocusTrapDisabled(focusTrapDisabled) {
+  handleFocusTrapDisabled(focusTrapDisabled) {
     if (!this.open) {
       return;
     }
@@ -258,6 +257,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     this.reposition(true);
   }
   openHandler(value) {
+    onToggleOpenCloseComponent(this);
     if (value) {
       this.reposition(true);
     }
@@ -285,9 +285,11 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     this.setFilteredPlacements();
     connectLocalized(this);
     connectMessages(this);
-    connectOpenCloseComponent(this);
     this.setUpReferenceElement(this.hasLoaded);
     connectFocusTrap(this);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   async componentWillLoad() {
     await setUpMessages(this);
@@ -306,7 +308,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
-    disconnectOpenCloseComponent(this);
     deactivateFocusTrap(this);
   }
   // --------------------------------------------------------------------------
@@ -320,7 +321,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
    * @param delayed
    */
   async reposition(delayed = false) {
-    const { el, effectiveReferenceElement, placement, overlayPositioning, flipDisabled, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl } = this;
+    const { el, effectiveReferenceElement, placement, overlayPositioning, flipDisabled, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl, } = this;
     return reposition(this, {
       floatingEl: el,
       referenceEl: effectiveReferenceElement,
@@ -331,14 +332,14 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
       offsetDistance,
       offsetSkidding,
       arrowEl,
-      type: "popover"
+      type: "popover",
     }, delayed);
   }
   /**
    * Sets focus on the component's first focusable element.
    */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     forceUpdate(this.el);
     focusFirstTabbable(this.el);
   }
@@ -393,18 +394,18 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
       ref: this.storeArrowEl })) : null;
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
         [FloatingCSS.animation]: true,
-        [FloatingCSS.animationActive]: displayed
+        [FloatingCSS.animationActive]: displayed,
       },
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setTransitionEl }, arrowNode, h("div", { class: {
         [CSS.hasHeader]: !!heading,
-        [CSS.container]: true
+        [CSS.container]: true,
       } }, this.renderHeader(), h("div", { class: CSS.content }, h("slot", null)), !heading ? this.renderCloseButton() : null))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
-    "focusTrapDisabled": ["handlefocusTrapDisabled"],
+    "focusTrapDisabled": ["handleFocusTrapDisabled"],
     "flipPlacements": ["flipPlacementsHandler"],
     "messageOverrides": ["onMessagesChange"],
     "offsetDistance": ["offsetDistanceOffsetHandler"],

package/dist/components/progress.js

@@ -4,8 +4,10 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { g as getElementDir } from './dom.js';
+import { C as CSS_UTILITY } from './resources.js';
 
-const progressCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity: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;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity: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;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-app-z-index);inline-size:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{z-index:var(--calcite-app-z-index);background-color:var(--calcite-ui-brand)}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(600%, 0, 0)}}";
+const progressCss = ":host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-app-z-index);inline-size:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{z-index:var(--calcite-app-z-index);background-color:var(--calcite-ui-brand)}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(600%, 0, 0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(-600%, 0, 0)}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Progress = /*@__PURE__*/ proxyCustomElement(class Progress extends HTMLElement {
   constructor() {
@@ -21,10 +23,12 @@ const Progress = /*@__PURE__*/ proxyCustomElement(class Progress extends HTMLEle
   render() {
     const isDeterminate = this.type === "determinate";
     const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
+    const dir = getElementDir(this.el);
     return (h("div", { "aria-label": this.label || this.text, "aria-valuemax": 1, "aria-valuemin": 0, "aria-valuenow": this.value, role: "progressbar" }, h("div", { class: "track" }, h("div", { class: {
         bar: true,
         indeterminate: this.type === "indeterminate",
-        reversed: this.reversed
+        [CSS_UTILITY.rtl]: dir === "rtl",
+        reversed: this.reversed,
       }, style: barStyles })), this.text ? h("div", { class: "text" }, this.text) : null));
   }
   get el() { return this; }

package/dist/components/public-notification.js

@@ -10,40 +10,42 @@ import { b as goToSelection, h as highlightFeatures } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { c as consolidateLabels, r as removeDuplicateLabels } from './downloadUtils.js';
-import { d as defineCustomElement$G } from './buffer-tools2.js';
-import { d as defineCustomElement$F } from './action.js';
-import { d as defineCustomElement$E } from './action-bar.js';
-import { d as defineCustomElement$D } from './action-group.js';
-import { d as defineCustomElement$C } from './action-menu.js';
-import { d as defineCustomElement$B } from './button.js';
-import { d as defineCustomElement$A } from './checkbox.js';
-import { d as defineCustomElement$z } from './chip.js';
-import { d as defineCustomElement$y } from './combobox.js';
-import { d as defineCustomElement$x } from './combobox-item.js';
-import { d as defineCustomElement$w } from './dropdown.js';
-import { d as defineCustomElement$v } from './dropdown-group.js';
-import { d as defineCustomElement$u } from './dropdown-item.js';
-import { d as defineCustomElement$t } from './filter2.js';
-import { d as defineCustomElement$s } from './graph.js';
-import { d as defineCustomElement$r } from './icon.js';
-import { d as defineCustomElement$q } from './input.js';
-import { d as defineCustomElement$p } from './input-message.js';
-import { d as defineCustomElement$o } from './input-text.js';
-import { d as defineCustomElement$n } from './label2.js';
-import { d as defineCustomElement$m } from './list.js';
-import { d as defineCustomElement$l } from './list-item2.js';
-import { d as defineCustomElement$k } from './loader.js';
-import { d as defineCustomElement$j } from './notice.js';
-import { d as defineCustomElement$i } from './option.js';
-import { d as defineCustomElement$h } from './panel.js';
-import { d as defineCustomElement$g } from './popover.js';
-import { d as defineCustomElement$f } from './progress.js';
-import { d as defineCustomElement$e } from './scrim.js';
-import { d as defineCustomElement$d } from './segmented-control.js';
-import { d as defineCustomElement$c } from './segmented-control-item.js';
-import { d as defineCustomElement$b } from './select.js';
-import { d as defineCustomElement$a } from './shell.js';
-import { d as defineCustomElement$9 } from './slider.js';
+import { d as defineCustomElement$I } from './buffer-tools2.js';
+import { d as defineCustomElement$H } from './action.js';
+import { d as defineCustomElement$G } from './action-bar.js';
+import { d as defineCustomElement$F } from './action-group.js';
+import { d as defineCustomElement$E } from './action-menu.js';
+import { d as defineCustomElement$D } from './button.js';
+import { d as defineCustomElement$C } from './checkbox.js';
+import { d as defineCustomElement$B } from './chip.js';
+import { d as defineCustomElement$A } from './combobox.js';
+import { d as defineCustomElement$z } from './combobox-item.js';
+import { d as defineCustomElement$y } from './dropdown.js';
+import { d as defineCustomElement$x } from './dropdown-group.js';
+import { d as defineCustomElement$w } from './dropdown-item.js';
+import { d as defineCustomElement$v } from './filter2.js';
+import { d as defineCustomElement$u } from './graph.js';
+import { d as defineCustomElement$t } from './handle.js';
+import { d as defineCustomElement$s } from './icon.js';
+import { d as defineCustomElement$r } from './input.js';
+import { d as defineCustomElement$q } from './input-message.js';
+import { d as defineCustomElement$p } from './input-text.js';
+import { d as defineCustomElement$o } from './label2.js';
+import { d as defineCustomElement$n } from './list.js';
+import { d as defineCustomElement$m } from './list-item2.js';
+import { d as defineCustomElement$l } from './loader.js';
+import { d as defineCustomElement$k } from './notice.js';
+import { d as defineCustomElement$j } from './option.js';
+import { d as defineCustomElement$i } from './panel.js';
+import { d as defineCustomElement$h } from './popover.js';
+import { d as defineCustomElement$g } from './progress.js';
+import { d as defineCustomElement$f } from './scrim.js';
+import { d as defineCustomElement$e } from './segmented-control.js';
+import { d as defineCustomElement$d } from './segmented-control-item.js';
+import { d as defineCustomElement$c } from './select.js';
+import { d as defineCustomElement$b } from './shell.js';
+import { d as defineCustomElement$a } from './slider.js';
+import { d as defineCustomElement$9 } from './stack.js';
 import { d as defineCustomElement$8 } from './switch.js';
 import { d as defineCustomElement$7 } from './tooltip.js';
 import { d as defineCustomElement$6 } from './map-draw-tools2.js';
@@ -927,7 +929,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["public-notification", "buffer-tools", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-input-text", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-segmented-control", "calcite-segmented-control-item", "calcite-select", "calcite-shell", "calcite-slider", "calcite-switch", "calcite-tooltip", "map-draw-tools", "map-layer-picker", "map-select-tools", "pdf-download", "refine-selection"];
+  const components = ["public-notification", "buffer-tools", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-input-text", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-segmented-control", "calcite-segmented-control-item", "calcite-select", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-switch", "calcite-tooltip", "map-draw-tools", "map-layer-picker", "map-select-tools", "pdf-download", "refine-selection"];
   components.forEach(tagName => { switch (tagName) {
     case "public-notification":
       if (!customElements.get(tagName)) {
@@ -936,170 +938,180 @@ function defineCustomElement$1() {
       break;
     case "buffer-tools":
       if (!customElements.get(tagName)) {
-        defineCustomElement$G();
+        defineCustomElement$I();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$F();
+        defineCustomElement$H();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$E();
+        defineCustomElement$G();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$D();
+        defineCustomElement$F();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$C();
+        defineCustomElement$E();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$B();
+        defineCustomElement$D();
       }
       break;
     case "calcite-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$A();
+        defineCustomElement$C();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$z();
+        defineCustomElement$B();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$y();
+        defineCustomElement$A();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$x();
+        defineCustomElement$z();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$w();
+        defineCustomElement$y();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$v();
+        defineCustomElement$x();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$w();
       }
       break;
     case "calcite-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$v();
       }
       break;
     case "calcite-graph":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$u();
+      }
+      break;
+    case "calcite-handle":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$t();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "calcite-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "calcite-input-message":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "calcite-input-text":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "calcite-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "calcite-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "calcite-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "calcite-notice":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "calcite-option":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "calcite-panel":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "calcite-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "calcite-progress":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "calcite-scrim":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "calcite-segmented-control":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "calcite-segmented-control-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "calcite-select":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "calcite-shell":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "calcite-slider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "calcite-stack":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }