@esri/calcite-components 1.0.0-next.451 → 1.0.0-next.452

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.451
+ * v1.0.0-next.452
  */
 'use strict';
 
@@ -5720,7 +5720,7 @@ const CSS_UTILITY = {
   lightTheme,
   rtl: "calcite--rtl"
 };
-const TEXT$r = {
+const TEXT$s = {
   loading: "Loading"
 };
 
@@ -6063,7 +6063,7 @@ const CSS$P = {
   textContainer: "text-container",
   textContainerVisible: "text-container--visible"
 };
-const TEXT$q = {
+const TEXT$r = {
   loading: "Loading"
 };
 
@@ -6150,7 +6150,7 @@ class Action {
     /** string to override English loading text
      * @default "Loading"
      */
-    this.intlLoading = TEXT$q.loading;
+    this.intlLoading = TEXT$r.loading;
     /**
      * When true, content is waiting to be loaded. This state shows a busy indicator.
      */
@@ -6281,7 +6281,7 @@ const SLOTS$o = {
   menuActions: "menu-actions",
   menuTooltip: "menu-tooltip"
 };
-const TEXT$p = {
+const TEXT$q = {
   more: "More"
 };
 const ICONS$e = {
@@ -6372,7 +6372,7 @@ const SLOTS$n = {
   bottomActions: "bottom-actions",
   expandTooltip: "expand-tooltip"
 };
-const TEXT$o = {
+const TEXT$p = {
   expand: "Expand",
   collapse: "Collapse"
 };
@@ -7825,8 +7825,8 @@ class ActionBar {
   renderBottomActionGroup() {
     const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale } = this;
     const tooltip = getSlotted(el, SLOTS$n.expandTooltip);
-    const expandLabel = intlExpand || TEXT$o.expand;
-    const collapseLabel = intlCollapse || TEXT$o.collapse;
+    const expandLabel = intlExpand || TEXT$p.expand;
+    const collapseLabel = intlCollapse || TEXT$p.collapse;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
     return getSlotted(el, SLOTS$n.bottomActions) || expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$N.actionGroupBottom, scale: scale }, hAsync("slot", { name: SLOTS$n.bottomActions }), hAsync("slot", { name: SLOTS$n.expandTooltip }), expandToggleNode)) : null;
   }
@@ -7923,7 +7923,7 @@ class ActionGroup {
   renderMenu() {
     const { el, expanded, intlMore, menuOpen, scale } = this;
     const hasMenuItems = getSlotted(el, SLOTS$o.menuActions);
-    return hasMenuItems ? (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT$p.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$e.menu, scale: scale, slot: SLOTS$p.trigger, text: intlMore || TEXT$p.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$o.menuActions }), this.renderTooltip())) : null;
+    return hasMenuItems ? (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT$q.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$e.menu, scale: scale, slot: SLOTS$p.trigger, text: intlMore || TEXT$q.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$o.menuActions }), this.renderTooltip())) : null;
   }
   render() {
     return (hAsync(Fragment, null, hAsync("slot", null), this.renderMenu()));
@@ -8257,7 +8257,7 @@ const CSS$M = {
   actionGroupBottom: "action-group--bottom",
   container: "container"
 };
-const TEXT$n = {
+const TEXT$o = {
   expand: "Expand",
   collapse: "Collapse"
 };
@@ -8354,8 +8354,8 @@ class ActionPad {
   renderBottomActionGroup() {
     const { expanded, expandDisabled, intlExpand, intlCollapse, el, position, toggleExpand, scale } = this;
     const tooltip = getSlotted(el, SLOTS$m.expandTooltip);
-    const expandLabel = intlExpand || TEXT$n.expand;
-    const collapseLabel = intlCollapse || TEXT$n.collapse;
+    const expandLabel = intlExpand || TEXT$o.expand;
+    const collapseLabel = intlCollapse || TEXT$o.collapse;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
     return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$M.actionGroupBottom, scale: scale }, hAsync("slot", { name: SLOTS$m.expandTooltip }), expandToggleNode)) : null;
   }
@@ -8386,7 +8386,7 @@ class ActionPad {
   }; }
 }
 
-const TEXT$m = {
+const TEXT$n = {
   intlClose: "Close"
 };
 const DURATIONS = {
@@ -8441,7 +8441,7 @@ class Alert {
     /** string to override English close text
      * @default "Close"
      */
-    this.intlClose = TEXT$m.intlClose;
+    this.intlClose = TEXT$n.intlClose;
     /** specify the placement of the alert */
     this.placement = "bottom";
     /** specify the scale of the alert, defaults to m */
@@ -8894,7 +8894,7 @@ const CSS$L = {
   invalid: "invalid",
   loading: "loading"
 };
-const TEXT$l = {
+const TEXT$m = {
   collapse: "Collapse",
   expand: "Expand",
   loading: "Loading",
@@ -8952,14 +8952,22 @@ class Block {
      * When true, displays a drag handle in the header.
      */
     this.dragHandle = false;
+    /**
+     * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+     */
+    this.intlCollapse = TEXT$m.collapse;
+    /**
+     * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+     */
+    this.intlExpand = TEXT$m.expand;
     /** string to override English loading text
      * @default "Loading"
      */
-    this.intlLoading = TEXT$l.loading;
+    this.intlLoading = TEXT$m.loading;
     /** Text string used for the actions menu
      * @default "Options"
      */
-    this.intlOptions = TEXT$l.options;
+    this.intlOptions = TEXT$m.options;
     /**
      * When true, content is waiting to be loaded. This state shows a busy indicator.
      */
@@ -9027,7 +9035,7 @@ class Block {
   }
   render() {
     const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
-    const toggleLabel = open ? intlCollapse || TEXT$l.collapse : intlExpand || TEXT$l.expand;
+    const toggleLabel = open ? intlCollapse || TEXT$m.collapse : intlExpand || TEXT$m.expand;
     const headerContent = (hAsync("header", { class: CSS$L.header }, this.renderIcon(), this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS$k.control);
     const hasMenuActions = !!getSlotted(el, SLOTS$k.headerMenuActions);
@@ -9035,7 +9043,7 @@ class Block {
     const { guid } = this;
     const regionId = `${guid}-region`;
     const buttonId = `${guid}-button`;
-    const headerNode = (hAsync("div", { class: CSS$L.headerContainer }, this.dragHandle ? hAsync("calcite-handle", null) : null, collapsible ? (hAsync("button", { "aria-controls": regionId, "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS$L.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (hAsync("calcite-icon", { "aria-hidden": "true", class: CSS$L.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), loading ? (hAsync("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (hAsync("div", { class: CSS$L.controlContainer }, hAsync("slot", { name: SLOTS$k.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: this.intlOptions || TEXT$l.options }, hAsync("slot", { name: SLOTS$k.headerMenuActions }))) : null));
+    const headerNode = (hAsync("div", { class: CSS$L.headerContainer }, this.dragHandle ? hAsync("calcite-handle", null) : null, collapsible ? (hAsync("button", { "aria-controls": regionId, "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS$L.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (hAsync("calcite-icon", { "aria-hidden": "true", class: CSS$L.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), loading ? (hAsync("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (hAsync("div", { class: CSS$L.controlContainer }, hAsync("slot", { name: SLOTS$k.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: this.intlOptions || TEXT$m.options }, hAsync("slot", { name: SLOTS$k.headerMenuActions }))) : null));
     return (hAsync(Host, null, hAsync("article", { "aria-busy": loading.toString(), class: {
         [CSS$L.article]: true
       } }, headerNode, hAsync("section", { "aria-expanded": this.open.toString(), "aria-labelledby": buttonId, class: CSS$L.content, hidden: !open, id: regionId }, this.renderScrim()))));
@@ -9078,7 +9086,7 @@ const CSS$K = {
   statusIcon: "status-icon",
   valid: "valid"
 };
-const TEXT$k = {
+const TEXT$l = {
   collapse: "Collapse",
   expand: "Expand"
 };
@@ -9151,7 +9159,7 @@ class BlockSection {
       : dir === "rtl"
         ? ICONS$b.menuClosedLeft
         : ICONS$b.menuClosedRight;
-    const toggleLabel = open ? intlCollapse || TEXT$k.collapse : intlExpand || TEXT$k.expand;
+    const toggleLabel = open ? intlCollapse || TEXT$l.collapse : intlExpand || TEXT$l.expand;
     const { guid } = this;
     const regionId = `${guid}-region`;
     const buttonId = `${guid}-button`;
@@ -9223,7 +9231,7 @@ const CSS$J = {
   iconStartEmpty: "icon-start-empty",
   iconEndEmpty: "icon-end-empty"
 };
-const TEXT$j = {
+const TEXT$k = {
   loading: "Loading"
 };
 
@@ -9363,7 +9371,7 @@ class Button {
     /** string to override English loading text
      * @default "Loading"
      */
-    this.intlLoading = TEXT$j.loading;
+    this.intlLoading = TEXT$k.loading;
     /** optionally add a calcite-loader component to the button, disabling interaction.  */
     this.loading = false;
     /** optionally add a round style to the button  */
@@ -9527,7 +9535,7 @@ const SLOTS$j = {
   footerLeading: "footer-leading",
   footerTrailing: "footer-trailing"
 };
-const TEXT$i = {
+const TEXT$j = {
   select: "Select",
   deselect: "Deselect",
   loading: "Loading"
@@ -9564,15 +9572,15 @@ class Card {
     /** string to override English loading text
      * @default "Loading"
      */
-    this.intlLoading = TEXT$i.loading;
+    this.intlLoading = TEXT$j.loading;
     /** string to override English select text for checkbox when selectable is true
      * @default "Select"
      */
-    this.intlSelect = TEXT$i.select;
+    this.intlSelect = TEXT$j.select;
     /** string to override English deselect text for checkbox when selectable is true
      * @default "Deselect"
      */
-    this.intlDeselect = TEXT$i.deselect;
+    this.intlDeselect = TEXT$j.deselect;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -9966,7 +9974,7 @@ const CSS$H = {
   chipImageContainer: "chip-image-container",
   calciteChipIcon: "calcite-chip--icon"
 };
-const TEXT$h = {
+const TEXT$i = {
   close: "Close"
 };
 const SLOTS$i = {
@@ -10000,7 +10008,7 @@ class Chip {
     /** Aria label for the "x" button
      * @default "Close"
      */
-    this.dismissLabel = TEXT$h.close;
+    this.dismissLabel = TEXT$i.close;
     /** flip the icon in rtl */
     this.iconFlipRtl = false;
     /** specify the scale of the chip, defaults to m */
@@ -12222,7 +12230,7 @@ const HSV_LIMITS = {
   s: 100,
   v: 100
 };
-const TEXT$g = {
+const TEXT$h = {
   b: "B",
   blue: "Blue",
   deleteColor: "Delete color",
@@ -12347,80 +12355,80 @@ class ColorPicker {
     /** Label used for the blue channel
      * @default "B"
      */
-    this.intlB = TEXT$g.b;
+    this.intlB = TEXT$h.b;
     /** Label used for the blue channel description
      * @default "Blue"
      */
-    this.intlBlue = TEXT$g.blue;
+    this.intlBlue = TEXT$h.blue;
     /** Label used for the delete color button.
      * @default "Delete color"
      */
-    this.intlDeleteColor = TEXT$g.deleteColor;
+    this.intlDeleteColor = TEXT$h.deleteColor;
     /** Label used for the green channel
      * @default "G"
      */
-    this.intlG = TEXT$g.g;
+    this.intlG = TEXT$h.g;
     /** Label used for the green channel description
      * @default "Green"
      */
-    this.intlGreen = TEXT$g.green;
+    this.intlGreen = TEXT$h.green;
     /** Label used for the hue channel
      * @default "H"
      */
-    this.intlH = TEXT$g.h;
+    this.intlH = TEXT$h.h;
     /** Label used for the HSV mode
      * @default "HSV"
      */
-    this.intlHsv = TEXT$g.hsv;
+    this.intlHsv = TEXT$h.hsv;
     /** Label used for the hex input
      * @default "Hex"
      */
-    this.intlHex = TEXT$g.hex;
+    this.intlHex = TEXT$h.hex;
     /** Label used for the hue channel description
      * @default "Hue"
      */
-    this.intlHue = TEXT$g.hue;
+    this.intlHue = TEXT$h.hue;
     /**
      * Label used for the hex input when there is no color selected.
      * @default "No color"
      */
-    this.intlNoColor = TEXT$g.noColor;
+    this.intlNoColor = TEXT$h.noColor;
     /** Label used for the red channel
      * @default "R"
      */
-    this.intlR = TEXT$g.r;
+    this.intlR = TEXT$h.r;
     /** Label used for the red channel description
      * @default "Red"
      */
-    this.intlRed = TEXT$g.red;
+    this.intlRed = TEXT$h.red;
     /** Label used for the RGB mode
      * @default "RGB"
      */
-    this.intlRgb = TEXT$g.rgb;
+    this.intlRgb = TEXT$h.rgb;
     /** Label used for the saturation channel
      * @default "S"
      */
-    this.intlS = TEXT$g.s;
+    this.intlS = TEXT$h.s;
     /** Label used for the saturation channel description
      * @default "Saturation"
      */
-    this.intlSaturation = TEXT$g.saturation;
+    this.intlSaturation = TEXT$h.saturation;
     /** Label used for the save color button.
      * @default "Save color"
      */
-    this.intlSaveColor = TEXT$g.saveColor;
+    this.intlSaveColor = TEXT$h.saveColor;
     /** Label used for the saved colors section
      * @default "Saved"
      */
-    this.intlSaved = TEXT$g.saved;
+    this.intlSaved = TEXT$h.saved;
     /** Label used for the value channel
      * @default "V"
      */
-    this.intlV = TEXT$g.v;
+    this.intlV = TEXT$h.v;
     /** Label used for the
      * @default "Value"
      */
-    this.intlValue = TEXT$g.value;
+    this.intlValue = TEXT$h.value;
     /**
      * The scale of the color picker.
      */
@@ -13147,12 +13155,12 @@ class ColorPickerHexInput {
      * Label used for the hex input.
      * @default "Hex"
      */
-    this.intlHex = TEXT$g.hex;
+    this.intlHex = TEXT$h.hex;
     /**
      * Label used for the hex input when there is no color selected.
      * @default "No color"
      */
-    this.intlNoColor = TEXT$g.noColor;
+    this.intlNoColor = TEXT$h.noColor;
     /**
      * The component's scale.
      */
@@ -15279,7 +15287,7 @@ const defaultOffsetDistance = Math.ceil(hypotenuse(visiblePointerSize, visiblePo
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
 const ComboboxChildSelector = `${ComboboxItem$1}, ${ComboboxItemGroup$1}`;
-const TEXT$f = {
+const TEXT$g = {
   removeTag: "Remove tag"
 };
 
@@ -15358,7 +15366,7 @@ class Combobox {
     /** string to override the English "Remove tag" text for when an item is selected.
      * @default "Remove tag"
      */
-    this.intlRemoveTag = TEXT$f.removeTag;
+    this.intlRemoveTag = TEXT$g.removeTag;
     this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
@@ -16606,7 +16614,7 @@ function getDaysDiff(date1, date2) {
 }
 
 const HEADING_LEVEL$6 = 2;
-const TEXT$e = {
+const TEXT$f = {
   nextMonth: "Next month",
   prevMonth: "Previous month",
   year: "Year"
@@ -16622,15 +16630,15 @@ class DatePicker {
     /** Localized string for "previous month" (used for aria label)
      * @default "Previous month"
      */
-    this.intlPrevMonth = TEXT$e.prevMonth;
+    this.intlPrevMonth = TEXT$f.prevMonth;
     /** Localized string for "next month" (used for aria label)
      * @default "Next month"
      */
-    this.intlNextMonth = TEXT$e.nextMonth;
+    this.intlNextMonth = TEXT$f.nextMonth;
     /** Localized string for "year" (used for aria label)
      * @default "Year"
      */
-    this.intlYear = TEXT$e.year;
+    this.intlYear = TEXT$f.year;
     /** BCP 47 language tag for desired language and country format */
     this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */
@@ -18336,10 +18344,9 @@ class Fab {
 
 const CSS$x = {
   container: "container",
-  searchIcon: "search-icon",
-  clearButton: "clear-button"
+  searchIcon: "search-icon"
 };
-const TEXT$d = {
+const TEXT$e = {
   filterLabel: "Filter",
   clear: "Clear filter"
 };
@@ -18477,9 +18484,9 @@ class Filter {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (hAsync(Fragment, null, hAsync("div", { class: CSS$x.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.intlLabel || TEXT$d.filterLabel, disabled: disabled, icon: ICONS$8.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+    return (hAsync(Fragment, null, hAsync("div", { class: CSS$x.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.intlLabel || TEXT$e.filterLabel, clearable: true, disabled: disabled, icon: ICONS$8.search, intlClear: this.intlClear || TEXT$e.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
         this.textInput = el;
-      }, scale: scale, type: "text", value: this.value })), this.value ? (hAsync("button", { "aria-label": this.intlClear || TEXT$d.clear, class: CSS$x.clearButton, disabled: disabled, onClick: this.clear }, hAsync("calcite-icon", { icon: ICONS$8.close, scale: scale }))) : null)));
+      }, scale: scale, type: "text", value: this.value })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -19038,7 +19045,7 @@ const CSS$t = {
   enableEditingButton: "enable-editing-button",
   controlsWrapper: "controls-wrapper"
 };
-const TEXT$c = {
+const TEXT$d = {
   intlEnablingEditing: "Click to edit",
   intlCancelEditing: "Cancel",
   intlConfirmChanges: "Save"
@@ -19071,15 +19078,15 @@ class InlineEditable {
     /** specify text to be user for the enable editing button's aria-label, defaults to `Click to edit`
      * @default "Click to edit"
      */
-    this.intlEnableEditing = TEXT$c.intlEnablingEditing;
+    this.intlEnableEditing = TEXT$d.intlEnablingEditing;
     /** specify text to be user for the cancel editing button's aria-label, defaults to `Cancel`
      * @default "Cancel"
      */
-    this.intlCancelEditing = TEXT$c.intlCancelEditing;
+    this.intlCancelEditing = TEXT$d.intlCancelEditing;
     /** specify text to be user for the confirm changes button's aria-label, defaults to `Save`
      * @default "Save"
      */
-    this.intlConfirmChanges = TEXT$c.intlConfirmChanges;
+    this.intlConfirmChanges = TEXT$d.intlConfirmChanges;
     this.mutationObserver = createObserver();
     this.enableEditing = () => {
       var _a, _b;
@@ -19298,6 +19305,9 @@ const INPUT_TYPE_ICONS = {
 const SLOTS$g = {
   action: "action"
 };
+const TEXT$c = {
+  clear: "Clear value"
+};
 
 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: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: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: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 0s;transition:var(--calcite-animation-timing), height 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, :host input*/.sc-calcite-input-h textarea.sc-calcite-input,.sc-calcite-input-h input.sc-calcite-input{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}/*!@:host textarea:focus, :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-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}/*!@input[type=text]::-ms-clear, input[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, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration, input[type=date]::-webkit-clear-button, input[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-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;border-inline-start-width:0px}/*!@.clear-button:hover*/.clear-button.sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay: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-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay: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, .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-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay: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, :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-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay: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-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay: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-property:all;transition-property:all;-webkit-transition-duration:var(--calcite-animation-timing);transition-duration:var(--calcite-animation-timing);-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay: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}";
 
@@ -19334,7 +19344,7 @@ class Input {
      * string to override English loading text
      * @default "Loading"
      */
-    this.intlLoading = TEXT$r.loading;
+    this.intlLoading = TEXT$s.loading;
     /** flip the icon in rtl */
     this.iconFlipRtl = false;
     /** specify if the input is in loading state */
@@ -19782,7 +19792,7 @@ class Input {
   render() {
     const dir = getElementDir(this.el);
     const loader = (hAsync("div", { class: CSS$s.loader }, hAsync("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (hAsync("button", { class: CSS$s.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: this.disabled ? -1 : 0, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: "s" })));
+    const inputClearButton = (hAsync("button", { "aria-label": this.intlClear || TEXT$c.clear, class: CSS$s.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: this.disabled ? -1 : 0, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (hAsync("calcite-icon", { class: CSS$s.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (hAsync("button", { class: {
@@ -19835,6 +19845,7 @@ class Input {
       "groupSeparator": [4, "group-separator"],
       "hidden": [4],
       "icon": [520],
+      "intlClear": [1, "intl-clear"],
       "intlLoading": [1, "intl-loading"],
       "iconFlipRtl": [516, "icon-flip-rtl"],
       "label": [1],
@@ -19892,15 +19903,15 @@ class InputDatePicker {
     /** Localized string for "previous month" (used for aria label)
      * @default "Previous month"
      */
-    this.intlPrevMonth = TEXT$e.prevMonth;
+    this.intlPrevMonth = TEXT$f.prevMonth;
     /** Localized string for "next month" (used for aria label)
      * @default "Next month"
      */
-    this.intlNextMonth = TEXT$e.nextMonth;
+    this.intlNextMonth = TEXT$f.nextMonth;
     /** Localized string for "year" (used for aria label)
      * @default "Year"
      */
-    this.intlYear = TEXT$e.year;
+    this.intlYear = TEXT$f.year;
     /** BCP 47 language tag for desired language and country format */
     this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.451",
+  "version": "1.0.0-next.452",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -19,6 +19,7 @@
     "build": "npm run util:copy-icons && stencil build",
     "build:watch": "npm run util:copy-icons && stencil build --watch",
     "build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch",
+    "build-storybook": "npm run util:copy-icons && stencil build --config stencil.config.ts && build-storybook --static-dir ./www --output-dir ./docs",
     "deps:update": "updtr --exclude chalk typescript @types/jest jest jest-cli ts-jest puppeteer && npm audit fix",
     "docs": "concurrently --kill-others --raw \"npm:util:build-docs && build-storybook --static-dir ./__docs-temp__ --output-dir ./docs\"  \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
     "docs:preview": "concurrently --raw \"npm:util:build-docs && start-storybook --static-dir ./__docs-temp__\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
@@ -119,7 +120,7 @@
     "jest": "26.6.3",
     "jest-axe": "6.0.0",
     "jest-cli": "26.6.3",
-    "lint-staged": "12.4.0",
+    "lint-staged": "12.4.1",
     "pify": "5.0.0",
     "postcss": "8.4.12",
     "prettier": "2.6.2",
@@ -133,7 +134,7 @@
     "storybook": "6.4.22",
     "storybook-addon-themes": "6.1.0",
     "storybook-rtl-addon": "0.3.3",
-    "stylelint": "14.7.1",
+    "stylelint": "14.8.0",
     "stylelint-config-recommended-scss": "6.0.0",
     "tailwindcss": "3.0.24",
     "ts-jest": "27.1.2",

package/dist/calcite/p-05e00de2.entry.js

@@ -1,6 +0,0 @@
-/*!
- * 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.451
- */
-import{r as t,c as i,h as a,H as e,g as o}from"./p-868d4330.js";import{g as r}from"./p-2c06b3f6.js";import{a as n,f as s}from"./p-472bb25d.js";import{c,d,g as l}from"./p-4411a322.js";import{c as h,d as m,H as p}from"./p-626f2b63.js";import{g as b}from"./p-2fd4dc98.js";import{u}from"./p-51c80b17.js";const f=class{constructor(a){t(this,a),this.calciteInternalRadioButtonBlur=i(this,"calciteInternalRadioButtonBlur",7),this.calciteRadioButtonChange=i(this,"calciteRadioButtonChange",7),this.calciteInternalRadioButtonCheckedChange=i(this,"calciteInternalRadioButtonCheckedChange",7),this.calciteInternalRadioButtonFocus=i(this,"calciteInternalRadioButtonFocus",7),this.checked=!1,this.disabled=!1,this.focused=!1,this.hidden=!1,this.hovered=!1,this.required=!1,this.scale="m",this.selectItem=(t,i)=>{t[i].click()},this.queryButtons=()=>Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((t=>t.name===this.name)),this.isDefaultSelectable=()=>{const t=this.queryButtons();return!t.some((t=>t.checked))&&t[0]===this.el},this.check=()=>{this.disabled||(this.uncheckAllRadioButtonsInGroup(),this.checked=!0,this.calciteRadioButtonChange.emit(),this.setFocus())},this.clickHandler=()=>{this.check()},this.setContainerEl=t=>{this.containerEl=t},this.handleKeyDown=t=>{const i=t.key,{el:a}=this;if(-1===["ArrowLeft","ArrowUp","ArrowRight","ArrowDown"," "].indexOf(i))return;if(" "===i)return void this.check();let e=i;"rtl"===n(a)&&("ArrowRight"===i&&(e="ArrowLeft"),"ArrowLeft"===i&&(e="ArrowRight"));const o=Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((t=>t.name===this.name));let r=0;const s=o.length;switch(o.some(((t,i)=>{if(t.checked)return r=i,!0})),e){case"ArrowLeft":case"ArrowUp":return t.preventDefault(),void this.selectItem(o,b(Math.max(r-1,-1),s));case"ArrowRight":case"ArrowDown":return t.preventDefault(),void this.selectItem(o,b(r+1,s));default:return}},this.onContainerBlur=()=>{this.focused=!1,this.calciteInternalRadioButtonBlur.emit()},this.onContainerFocus=()=>{this.disabled||(this.focused=!0,this.calciteInternalRadioButtonFocus.emit())}}checkedChanged(t){t&&this.uncheckOtherRadioButtonsInGroup(),this.calciteInternalRadioButtonCheckedChange.emit(t)}nameChanged(){this.checkLastRadioButton()}async setFocus(){this.disabled||s(this.containerEl)}onLabelClick(t){if(!this.disabled&&!this.hidden){this.uncheckOtherRadioButtonsInGroup();const i=t.currentTarget,a=i.for?this.rootNode.querySelector(`calcite-radio-button[id="${i.for}"]`):i.querySelector(`calcite-radio-button[name="${this.name}"]`);a&&(a.checked=!0,a.focused=!0),this.calciteRadioButtonChange.emit(),this.setFocus()}}checkLastRadioButton(){const t=this.queryButtons().filter((t=>t.checked));if((null==t?void 0:t.length)>1){const i=t[t.length-1];t.filter((t=>t!==i)).forEach((t=>{t.checked=!1,t.emitCheckedChange()}))}}async emitCheckedChange(){this.calciteInternalRadioButtonCheckedChange.emit()}uncheckAllRadioButtonsInGroup(){this.queryButtons().forEach((t=>{t.checked&&(t.checked=!1,t.focused=!1)}))}uncheckOtherRadioButtonsInGroup(){this.queryButtons().filter((t=>t.guid!==this.guid)).forEach((t=>{t.checked&&(t.checked=!1,t.focused=!1)}))}getTabIndex(){if(!this.disabled)return this.checked||this.isDefaultSelectable()?0:-1}mouseenter(){this.hovered=!0}mouseleave(){this.hovered=!1}connectedCallback(){this.rootNode=this.el.getRootNode(),this.guid=this.el.id||`calcite-radio-button-${r()}`,this.name&&this.checkLastRadioButton(),c(this),h(this)}componentDidLoad(){this.focused&&!this.disabled&&this.setFocus()}disconnectedCallback(){d(this),m(this)}componentDidRender(){u(this)}render(){const t=this.getTabIndex();return a(e,{onClick:this.clickHandler,onKeyDown:this.handleKeyDown},a("div",{"aria-checked":this.checked.toString(),"aria-label":l(this),class:"container",onBlur:this.onContainerBlur,onFocus:this.onContainerFocus,ref:this.setContainerEl,role:"radio",tabIndex:t},a("div",{class:"radio"})),a(p,{component:this}))}get el(){return o(this)}static get watchers(){return{checked:["checkedChanged"],name:["nameChanged"]}}};f.style='@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}: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]) .radio{cursor:default;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hovered][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{height:var(--calcite-radio-size);max-width:var(--calcite-radio-size);min-width:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand)}:host([scale=s][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand)}:host([scale=m][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand)}:host([scale=l][focused][checked]:not([disabled])) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}@media (forced-colors: active){:host([checked]) .radio::after,:host([checked][disabled]) .radio::after{content:"";width:var(--calcite-radio-size);height:var(--calcite-radio-size);background-color:windowText;display:block}}::slotted(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}';export{f as calcite_radio_button}