@esri/calcite-components 1.0.0-next.504 → 1.0.0-next.507

package/hydrate/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.504
+ * v1.0.0-next.507
  */
 'use strict';
 
@@ -13026,7 +13026,7 @@ class ColorPicker {
       /* 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) => (hAsync("calcite-input", { class: CSS$G.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) => (hAsync("calcite-input", { class: CSS$G.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;
@@ -13068,13 +13068,7 @@ class ColorPicker {
     };
     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) {
@@ -13087,7 +13081,9 @@ class ColorPicker {
     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;
@@ -13213,7 +13209,7 @@ class ColorPicker {
       } }, hideHex ? null : (hAsync("div", { class: CSS$G.hexOptions }, hAsync("span", { class: {
         [CSS$G.header]: true,
         [CSS$G.headerHex]: true
-      } }, intlHex), hAsync("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS$G.control, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (hAsync("calcite-tabs", { class: {
+      } }, intlHex), hAsync("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS$G.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (hAsync("calcite-tabs", { class: {
         [CSS$G.colorModeContainer]: true,
         [CSS$G.splitSection]: true
       }, scale: hexInputScale }, hAsync("calcite-tab-nav", { slot: "tab-nav" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (hAsync("div", { class: { [CSS$G.savedColorsSection]: true, [CSS$G.section]: true } }, hAsync("div", { class: CSS$G.header }, hAsync("label", null, intlSaved), hAsync("div", { class: CSS$G.savedColorsButtons }, hAsync("calcite-button", { appearance: "transparent", class: CSS$G.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), hAsync("calcite-button", { appearance: "transparent", class: CSS$G.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (hAsync("div", { class: CSS$G.savedColors }, [
@@ -13312,6 +13308,18 @@ class ColorPicker {
     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));
@@ -13431,6 +13439,7 @@ class ColorPicker {
       "intlValue": [1, "intl-value"],
       "scale": [513],
       "storageId": [1, "storage-id"],
+      "numberingSystem": [1, "numbering-system"],
       "value": [1025],
       "colorFieldAndSliderInteractive": [32],
       "channelMode": [32],
@@ -13579,7 +13588,7 @@ class ColorPickerHexInput {
   render() {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    return (hAsync("div", { class: CSS$F.container }, hAsync("calcite-input", { class: CSS$F.input, label: intlHex, maxLength: 6, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (hAsync("calcite-color-picker-swatch", { active: true, class: CSS$F.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+    return (hAsync("div", { class: CSS$F.container }, hAsync("calcite-input", { class: CSS$F.input, label: intlHex, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (hAsync("calcite-color-picker-swatch", { active: true, class: CSS$F.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -13645,6 +13654,7 @@ class ColorPickerHexInput {
       "intlNoColor": [1, "intl-no-color"],
       "scale": [513],
       "value": [1537],
+      "numberingSystem": [1, "numbering-system"],
       "internalColor": [32],
       "setFocus": [64]
     },
@@ -15838,7 +15848,7 @@ class Combobox {
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+        this.active ? this.onOpen() : this.onClose();
       }
     };
     /* *
@@ -15847,18 +15857,18 @@ class Combobox {
     */
     this.transitionRunHandler = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("beforeOpen") : this.emitOpenCloseEvent("beforeClose");
+        this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
-    this.setMaxScrollerHeight = () => {
+    this.setMaxScrollerHeight = async () => {
       const { active, listContainerEl } = this;
       if (!listContainerEl || !active) {
         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;
@@ -15986,7 +15996,7 @@ class Combobox {
       this.active = false;
       return;
     }
-    this.reposition();
+    this.setMaxScrollerHeight();
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -16112,18 +16122,17 @@ class Combobox {
       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 = {
@@ -17951,6 +17960,8 @@ class DatePickerMonth {
   }; }
 }
 
+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*/.sc-calcite-date-picker-month-header: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*/.calcite-animate.sc-calcite-date-picker-month-header{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*/.calcite-animate__in.sc-calcite-date-picker-month-header{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-date-picker-month-header{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-date-picker-month-header{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-date-picker-month-header{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-date-picker-month-header:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-date-picker-month-header-h{display:none}/*!@:host*/.sc-calcite-date-picker-month-header-h{display:block}/*!@.header*/.header.sc-calcite-date-picker-month-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*/[scale=s].sc-calcite-date-picker-month-header-h .text.sc-calcite-date-picker-month-header{margin-top:0.5rem;margin-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=s]) .chevron*/[scale=s].sc-calcite-date-picker-month-header-h .chevron.sc-calcite-date-picker-month-header{height:2.25rem}/*!@:host([scale=m]) .text*/[scale=m].sc-calcite-date-picker-month-header-h .text.sc-calcite-date-picker-month-header{margin-top:0.75rem;margin-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=m]) .chevron*/[scale=m].sc-calcite-date-picker-month-header-h .chevron.sc-calcite-date-picker-month-header{height:3rem}/*!@:host([scale=l]) .text*/[scale=l].sc-calcite-date-picker-month-header-h .text.sc-calcite-date-picker-month-header{margin-top:1rem;margin-bottom:1rem;font-size:var(--calcite-font-size-1);line-height:1.5rem}/*!@:host([scale=l]) .chevron*/[scale=l].sc-calcite-date-picker-month-header-h .chevron.sc-calcite-date-picker-month-header{height:3.5rem}/*!@.chevron*/.chevron.sc-calcite-date-picker-month-header{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*/.chevron.sc-calcite-date-picker-month-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.chevron:hover,  .chevron:focus*/.chevron.sc-calcite-date-picker-month-header:hover,.chevron.sc-calcite-date-picker-month-header:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}/*!@.chevron:active*/.chevron.sc-calcite-date-picker-month-header:active{background-color:var(--calcite-ui-foreground-3)}/*!@.chevron[aria-disabled=true]*/.chevron[aria-disabled=true].sc-calcite-date-picker-month-header{pointer-events:none;opacity:0}/*!@.text*/.text.sc-calcite-date-picker-month-header{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*/.text-nreverse.sc-calcite-date-picker-month-header{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@.month, \n.year, \n.suffix*/.month.sc-calcite-date-picker-month-header,.year.sc-calcite-date-picker-month-header,.suffix.sc-calcite-date-picker-month-header{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*/.year.sc-calcite-date-picker-month-header{position:relative;width:3rem;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;z-index:2}/*!@.year:hover*/.year.sc-calcite-date-picker-month-header: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*/.year.sc-calcite-date-picker-month-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}/*!@.year--suffix*/.year--suffix.sc-calcite-date-picker-month-header{width:4rem;text-align:left}/*!@.year-wrap*/.year-wrap.sc-calcite-date-picker-month-header{position:relative}/*!@.suffix*/.suffix.sc-calcite-date-picker-month-header{position:absolute;top:0px;left:0px;width:4rem;white-space:nowrap;text-align:left}/*!@.suffix__invisible*/.suffix__invisible.sc-calcite-date-picker-month-header{visibility:hidden}";
 
 class DatePickerMonthHeader {
@@ -17968,7 +17979,7 @@ class DatePickerMonthHeader {
      * @param e
      */
     this.onYearKey = (e) => {
-      const localizedYear = e.target.value;
+      const localizedYear = this.parseCalendarYear(e.target.value);
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
@@ -17981,10 +17992,15 @@ class DatePickerMonthHeader {
       }
     };
     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);
@@ -18032,7 +18048,7 @@ class DatePickerMonthHeader {
     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");
@@ -18049,6 +18065,18 @@ class DatePickerMonthHeader {
     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);
@@ -18072,14 +18100,14 @@ class DatePickerMonthHeader {
    * @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 getElement(this); }
@@ -19940,7 +19968,7 @@ const TEXT$c = {
 const inputCss = "@-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*/.sc-calcite-input: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*/.calcite-animate.sc-calcite-input{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*/.calcite-animate__in.sc-calcite-input{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-input{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-input{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-input{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-input:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-input-h{display:none}/*!@:host*/.sc-calcite-input-h{display:block}/*!@:host([scale=s]) input,  :host([scale=s]) .prefix,  :host([scale=s]) .suffix*/[scale=s].sc-calcite-input-h input.sc-calcite-input,[scale=s].sc-calcite-input-h .prefix.sc-calcite-input,[scale=s].sc-calcite-input-h .suffix.sc-calcite-input{height:1.5rem;padding-left:0.5rem;padding-right:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s]) textarea*/[scale=s].sc-calcite-input-h textarea.sc-calcite-input{height:1.5rem;min-height:1.5rem}/*!@:host([scale=s]) .number-button-wrapper,  :host([scale=s]) .action-wrapper calcite-button,  :host([scale=s]) .action-wrapper calcite-button button*/[scale=s].sc-calcite-input-h .number-button-wrapper.sc-calcite-input,[scale=s].sc-calcite-input-h .action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=s].sc-calcite-input-h .action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:1.5rem}/*!@:host([scale=s]) input[type=file]*/[scale=s].sc-calcite-input-h input[type=file].sc-calcite-input{height:1.5rem}/*!@:host([scale=s]) .clear-button*/[scale=s].sc-calcite-input-h .clear-button.sc-calcite-input{min-height:1.5rem;min-width:1.5rem}/*!@:host([scale=s]) textarea*/[scale=s].sc-calcite-input-h textarea.sc-calcite-input{height:auto;padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.5rem;padding-right:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=m]) input,  :host([scale=m]) .prefix,  :host([scale=m]) .suffix*/[scale=m].sc-calcite-input-h input.sc-calcite-input,[scale=m].sc-calcite-input-h .prefix.sc-calcite-input,[scale=m].sc-calcite-input-h .suffix.sc-calcite-input{height:2rem;padding-left:0.75rem;padding-right:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) textarea*/[scale=m].sc-calcite-input-h textarea.sc-calcite-input{min-height:2rem}/*!@:host([scale=m]) .number-button-wrapper,  :host([scale=m]) .action-wrapper calcite-button,  :host([scale=m]) .action-wrapper calcite-button button*/[scale=m].sc-calcite-input-h .number-button-wrapper.sc-calcite-input,[scale=m].sc-calcite-input-h .action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=m].sc-calcite-input-h .action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:2rem}/*!@:host([scale=m]) input[type=file]*/[scale=m].sc-calcite-input-h input[type=file].sc-calcite-input{height:2rem}/*!@:host([scale=m]) .clear-button*/[scale=m].sc-calcite-input-h .clear-button.sc-calcite-input{min-height:2rem;min-width:2rem}/*!@:host([scale=m]) textarea*/[scale=m].sc-calcite-input-h textarea.sc-calcite-input{height:auto;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:0.75rem;padding-right:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l]) input,  :host([scale=l]) .prefix,  :host([scale=l]) .suffix*/[scale=l].sc-calcite-input-h input.sc-calcite-input,[scale=l].sc-calcite-input-h .prefix.sc-calcite-input,[scale=l].sc-calcite-input-h .suffix.sc-calcite-input{height:2.75rem;padding-left:1rem;padding-right:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) textarea*/[scale=l].sc-calcite-input-h textarea.sc-calcite-input{min-height:2.75rem}/*!@:host([scale=l]) .number-button-wrapper,  :host([scale=l]) .action-wrapper calcite-button,  :host([scale=l]) .action-wrapper calcite-button button*/[scale=l].sc-calcite-input-h .number-button-wrapper.sc-calcite-input,[scale=l].sc-calcite-input-h .action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=l].sc-calcite-input-h .action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:2.75rem}/*!@:host([scale=l]) input[type=file]*/[scale=l].sc-calcite-input-h input[type=file].sc-calcite-input{height:2.75rem}/*!@:host([scale=l]) .clear-button*/[scale=l].sc-calcite-input-h .clear-button.sc-calcite-input{min-height:2.75rem;min-width:2.75rem}/*!@:host([scale=l]) textarea*/[scale=l].sc-calcite-input-h textarea.sc-calcite-input{height:auto;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([disabled])*/[disabled].sc-calcite-input-h{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]) textarea*/[disabled].sc-calcite-input-h textarea.sc-calcite-input{resize:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-h[disabled] .sc-calcite-input-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-h [calcite-hydrated][disabled].sc-calcite-input{opacity:1}/*!@:host textarea,\n:host input*/.sc-calcite-input-h textarea.sc-calcite-input,.sc-calcite-input-h input.sc-calcite-input{-webkit-transition:var(--calcite-animation-timing), height 0, outline-offset 0s;transition:var(--calcite-animation-timing), height 0, outline-offset 0s;-webkit-appearance:none;position:relative;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;max-height:100%;width:100%;max-width:100%;-ms-flex:1 1 0%;flex:1 1 0%;border-radius:0px;background-color:var(--calcite-ui-foreground-1);font-family:inherit;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1)}/*!@:host input[type=search]::-webkit-search-decoration*/.sc-calcite-input-h input[type=search].sc-calcite-input::-webkit-search-decoration{-webkit-appearance:none}/*!@:host input,  :host textarea*/.sc-calcite-input-h input.sc-calcite-input,.sc-calcite-input-h textarea.sc-calcite-input{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);color:var(--calcite-ui-text-1)}/*!@:host input::placeholder,  :host input:-ms-input-placeholder,  :host input::-ms-input-placeholder,  :host textarea::placeholder,  :host textarea:-ms-input-placeholder,  :host textarea::-ms-input-placeholder*/.sc-calcite-input-h input.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input:-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.sc-calcite-input-h input.sc-calcite-input::-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.sc-calcite-input-h input.sc-calcite-input::placeholder,.sc-calcite-input-h input.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h input.sc-calcite-input::-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::placeholder,.sc-calcite-input-h textarea.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::-ms-input-placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}/*!@:host input:focus,  :host textarea:focus*/.sc-calcite-input-h input.sc-calcite-input:focus,.sc-calcite-input-h textarea.sc-calcite-input:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1)}/*!@:host input[readonly],  :host textarea[readonly]*/.sc-calcite-input-h input[readonly].sc-calcite-input,.sc-calcite-input-h textarea[readonly].sc-calcite-input{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium)}/*!@:host input[readonly]:focus,  :host textarea[readonly]:focus*/.sc-calcite-input-h input[readonly].sc-calcite-input:focus,.sc-calcite-input-h textarea[readonly].sc-calcite-input:focus{color:var(--calcite-ui-text-1)}/*!@:host calcite-icon*/.sc-calcite-input-h calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-3)}/*!@:host textarea, \n:host input*/.sc-calcite-input-h textarea.sc-calcite-input,.sc-calcite-input-h input.sc-calcite-input{outline-color:transparent}/*!@:host textarea:focus, \n:host input:focus*/.sc-calcite-input-h textarea.sc-calcite-input:focus,.sc-calcite-input-h input.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@:host([status=invalid]) input,  :host([status=invalid]) textarea*/[status=invalid].sc-calcite-input-h input.sc-calcite-input,[status=invalid].sc-calcite-input-h textarea.sc-calcite-input{border-color:var(--calcite-ui-danger)}/*!@:host([status=invalid]) input:focus,  :host([status=invalid]) textarea:focus*/[status=invalid].sc-calcite-input-h input.sc-calcite-input:focus,[status=invalid].sc-calcite-input-h textarea.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-danger);outline-offset:-2px}/*!@:host([scale=s]) .icon*/[scale=s].sc-calcite-input-h .icon.sc-calcite-input{inset-inline-start:0.5rem}/*!@:host([scale=m]) .icon*/[scale=m].sc-calcite-input-h .icon.sc-calcite-input{inset-inline-start:0.75rem}/*!@:host([scale=l]) .icon*/[scale=l].sc-calcite-input-h .icon.sc-calcite-input{inset-inline-start:1rem}/*!@:host([icon][scale=s]) input*/[icon][scale=s].sc-calcite-input-h input.sc-calcite-input{-webkit-padding-start:2rem;padding-inline-start:2rem}/*!@:host([icon][scale=m]) input*/[icon][scale=m].sc-calcite-input-h input.sc-calcite-input{-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}/*!@:host([icon][scale=l]) input*/[icon][scale=l].sc-calcite-input-h input.sc-calcite-input{-webkit-padding-start:3rem;padding-inline-start:3rem}/*!@.element-wrapper*/.element-wrapper.sc-calcite-input{position:relative;-ms-flex-order:3;order:3;display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1 1 0%;flex:1 1 0%;-ms-flex-align:center;align-items:center}/*!@.icon*/.icon.sc-calcite-input{pointer-events:none;position:absolute;z-index:10;display:block;-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}/*!@input[type=text]::-ms-clear, \ninput[type=text]::-ms-reveal*/input[type=text].sc-calcite-input::-ms-clear,input[type=text].sc-calcite-input::-ms-reveal{display:none;height:0px;width:0px}/*!@input[type=search]::-webkit-search-decoration, \ninput[type=search]::-webkit-search-cancel-button, \ninput[type=search]::-webkit-search-results-button, \ninput[type=search]::-webkit-search-results-decoration, \ninput[type=date]::-webkit-clear-button, \ninput[type=time]::-webkit-clear-button*/input[type=search].sc-calcite-input::-webkit-search-decoration,input[type=search].sc-calcite-input::-webkit-search-cancel-button,input[type=search].sc-calcite-input::-webkit-search-results-button,input[type=search].sc-calcite-input::-webkit-search-results-decoration,input[type=date].sc-calcite-input::-webkit-clear-button,input[type=time].sc-calcite-input::-webkit-clear-button{display:none}/*!@.clear-button*/.clear-button.sc-calcite-input{pointer-events:initial;-ms-flex-order:4;order:4;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;min-height:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:stretch;align-self:stretch;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);outline-color:transparent;border-inline-start-width:0px}/*!@.clear-button:hover*/.clear-button.sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2);-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}/*!@.clear-button:hover calcite-icon*/.clear-button.sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1);-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}/*!@.clear-button:active*/.clear-button.sc-calcite-input:active{background-color:var(--calcite-ui-foreground-3)}/*!@.clear-button:active calcite-icon*/.clear-button.sc-calcite-input:active calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}/*!@.clear-button:focus*/.clear-button.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.clear-button:disabled*/.clear-button.sc-calcite-input:disabled{opacity:var(--calcite-ui-opacity-disabled)}/*!@.loader*/.loader.sc-calcite-input{top:1px;left:1px;right:1px;pointer-events:none;position:absolute;display:block}/*!@.action-wrapper*/.action-wrapper.sc-calcite-input{-ms-flex-order:7;order:7;display:-ms-flexbox;display:flex}/*!@.prefix, \n.suffix*/.prefix.sc-calcite-input,.suffix.sc-calcite-input{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;height:auto;min-height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;overflow-wrap:break-word;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium);line-height:1;color:var(--calcite-ui-text-2)}/*!@.prefix*/.prefix.sc-calcite-input{-ms-flex-order:2;order:2;border-inline-end-width:0px}/*!@.suffix*/.suffix.sc-calcite-input{-ms-flex-order:5;order:5;border-inline-start-width:0px}/*!@:host([alignment=start]) textarea, :host([alignment=start]) input*/[alignment=start].sc-calcite-input-h textarea.sc-calcite-input,[alignment=start].sc-calcite-input-h input.sc-calcite-input{text-align:start}/*!@:host([alignment=end]) textarea, :host([alignment=end]) input*/[alignment=end].sc-calcite-input-h textarea.sc-calcite-input,[alignment=end].sc-calcite-input-h input.sc-calcite-input{text-align:end}/*!@:host input[type=number]*/.sc-calcite-input-h input[type=number].sc-calcite-input{-moz-appearance:textfield}/*!@:host input[type=number]::-webkit-inner-spin-button, :host input[type=number]::-webkit-outer-spin-button*/.sc-calcite-input-h input[type=number].sc-calcite-input::-webkit-inner-spin-button,.sc-calcite-input-h input[type=number].sc-calcite-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0px}/*!@.number-button-wrapper*/.number-button-wrapper.sc-calcite-input{pointer-events:none;-ms-flex-order:6;order:6;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-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}/*!@:host([number-button-type=vertical]) .wrapper*/[number-button-type=vertical].sc-calcite-input-h .wrapper.sc-calcite-input{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex}/*!@:host([number-button-type=vertical]) input, \n:host([number-button-type=vertical]) textarea*/[number-button-type=vertical].sc-calcite-input-h input.sc-calcite-input,[number-button-type=vertical].sc-calcite-input-h textarea.sc-calcite-input{-ms-flex-order:2;order:2}/*!@:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon*/[number-button-type=horizontal].sc-calcite-input-h .calcite--rtl.sc-calcite-input .number-button-item[data-adjustment=down].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}/*!@:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon*/[number-button-type=horizontal].sc-calcite-input-h .calcite--rtl.sc-calcite-input .number-button-item[data-adjustment=up].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=down],  .number-button-item.number-button-item--horizontal[data-adjustment=up]*/.number-button-item.number-button-item--horizontal[data-adjustment=down].sc-calcite-input,.number-button-item.number-button-item--horizontal[data-adjustment=up].sc-calcite-input{-ms-flex-order:1;order:1;max-height:100%;min-height:100%;-ms-flex-item-align:stretch;align-self:stretch}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon, .number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon*/.number-button-item.number-button-item--horizontal[data-adjustment=down].sc-calcite-input calcite-icon.sc-calcite-input,.number-button-item.number-button-item--horizontal[data-adjustment=up].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(90deg);transform:rotate(90deg)}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=down]*/.number-button-item.number-button-item--horizontal[data-adjustment=down].sc-calcite-input{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-inline-end-width:0px}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover*/.number-button-item.number-button-item--horizontal[data-adjustment=down].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon*/.number-button-item.number-button-item--horizontal[data-adjustment=down].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=up]*/.number-button-item.number-button-item--horizontal[data-adjustment=up].sc-calcite-input{-ms-flex-order:5;order:5}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover*/.number-button-item.number-button-item--horizontal[data-adjustment=up].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}/*!@.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon*/.number-button-item.number-button-item--horizontal[data-adjustment=up].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}/*!@:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover*/[number-button-type=vertical].sc-calcite-input-h .number-button-item[data-adjustment=down].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}/*!@:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon*/[number-button-type=vertical].sc-calcite-input-h .number-button-item[data-adjustment=down].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}/*!@:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover*/[number-button-type=vertical].sc-calcite-input-h .number-button-item[data-adjustment=up].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}/*!@:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon*/[number-button-type=vertical].sc-calcite-input-h .number-button-item[data-adjustment=up].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}/*!@:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]*/[number-button-type=vertical].sc-calcite-input-h .number-button-item[data-adjustment=down].sc-calcite-input{border-top-width:0px}/*!@.number-button-item*/.number-button-item.sc-calcite-input{max-height:50%;min-height:50%;pointer-events:initial;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);padding-top:0px;padding-bottom:0px;padding-left:0.5rem;padding-right:0.5rem;-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;border-inline-start-width:0px}/*!@.number-button-item calcite-icon*/.number-button-item.sc-calcite-input calcite-icon.sc-calcite-input{pointer-events:none;-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}/*!@.number-button-item:focus*/.number-button-item.sc-calcite-input:focus{background-color:var(--calcite-ui-foreground-2)}/*!@.number-button-item:focus calcite-icon*/.number-button-item.sc-calcite-input:focus calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}/*!@.number-button-item:active*/.number-button-item.sc-calcite-input:active{background-color:var(--calcite-ui-foreground-3)}/*!@.wrapper*/.wrapper.sc-calcite-input{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}/*!@:host input::-webkit-calendar-picker-indicator*/.sc-calcite-input-h input.sc-calcite-input::-webkit-calendar-picker-indicator{display:none}/*!@:host input[type=date]::-webkit-input-placeholder*/.sc-calcite-input-h input[type=date].sc-calcite-input::-webkit-input-placeholder{visibility:hidden !important}/*!@:host textarea::-webkit-resizer*/.sc-calcite-input-h textarea.sc-calcite-input::-webkit-resizer{position:absolute;bottom:0px;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:0px;padding-bottom:0px;padding-left:0.25rem;padding-right:0.25rem;inset-inline-end:0}/*!@.resize-icon-wrapper*/.resize-icon-wrapper.sc-calcite-input{bottom:2px;inset-inline-end:2px;pointer-events:none;position:absolute;z-index:10;height:0.75rem;width:0.75rem;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3)}/*!@.resize-icon-wrapper calcite-icon*/.resize-icon-wrapper.sc-calcite-input calcite-icon.sc-calcite-input{bottom:0.25rem;inset-inline-end:0.25rem;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}/*!@.calcite--rtl .resize-icon-wrapper calcite-icon*/.calcite--rtl.sc-calcite-input .resize-icon-wrapper.sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(45deg);transform:rotate(45deg)}/*!@:host([type=color]) input*/[type=color].sc-calcite-input-h input.sc-calcite-input{padding:0.25rem}/*!@:host([type=file]) input*/[type=file].sc-calcite-input-h input.sc-calcite-input{cursor:pointer;border-width:1px;border-style:dashed;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);text-align:center}/*!@:host([type=file][scale=s]) input*/[type=file][scale=s].sc-calcite-input-h input.sc-calcite-input{padding-top:1px;padding-bottom:1px;padding-left:0.5rem;padding-right:0.5rem}/*!@:host([type=file][scale=m]) input*/[type=file][scale=m].sc-calcite-input-h input.sc-calcite-input{padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.75rem;padding-right:0.75rem}/*!@:host([type=file][scale=l]) input*/[type=file][scale=l].sc-calcite-input-h input.sc-calcite-input{padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem}/*!@:host(.no-bottom-border) input*/.no-bottom-border.sc-calcite-input-h input.sc-calcite-input{border-bottom-width:0px}/*!@:host(.border-top-color-one) input*/.border-top-color-one.sc-calcite-input-h input.sc-calcite-input{border-top-color:var(--calcite-ui-border-1)}/*!@:host .inline-child*/.sc-calcite-input-h .inline-child.sc-calcite-input{background-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}/*!@:host .inline-child .editing-enabled*/.sc-calcite-input-h .inline-child.sc-calcite-input .editing-enabled.sc-calcite-input{background-color:inherit}/*!@:host .inline-child:not(.editing-enabled)*/.sc-calcite-input-h .inline-child.sc-calcite-input:not(.editing-enabled){display:-ms-flexbox;display:flex;cursor:pointer;border-color:transparent;-webkit-padding-start:0;padding-inline-start:0}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-s>input[slot=hidden-form-input]{bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 /**
- * @slot action - A slot for positioning a button next to an input
+ * @slot action - A slot for positioning a button next to the component.
  */
 class Input {
   constructor(hostRef) {
@@ -19954,33 +19982,45 @@ class Input {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** specify the alignment of the value of the input */
+    /** Specifies the text alignment of the component's value. */
     this.alignment = "start";
-    /** should the input autofocus */
+    /**
+     * When true, the component is focused on page load.
+     *
+     * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+     */
     this.autofocus = false;
     /**
-     * optionally display a clear button that displays when field has a value
-     * shows by default for search, time, date
-     * will not display for type="textarea"
+     * When true, a clear button is displayed when the component has a value. The clear button shows by default for "search", "time", and "date" types, and will not display for the "textarea" type.
      */
     this.clearable = false;
-    /** is the input disabled  */
+    /**
+     * When true, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)
+     */
     this.disabled = false;
-    /** for number values, displays the locale's group separator */
+    /**
+     * When true, number values are displayed with the locale's group separator.
+     */
     this.groupSeparator = false;
-    /** when true, the component will not be visible */
+    /**
+     * When true, the component will not be visible.
+     *
+     * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden)
+     */
     this.hidden = false;
     /**
-     * string to override English loading text
+     * Accessible name that will appear while loading.
      *
      * @default "Loading"
      */
     this.intlLoading = TEXT$s.loading;
-    /** flip the icon in rtl */
+    /** When true, the icon is flipped in RTL. */
     this.iconFlipRtl = false;
-    /** specify if the input is in loading state */
+    /** When true, the component is in the loading state and `calcite-progress` is displayed. */
     this.loading = false;
-    /** BCP 47 language tag for desired language and country format */
+    /** Specifies the BCP 47 language tag for the desired language and country format. */
     this.locale = document.documentElement.lang || "en";
     /**
      * Toggles locale formatting for numbers.
@@ -19988,27 +20028,31 @@ class Input {
      * @internal
      */
     this.localeFormat = false;
-    /** specify the placement of the number buttons */
+    /** Specifies the placement of the buttons for type "number". */
     this.numberButtonType = "vertical";
-    /** When true, a field cannot be modified. */
+    /**
+     * When true, the value cannot be modified.
+     *
+     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     */
     this.readOnly = false;
-    /** is the input required */
+    /** When true, the component must have a value in order for the form to submit. */
     this.required = false;
-    /** specify the scale of the input, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** specify the status of the input field, determines message and icons */
+    /** Specifies the status of the input field, which determines message and icons. */
     this.status = "idle";
     /**
      * @internal
      */
     this.editingEnabled = false;
     /**
-     * specify the input type
+     * Specifies the component type.
      *
-     * Note that the following types add type-specific icons by default: `date`, `email`, `password`, `search`, `tel`, `time`
+     * Note that the following types add type-specific icons by default: "date", "email", "password", "search", "tel", "time".
      */
     this.type = "text";
-    /** input value */
+    /** The component's value. */
     this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
@@ -20187,10 +20231,10 @@ class Input {
         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);
@@ -20375,6 +20419,16 @@ class Input {
       (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
     }
   }
+  /** Selects all text of the component's `value`. */
+  async selectText() {
+    var _a, _b;
+    if (this.type === "number") {
+      (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.select();
+    }
+    else {
+      (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.select();
+    }
+  }
   onLabelClick() {
     this.setFocus();
   }
@@ -20451,11 +20505,11 @@ class Input {
     const numberButtonsHorizontalUp = (hAsync("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" }, hAsync("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" }, hAsync("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (hAsync("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" }, hAsync("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" }, hAsync("calcite-icon", { icon: "chevron-down", scale: "s" })));
     const numberButtonsVertical = (hAsync("div", { class: CSS$s.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = hAsync("div", { class: CSS$s.prefix }, this.prefixText);
     const suffixText = hAsync("div", { class: CSS$s.suffix }, this.suffixText);
@@ -20525,7 +20579,8 @@ class Input {
       "type": [513],
       "value": [1025],
       "localizedValue": [32],
-      "setFocus": [64]
+      "setFocus": [64],
+      "selectText": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -25127,6 +25182,9 @@ class RadioGroup {
       items[0].tabIndex = 0;
     }
   }
+  componentDidLoad() {
+    afterConnectDefaultValueSet(this, this.value);
+  }
   connectedCallback() {
     connectLabel(this);
     connectForm(this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.504",
+  "version": "1.0.0-next.507",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -70,10 +70,10 @@
     "sortablejs": "1.15.0"
   },
   "devDependencies": {
-    "@babel/preset-react": "7.17.12",
+    "@babel/preset-react": "7.18.6",
     "@esri/calcite-base": "^1.2.0",
     "@esri/calcite-colors": "6.0.1",
-    "@esri/calcite-ui-icons": "3.19.3",
+    "@esri/calcite-ui-icons": "3.19.4",
     "@esri/eslint-plugin-calcite-components": "0.1.4",
     "@stencil/eslint-plugin": "0.4.0",
     "@stencil/postcss": "2.1.0",
@@ -96,7 +96,7 @@
     "@types/sortablejs": "1.13.0",
     "@types/standard-version": "7.0.1",
     "@types/yargs": "17.0.10",
-    "@typescript-eslint/eslint-plugin": "5.29.0",
+    "@typescript-eslint/eslint-plugin": "5.30.0",
     "@typescript-eslint/parser": "5.29.0",
     "@whitespace/storybook-addon-html": "5.0.0",
     "autoprefixer": "10.4.7",
@@ -113,8 +113,8 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-jest": "26.5.3",
     "eslint-plugin-jsdoc": "39.3.3",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.30.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.30.1",
     "eslint-plugin-unicorn": "42.0.0",
     "gh-release": "6.0.4",
     "git-semver-tags": "4.1.1",
@@ -122,7 +122,7 @@
     "jest": "26.6.3",
     "jest-axe": "6.0.0",
     "jest-cli": "26.6.3",
-    "lint-staged": "13.0.2",
+    "lint-staged": "13.0.3",
     "pify": "5.0.0",
     "postcss": "8.4.14",
     "prettier": "2.7.1",