@esri/calcite-components 1.0.0-next.525 → 1.0.0-next.528

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-07-12T21:47:15",
+  "timestamp": "2022-07-13T02:22:36",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.16.1",
@@ -11306,6 +11306,28 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "read-only",
+          "reflectToAttr": false,
+          "docs": "When true, still focusable but controls are gone and the value cannot be modified.",
+          "docsTags": [
+            {
+              "name": "mdn",
+              "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
@@ -21176,6 +21198,70 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "intlDragHandleActive",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-active",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the component.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "intlDragHandleChange",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-change",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "intlDragHandleCommit",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-commit",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "intlDragHandleIdle",
+          "type": "string",
+          "mutable": false,
+          "attr": "intl-drag-handle-idle",
+          "reflectToAttr": false,
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "loading",
           "type": "boolean",

package/dist/loader/cdn.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.525
+ * v1.0.0-next.528
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.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.525
+ * v1.0.0-next.528
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.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.525
+ * v1.0.0-next.528
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/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.525
+ * v1.0.0-next.528
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/input-time-picker/input-time-picker.d.ts

@@ -11,7 +11,13 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   activeHandler(): void;
   /** The disabled state of the time input */
   disabled: boolean;
-  handleDisabledChange(value: boolean): void;
+  /**
+   * When true, still focusable but controls are gone and the value cannot be modified.
+   *
+   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   */
+  readOnly: boolean;
+  handleDisabledAndReadOnlyChange(value: boolean): void;
   /** aria-label for the hour input */
   intlHour?: string;
   /** aria-label for the hour down button */

package/dist/types/components/pick-list/shared-list-logic.d.ts

@@ -13,6 +13,7 @@ export declare function calciteInternalListItemValueChangeHandler<T extends List
 export declare function calciteListFocusOutHandler<T extends Lists>(this: List<T>, event: FocusEvent): void;
 export declare function keyDownHandler<T extends Lists>(this: List<T>, event: KeyboardEvent): void;
 export declare function moveItemIndex<T extends Lists>(list: List<T>, item: ListItemElement<T>, direction: "up" | "down"): number;
+export declare function getItemIndex<T extends Lists>(list: List<T>, item: ListItemElement<T>): number;
 export declare function internalCalciteListChangeEvent<T extends Lists>(this: List<T>): void;
 export declare function removeItem<T extends Lists, U extends ListItemElement<T>>(this: List<T>, event: CustomEvent): void;
 export declare function setFocus<T extends Lists>(this: List<T>, focusId: ListFocusId): Promise<void>;

package/dist/types/components/pick-list/shared-list-render.d.ts

@@ -11,6 +11,8 @@ interface ListProps extends DOMAttributes<any> {
   filterPlaceholder: string;
   el: HTMLCalcitePickListElement | HTMLCalciteValueListElement;
   setFilterEl: (el: HTMLCalciteFilterElement) => void;
+  dragEnabled?: boolean;
+  storeAssistiveEl?: (el: HTMLSpanElement) => void;
 }
 export declare const List: FunctionalComponent<{
   props: ListProps;

package/dist/types/components/value-list/interfaces.d.ts

@@ -0,0 +1 @@
+export declare type DragStatus = "idle" | "active" | "change" | "commit";

package/dist/types/components/value-list/utils.d.ts

@@ -0,0 +1,8 @@
+import { DragStatus } from "./interfaces";
+import { ValueList } from "./value-list";
+export declare function getScreenReaderText(item: HTMLCalciteValueListItemElement, status: DragStatus, valueList: ValueList<HTMLCalciteValueListItemElement>): string;
+export declare function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {
+  handle: HTMLCalciteHandleElement;
+  item: HTMLCalciteValueListItemElement;
+};
+export declare function replacePlaceholders(text: string, label: string, position: number, total: number): string;

package/dist/types/components/value-list/value-list.d.ts

@@ -45,6 +45,30 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
    */
   selectionFollowsFocus: boolean;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleIdle?: string;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the component.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleActive?: string;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleChange?: string;
+  /**
+   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.
+   *
+   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   */
+  intlDragHandleCommit?: string;
   selectedValues: Map<string, ItemElement>;
   dataForFilter: ItemData;
   items: ItemElement[];
@@ -54,6 +78,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   el: HTMLCalciteValueListElement;
   emitCalciteListChange: () => void;
   filterEl: HTMLCalciteFilterElement;
+  assistiveTextEl: HTMLSpanElement;
   connectedCallback(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
@@ -83,6 +108,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   handleFilter: any;
   getItemData: any;
   keyDownHandler: (event: KeyboardEvent) => void;
+  handleBlur(): void;
   /** Returns the currently selected items */
   getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>>;
   /**
@@ -92,5 +118,9 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    */
   setFocus(focusId?: ListFocusId): Promise<void>;
   getIconType(): ICON_TYPES | null;
+  updateScreenReaderText(text: string): void;
+  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void;
+  storeAssistiveEl: (el: HTMLSpanElement) => void;
+  handleFocusIn: (event: FocusEvent) => void;
   render(): VNode;
 }

package/dist/types/components.d.ts

@@ -2034,6 +2034,11 @@ export namespace Components {
           * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
          */
         "placement": PopperPlacement;
+        /**
+          * When true, still focusable but controls are gone and the value cannot be modified.
+          * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+         */
+        "readOnly": boolean;
         /**
           * Updates the position of the component.
          */
@@ -3747,6 +3752,22 @@ export namespace Components {
           * The component's group identifier.  To drag elements from one list into another, both lists must have the same group value.
          */
         "group"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the component.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleActive"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleChange"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleCommit"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleIdle"?: string;
         /**
           * When true, a busy indicator is displayed.
          */
@@ -6736,6 +6757,11 @@ declare namespace LocalJSX {
           * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
          */
         "placement"?: PopperPlacement;
+        /**
+          * When true, still focusable but controls are gone and the value cannot be modified.
+          * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+         */
+        "readOnly"?: boolean;
         /**
           * The scale (size) of the time input
          */
@@ -8353,6 +8379,22 @@ declare namespace LocalJSX {
           * The component's group identifier.  To drag elements from one list into another, both lists must have the same group value.
          */
         "group"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the component.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleActive"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleChange"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleCommit"?: string;
+        /**
+          * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.  Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+         */
+        "intlDragHandleIdle"?: string;
         /**
           * When true, a busy indicator is displayed.
          */

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.525
+ * v1.0.0-next.528
  */
 'use strict';
 
@@ -21905,6 +21905,12 @@ class InputTimePicker {
     this.active = false;
     /** The disabled state of the time input */
     this.disabled = false;
+    /**
+     * When true, still focusable but controls are gone and the value cannot be modified.
+     *
+     * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     */
+    this.readOnly = false;
     /**
      * BCP 47 language tag for desired language and country format
      *
@@ -21945,8 +21951,10 @@ class InputTimePicker {
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInternalInputFocusHandler = (event) => {
-      this.active = true;
-      event.stopPropagation();
+      if (!this.readOnly) {
+        this.active = true;
+        event.stopPropagation();
+      }
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
@@ -22025,13 +22033,13 @@ class InputTimePicker {
     };
   }
   activeHandler() {
-    if (this.disabled) {
+    if (this.disabled || this.readOnly) {
       this.active = false;
       return;
     }
     this.reposition();
   }
-  handleDisabledChange(value) {
+  handleDisabledAndReadOnlyChange(value) {
     if (!value) {
       this.active = false;
     }
@@ -22064,7 +22072,9 @@ class InputTimePicker {
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.active = true;
+    if (!this.readOnly) {
+      this.active = true;
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -22116,12 +22126,13 @@ class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (hAsync(Host, { onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, hAsync("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), hAsync("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId }, hAsync("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), hAsync(HiddenFormInputSlot, { component: this })));
+    return (hAsync(Host, { onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, hAsync("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), hAsync("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, hAsync("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), hAsync(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
     "active": ["activeHandler"],
-    "disabled": ["handleDisabledChange"],
+    "disabled": ["handleDisabledAndReadOnlyChange"],
+    "readOnly": ["handleDisabledAndReadOnlyChange"],
     "locale": ["localeWatcher"],
     "value": ["valueWatcher"]
   }; }
@@ -22132,6 +22143,7 @@ class InputTimePicker {
     "$members$": {
       "active": [1540],
       "disabled": [516],
+      "readOnly": [4, "read-only"],
       "intlHour": [1, "intl-hour"],
       "intlHourDown": [1, "intl-hour-down"],
       "intlHourUp": [1, "intl-hour-up"],
@@ -24076,6 +24088,10 @@ function moveItemIndex(list, item, direction) {
   }
   return index;
 }
+function getItemIndex(list, item) {
+  const { items } = list;
+  return items.indexOf(item);
+}
 function filterOutDisabled(items) {
   return items.filter((item) => !item.disabled);
 }
@@ -24240,10 +24256,11 @@ function getItemData() {
   }));
 }
 
-const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl }, ...rest }) => {
+const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl, dragEnabled, storeAssistiveEl }, ...rest }) => {
   const defaultSlot = hAsync("slot", null);
   return (hAsync(Host, { "aria-busy": toAriaBoolean(loading), role: "menu", ...rest },
     hAsync("section", null,
+      dragEnabled ? (hAsync("span", { "aria-live": "assertive", class: "assistive-text", ref: storeAssistiveEl })) : null,
       hAsync("header", { class: { [CSS$j.sticky]: true } },
         filterEnabled ? (hAsync("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         hAsync("slot", { name: SLOTS$b.menuActions })),
@@ -34560,6 +34577,50 @@ var ICON_TYPES;
   ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 
+function getScreenReaderText(item, status, valueList) {
+  const { items, intlDragHandleIdle, intlDragHandleActive, intlDragHandleChange, intlDragHandleCommit } = valueList;
+  const total = items.length;
+  const position = getItemIndex(valueList, item) + 1;
+  if (status === "idle") {
+    const idleText = intlDragHandleIdle
+      ? replacePlaceholders(intlDragHandleIdle, item.label, position, total)
+      : `${item.label}, press space and use arrow keys to reorder content. Current position ${position} of ${total}.`;
+    return idleText;
+  }
+  else if (status === "active") {
+    const activeText = intlDragHandleActive
+      ? replacePlaceholders(intlDragHandleActive, item.label, position, total)
+      : `Reordering ${item.label}, current position ${position} of ${total}.`;
+    return activeText;
+  }
+  else if (status === "change") {
+    const changeText = intlDragHandleChange
+      ? replacePlaceholders(intlDragHandleChange, item.label, position, total)
+      : `${item.label}, new position ${position} of ${total}. Press space to confirm.`;
+    return changeText;
+  }
+  else {
+    const commitText = intlDragHandleCommit
+      ? replacePlaceholders(intlDragHandleCommit, item.label, position, total)
+      : `${item.label}, current position ${position} of ${total}.`;
+    return commitText;
+  }
+}
+function getHandleAndItemElement(event) {
+  const handle = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
+  const item = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+  return { handle, item };
+}
+function replacePlaceholders(text, label, position, total) {
+  const replacePosition = text.replace("${position}", position.toString());
+  const replaceLabel = replacePosition.replace("${item.label}", label);
+  return replaceLabel.replace("${total}", total.toString());
+}
+
 const valueListCss = "@-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-value-list: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-value-list{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-value-list{-webkit-animation-name:in;animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-value-list{-webkit-animation-name:in-down;animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-value-list{-webkit-animation-name:in-up;animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-value-list{-webkit-animation-name:in-scale;animation-name:in-scale}/*!@:root*/.sc-calcite-value-list:root{--calcite-popper-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-value-list-h{display:none}/*!@:host*/.sc-calcite-value-list-h{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}/*!@:host **/.sc-calcite-value-list-h *.sc-calcite-value-list{-webkit-box-sizing:border-box;box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-value-list-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]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-value-list-h[disabled] .sc-calcite-value-list-s>[calcite-hydrated][disabled],[disabled].sc-calcite-value-list-h [calcite-hydrated][disabled].sc-calcite-value-list{opacity:1}/*!@calcite-value-list-item:last-of-type*/calcite-value-list-item.sc-calcite-value-list:last-of-type{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host([filter-enabled]) header*/[filter-enabled].sc-calcite-value-list-h header.sc-calcite-value-list{margin-bottom:0.25rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;background-color:var(--calcite-ui-foreground-1);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host([filter-enabled]) header.sticky-pos*/[filter-enabled].sc-calcite-value-list-h header.sticky-pos.sc-calcite-value-list{position:-webkit-sticky;position:sticky;top:0px;z-index:10}/*!@calcite-filter*/calcite-filter.sc-calcite-value-list{margin-bottom:1px}";
 
 /**
@@ -34621,18 +34682,18 @@ class ValueList {
     this.handleFilter = handleFilter.bind(this);
     this.getItemData = getItemData.bind(this);
     this.keyDownHandler = (event) => {
-      const handleElement = event
-        .composedPath()
-        .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
-      const item = event
-        .composedPath()
-        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-      // Only trigger keyboard sorting when the internal drag handle is focused and activated
-      if (!handleElement || !item.handleActivated) {
+      const { handle, item } = getHandleAndItemElement(event);
+      if (handle && !item.handleActivated && event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "commit", this));
+      }
+      if (!handle || !item.handleActivated) {
         keyDownHandler.call(this, event);
         return;
       }
       const { items } = this;
+      if (event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "active", this));
+      }
       if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
         return;
       }
@@ -34651,8 +34712,18 @@ class ValueList {
       }
       this.items = this.getItems();
       this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
-      requestAnimationFrame(() => handleElement === null || handleElement === void 0 ? void 0 : handleElement.focus());
+      requestAnimationFrame(() => handle === null || handle === void 0 ? void 0 : handle.focus());
       item.handleActivated = true;
+      this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
+    };
+    this.storeAssistiveEl = (el) => {
+      this.assistiveTextEl = el;
+    };
+    this.handleFocusIn = (event) => {
+      const { handle, item } = getHandleAndItemElement(event);
+      if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item && handle) {
+        this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+      }
     };
   }
   // --------------------------------------------------------------------------
@@ -34729,6 +34800,11 @@ class ValueList {
     (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
     this.sortable = null;
   }
+  handleBlur() {
+    if (this.dragEnabled) {
+      this.updateScreenReaderText("");
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -34758,8 +34834,14 @@ class ValueList {
     }
     return type;
   }
+  updateScreenReaderText(text) {
+    this.assistiveTextEl.textContent = text;
+  }
+  updateHandleAriaLabel(handleElement, text) {
+    handleElement.ariaLabel = text;
+  }
   render() {
-    return hAsync(List, { onKeyDown: this.keyDownHandler, props: this });
+    return (hAsync(List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
   }
   get el() { return getElement(this); }
   static get style() { return valueListCss; }
@@ -34775,6 +34857,10 @@ class ValueList {
       "loading": [516],
       "multiple": [516],
       "selectionFollowsFocus": [4, "selection-follows-focus"],
+      "intlDragHandleIdle": [1, "intl-drag-handle-idle"],
+      "intlDragHandleActive": [1, "intl-drag-handle-active"],
+      "intlDragHandleChange": [1, "intl-drag-handle-change"],
+      "intlDragHandleCommit": [1, "intl-drag-handle-commit"],
       "selectedValues": [32],
       "dataForFilter": [32],
       "getSelectedItems": [64],
@@ -34909,7 +34995,7 @@ class ValueListItem {
   renderHandle() {
     const { icon } = this;
     if (icon === ICON_TYPES$1.grip) {
-      return (hAsync("span", { "aria-pressed": toAriaBoolean(this.handleActivated), class: {
+      return (hAsync("span", { class: {
           [CSS$h.handle]: true,
           [CSS$h.handleActivated]: this.handleActivated
         }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, hAsync("calcite-icon", { icon: ICONS.drag, scale: "s" })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.525",
+  "version": "1.0.0-next.528",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/calcite/p-1a4b74f2.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.525
- */
-import{f as t}from"./p-964a7ecd.js";import{c as o}from"./p-b52858de.js";const n=new Set;let c;const s={childList:!0};function f(t){c||(c=o("mutation",a)),c.observe(t.el,s)}function i(t){n.delete(t.el),a(c.takeRecords()),c.disconnect();for(const[t]of n.entries())c.observe(t,s)}function a(o){o.forEach((({target:o})=>{t(o)}))}export{f as c,i as d}

package/dist/calcite/p-5c2f20e0.system.js

@@ -1,6 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,a){function o(t){try{f(r.next(t))}catch(t){a(t)}}function u(t){try{f(r["throw"](t))}catch(t){a(t)}}function f(t){t.done?n(t.value):i(t.value).then(o,u)}f((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,o;return o={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function u(t){return function(e){return f([t,e])}}function f(o){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(a=o[0]&2?i["return"]:o[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;if(i=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:n.label++;return{value:o[1],done:false};case 5:n.label++;i=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){n.label=o[1];break}if(o[0]===6&&n.label<a[1]){n.label=a[1];a=o;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(o);break}if(a[2])n.ops.pop();n.trys.pop();continue}o=e.call(t,n)}catch(t){o=[6,t];i=0}finally{r=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};
-/*!
- * 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.525
- */System.register(["./p-173826f0.system.js","./p-f8b81535.system.js"],(function(t){"use strict";var e,n;return{setters:[function(t){e=t.a},function(t){n=t.a}],execute:function(){t({a:c,b:f,c:y,d:s,e:w,f:h,g:o,h:g,i:u,l:v,n:p,p:d,s:l});function r(t){if(t===void 0){t=""}if(n.indexOf(t)>-1){return t}t=t.toLowerCase();if(t.includes("-")){t=t.replace(/(\w+)-(\w+)/,(function(t,e,n){return"".concat(e,"-").concat(n.toUpperCase())}));if(!n.includes(t)){t=t.split("-")[0]}}return n.includes(t)?t:"en"}var i={};var a={};function o(t){return __awaiter(this,void 0,void 0,(function(){var n,u;return __generator(this,(function(f){switch(f.label){case 0:n=r(t);if(i[n]){return[2,i[n]]}if(!a[n]){a[n]=fetch(e("./assets/date-picker/nls/".concat(n,".json"))).then((function(t){return t.json()})).catch((function(){console.error('Translations for "'.concat(n,'" not found or invalid, falling back to english'));return o("en")}))}return[4,a[n]];case 1:u=f.sent();i[n]=u;return[2,u]}}))}))}function u(t,e,n){var r=t.getTime();var i=!(e instanceof Date)||r>=e.getTime();var a=!(n instanceof Date)||r<=n.getTime();return i&&a}function f(t,e,n){if(!(t instanceof Date)){return null}var r=t.getTime();var i=e instanceof Date&&r<e.getTime();var a=n instanceof Date&&r>n.getTime();if(i){return e}if(a){return n}return t}function c(t){if(t instanceof Date){return t}if(!t||typeof t!=="string"){return null}var e=t.split(/[: T-]/).map(parseFloat);var n=new Date(e[0],(e[1]||1)-1,e[2]||1);n.setFullYear(e[0]);if(isNaN(n.getTime())){throw new Error('Invalid ISO 8601 date: "'.concat(t,'"'))}return n}function s(t){if(typeof t==="string"){return t}if(t instanceof Date){return new Date(t.getTime()-t.getTimezoneOffset()*6e4).toISOString().split("T")[0]}return""}function l(t,e){return t instanceof Date&&e instanceof Date&&t.getDate()===e.getDate()&&t.getMonth()===e.getMonth()&&t.getFullYear()===e.getFullYear()}function h(t){var e=t.getMonth();var n=new Date(t);n.setMonth(e-1);if(e===n.getMonth()){return new Date(t.getFullYear(),e,0)}return n}function p(t){var e=t.getMonth();var n=new Date(t);n.setMonth(e+1);if((e+2)%7===n.getMonth()%7){return new Date(t.getFullYear(),e+2,0)}return n}function v(t,e){return String(t).split("").map((function(t){return e.numerals[t]})).join("")}function g(t,e){var n="0123456789";return parseInt(t.split("").map((function(t){return n[e.numerals.indexOf(t)]})).filter((function(t){return t})).join(""))}function d(t,e){var n=e.separator,r=e.unitOrder;var i=w(r);var a=m(t).split(n);return{day:parseInt(a[i.indexOf("d")]),month:parseInt(a[i.indexOf("m")])-1,year:parseInt(a[i.indexOf("y")])}}function m(t){if(t===void 0){t=""}return t.replace(/[\u0660-\u0669]/g,(function(t){return t.charCodeAt(0)-1632})).replace(/[\u06f0-\u06f9]/g,(function(t){return t.charCodeAt(0)-1776}))}function w(t){var e=["d","m","y"];var n=t.toLowerCase();return e.sort((function(t,e){return n.indexOf(t)-n.indexOf(e)}))}function y(t,e){var n=t.getTime();var r=e.getTime();return(n-r)/(1e3*3600*24)}var b=t("H",2);var D=t("T",{nextMonth:"Next month",prevMonth:"Previous month",year:"Year"})}}}));

package/dist/calcite/p-7b5b8f9f.system.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.525
- */
-System.register(["./p-173826f0.system.js","./p-6d1a01e1.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.f},function(e){n=e.c}],execute:function(){e({c:i,d:o});var r=new Set;var s;var c={childList:true};function i(e){if(!s){s=n("mutation",f)}s.observe(e.el,c)}function o(e){r.delete(e.el);f(s.takeRecords());s.disconnect();for(var t=0,n=r.entries();t<n.length;t++){var i=n[t][0];s.observe(i,c)}}function f(e){e.forEach((function(e){var n=e.target;t(n)}))}}}}));