@esri/calcite-components 1.1.0-next.3 → 1.1.0

package/dist/collection/components/tile-select/tile-select.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.1.0-next.3
+ * v1.1.0
  */
 import { h } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/tile-select-group/tile-select-group.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tile-select-group/tile-select-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.3
+ * v1.1.0
  */
 import { h } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/time-picker/resources.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.1.0-next.3
+ * v1.1.0
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/time-picker/time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.3
+ * v1.1.0
  */
 import { h } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";
@@ -548,7 +548,9 @@ export class TimePicker {
       }, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
         [CSS.input]: true,
         [CSS.hour]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setHourEl }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
         [CSS.button]: true,
         [CSS.buttonHourDown]: true,
         [CSS.buttonBottomLeft]: true
@@ -558,7 +560,9 @@ export class TimePicker {
       }, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
         [CSS.input]: true,
         [CSS.minute]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setMinuteEl }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS.button]: true,
         [CSS.buttonMinuteDown]: true
       }, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
@@ -567,7 +571,9 @@ export class TimePicker {
       }, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
         [CSS.input]: true,
         [CSS.second]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setSecondEl }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
         [CSS.button]: true,
         [CSS.buttonSecondDown]: true
       }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
@@ -580,7 +586,9 @@ export class TimePicker {
       }, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
         [CSS.input]: true,
         [CSS.meridiem]: true
-      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
+      }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setMeridiemEl }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS.button]: true,
         [CSS.buttonMeridiemDown]: true,
         [CSS.buttonBottomRight]: true

package/dist/collection/components/tip/resources.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.1.0-next.3
+ * v1.1.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tip/tip.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tip/tip.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.1.0-next.3
+ * v1.1.0
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/tip-group/tip-group.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tip-group/tip-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.3
+ * v1.1.0
  */
 import { h } from "@stencil/core";
 /**

package/dist/collection/components/tip-manager/resources.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.1.0-next.3
+ * v1.1.0
  */
 export const CSS = {
   header: "header",

package/dist/collection/components/tip-manager/tip-manager.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tip-manager/tip-manager.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.1.0-next.3
+ * v1.1.0
  */
 import { h } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
@@ -167,7 +167,9 @@ export class TipManager {
     if (total === 0) {
       return null;
     }
-    return (h("section", { "aria-hidden": toAriaBoolean(closed), class: CSS.container, hidden: closed, onKeyDown: this.tipManagerKeyDownHandler, ref: this.storeContainerRef, tabIndex: 0 }, h("header", { class: CSS.header }, h(Heading, { class: CSS.heading, level: headingLevel }, groupTitle), h("calcite-action", { class: CSS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel }, h("calcite-icon", { icon: ICONS.close, scale: "m" }))), h("div", { class: {
+    return (h("section", { "aria-hidden": toAriaBoolean(closed), class: CSS.container, hidden: closed, onKeyDown: this.tipManagerKeyDownHandler, tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.storeContainerRef }, h("header", { class: CSS.header }, h(Heading, { class: CSS.heading, level: headingLevel }, groupTitle), h("calcite-action", { class: CSS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel }, h("calcite-icon", { icon: ICONS.close, scale: "m" }))), h("div", { class: {
         [CSS.tipContainer]: true,
         [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
         [CSS.tipContainerRetreating]: !closed && direction === "retreating"

package/dist/collection/components/tooltip/TooltipManager.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.1.0-next.3
+ * v1.1.0
  */
 import { isPrimaryPointerButton } from "../../utils/dom";
 import { TOOLTIP_DELAY_MS } from "./resources";

package/dist/collection/components/tooltip/resources.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.1.0-next.3
+ * v1.1.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tooltip/tooltip.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tooltip/tooltip.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.1.0-next.3
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";
@@ -167,7 +167,11 @@ export class Tooltip {
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, h("div", { class: {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed
-      }, ref: this.setTransitionEl }, h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) }), h("div", { class: CSS.container }, h("slot", null)))));
+      },
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setTransitionEl }, h("div", { class: CSS.arrow,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (arrowEl) => (this.arrowEl = arrowEl) }), h("div", { class: CSS.container }, h("slot", null)))));
   }
   static get is() { return "calcite-tooltip"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/utils.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.1.0-next.3
+ * v1.1.0
  */
 import { queryElementRoots } from "../../utils/dom";
 export function getEffectiveReferenceElement(tooltip) {

package/dist/collection/components/tree/tree.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/tree/tree.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.1.0-next.3
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tree/utils.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.1.0-next.3
+ * v1.1.0
  */
 function isTreeItem(element) {
   return element?.matches("calcite-tree-item");

package/dist/collection/components/tree-item/resources.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.1.0-next.3
+ * v1.1.0
  */
 export const CSS = {
   actionsEnd: "actions-end",

package/dist/collection/components/tree-item/tree-item.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */
@@ -106,7 +107,6 @@
 .node-actions-container {
   display: flex;
   justify-content: space-between;
-  overflow: hidden;
 }
 
 :host([calcite-hydrated-hidden]) {
@@ -125,10 +125,7 @@
   line-height: 1rem;
 }
 :host([scale=s]) .node-actions-container {
-  block-size: 1.5rem;
-}
-:host([scale=s]) .node-actions-container .node-container {
-  --calcite-tree-padding-y: 0.25rem;
+  min-block-size: 1.5rem;
 }
 :host([scale=s]) .node-actions-container .node-container .checkbox,
 :host([scale=s]) .node-actions-container .node-container .chevron,
@@ -139,19 +136,13 @@
 :host([scale=s]) .node-actions-container .node-container .icon-start {
   margin-inline: 0.75rem;
 }
-:host([scale=s]) .node-actions-container .actions-end {
-  display: inline-flex;
-}
 
 :host([scale=m]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=m]) .node-actions-container {
-  block-size: 2rem;
-}
-:host([scale=m]) .node-actions-container .node-container {
-  --calcite-tree-padding-y: 0.5rem;
+  min-block-size: 2rem;
 }
 :host([scale=m]) .node-actions-container .node-container .checkbox,
 :host([scale=m]) .node-actions-container .node-container .chevron,
@@ -162,19 +153,13 @@
 :host([scale=m]) .node-actions-container .node-container .icon-start {
   margin-inline: 0.75rem;
 }
-:host([scale=m]) .node-actions-container .actions-end {
-  display: inline-flex;
-}
 
 :host([scale=l]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 :host([scale=l]) .node-actions-container {
-  block-size: 3rem;
-}
-:host([scale=l]) .node-actions-container .node-container {
-  --calcite-tree-padding-y: 0.75rem;
+  min-block-size: 2.75rem;
 }
 :host([scale=l]) .node-actions-container .node-container .checkbox,
 :host([scale=l]) .node-actions-container .node-container .chevron,
@@ -185,9 +170,6 @@
 :host([scale=l]) .node-actions-container .node-container .icon-start {
   margin-inline: 0.75rem;
 }
-:host([scale=l]) .node-actions-container .actions-end {
-  display: inline-flex;
-}
 
 :host([lines]) .children-container:after {
   position: absolute;
@@ -238,12 +220,11 @@
   outline-offset: -2px;
 }
 
-slot[name=actions-end]::slotted(*) {
+.actions-end {
   display: flex;
   flex-direction: row;
   align-items: center;
   align-self: stretch;
-  overflow: visible;
 }
 
 .checkbox {
@@ -280,9 +261,8 @@ slot[name=actions-end]::slotted(*) {
 .node-container {
   position: relative;
   display: flex;
+  min-inline-size: 0px;
   align-items: center;
-  padding-block: var(--calcite-tree-padding-y);
-  padding-inline: 0;
 }
 .node-container .checkmark,
 .node-container .bullet-point {

package/dist/collection/components/tree-item/tree-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.3
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
@@ -180,10 +180,14 @@ export class TreeItem {
     return (h(Host, { "aria-expanded": this.hasChildren ? toAriaBoolean(isExpanded) : undefined, "aria-hidden": toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem" }, h("div", { class: { [CSS.itemExpanded]: isExpanded } }, h("div", { class: CSS.nodeAndActionsContainer }, h("div", { class: {
         [CSS.nodeContainer]: true,
         [CSS_UTILITY.rtl]: rtl
-      }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode)), h("div", { class: {
+      }, "data-selection-mode": this.selectionMode,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode)), h("div", { class: {
         [CSS.childrenContainer]: true,
         [CSS_UTILITY.rtl]: rtl
-      }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, ref: (el) => this.setTransitionEl(el), role: this.hasChildren ? "group" : undefined }, h("slot", { name: SLOTS.children })))));
+      }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, role: this.hasChildren ? "group" : undefined,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: (el) => this.setTransitionEl(el) }, h("slot", { name: SLOTS.children })))));
   }
   setTransitionEl(el) {
     this.transitionEl = el;

package/dist/collection/components/value-list/resources.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.1.0-next.3
+ * v1.1.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/value-list/utils.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.1.0-next.3
+ * v1.1.0
  */
 import { getItemIndex } from "../pick-list/shared-list-logic";
 export function getScreenReaderText(item, status, valueList) {

package/dist/collection/components/value-list/value-list.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/value-list/value-list.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.1.0-next.3
+ * v1.1.0
  */
 import { h } from "@stencil/core";
 import Sortable from "sortablejs";
@@ -47,6 +47,7 @@ export class ValueList {
         keyDownHandler.call(this, event);
         return;
       }
+      event.preventDefault();
       const { items } = this;
       if (event.key === " ") {
         this.updateScreenReaderText(getScreenReaderText(item, "active", this));
@@ -54,7 +55,6 @@ export class ValueList {
       if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
         return;
       }
-      event.preventDefault();
       const { el } = this;
       const nextIndex = moveItemIndex(this, item, event.key === "ArrowUp" ? "up" : "down");
       if (nextIndex === items.length - 1) {
@@ -230,6 +230,13 @@ export class ValueList {
   updateHandleAriaLabel(handleElement, text) {
     handleElement.ariaLabel = text;
   }
+  handleValueListItemBlur(event) {
+    const { item, handle } = event.detail;
+    if (!item?.handleActivated && item) {
+      this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+    }
+    event.stopPropagation();
+  }
   render() {
     return (h(List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
   }
@@ -661,6 +668,12 @@ export class ValueList {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "calciteValueListItemDragHandleBlur",
+        "method": "handleValueListItemBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/value-list-item/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/value-list-item/resources.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.1.0-next.3
+ * v1.1.0
  */
 export const ICONS = {
   drag: "drag"

package/dist/collection/components/value-list-item/value-list-item.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/value-list-item/value-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.3
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -29,12 +29,12 @@ export class ValueListItem {
     this.getPickListRef = (el) => (this.pickListItem = el);
     this.handleKeyDown = (event) => {
       if (event.key === " ") {
-        event.preventDefault();
         this.handleActivated = !this.handleActivated;
       }
     };
     this.handleBlur = () => {
       this.handleActivated = false;
+      this.calciteValueListItemDragHandleBlur.emit({ item: this.el, handle: this.handleEl });
     };
     this.handleSelectChange = (event) => {
       this.selected = event.detail.selected;
@@ -116,11 +116,13 @@ export class ValueListItem {
       return (h("span", { class: {
           [CSS.handle]: true,
           [CSS.handleActivated]: this.handleActivated
-        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
+        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => (this.handleEl = el), role: "button", tabindex: "0" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
     }
   }
   render() {
-    return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd())));
+    return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, value: this.value,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.getPickListRef }, this.renderActionsStart(), this.renderActionsEnd())));
   }
   static get is() { return "calcite-value-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -382,6 +384,29 @@ export class ValueListItem {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "calciteValueListItemDragHandleBlur",
+        "name": "calciteValueListItemDragHandleBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ListItemAndHandle",
+          "resolved": "ListItemAndHandle",
+          "references": {
+            "ListItemAndHandle": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
       }];
   }
   static get methods() {

package/dist/collection/utils/array.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.1.0-next.3
+ * v1.1.0
  */
 export function getRoundRobinIndex(index, total) {
   return (index + total) % total;