@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.84

package/dist/components/calcite-color-picker.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.83
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as color, d as defineCustomElement$a } from './color-picker-swatch.js';
@@ -86,7 +86,7 @@ function throttle(func, wait, options) {
   });
 }
 
-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.hex());
@@ -368,7 +368,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.handleSavedColorSelect(event);
       }
     };
-    this.handleColorFieldAndSliderMouseLeave = () => {
+    this.handleColorFieldAndSliderPointerLeave = () => {
       this.colorFieldAndSliderInteractive = false;
       this.colorFieldAndSliderHovered = false;
       if (this.sliderThumbState !== "drag" && this.hueThumbState !== "drag") {
@@ -377,27 +377,28 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.drawColorFieldAndSlider();
       }
     };
-    this.handleColorFieldAndSliderMouseDown = (event) => {
+    this.handleColorFieldAndSliderPointerDown = (event) => {
+      var _a, _b;
       const { offsetX, offsetY } = event;
       const region = this.getCanvasRegion(offsetY);
       if (region === "color-field") {
         this.hueThumbState = "drag";
         this.captureColorFieldColor(offsetX, offsetY);
-        this.colorFieldScopeNode.focus();
+        (_a = this.colorFieldScopeNode) === null || _a === void 0 ? void 0 : _a.focus();
       }
       else if (region === "slider") {
         this.sliderThumbState = "drag";
         this.captureHueSliderColor(offsetX);
-        this.hueScopeNode.focus();
+        (_b = this.hueScopeNode) === null || _b === void 0 ? void 0 : _b.focus();
       }
       // 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";
@@ -407,7 +408,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.calciteColorPickerChange.emit();
       }
     };
-    this.globalMouseMoveHandler = (event) => {
+    this.globalPointerMoveHandler = (event) => {
       const { el, dimensions } = this;
       const sliderThumbDragging = this.sliderThumbState === "drag";
       const hueThumbDragging = this.hueThumbState === "drag";
@@ -434,7 +435,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           samplingX = 0;
         }
         else {
-          samplingX = colorFieldWidth;
+          samplingX = colorFieldWidth - 1;
         }
         if (clientY < colorFieldAndSliderRect.y + colorFieldHeight + hueSliderHeight &&
           clientY > colorFieldAndSliderRect.y) {
@@ -454,7 +455,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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;
@@ -529,7 +530,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       /* the channel container is ltr, so we apply the host's direction */
       this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
     };
-    this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
+    this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
     this.deleteColor = () => {
       const colorToDelete = this.color.hex();
       const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
@@ -571,13 +572,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     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) {
@@ -590,7 +585,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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;
@@ -687,8 +684,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   disconnectedCallback() {
-    document.removeEventListener("mousemove", this.globalMouseMoveHandler);
-    document.removeEventListener("mouseup", this.globalMouseUpHandler);
+    document.removeEventListener("pointermove", this.globalPointerMoveHandler);
+    document.removeEventListener("pointerup", this.globalPointerUpHandler);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -710,13 +707,13 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("div", { class: CSS.container }, h("div", { class: CSS.colorFieldAndSliderWrap }, h("canvas", { class: {
         [CSS.colorFieldAndSlider]: true,
         [CSS.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.scope]: true, [CSS.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.round().hue(), class: { [CSS.scope]: true, [CSS.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.scope]: true, [CSS.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.round().hue(), class: { [CSS.scope]: true, [CSS.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.controlSection]: true,
         [CSS.section]: true
       } }, hideHex ? null : (h("div", { class: CSS.hexOptions }, h("span", { class: {
         [CSS.header]: true,
         [CSS.headerHex]: true
-      } }, intlHex), h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (h("calcite-tabs", { class: {
+      } }, intlHex), h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (h("calcite-tabs", { class: {
         [CSS.colorModeContainer]: true,
         [CSS.splitSection]: true
       }, scale: hexInputScale }, h("calcite-tab-nav", { slot: "tab-nav" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, intlSaved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
@@ -815,6 +812,18 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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));
@@ -931,6 +940,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "intlValue": [1, "intl-value"],
     "scale": [513],
     "storageId": [1, "storage-id"],
+    "numberingSystem": [1, "numbering-system"],
     "value": [1025],
     "colorFieldAndSliderInteractive": [32],
     "channelMode": [32],

package/dist/components/calcite-combobox-item-group.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.83
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as getAncestors, e as getDepth } from './utils2.js';

package/dist/components/calcite-combobox-item.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.83
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementProp, b as getSlotted } from './dom.js';
@@ -149,6 +149,7 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "textLabel": [513, "text-label"],
     "value": [8],
     "constant": [516],
+    "filterDisabled": [4, "filter-disabled"],
     "toggleSelected": [64]
   }]);
 function defineCustomElement$1() {

package/dist/components/calcite-combobox.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-beta.83
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as isSymbol, S as Symbol, d as debounce } from './debounce.js';
 import { i as isArray, f as forIn } from './forIn.js';
-import { f as filterComputedPlacements, u as updatePopper, c as createPopper, a as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS } from './popper.js';
+import { f as filterComputedPlacements, u as updatePopper, c as createPopper, d as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS } from './popper.js';
 import { g as guid } from './guid.js';
 import { T as TEXT, C as ComboboxChildSelector, g as getItemAncestors, a as getItemChildren, h as hasActiveChildren, b as ComboboxItem, c as ComboboxItemGroup } from './utils2.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
@@ -130,8 +130,8 @@ const filter = (data, value) => {
     The data argument should be an array of objects`);
   }
   const find = (input, RE) => {
-    var _a;
-    if ((_a = input) === null || _a === void 0 ? void 0 : _a.constant) {
+    var _a, _b;
+    if (((_a = input) === null || _a === void 0 ? void 0 : _a.constant) || ((_b = input) === null || _b === void 0 ? void 0 : _b.filterDisabled)) {
       return true;
     }
     let found = false;
@@ -173,15 +173,23 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.calciteComboboxChange = createEvent(this, "calciteComboboxChange", 7);
     this.calciteComboboxFilterChange = createEvent(this, "calciteComboboxFilterChange", 7);
     this.calciteComboboxChipDismiss = createEvent(this, "calciteComboboxChipDismiss", 7);
-    this.calciteComboboxOpen = createEvent(this, "calciteComboboxOpen", 7);
+    this.calciteComboboxBeforeClose = createEvent(this, "calciteComboboxBeforeClose", 7);
     this.calciteComboboxClose = createEvent(this, "calciteComboboxClose", 7);
+    this.calciteComboboxBeforeOpen = createEvent(this, "calciteComboboxBeforeOpen", 7);
+    this.calciteComboboxOpen = createEvent(this, "calciteComboboxOpen", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Opens or closes the combobox */
+    /**
+     * When true, opens the combobox
+     *
+     * @deprecated use open instead
+     */
     this.active = false;
+    /**When true, opens the combobox */
+    this.open = false;
     /** Disable combobox input */
     this.disabled = false;
     /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
@@ -255,8 +263,9 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
             this.addCustomChip(this.text, true);
             event.preventDefault();
           }
-          else if (this.active) {
+          else if (this.open || this.active) {
             this.active = false;
+            this.open = false;
             event.preventDefault();
           }
           break;
@@ -273,9 +282,10 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
           break;
         case "ArrowDown":
-          if (!this.active) {
+          if (!(this.open || this.active)) {
             event.preventDefault();
             this.active = true;
+            this.open = true;
           }
           this.shiftActiveItemIndex(1);
           if (!this.comboboxInViewport()) {
@@ -286,11 +296,12 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           if (!this.textInput.value) {
             event.preventDefault();
             this.active = true;
+            this.open = true;
             this.shiftActiveItemIndex(1);
           }
           break;
         case "Home":
-          if (this.active) {
+          if (this.open || this.active) {
             event.preventDefault();
           }
           this.updateActiveItemIndex(0);
@@ -300,7 +311,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
           break;
         case "End":
-          if (this.active) {
+          if (this.open || this.active) {
             event.preventDefault();
           }
           this.updateActiveItemIndex(this.visibleItems.length - 1);
@@ -311,6 +322,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           break;
         case "Escape":
           this.active = false;
+          this.open = false;
           break;
         case "Enter":
           if (this.activeItemIndex > -1) {
@@ -339,29 +351,42 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.toggleCloseEnd = () => {
       this.active = false;
+      this.open = false;
       this.el.removeEventListener("calciteComboboxClose", this.toggleCloseEnd);
     };
     this.toggleOpenEnd = () => {
       this.active = true;
+      this.open = false;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.calciteComboboxOpen.emit() : this.calciteComboboxClose.emit();
+        this.open || this.active ? this.onOpen() : this.onClose();
+      }
+    };
+    /* *
+    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
+    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
+    */
+    this.transitionRunHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
-    this.setMaxScrollerHeight = () => {
-      const { active, listContainerEl } = this;
-      if (!listContainerEl || !active) {
+    this.setMaxScrollerHeight = async () => {
+      const { active, listContainerEl, open } = this;
+      const isOpen = !(active || open);
+      if (!listContainerEl || isOpen) {
         return;
       }
-      this.reposition();
+      await this.reposition();
       const maxScrollerHeight = this.getMaxScrollerHeight();
       listContainerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-      this.reposition();
+      await this.reposition();
     };
     this.calciteChipDismissHandler = (event, comboboxItem) => {
       this.active = false;
+      this.open = false;
       const selection = this.items.find((item) => item === comboboxItem);
       if (selection) {
         this.toggleSelection(selection, false);
@@ -373,12 +398,14 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         return;
       }
       this.active = !this.active;
+      this.open = !this.open;
       this.updateActiveItemIndex(0);
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+      const isOpen = !(this.open || this.active);
+      if (isOpen || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text.trim().length) {
@@ -393,6 +420,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
+      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -400,6 +428,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setListContainerEl = (el) => {
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
+      this.listContainerEl.addEventListener("transitionrun", this.transitionRunHandler);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -483,13 +512,15 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   activeHandler() {
     if (this.disabled) {
       this.active = false;
+      this.open = false;
       return;
     }
-    this.reposition();
+    this.setMaxScrollerHeight();
   }
   handleDisabledChange(value) {
     if (!value) {
       this.active = false;
+      this.open = false;
     }
   }
   maxItemsHandler() {
@@ -591,6 +622,9 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
+    if (this.listContainerEl) {
+      this.listContainerEl.removeEventListener("transitionrun", this.transitionRunHandler);
+    }
   }
   selectedItemsHandler() {
     this.internalValueChangeFlag = true;
@@ -608,6 +642,18 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight));
   }
+  onBeforeOpen() {
+    this.calciteComboboxBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteComboboxOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteComboboxBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteComboboxClose.emit();
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
@@ -618,7 +664,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     const eventListenerModifier = {
       name: "eventListeners",
-      enabled: this.active
+      enabled: this.open || this.active
     };
     return [flipModifier, eventListenerModifier];
   }
@@ -696,6 +742,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.textInput.value = item.textLabel;
       }
       this.active = false;
+      this.open = false;
       this.updateActiveItemIndex(-1);
       this.resetText();
       this.filterItems("");
@@ -744,6 +791,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   getData() {
     return this.items.map((item) => ({
       constant: item.constant,
+      filterDisabled: item.filterDisabled,
       value: item.value,
       label: item.textLabel
     }));
@@ -877,10 +925,10 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   renderInput() {
-    const { guid, active, disabled, placeholder, selectionMode, needsIcon, selectedItems } = this;
+    const { guid, active, disabled, placeholder, selectionMode, needsIcon, selectedItems, open } = this;
     const single = selectionMode === "single";
     const selectedItem = selectedItems[0];
-    const showLabel = !active && single && !!selectedItem;
+    const showLabel = !(open || active) && single && !!selectedItem;
     return (h("span", { class: {
         "input-wrap": true,
         "input-wrap--single": single
@@ -899,36 +947,39 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
-    const { active, setMenuEl, setListContainerEl } = this;
+    const { active, setMenuEl, setListContainerEl, open } = this;
     const classes = {
       "list-container": true,
       [CSS.animation]: true,
-      [CSS.animationActive]: active
+      [CSS.animationActive]: open || active
     };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": active }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, h("ul", { class: { list: true, "list--hide": !active } }, h("slot", null)))));
+    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open || active }, ref: setMenuEl }, h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl }, h("ul", { class: { list: true, "list--hide": !(open || active) } }, h("slot", null)))));
   }
   renderIconStart() {
-    const { selectionMode, needsIcon, selectedItems } = this;
+    var _a;
+    const { selectionMode, needsIcon, selectedItems, placeholderIcon } = this;
     const selectedItem = selectedItems[0];
     return (selectionMode === "single" &&
-      needsIcon && (h("span", { class: "icon-start" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) && (h("calcite-icon", { class: "selected-icon", icon: selectedItem.icon, scale: "s" })))));
+      needsIcon &&
+      ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) || placeholderIcon) && (h("span", { class: "icon-start" }, h("calcite-icon", { class: "selected-icon", icon: (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) !== null && _a !== void 0 ? _a : placeholderIcon, scale: "s" }))));
   }
   renderIconEnd() {
-    const { active } = this;
-    return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: active ? "chevron-up" : "chevron-down", scale: "s" })));
+    const { active, open } = this;
+    return (h("span", { class: "icon-end" }, h("calcite-icon", { icon: active || open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   render() {
-    const { active, guid, label } = this;
+    const { active, guid, label, open } = this;
     const single = this.selectionMode === "single";
-    return (h(Host, { onKeyDown: this.keydownHandler }, h("div", { "aria-autocomplete": "list", "aria-expanded": toAriaBoolean(active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+    return (h(Host, { onKeyDown: this.keydownHandler }, h("div", { "aria-autocomplete": "list", "aria-expanded": toAriaBoolean(open || active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
-        "wrapper--active": active
+        "wrapper--active": open || active
       }, onClick: this.clickHandler, ref: this.setReferenceEl, role: "combobox" }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderPopperContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get watchers() { return {
     "active": ["activeHandler"],
+    "open": ["activeHandler"],
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "value": ["valueHandler"],
@@ -939,9 +990,11 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return comboboxCss; }
 }, [1, "calcite-combobox", {
     "active": [1540],
+    "open": [1540],
     "disabled": [516],
     "label": [1],
     "placeholder": [1],
+    "placeholderIcon": [1, "placeholder-icon"],
     "maxItems": [2, "max-items"],
     "name": [513],
     "allowCustomValues": [4, "allow-custom-values"],

package/dist/components/calcite-date-picker-day.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.83
+ * v1.0.0-beta.84
  */
 import { D as DatePickerDay, d as defineCustomElement$1 } from './date-picker-day.js';
 

package/dist/components/calcite-date-picker-month-header.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.83
+ * v1.0.0-beta.84
  */
 import { D as DatePickerMonthHeader, d as defineCustomElement$1 } from './date-picker-month-header.js';
 

package/dist/components/calcite-date-picker-month.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.83
+ * v1.0.0-beta.84
  */
 import { D as DatePickerMonth, d as defineCustomElement$1 } from './date-picker-month.js';
 

package/dist/components/calcite-date-picker.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.83
+ * v1.0.0-beta.84
  */
 import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
 

package/dist/components/calcite-dropdown-group.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.83
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementProp } from './dom.js';

package/dist/components/calcite-dropdown-item.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.83
+ * v1.0.0-beta.84
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';
@@ -42,7 +42,8 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.el.focus();
+    var _a;
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
   //

package/dist/components/calcite-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.83
+ * v1.0.0-beta.84
  */
 import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';