@esri/calcite-components 1.0.0-beta.96 → 1.0.0-beta.98

package/dist/components/checkbox.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/chip.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted } from './dom.js';

package/dist/components/color-picker-hex-input.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { n as normalizeHex, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils.js';

package/dist/components/color-picker-swatch.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { e as getThemeName } from './dom.js';

package/dist/components/conditionalSlot.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-beta.96
+ * v1.0.0-beta.98
  */
 import { forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/date-picker-day.js

@@ -1,10 +1,10 @@
 /*!
  * 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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { c as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { o as closestElementCrossShadowBoundary, c as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { n as numberStringFormatter } from './locale.js';
@@ -59,7 +59,18 @@ const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
+  }
   render() {
+    if (this.parentDatePickerEl) {
+      const { numberingSystem, lang: locale } = this.parentDatePickerEl;
+      numberStringFormatter.numberFormatOptions = {
+        useGrouping: false,
+        ...(numberingSystem && { numberingSystem }),
+        ...(locale && { locale })
+      };
+    }
     const formattedDay = numberStringFormatter.localize(String(this.day));
     const dir = getElementDir(this.el);
     return (h(Host, { onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "gridcell" }, h("div", { class: { "day-v-wrapper": true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("div", { class: "day-wrapper" }, h("span", { class: "day" }, h("span", { class: "text" }, formattedDay))))));

package/dist/components/date-picker-month-header.js

@@ -1,13 +1,14 @@
 /*!
  * 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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
-import { e as getOrder, b as dateFromRange, n as nextMonth, f as prevMonth } from './date.js';
+import { h as getOrder, e as dateFromRange, n as nextMonth, p as prevMonth } from './date.js';
 import { H as Heading } from './Heading.js';
 import { i as isActivationKey } from './key.js';
 import { n as numberStringFormatter } from './locale.js';
+import { o as closestElementCrossShadowBoundary } from './dom.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
@@ -89,6 +90,9 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class extends HTM
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
+  }
   connectedCallback() {
     this.setNextPrevMonthDates();
   }
@@ -100,6 +104,14 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (!this.activeDate || !this.localeData) {
       return null;
     }
+    if (this.parentDatePickerEl) {
+      const { numberingSystem, lang: locale } = this.parentDatePickerEl;
+      numberStringFormatter.numberFormatOptions = {
+        useGrouping: false,
+        ...(numberingSystem && { numberingSystem }),
+        ...(locale && { locale })
+      };
+    }
     const activeMonth = this.activeDate.getMonth();
     const { months, unitOrder } = this.localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];

package/dist/components/date-picker-month.js

@@ -1,10 +1,10 @@
 /*!
  * 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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { c as sameDate, b as dateFromRange, i as inRange } from './date.js';
+import { f as sameDate, e as dateFromRange, i as inRange } from './date.js';
 import { d as defineCustomElement$1 } from './date-picker-day.js';
 
 const datePickerMonthCss = "@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-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-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)}:host([hidden]){display:none}.calender{margin-block-end:0.25rem}.week-headers{display:flex;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px;padding-inline:0.25rem}.week-header{text-align:center;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-3);inline-size:14.2857142857%}:host([scale=s]) .week-header{padding-inline:0px;padding-block:0.5rem 0.75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .week-header{padding-inline:0px;padding-block:0.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]) .week-header{padding-inline:0px;padding-block:1rem 1.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}.week-days{display:flex;flex-direction:row;padding-block:0px;padding-inline:6px}.week-days:focus{outline:2px solid transparent;outline-offset:2px}";

package/dist/components/date-picker.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-beta.96
+ * v1.0.0-beta.98
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
-import { g as getSupportedLocale, c as connectLocalized, n as numberStringFormatter, d as disconnectLocalized } from './locale.js';
-import { a as dateFromISO, g as getDaysDiff, d as dateToISO, b as dateFromRange, s as setEndOfDay } from './date.js';
+import { g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale.js';
+import { c as dateFromISO, g as getDaysDiff, b as dateToISO, e as dateFromRange, s as setEndOfDay } from './date.js';
 import { d as defineCustomElement$4 } from './date-picker-day.js';
 import { d as defineCustomElement$3 } from './date-picker-month.js';
 import { d as defineCustomElement$2 } from './date-picker-month-header.js';
@@ -239,8 +239,12 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     this.monthDateChange = (event) => {
       const date = new Date(event.detail);
+      const isoDate = dateToISO(date);
+      if (!this.range && isoDate === dateToISO(this.valueAsDate)) {
+        return;
+      }
       if (!this.range) {
-        this.value = date ? dateToISO(date) : "";
+        this.value = isoDate || "";
         this.valueAsDate = date || null;
         this.activeDate = date || null;
         this.calciteDatePickerChange.emit(date);
@@ -295,6 +299,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.calciteDatePickerChange.emit(date);
     };
   }
+  activeDateWatcher(newActiveDate) {
+    if (this.activeRange === "end") {
+      this.activeEndDate = newActiveDate;
+    }
+  }
   handleValueAsDate(date) {
     if (!Array.isArray(date) && date && date !== this.activeDate) {
       this.activeDate = date;
@@ -342,11 +351,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.max) {
       this.maxAsDate = dateFromISO(this.max);
     }
-    numberStringFormatter.numberFormatOptions = {
-      numberingSystem: this.numberingSystem,
-      locale: this.effectiveLocale,
-      useGrouping: false
-    };
   }
   disconnectedCallback() {
     disconnectLocalized(this);
@@ -358,13 +362,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     var _a;
-    const date = dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
-    const activeStartDate = this.range
-      ? this.getActiveStartDate(date, this.minAsDate, this.maxAsDate)
-      : this.getActiveDate(date, this.minAsDate, this.maxAsDate);
-    let activeDate = activeStartDate;
-    const endDate = this.range
-      ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
+    const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    let activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
+    const endDate = this.range && Array.isArray(this.valueAsDate)
+      ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate)
       : null;
     const activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
     if ((this.activeRange === "end" ||
@@ -483,15 +484,13 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getActiveDate(value, min, max) {
     return dateFromRange(this.activeDate, min, max) || value || dateFromRange(new Date(), min, max);
   }
-  getActiveStartDate(value, min, max) {
-    return (dateFromRange(this.activeStartDate, min, max) || value || dateFromRange(new Date(), min, max));
-  }
   getActiveEndDate(value, min, max) {
     return (dateFromRange(this.activeEndDate, min, max) || value || dateFromRange(new Date(), min, max));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
+    "activeDate": ["activeDateWatcher"],
     "valueAsDate": ["handleValueAsDate"],
     "startAsDate": ["handleRangeChange"],
     "endAsDate": ["handleRangeChange"],
@@ -504,6 +503,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return datePickerCss; }
 }, [1, "calcite-date-picker", {
+    "activeDate": [1040],
     "activeRange": [513, "active-range"],
     "value": [1025],
     "headingLevel": [514, "heading-level"],
@@ -524,7 +524,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "start": [1537],
     "end": [1537],
     "proximitySelectionDisabled": [516, "proximity-selection-disabled"],
-    "activeDate": [32],
     "activeStartDate": [32],
     "activeEndDate": [32],
     "globalAttributes": [32],

package/dist/components/date.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-beta.96
+ * v1.0.0-beta.98
  */
 import { n as numberStringFormatter } from './locale.js';
 
@@ -13,6 +13,9 @@ import { n as numberStringFormatter } from './locale.js';
  * @param max
  */
 function inRange(date, min, max) {
+  if (!date) {
+    return;
+  }
   const time = date.getTime();
   const afterMin = !(min instanceof Date) || time >= min.getTime();
   const beforeMax = !(max instanceof Date) || time <= max.getTime();
@@ -66,6 +69,46 @@ function dateFromISO(iso8601, isEndDate = false) {
   }
   return date;
 }
+/**
+ * Parse a localized date string into a valid Date.
+ * return false if date is invalid, or out of range
+ *
+ * @param value
+ * @param localeData
+ */
+function dateFromLocalizedString(value, localeData) {
+  if (!localeData) {
+    return null;
+  }
+  const { separator } = localeData;
+  const { day, month, year } = parseDateString(value, localeData);
+  const date = new Date(year, month, day);
+  date.setFullYear(year);
+  const validDay = day > 0;
+  const validMonth = month > -1;
+  const validDate = !isNaN(date.getTime());
+  const validLength = value.split(separator).filter((c) => c).length > 2;
+  const validYear = year.toString().length > 0;
+  if (validDay && validMonth && validDate && validLength && validYear) {
+    return date;
+  }
+  return null;
+}
+/**
+ * Retrieve day, month, and year strings from a localized string
+ *
+ * @param string
+ * @param localeData
+ */
+function datePartsFromLocalizedString(string, localeData) {
+  const { separator, unitOrder } = localeData;
+  const order = getOrder(unitOrder);
+  const values = string.split(separator).map((part) => numberStringFormatter.delocalize(part));
+  const day = values[order.indexOf("d")];
+  const month = values[order.indexOf("m")];
+  const year = values[order.indexOf("y")];
+  return { day, month, year };
+}
 /**
  * Return first portion of ISO string (YYYY-mm-dd)
  *
@@ -126,18 +169,17 @@ function nextMonth(date) {
 /**
  * Parse numeric units for day, month, and year from a localized string
  * month starts at 0 (can pass to date constructor)
+ * can return values as number or string
  *
- * @param str
+ * @param string
  * @param localeData
  */
-function parseDateString(str, localeData) {
-  const { separator, unitOrder } = localeData;
-  const order = getOrder(unitOrder);
-  const values = str.split(separator).map((part) => numberStringFormatter.delocalize(part));
+function parseDateString(string, localeData) {
+  const { day, month, year } = datePartsFromLocalizedString(string, localeData);
   return {
-    day: parseInt(values[order.indexOf("d")]),
-    month: parseInt(values[order.indexOf("m")]) - 1,
-    year: parseInt(values[order.indexOf("y")])
+    day: parseInt(day),
+    month: parseInt(month) - 1,
+    year: parseInt(year)
   };
 }
 /**
@@ -172,4 +214,4 @@ function setEndOfDay(date) {
   return date;
 }
 
-export { dateFromISO as a, dateFromRange as b, sameDate as c, dateToISO as d, getOrder as e, prevMonth as f, getDaysDiff as g, inRange as i, nextMonth as n, parseDateString as p, setEndOfDay as s };
+export { dateFromLocalizedString as a, dateToISO as b, dateFromISO as c, datePartsFromLocalizedString as d, dateFromRange as e, sameDate as f, getDaysDiff as g, getOrder as h, inRange as i, nextMonth as n, prevMonth as p, setEndOfDay as s };

package/dist/components/debounce.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-beta.96
+ * v1.0.0-beta.98
  */
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;

package/dist/components/dom.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-beta.96
+ * v1.0.0-beta.98
  */
 import { g as guid } from './guid.js';
 

package/dist/components/dropdown.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean, i as isPrimaryPointerButton, f as focusElement } from './dom.js';
@@ -16,7 +16,7 @@ const SLOTS = {
   dropdownTrigger: "dropdown-trigger"
 };
 
-const dropdownCss = "@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-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-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)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-flex;flex:0 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;visibility:hidden;pointer-events:none;inline-size:0;block-size:0;overflow:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);visibility:hidden;transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;visibility:visible;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible;inline-size:unset;block-size:unset;overflow:unset}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:flex;flex:1 1 auto}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
+const dropdownCss = "@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-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-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)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-flex;flex:0 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:900;visibility:hidden}.calcite-dropdown-wrapper .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:1;border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{visibility:visible}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;display:flex;flex:1 1 auto}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width=s]){--calcite-dropdown-width:12rem}:host([width=m]){--calcite-dropdown-width:14rem}:host([width=l]){--calcite-dropdown-width:16rem}";
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -82,7 +82,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.groups = [];
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
-    this.openTransitionProp = "visibility";
+    this.openTransitionProp = "opacity";
     this.guid = `calcite-dropdown-${guid()}`;
     this.defaultAssignedElements = [];
     //--------------------------------------------------------------------------

package/dist/components/filter.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { f as focusElement } from './dom.js';

package/dist/components/filter2.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-beta.96
+ * v1.0.0-beta.98
  */
 import { a as isSymbol, S as Symbol, i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';
 

package/dist/components/floating-ui.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-beta.96
+ * v1.0.0-beta.98
  */
 import { c as getElementDir, o as closestElementCrossShadowBoundary } from './dom.js';
 import { Build } from '@stencil/core/internal/client/index.js';
@@ -1503,6 +1503,9 @@ async function patchFloatingUiForNonChromiumBrowsers() {
     platform.getElementRects = getElementRects;
   }
 }
+/**
+ * Exported for testing purposes only
+ */
 const placementDataAttribute = "data-placement";
 /**
  * Exported for testing purposes only
@@ -1696,9 +1699,13 @@ function connectFloatingUI(component, referenceEl, floatingEl) {
   disconnectFloatingUI(component, referenceEl, floatingEl);
   const position = component.overlayPositioning;
   // ensure position matches for initial positioning
-  floatingEl.style.position = position;
+  Object.assign(floatingEl.style, {
+    visibility: "hidden",
+    pointerEvents: "none",
+    position
+  });
   if (position === "absolute") {
-    moveOffScreen(floatingEl);
+    resetPosition(floatingEl);
   }
   const runAutoUpdate = Build.isBrowser
     ? autoUpdate
@@ -1759,14 +1766,15 @@ function handleTransitionElTransitionEnd(event) {
   event.propertyName === "opacity" &&
     floatingTransitionEl.classList.contains(FloatingCSS.animation)) {
     const floatingEl = getFloatingElFromTransitionTarget(floatingTransitionEl);
-    moveOffScreen(floatingEl);
+    resetPosition(floatingEl);
     getTransitionTarget(floatingEl).removeEventListener("transitionend", handleTransitionElTransitionEnd);
   }
 }
-function moveOffScreen(floatingEl) {
+function resetPosition(floatingEl) {
+  // resets position to better match https://floating-ui.com/docs/computePosition#initial-layout
   floatingEl.style.transform = "";
-  floatingEl.style.top = "-99999px";
-  floatingEl.style.left = "-99999px";
+  floatingEl.style.top = "0";
+  floatingEl.style.left = "0";
 }
 function getFloatingElFromTransitionTarget(floatingTransitionEl) {
   return closestElementCrossShadowBoundary(floatingTransitionEl, `[${placementDataAttribute}]`);

package/dist/components/form.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-beta.96
+ * v1.0.0-beta.98
  */
 import { o as closestElementCrossShadowBoundary } from './dom.js';
 import { h } from '@stencil/core/internal/client/index.js';

package/dist/components/graph.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/guid.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-beta.96
+ * v1.0.0-beta.98
  */
 function gen(counts) {
   return counts

package/dist/components/handle.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/icon.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-beta.96
+ * v1.0.0-beta.98
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/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-beta.96
+ * v1.0.0-beta.98
  */
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client/index.js';
 import { d as darkTheme, a as autoTheme } from './dom.js';

package/dist/components/input.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { T as TEXT$1, b as getSlotted, i as isPrimaryPointerButton, s as setRequestedIcon, g as getElementProp, c as getElementDir, C as CSS_UTILITY } from './dom.js';

package/dist/components/interactive.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-beta.96
+ * v1.0.0-beta.98
  */
 function noopClick() {
   /** noop */

package/dist/components/interfaces.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-beta.96
+ * v1.0.0-beta.98
  */
 var StatusIcons;
 (function (StatusIcons) {

package/dist/components/interfaces2.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-beta.96
+ * v1.0.0-beta.98
  */
 var TreeSelectionMode;
 (function (TreeSelectionMode) {
@@ -9,8 +9,9 @@ var TreeSelectionMode;
   TreeSelectionMode["Multi"] = "multi";
   TreeSelectionMode["None"] = "none";
   TreeSelectionMode["Children"] = "children";
-  TreeSelectionMode["MultiChildren"] = "multi-children";
+  TreeSelectionMode["MultiChildren"] = "multichildren";
   TreeSelectionMode["Ancestors"] = "ancestors";
+  TreeSelectionMode["Multiple"] = "multiple";
 })(TreeSelectionMode || (TreeSelectionMode = {}));
 
 export { TreeSelectionMode as T };

package/dist/components/key.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-beta.96
+ * v1.0.0-beta.98
  */
 function isActivationKey(key) {
   return key === "Enter" || key === " ";

package/dist/components/label.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-beta.96
+ * v1.0.0-beta.98
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { l as labelConnectedEvent, a as labelDisconnectedEvent } from './label2.js';

package/dist/components/label2.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-beta.96
+ * v1.0.0-beta.98
  */
 import { q as queryElementRoots, o as closestElementCrossShadowBoundary } from './dom.js';