@esri/calcite-components 1.0.0-next.506 → 1.0.0-next.509

package/dist/custom-elements/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
 import { HTMLElement as HTMLElement$1, createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -6589,7 +6589,7 @@ const decimalPlaces = (value) => {
     (match[2] ? +match[2] : 0));
 };
 
-const colorPickerCss = "@-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-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .container{width:160px}:host([scale=s]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(20px, 1fr))}:host([scale=s]) .channels{-ms-flex-direction:column;flex-direction:column}:host([scale=s]) .channel{width:100%;margin-bottom:4px}:host([scale=s]) .channel:last-child{margin-bottom:0}:host([scale=m]) .container{width:272px}:host([scale=l]) .header{padding-bottom:0px}:host([scale=l]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{width:464px}:host([scale=l]) .color-field-and-slider{margin-bottom:-20px}:host([scale=l]) .section{padding:0 16px 16px}:host([scale=l]) .section:first-of-type{padding-top:16px}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(28px, 1fr));grid-gap:12px;padding-top:16px}:host([scale=l]) .control-section{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:baseline;align-items:baseline}:host([scale=l]) .control-section>:nth-child(2){-webkit-margin-start:12px;margin-inline-start:12px}:host([scale=l]) .color-hex-options{display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;min-height:98px;width:160px}:host([scale=l]) .color-mode-container{-ms-flex-negative:3;flex-shrink:3}:host([appearance=minimal]) .container{border:none}.container{background-color:var(--calcite-ui-foreground-1);display:inline-block;border:1px solid var(--calcite-ui-border-1)}.color-field-and-slider-wrap{position:relative}.scope{pointer-events:none;position:absolute;font-size:var(--calcite-font-size--1);outline-color:transparent;outline-offset:14px}.scope:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:16px}.color-field-and-slider{margin-bottom:-16px}.color-field-and-slider--interactive{cursor:pointer}.control-section{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.section{padding:0 12px 12px}.section:first-of-type{padding-top:12px}.color-hex-options,.section--split{-ms-flex-positive:1;flex-grow:1}.header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:0.25rem;color:var(--calcite-ui-text-1)}.header--hex,.color-mode-container{padding-top:12px}.channels{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.channel{width:31%}.saved-colors{padding-top:12px;display:grid;grid-template-columns:repeat(auto-fill, minmax(24px, 1fr));grid-gap:8px;width:100%}.saved-colors-buttons{display:-ms-flexbox;display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.saved-color:hover{-webkit-transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}";
+const colorPickerCss = "@-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-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .container{width:160px}:host([scale=s]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(20px, 1fr))}:host([scale=s]) .channels{-ms-flex-direction:column;flex-direction:column}:host([scale=s]) .channel{width:100%;margin-bottom:4px}:host([scale=s]) .channel:last-child{margin-bottom:0}:host([scale=m]) .container{width:272px}:host([scale=l]) .header{padding-bottom:0px}:host([scale=l]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{width:464px}:host([scale=l]) .color-field-and-slider{margin-bottom:-20px}:host([scale=l]) .section{padding:0 16px 16px}:host([scale=l]) .section:first-of-type{padding-top:16px}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, minmax(28px, 1fr));grid-gap:12px;padding-top:16px}:host([scale=l]) .control-section{-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:baseline;align-items:baseline}:host([scale=l]) .control-section>:nth-child(2){-webkit-margin-start:12px;margin-inline-start:12px}:host([scale=l]) .color-hex-options{display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;min-height:98px;width:160px}:host([scale=l]) .color-mode-container{-ms-flex-negative:3;flex-shrink:3}:host([appearance=minimal]) .container{border:none}.container{background-color:var(--calcite-ui-foreground-1);display:inline-block;border:1px solid var(--calcite-ui-border-1)}.color-field-and-slider-wrap{position:relative}.scope{pointer-events:none;position:absolute;font-size:var(--calcite-font-size--1);outline-color:transparent;outline-offset:14px}.scope:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:16px}.color-field-and-slider{margin-bottom:-16px;-ms-touch-action:none;touch-action:none}.color-field-and-slider--interactive{cursor:pointer}.control-section{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.section{padding:0 12px 12px}.section:first-of-type{padding-top:12px}.color-hex-options,.section--split{-ms-flex-positive:1;flex-grow:1}.header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:0.25rem;color:var(--calcite-ui-text-1)}.header--hex,.color-mode-container{padding-top:12px}.channels{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.channel{width:31%}.saved-colors{padding-top:12px;display:grid;grid-template-columns:repeat(auto-fill, minmax(24px, 1fr));grid-gap:8px;width:100%}.saved-colors-buttons{display:-ms-flexbox;display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.saved-color:hover{-webkit-transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}";
 
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR$1.hex());
@@ -6871,7 +6871,7 @@ const ColorPicker = class extends HTMLElement$1 {
         this.handleSavedColorSelect(event);
       }
     };
-    this.handleColorFieldAndSliderMouseLeave = () => {
+    this.handleColorFieldAndSliderPointerLeave = () => {
       this.colorFieldAndSliderInteractive = false;
       this.colorFieldAndSliderHovered = false;
       if (this.sliderThumbState !== "drag" && this.hueThumbState !== "drag") {
@@ -6880,7 +6880,7 @@ const ColorPicker = class extends HTMLElement$1 {
         this.drawColorFieldAndSlider();
       }
     };
-    this.handleColorFieldAndSliderMouseDown = (event) => {
+    this.handleColorFieldAndSliderPointerDown = (event) => {
       var _a, _b;
       const { offsetX, offsetY } = event;
       const region = this.getCanvasRegion(offsetY);
@@ -6896,12 +6896,12 @@ const ColorPicker = class extends HTMLElement$1 {
       }
       // prevent text selection outside of color field & slider area
       event.preventDefault();
-      document.addEventListener("mousemove", this.globalMouseMoveHandler);
-      document.addEventListener("mouseup", this.globalMouseUpHandler, { once: true });
+      document.addEventListener("pointermove", this.globalPointerMoveHandler);
+      document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
       this.activeColorFieldAndSliderRect =
         this.fieldAndSliderRenderingContext.canvas.getBoundingClientRect();
     };
-    this.globalMouseUpHandler = () => {
+    this.globalPointerUpHandler = () => {
       const previouslyDragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
       this.hueThumbState = "idle";
       this.sliderThumbState = "idle";
@@ -6911,7 +6911,7 @@ const ColorPicker = class extends HTMLElement$1 {
         this.calciteColorPickerChange.emit();
       }
     };
-    this.globalMouseMoveHandler = (event) => {
+    this.globalPointerMoveHandler = (event) => {
       const { el, dimensions } = this;
       const sliderThumbDragging = this.sliderThumbState === "drag";
       const hueThumbDragging = this.hueThumbState === "drag";
@@ -6958,7 +6958,7 @@ const ColorPicker = class extends HTMLElement$1 {
         this.captureHueSliderColor(samplingX);
       }
     };
-    this.handleColorFieldAndSliderMouseEnterOrMove = ({ offsetX, offsetY }) => {
+    this.handleColorFieldAndSliderPointerEnterOrMove = ({ offsetX, offsetY }) => {
       const { dimensions: { colorField, slider, thumb } } = this;
       this.colorFieldAndSliderInteractive = offsetY <= colorField.height + slider.height;
       this.colorFieldAndSliderHovered = true;
@@ -7075,13 +7075,7 @@ const ColorPicker = class extends HTMLElement$1 {
     };
     this.initColorFieldAndSlider = (canvas) => {
       this.fieldAndSliderRenderingContext = canvas.getContext("2d");
-      this.setCanvasContextSize(canvas, {
-        width: this.dimensions.colorField.width,
-        height: this.dimensions.colorField.height +
-          this.dimensions.slider.height +
-          this.getSliderCapSpacing() * 2
-      });
-      this.drawColorFieldAndSlider();
+      this.updateCanvasSize(canvas);
     };
   }
   handleColorChange(color, oldColor) {
@@ -7094,7 +7088,9 @@ const ColorPicker = class extends HTMLElement$1 {
     this.internalColorSet(this.color, false, "internal");
   }
   handleScaleChange(scale = "m") {
+    var _a;
     this.updateDimensions(scale);
+    this.updateCanvasSize((_a = this.fieldAndSliderRenderingContext) === null || _a === void 0 ? void 0 : _a.canvas);
   }
   handleValueChange(value, oldValue) {
     const { allowEmpty, format } = this;
@@ -7191,8 +7187,8 @@ const ColorPicker = class extends HTMLElement$1 {
     }
   }
   disconnectedCallback() {
-    document.removeEventListener("mousemove", this.globalMouseMoveHandler);
-    document.removeEventListener("mouseup", this.globalMouseUpHandler);
+    document.removeEventListener("pointermove", this.globalPointerMoveHandler);
+    document.removeEventListener("pointerup", this.globalPointerUpHandler);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -7214,7 +7210,7 @@ const ColorPicker = class extends HTMLElement$1 {
     return (h("div", { class: CSS$G.container }, h("div", { class: CSS$G.colorFieldAndSliderWrap }, h("canvas", { class: {
         [CSS$G.colorFieldAndSlider]: true,
         [CSS$G.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
-      }, onMouseDown: this.handleColorFieldAndSliderMouseDown, onMouseEnter: this.handleColorFieldAndSliderMouseEnterOrMove, onMouseLeave: this.handleColorFieldAndSliderMouseLeave, onMouseMove: this.handleColorFieldAndSliderMouseEnterOrMove, ref: this.initColorFieldAndSlider }), h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS$G.scope]: true, [CSS$G.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }), h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR$1.round().hue(), class: { [CSS$G.scope]: true, [CSS$G.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })), hideHex && hideChannels ? null : (h("div", { class: {
+      }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }), h("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS$G.scope]: true, [CSS$G.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }), h("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR$1.round().hue(), class: { [CSS$G.scope]: true, [CSS$G.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })), hideHex && hideChannels ? null : (h("div", { class: {
         [CSS$G.controlSection]: true,
         [CSS$G.section]: true
       } }, hideHex ? null : (h("div", { class: CSS$G.hexOptions }, h("span", { class: {
@@ -7319,6 +7315,18 @@ const ColorPicker = class extends HTMLElement$1 {
     const context = canvas.getContext("2d");
     context.scale(devicePixelRatio, devicePixelRatio);
   }
+  updateCanvasSize(canvas) {
+    if (!canvas) {
+      return;
+    }
+    this.setCanvasContextSize(canvas, {
+      width: this.dimensions.colorField.width,
+      height: this.dimensions.colorField.height +
+        this.dimensions.slider.height +
+        this.getSliderCapSpacing() * 2
+    });
+    this.drawColorFieldAndSlider();
+  }
   containsPoint(testPointX, testPointY, boundsX, boundsY, boundsRadius) {
     return (Math.pow(testPointX - boundsX, 2) + Math.pow(testPointY - boundsY, 2) <=
       Math.pow(boundsRadius, 2));
@@ -9772,7 +9780,7 @@ const Combobox = class extends HTMLElement$1 {
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+        this.active ? this.onOpen() : this.onClose();
       }
     };
     /* *
@@ -9781,7 +9789,7 @@ const Combobox = class extends HTMLElement$1 {
     */
     this.transitionRunHandler = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("beforeOpen") : this.emitOpenCloseEvent("beforeClose");
+        this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
     this.setMaxScrollerHeight = async () => {
@@ -10046,18 +10054,17 @@ const Combobox = class extends HTMLElement$1 {
       bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight));
   }
-  emitOpenCloseEvent(componentVisibilityState) {
-    const payload = {
-      el: this.el
-    };
-    const emitComponentState = {
-      beforeOpen: () => this.calciteComboboxBeforeOpen.emit(payload),
-      open: () => this.calciteComboboxOpen.emit(payload),
-      beforeClose: () => this.calciteComboboxBeforeClose.emit(payload),
-      close: () => this.calciteComboboxClose.emit(payload)
-    };
-    (emitComponentState[componentVisibilityState] ||
-      emitComponentState["The component state is unknown."])();
+  onBeforeOpen() {
+    this.calciteComboboxBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteComboboxOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteComboboxBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteComboboxClose.emit();
   }
   getModifiers() {
     const flipModifier = {
@@ -11861,6 +11868,8 @@ const DatePickerMonth = class extends HTMLElement$1 {
   static get style() { return datePickerMonthCss; }
 };
 
+const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
+
 const datePickerMonthHeaderCss = "@-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}.header{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding-top:0px;padding-bottom:0px;padding-left:0.25rem;padding-right:0.25rem}:host([scale=s]) .text{margin-top:0.5rem;margin-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=s]) .chevron{height:2.25rem}:host([scale=m]) .text{margin-top:0.75rem;margin-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=m]) .chevron{height:3rem}:host([scale=l]) .text{margin-top:1rem;margin-bottom:1rem;font-size:var(--calcite-font-size-1);line-height:1.5rem}:host([scale=l]) .chevron{height:3.5rem}.chevron{margin-left:-0.25rem;margin-right:-0.25rem;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-flexbox;display:flex;-ms-flex-positive:0;flex-grow:0;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-left:0.25rem;padding-right:0.25rem;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;outline-color:transparent;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;width:14.2857142857%}.chevron:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.chevron:hover,.chevron:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.chevron:active{background-color:var(--calcite-ui-foreground-3)}.chevron[aria-disabled=true]{pointer-events:none;opacity:0}.text{margin-top:auto;margin-bottom:auto;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-align:center;line-height:1}.text-nreverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.month,.year,.suffix{margin-left:0.25rem;margin-right:0.25rem;margin-top:auto;margin-bottom:auto;display:inline-block;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-ui-text-1);font-size:inherit}.year{position:relative;width:3rem;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;z-index:2}.year:hover{-webkit-transition-duration:100ms;transition-duration:100ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-property:outline-color;transition-property:outline-color;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}.year:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.year--suffix{width:4rem;text-align:left}.year-wrap{position:relative}.suffix{position:absolute;top:0px;left:0px;width:4rem;white-space:nowrap;text-align:left}.suffix__invisible{visibility:hidden}";
 
 const DatePickerMonthHeader = class extends HTMLElement$1 {
@@ -11880,7 +11889,7 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
      * @param e
      */
     this.onYearKey = (e) => {
-      const localizedYear = e.target.value;
+      const localizedYear = this.parseCalendarYear(e.target.value);
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
@@ -11893,10 +11902,15 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
       }
     };
     this.onYearChange = (event) => {
-      this.setYear({ localizedYear: event.target.value });
+      this.setYear({
+        localizedYear: this.parseCalendarYear(event.target.value)
+      });
     };
     this.onYearInput = (event) => {
-      this.setYear({ localizedYear: event.target.value, commit: false });
+      this.setYear({
+        localizedYear: this.parseCalendarYear(event.target.value),
+        commit: false
+      });
     };
     this.prevMonthClick = (e) => {
       this.handleArrowClick(e, this.prevMonthDate);
@@ -11944,7 +11958,7 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
     const activeMonth = this.activeDate.getMonth();
     const { months, unitOrder } = this.localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
-    const localizedYear = localizeNumber(this.activeDate.getFullYear(), this.localeData);
+    const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear().toString());
     const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
@@ -11961,6 +11975,18 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
     this.nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
+  formatCalendarYear(year) {
+    const { localeData } = this;
+    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
+    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
+    return localizeNumber(parseNumber(year, localeData) + yearOffset, localeData);
+  }
+  parseCalendarYear(year) {
+    const { localeData } = this;
+    const buddhistCalendar = localeData["default-calendar"] === "buddhist";
+    const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
+    return localizeNumber(parseNumber(year, localeData) - yearOffset, localeData);
+  }
   getInRangeDate({ localizedYear, offset = 0 }) {
     const { min, max, activeDate, localeData } = this;
     const parsedYear = parseNumber(localizedYear, localeData);
@@ -11984,14 +12010,14 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
    * @param root0.offset
    */
   setYear({ localizedYear, commit = true, offset = 0 }) {
-    const { yearInput, activeDate, localeData } = this;
+    const { yearInput, activeDate } = this;
     const inRangeDate = this.getInRangeDate({ localizedYear, offset });
     // if you've supplied a year and it's in range, update active date
     if (inRangeDate) {
       this.calciteDatePickerSelect.emit(inRangeDate);
     }
     if (commit) {
-      yearInput.value = localizeNumber((inRangeDate || activeDate).getFullYear(), localeData);
+      yearInput.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear().toString());
     }
   }
   get el() { return this; }
@@ -12927,9 +12953,21 @@ const Flow = class extends HTMLElement$1 {
     super();
     this.__registerHost();
     this.__attachShadow();
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * todo: document and finalize property name.
+     *
+     * @internal
+     */
+    this.allowDescendantPanels = false;
     this.panelCount = 0;
     this.flowDirection = null;
     this.panels = [];
+    this.panelItemMutationObserver = createObserver("mutation", () => this.handleMutationObserverChange());
     this.getFlowDirection = (oldPanelCount, newPanelCount) => {
       const allowRetreatingDirection = oldPanelCount > 1;
       const allowAdvancingDirection = oldPanelCount && newPanelCount > 1;
@@ -12938,13 +12976,27 @@ const Flow = class extends HTMLElement$1 {
       }
       return newPanelCount < oldPanelCount ? "retreating" : "advancing";
     };
-    this.updateFlowProps = (event) => {
-      const { panels } = this;
+    this.handleMutationObserverChange = () => {
+      const { el, allowDescendantPanels } = this;
+      if (!allowDescendantPanels) {
+        return;
+      }
+      const newPanels = Array.from(el.querySelectorAll("calcite-panel"));
+      this.updateFlowProps(newPanels);
+    };
+    this.handleDefaultSlotChange = (event) => {
+      if (this.allowDescendantPanels) {
+        return;
+      }
       const newPanels = event.target
         .assignedElements({
         flatten: true
       })
         .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-panel"));
+      this.updateFlowProps(newPanels);
+    };
+    this.updateFlowProps = (newPanels) => {
+      const { panels } = this;
       const oldPanelCount = panels.length;
       const newPanelCount = newPanels.length;
       const activePanel = newPanels[newPanelCount - 1];
@@ -12966,6 +13018,12 @@ const Flow = class extends HTMLElement$1 {
       }
     };
   }
+  handleallowDescendantPanelsChange() {
+    const { allowDescendantPanels, el, panelItemMutationObserver } = this;
+    allowDescendantPanels
+      ? panelItemMutationObserver === null || panelItemMutationObserver === void 0 ? void 0 : panelItemMutationObserver.observe(el, { childList: true, subtree: true })
+      : panelItemMutationObserver === null || panelItemMutationObserver === void 0 ? void 0 : panelItemMutationObserver.disconnect();
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -12993,6 +13051,14 @@ const Flow = class extends HTMLElement$1 {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  connectedCallback() {
+    this.handleallowDescendantPanelsChange();
+    this.handleMutationObserverChange();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.panelItemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   // --------------------------------------------------------------------------
   //
   //  Private Methods
@@ -13013,9 +13079,12 @@ const Flow = class extends HTMLElement$1 {
       [CSS$w.frameAdvancing]: flowDirection === "advancing",
       [CSS$w.frameRetreating]: flowDirection === "retreating"
     };
-    return (h("div", { class: frameDirectionClasses }, h("slot", { onSlotchange: this.updateFlowProps })));
+    return (h("div", { class: frameDirectionClasses }, h("slot", { onSlotchange: this.handleDefaultSlotChange })));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "allowDescendantPanels": ["handleallowDescendantPanelsChange"]
+  }; }
   static get style() { return flowCss; }
 };
 
@@ -14001,10 +14070,10 @@ const Input = class extends HTMLElement$1 {
         this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
       }, valueNudgeDelayInMs);
     };
-    this.numberButtonMouseUpAndMouseOutHandler = () => {
+    this.numberButtonPointerUpAndOutHandler = () => {
       window.clearInterval(this.nudgeNumberValueIntervalId);
     };
-    this.numberButtonMouseDownHandler = (event) => {
+    this.numberButtonPointerDownHandler = (event) => {
       event.preventDefault();
       const direction = event.target.dataset.adjustment;
       this.nudgeNumberValue(direction, event);
@@ -14275,11 +14344,11 @@ const Input = class extends HTMLElement$1 {
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS$s.numberButtonItem]: true,
         [CSS$s.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { class: {
         [CSS$s.numberButtonItem]: true,
         [CSS$s.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
     const numberButtonsVertical = (h("div", { class: CSS$s.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS$s.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS$s.suffix }, this.suffixText);
@@ -18450,6 +18519,9 @@ const RadioGroup = class extends HTMLElement$1 {
       items[0].tabIndex = 0;
     }
   }
+  componentDidLoad() {
+    afterConnectDefaultValueSet(this, this.value);
+  }
   connectedCallback() {
     connectLabel(this);
     connectForm(this);
@@ -27119,7 +27191,7 @@ const CalciteDropdownGroup = /*@__PURE__*/proxyCustomElement(DropdownGroup, [1,"
 const CalciteDropdownItem = /*@__PURE__*/proxyCustomElement(DropdownItem, [1,"calcite-dropdown-item",{"active":[1540],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"iconEnd":[513,"icon-end"],"href":[513],"label":[1],"rel":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"],[16,"calciteInternalDropdownItemChange","updateActiveItemOnChange"]]]);
 const CalciteFab = /*@__PURE__*/proxyCustomElement(Fab, [1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);
 const CalciteFilter = /*@__PURE__*/proxyCustomElement(Filter, [1,"calcite-filter",{"items":[1040],"disabled":[516],"filteredItems":[1040],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"scale":[513],"value":[1025]}]);
-const CalciteFlow = /*@__PURE__*/proxyCustomElement(Flow, [1,"calcite-flow",{"panelCount":[32],"flowDirection":[32],"panels":[32]},[[0,"calcitePanelBackClick","handleCalcitePanelBackClick"]]]);
+const CalciteFlow = /*@__PURE__*/proxyCustomElement(Flow, [1,"calcite-flow",{"allowDescendantPanels":[4,"allow-descendant-panels"],"panelCount":[32],"flowDirection":[32],"panels":[32]},[[0,"calcitePanelBackClick","handleCalcitePanelBackClick"]]]);
 const CalciteGraph = /*@__PURE__*/proxyCustomElement(Graph, [1,"calcite-graph",{"data":[16],"colorStops":[16],"highlightMin":[2,"highlight-min"],"highlightMax":[2,"highlight-max"],"min":[2],"max":[2]}]);
 const CalciteHandle = /*@__PURE__*/proxyCustomElement(Handle, [1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"]}]);
 const CalciteIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"calcite-icon",{"icon":[513],"flipRtl":[516,"flip-rtl"],"scale":[513],"textLabel":[1,"text-label"],"pathData":[32],"visible":[32]}]);

package/dist/esm/{ExpandToggle-0d5a3b1c.js → ExpandToggle-fa30876c.js}

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
-import { f as forceUpdate, h } from './index-fbcb0de9.js';
-import { a as getElementDir } from './dom-e04e61fe.js';
-import { S as SLOTS } from './resources-c0c7aa96.js';
-import { S as SLOTS$1 } from './resources-e4f01151.js';
+import { f as forceUpdate, h } from './index-f063d5e5.js';
+import { a as getElementDir } from './dom-292b2abc.js';
+import { S as SLOTS } from './resources-197d18b2.js';
+import { S as SLOTS$1 } from './resources-7502bd20.js';
 
 const overflowActionsDebounceInMs = 150;
 const groupBufferHeight = 2;

package/dist/esm/{Heading-b4109f89.js → Heading-19192ec6.js}

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
-import { h } from './index-fbcb0de9.js';
+import { h } from './index-f063d5e5.js';
 
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/esm/{array-ae72598e.js → array-f0d38641.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/esm/calcite-accordion_2.entry.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-fbcb0de9.js';
-import { d as getElementProp, a as getElementDir, t as toAriaBoolean, C as CSS_UTILITY } from './dom-e04e61fe.js';
-import { g as guid } from './guid-d54b8256.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-f063d5e5.js';
+import { d as getElementProp, a as getElementDir, t as toAriaBoolean, C as CSS_UTILITY } from './dom-292b2abc.js';
+import { g as guid } from './guid-921e9615.js';
 
 const accordionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-width:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}.accordion{border-width:1px;border-bottom-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 

package/dist/esm/calcite-action-bar.entry.js

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fbcb0de9.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, E as ExpandToggle, g as getOverflowCount } from './ExpandToggle-0d5a3b1c.js';
-import { f as focusElement, g as getSlotted } from './dom-e04e61fe.js';
-import { c as createObserver } from './observers-407301ee.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-49c4d7d3.js';
-import { d as debounce } from './debounce-b0929daf.js';
-import './resources-c0c7aa96.js';
-import './resources-e4f01151.js';
-import './guid-d54b8256.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f063d5e5.js';
+import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, E as ExpandToggle, g as getOverflowCount } from './ExpandToggle-fa30876c.js';
+import { f as focusElement, g as getSlotted } from './dom-292b2abc.js';
+import { c as createObserver } from './observers-121a02c3.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a45ec78d.js';
+import { d as debounce } from './debounce-e0722a63.js';
+import './resources-197d18b2.js';
+import './resources-7502bd20.js';
+import './guid-921e9615.js';
 
 const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/esm/calcite-action-group.entry.js

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-fbcb0de9.js';
-import { S as SLOTS, I as ICONS, T as TEXT } from './resources-e4f01151.js';
-import { g as getSlotted } from './dom-e04e61fe.js';
-import { S as SLOTS$1 } from './resources-c0c7aa96.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-49c4d7d3.js';
-import './guid-d54b8256.js';
-import './observers-407301ee.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-f063d5e5.js';
+import { S as SLOTS, I as ICONS, T as TEXT } from './resources-7502bd20.js';
+import { g as getSlotted } from './dom-292b2abc.js';
+import { S as SLOTS$1 } from './resources-197d18b2.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a45ec78d.js';
+import './guid-921e9615.js';
+import './observers-121a02c3.js';
 
 const actionGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-top:0px}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}";
 

package/dist/esm/calcite-action-menu.entry.js

@@ -1,15 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-fbcb0de9.js';
-import { C as CSS, I as ICONS, S as SLOTS } from './resources-c0c7aa96.js';
-import { g as getSlotted, t as toAriaBoolean, f as focusElement } from './dom-e04e61fe.js';
-import { g as getRoundRobinIndex } from './array-ae72598e.js';
-import { g as guid } from './guid-d54b8256.js';
-import { c as createObserver } from './observers-407301ee.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-49c4d7d3.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-f063d5e5.js';
+import { C as CSS, I as ICONS, S as SLOTS } from './resources-197d18b2.js';
+import { g as getSlotted, t as toAriaBoolean, f as focusElement } from './dom-292b2abc.js';
+import { g as getRoundRobinIndex } from './array-f0d38641.js';
+import { g as guid } from './guid-921e9615.js';
+import { c as createObserver } from './observers-121a02c3.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a45ec78d.js';
 
 const actionMenuCss = "@-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{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:-ms-flexbox;display:flex;outline-color:transparent}::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-brand);outline-offset:0px}.default-trigger{position:relative;height:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;height:100%;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-item-align:stretch;align-self:stretch}.menu{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}";
 

package/dist/esm/calcite-action-pad.entry.js

@@ -1,16 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.506
+ * v1.0.0-next.509
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fbcb0de9.js';
-import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-0d5a3b1c.js';
-import { f as focusElement, g as getSlotted } from './dom-e04e61fe.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-49c4d7d3.js';
-import './resources-c0c7aa96.js';
-import './resources-e4f01151.js';
-import './guid-d54b8256.js';
-import './observers-407301ee.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f063d5e5.js';
+import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-fa30876c.js';
+import { f as focusElement, g as getSlotted } from './dom-292b2abc.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a45ec78d.js';
+import './resources-197d18b2.js';
+import './resources-7502bd20.js';
+import './guid-921e9615.js';
+import './observers-121a02c3.js';
 
 const CSS = {
   actionGroupBottom: "action-group--bottom",