@esri/calcite-components 2.12.0 → 2.13.0-next.1

package/dist/components/es.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/et.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/fi.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/filter.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { a as isSymbol, S as Symbol, i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';
 

package/dist/components/filter2.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { f as filter } from './filter.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n.js';
@@ -103,7 +103,6 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
         await setUpMessages(this);
     }
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -111,7 +110,6 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.filterDebounced.cancel();
@@ -157,7 +155,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (h(InteractiveContainer, { key: 'da4ff667fdb02ae8b85c56cd717b416f3256145d', disabled: disabled }, h("div", { key: 'f4406a403101afa7c97da11f8408fa464aa8a08c', class: CSS.container }, h("label", { key: 'aace74138ebea71058044e05d4fe44cb7ee6beb2' }, h("calcite-input", { key: 'cc7dca3364cc73bf42a78d76155477af98d72552', clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        return (h(InteractiveContainer, { key: '912a2cabb69dd50c7789de436477e5245ad3f54e', disabled: disabled }, h("div", { key: '5c5be3f5b9c1f2a9b2cbc29a9dddd97a0eae47f8', class: CSS.container }, h("label", { key: 'ef6fa843aaab8ff4a1fc2240fad4e715918040eb' }, h("calcite-input", { key: '817eabaf570c0fa6f2a5b05f9cddf0969e4494c2', clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
                 this.textInput = el;
             }, scale: scale, type: "text", value: this.value })))));
     }

package/dist/components/filter2.js.map

@@ -1 +1 @@
-{"file":"filter2.js","mappings":"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","names":[],"sources":["src/components/filter/resources.ts","src/components/filter/filter.scss?tag=calcite-filter&encapsulation=shadow","src/components/filter/filter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  searchIcon: \"search-icon\",\n};\n\nexport const ICONS = {\n  search: \"search\",\n  close: \"x\",\n} as const;\n",":host {\n  @extend %component-host;\n  @apply flex w-full;\n}\n\n@include disabled();\n\n.container {\n  @apply flex w-full p-2;\n}\n\nlabel {\n  @apply relative\n    mx-1\n    my-0\n    flex w-full\n    items-center\n    overflow-hidden;\n}\n\ninput[type=\"text\"] {\n  @apply font-inherit\n    text-color-1\n    text-n2h\n    mb-1\n    w-full\n    border-none\n    bg-transparent\n    py-1;\n  padding-inline-end: theme(\"spacing.1\");\n  padding-inline-start: theme(\"spacing.6\");\n  transition:\n    padding var(--calcite-animation-timing),\n    box-shadow var(--calcite-animation-timing);\n  &::-ms-clear {\n    @apply hidden;\n  }\n}\n\ncalcite-input {\n  @apply w-full;\n}\n\n.search-icon {\n  @apply text-color-2\n    absolute\n    flex;\n  inset-inline-start: 0;\n  transition:\n    inset-inline-start var(--calcite-animation-timing),\n    inset-inline-end var(--calcite-animation-timing),\n    opacity var(--calcite-animation-timing);\n}\n\ninput[type=\"text\"]:focus {\n  @apply border-color-brand outline-none;\n  padding-inline: theme(\"padding.1\");\n  & ~ .search-icon {\n    inset-inline-start: calc(theme(\"spacing.4\") * -1);\n    @apply opacity-0;\n  }\n}\n\n.clear-button {\n  @apply text-color-2\n    flex\n    cursor-pointer\n    items-center\n    border-0\n    bg-transparent;\n  &:hover,\n  &:focus {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { debounce } from \"lodash-es\";\nimport { filter } from \"../../utils/filter\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { DEBOUNCE } from \"../../utils/resources\";\nimport { FilterMessages } from \"./assets/filter/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-filter\",\n  styleUrl: \"filter.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Filter\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Defines the items to filter. The component uses the values as the starting point, and returns items\n   *\n   * that contain the string entered in the input, using a partial match and recursive search.\n   *\n   * This property is needed to conduct filtering.\n   *\n   */\n  @Prop() items: object[] = [];\n\n  @Watch(\"items\")\n  watchItemsHandler(): void {\n    this.filterDebounced(this.value);\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's resulting items after filtering.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: object[] = [];\n\n  /**\n   * Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched.\n   */\n  @Prop() filterProps: string[];\n\n  @Watch(\"filterProps\")\n  filterPropsHandler(): void {\n    this.filterDebounced(this.value);\n  }\n\n  /**\n   * Specifies placeholder text for the input element.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true }) value = \"\";\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FilterMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FilterMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    this.filterDebounced(value);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State/Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFilterElement;\n\n  textInput: HTMLCalciteInputElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: FilterMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the filter text changes.\n   */\n  @Event({ cancelable: false }) calciteFilterChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (this.items.length) {\n      this.updateFiltered(filter(this.items, this.value, this.filterProps));\n    }\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.filterDebounced.cancel();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Performs a filter on the component.\n   *\n   * This method can be useful because filtering is delayed and asynchronous.\n   *\n   * @param {string} value - The filter text value.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async filter(value: string = this.value): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = value;\n      this.filterDebounced(value, false, resolve);\n    });\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return this.textInput?.setFocus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private filterDebounced = debounce(\n    (value: string, emit = false, onFilter?: () => void): void =>\n      this.items.length &&\n      this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter),\n    DEBOUNCE.filter,\n  );\n\n  inputHandler = (event: CustomEvent): void => {\n    const target = event.target as HTMLCalciteInputElement;\n    this.value = target.value;\n    this.filterDebounced(target.value, true);\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === \"Escape\") {\n      this.clear();\n      event.preventDefault();\n    }\n\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  };\n\n  clear = (): void => {\n    this.value = \"\";\n    this.filterDebounced(\"\", true);\n    this.setFocus();\n  };\n\n  updateFiltered(filtered: object[], emit = false, callback?: () => void): void {\n    this.filteredItems = filtered;\n    if (emit) {\n      this.calciteFilterChange.emit();\n    }\n    callback?.();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { disabled, scale } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div class={CSS.container}>\n          <label>\n            <calcite-input\n              clearable={true}\n              disabled={disabled}\n              icon={ICONS.search}\n              label={this.messages.label}\n              messageOverrides={{ clear: this.messages.clear }}\n              onCalciteInputInput={this.inputHandler}\n              onKeyDown={this.keyDownHandler}\n              placeholder={this.placeholder}\n              ref={(el): void => {\n                this.textInput = el;\n              }}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\n            />\n          </label>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"filter2.js","mappings":"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","names":[],"sources":["src/components/filter/resources.ts","src/components/filter/filter.scss?tag=calcite-filter&encapsulation=shadow","src/components/filter/filter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  searchIcon: \"search-icon\",\n};\n\nexport const ICONS = {\n  search: \"search\",\n  close: \"x\",\n} as const;\n",":host {\n  @extend %component-host;\n  @apply flex w-full;\n}\n\n@include disabled();\n\n.container {\n  @apply flex w-full p-2;\n}\n\nlabel {\n  @apply relative\n    mx-1\n    my-0\n    flex w-full\n    items-center\n    overflow-hidden;\n}\n\ninput[type=\"text\"] {\n  @apply font-inherit\n    text-color-1\n    text-n2h\n    mb-1\n    w-full\n    border-none\n    bg-transparent\n    py-1;\n  padding-inline-end: theme(\"spacing.1\");\n  padding-inline-start: theme(\"spacing.6\");\n  transition:\n    padding var(--calcite-animation-timing),\n    box-shadow var(--calcite-animation-timing);\n  &::-ms-clear {\n    @apply hidden;\n  }\n}\n\ncalcite-input {\n  @apply w-full;\n}\n\n.search-icon {\n  @apply text-color-2\n    absolute\n    flex;\n  inset-inline-start: 0;\n  transition:\n    inset-inline-start var(--calcite-animation-timing),\n    inset-inline-end var(--calcite-animation-timing),\n    opacity var(--calcite-animation-timing);\n}\n\ninput[type=\"text\"]:focus {\n  @apply border-color-brand outline-none;\n  padding-inline: theme(\"padding.1\");\n  & ~ .search-icon {\n    inset-inline-start: calc(theme(\"spacing.4\") * -1);\n    @apply opacity-0;\n  }\n}\n\n.clear-button {\n  @apply text-color-2\n    flex\n    cursor-pointer\n    items-center\n    border-0\n    bg-transparent;\n  &:hover,\n  &:focus {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { debounce } from \"lodash-es\";\nimport { filter } from \"../../utils/filter\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { DEBOUNCE } from \"../../utils/resources\";\nimport { FilterMessages } from \"./assets/filter/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-filter\",\n  styleUrl: \"filter.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Filter\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Defines the items to filter. The component uses the values as the starting point, and returns items\n   *\n   * that contain the string entered in the input, using a partial match and recursive search.\n   *\n   * This property is needed to conduct filtering.\n   *\n   */\n  @Prop() items: object[] = [];\n\n  @Watch(\"items\")\n  watchItemsHandler(): void {\n    this.filterDebounced(this.value);\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The component's resulting items after filtering.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: object[] = [];\n\n  /**\n   * Specifies the properties to match against when filtering. This will only apply when `value` is an object. If not set, all properties will be matched.\n   */\n  @Prop() filterProps: string[];\n\n  @Watch(\"filterProps\")\n  filterPropsHandler(): void {\n    this.filterDebounced(this.value);\n  }\n\n  /**\n   * Specifies placeholder text for the input element.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true }) value = \"\";\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FilterMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FilterMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    this.filterDebounced(value);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State/Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFilterElement;\n\n  textInput: HTMLCalciteInputElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: FilterMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the filter text changes.\n   */\n  @Event({ cancelable: false }) calciteFilterChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (this.items.length) {\n      this.updateFiltered(filter(this.items, this.value, this.filterProps));\n    }\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.filterDebounced.cancel();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Performs a filter on the component.\n   *\n   * This method can be useful because filtering is delayed and asynchronous.\n   *\n   * @param {string} value - The filter text value.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async filter(value: string = this.value): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = value;\n      this.filterDebounced(value, false, resolve);\n    });\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    return this.textInput?.setFocus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private filterDebounced = debounce(\n    (value: string, emit = false, onFilter?: () => void): void =>\n      this.items.length &&\n      this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter),\n    DEBOUNCE.filter,\n  );\n\n  inputHandler = (event: CustomEvent): void => {\n    const target = event.target as HTMLCalciteInputElement;\n    this.value = target.value;\n    this.filterDebounced(target.value, true);\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === \"Escape\") {\n      this.clear();\n      event.preventDefault();\n    }\n\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  };\n\n  clear = (): void => {\n    this.value = \"\";\n    this.filterDebounced(\"\", true);\n    this.setFocus();\n  };\n\n  updateFiltered(filtered: object[], emit = false, callback?: () => void): void {\n    this.filteredItems = filtered;\n    if (emit) {\n      this.calciteFilterChange.emit();\n    }\n    callback?.();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { disabled, scale } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div class={CSS.container}>\n          <label>\n            <calcite-input\n              clearable={true}\n              disabled={disabled}\n              icon={ICONS.search}\n              label={this.messages.label}\n              messageOverrides={{ clear: this.messages.clear }}\n              onCalciteInputInput={this.inputHandler}\n              onKeyDown={this.keyDownHandler}\n              placeholder={this.placeholder}\n              ref={(el): void => {\n                this.textInput = el;\n              }}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\n            />\n          </label>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/components/floating-ui.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { D as DEBOUNCE } from './resources.js';
 import { a as getElementDir } from './dom.js';

package/dist/components/focusTrapComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { h as isFocusable, j as tabbable, k as focusable, l as isTabbable, m as getTabIndex, e as focusElement, n as tabbableOptions } from './dom.js';
 import { f as focusTrapStack } from './config.js';

package/dist/components/form.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { h } from '@stencil/core/internal/client';
 import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom.js';

package/dist/components/fr-ch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/fr.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/graph.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';

package/dist/components/guid.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 function gen(counts) {
     return counts

package/dist/components/handle.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as toAriaBoolean } from './dom.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { u as updateHostInteraction } from './interactive.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const CSS = {
@@ -99,7 +99,6 @@ const Handle = /*@__PURE__*/ proxyCustomElement(class Handle extends HTMLElement
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectMessages(this);
         connectLocalized(this);
     }
@@ -114,7 +113,6 @@ const Handle = /*@__PURE__*/ proxyCustomElement(class Handle extends HTMLElement
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectMessages(this);
         disconnectLocalized(this);
     }
@@ -170,11 +168,11 @@ const Handle = /*@__PURE__*/ proxyCustomElement(class Handle extends HTMLElement
     render() {
         return (
         // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        h("span", { key: '043550c81bdf21e953f33e7b3ffc04c982ae17e3', "aria-checked": this.disabled ? null : toAriaBoolean(this.selected), "aria-disabled": this.disabled ? toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        h("span", { key: '70bad3175017506fbe748d930b4945f57d0ed331', "aria-checked": this.disabled ? null : toAriaBoolean(this.selected), "aria-disabled": this.disabled ? toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 this.handleButton = el;
             },
             // role of radio is being applied to allow space key to select in screen readers
-            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip() }, h("calcite-icon", { key: '1d432a3f6e17366782fe92b8347f2f301b181b7b', icon: ICONS.drag, scale: "s" })));
+            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip() }, h("calcite-icon", { key: 'c3eab375f0ac588ff37ab16747f7158567dfd0d0', icon: ICONS.drag, scale: "s" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/handle.js.map

@@ -1 +1 @@
-{"file":"handle.js","mappings":"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","names":[],"sources":["src/components/handle/resources.ts","src/components/handle/handle.scss?tag=calcite-handle&encapsulation=shadow","src/components/handle/handle.tsx"],"sourcesContent":["export const CSS = {\n  handle: \"handle\",\n  handleSelected: \"handle--selected\",\n};\n\nexport const ICONS = {\n  drag: \"drag\",\n} as const;\n\nexport const SUBSTITUTIONS = {\n  itemLabel: \"{itemLabel}\",\n  position: \"{position}\",\n  total: \"{total}\",\n};\n",":host {\n  @apply flex;\n}\n\n.handle {\n  @apply focus-base\n    flex\n    items-center\n    justify-center\n    self-stretch\n    border-none;\n  color: theme(\"borderColor.color.input\");\n  padding-block: theme(\"spacing.3\");\n  padding-inline: theme(\"spacing.1\");\n  line-height: 0;\n\n  calcite-icon {\n    color: inherit;\n  }\n}\n\n:host(:not([disabled])) .handle {\n  @apply cursor-move;\n  &:hover {\n    @apply bg-foreground-2 text-color-1;\n  }\n  &:focus {\n    @apply text-color-1 focus-inset;\n  }\n  &--selected {\n    @apply bg-foreground-3 text-color-1;\n  }\n}\n\n@include disabled();\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { HandleMessages } from \"./assets/handle/t9n\";\nimport { HandleChange, HandleNudge } from \"./interfaces\";\nimport { CSS, ICONS, SUBSTITUTIONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-handle\",\n  styleUrl: \"handle.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Handle implements LoadableComponent, T9nComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  @Watch(\"messages\")\n  @Watch(\"label\")\n  @Watch(\"selected\")\n  @Watch(\"setPosition\")\n  @Watch(\"setSize\")\n  handleAriaTextChange(): void {\n    const message = this.getAriaText(\"live\");\n\n    if (message) {\n      this.calciteInternalAssistiveTextChange.emit({\n        message,\n      });\n    }\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Value for the button title attribute.\n   */\n  @Prop({ reflect: true }) dragHandle: string;\n\n  /**\n   * Made into a prop for testing purposes only.\n   *\n   * @internal\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: HandleMessages;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setPosition: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setSize: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, disables unselecting the component when blurred.\n   *\n   * @internal\n   */\n  @Prop() blurUnselectDisabled = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<HandleMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectMessages(this);\n    disconnectLocalized(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteHandleElement;\n\n  handleButton: HTMLElement;\n\n  @State() effectiveLocale: string;\n\n  @State() defaultMessages: HandleMessages;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires whenever the component is selected or unselected.\n   *\n   */\n  @Event({ cancelable: false }) calciteHandleChange: EventEmitter<void>;\n\n  /**\n   * Fires when the handle is selected and the up or down arrow key is pressed.\n   */\n  @Event({ cancelable: false }) calciteHandleNudge: EventEmitter<HandleNudge>;\n\n  /**\n   * Fires when the assistive text has changed.\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAssistiveTextChange: EventEmitter<HandleChange>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.handleButton?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private getTooltip(): string {\n    const { label, messages } = this;\n\n    if (!messages) {\n      return \"\";\n    }\n\n    if (!label) {\n      return messages.dragHandleUntitled;\n    }\n\n    return messages.dragHandle.replace(SUBSTITUTIONS.itemLabel, label);\n  }\n\n  getAriaText(type: \"label\" | \"live\"): string {\n    const { setPosition, setSize, label, messages, selected } = this;\n\n    if (!messages || !label || typeof setSize !== \"number\" || typeof setPosition !== \"number\") {\n      return null;\n    }\n\n    const text =\n      type === \"label\"\n        ? selected\n          ? messages.dragHandleChange\n          : messages.dragHandleIdle\n        : selected\n          ? messages.dragHandleActive\n          : messages.dragHandleCommit;\n\n    const replacePosition = text.replace(SUBSTITUTIONS.position, setPosition.toString());\n    const replaceLabel = replacePosition.replace(SUBSTITUTIONS.itemLabel, label);\n    return replaceLabel.replace(SUBSTITUTIONS.total, setSize.toString());\n  }\n\n  handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \" \":\n        this.selected = !this.selected;\n        this.calciteHandleChange.emit();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"up\" });\n        break;\n      case \"ArrowDown\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"down\" });\n        break;\n    }\n  };\n\n  handleBlur = (): void => {\n    if (this.blurUnselectDisabled || this.disabled) {\n      return;\n    }\n\n    if (this.selected) {\n      this.selected = false;\n      this.calciteHandleChange.emit();\n    }\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486\n      <span\n        aria-checked={this.disabled ? null : toAriaBoolean(this.selected)}\n        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}\n        aria-label={this.disabled ? null : this.getAriaText(\"label\")}\n        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}\n        onBlur={this.handleBlur}\n        onKeyDown={this.handleKeyDown}\n        ref={(el): void => {\n          this.handleButton = el;\n        }}\n        // role of radio is being applied to allow space key to select in screen readers\n        role=\"radio\"\n        tabIndex={this.disabled ? null : 0}\n        title={this.getTooltip()}\n      >\n        <calcite-icon icon={ICONS.drag} scale=\"s\" />\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"handle.js","mappings":"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","names":[],"sources":["src/components/handle/resources.ts","src/components/handle/handle.scss?tag=calcite-handle&encapsulation=shadow","src/components/handle/handle.tsx"],"sourcesContent":["export const CSS = {\n  handle: \"handle\",\n  handleSelected: \"handle--selected\",\n};\n\nexport const ICONS = {\n  drag: \"drag\",\n} as const;\n\nexport const SUBSTITUTIONS = {\n  itemLabel: \"{itemLabel}\",\n  position: \"{position}\",\n  total: \"{total}\",\n};\n",":host {\n  @apply flex;\n}\n\n.handle {\n  @apply focus-base\n    flex\n    items-center\n    justify-center\n    self-stretch\n    border-none;\n  color: theme(\"borderColor.color.input\");\n  padding-block: theme(\"spacing.3\");\n  padding-inline: theme(\"spacing.1\");\n  line-height: 0;\n\n  calcite-icon {\n    color: inherit;\n  }\n}\n\n:host(:not([disabled])) .handle {\n  @apply cursor-move;\n  &:hover {\n    @apply bg-foreground-2 text-color-1;\n  }\n  &:focus {\n    @apply text-color-1 focus-inset;\n  }\n  &--selected {\n    @apply bg-foreground-3 text-color-1;\n  }\n}\n\n@include disabled();\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { InteractiveComponent, updateHostInteraction } from \"../../utils/interactive\";\nimport { HandleMessages } from \"./assets/handle/t9n\";\nimport { HandleChange, HandleNudge } from \"./interfaces\";\nimport { CSS, ICONS, SUBSTITUTIONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-handle\",\n  styleUrl: \"handle.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Handle implements LoadableComponent, T9nComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  @Watch(\"messages\")\n  @Watch(\"label\")\n  @Watch(\"selected\")\n  @Watch(\"setPosition\")\n  @Watch(\"setSize\")\n  handleAriaTextChange(): void {\n    const message = this.getAriaText(\"live\");\n\n    if (message) {\n      this.calciteInternalAssistiveTextChange.emit({\n        message,\n      });\n    }\n  }\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Value for the button title attribute.\n   */\n  @Prop({ reflect: true }) dragHandle: string;\n\n  /**\n   * Made into a prop for testing purposes only.\n   *\n   * @internal\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: HandleMessages;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setPosition: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setSize: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, disables unselecting the component when blurred.\n   *\n   * @internal\n   */\n  @Prop() blurUnselectDisabled = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<HandleMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectMessages(this);\n    disconnectLocalized(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteHandleElement;\n\n  handleButton: HTMLElement;\n\n  @State() effectiveLocale: string;\n\n  @State() defaultMessages: HandleMessages;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires whenever the component is selected or unselected.\n   *\n   */\n  @Event({ cancelable: false }) calciteHandleChange: EventEmitter<void>;\n\n  /**\n   * Fires when the handle is selected and the up or down arrow key is pressed.\n   */\n  @Event({ cancelable: false }) calciteHandleNudge: EventEmitter<HandleNudge>;\n\n  /**\n   * Fires when the assistive text has changed.\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAssistiveTextChange: EventEmitter<HandleChange>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.handleButton?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private getTooltip(): string {\n    const { label, messages } = this;\n\n    if (!messages) {\n      return \"\";\n    }\n\n    if (!label) {\n      return messages.dragHandleUntitled;\n    }\n\n    return messages.dragHandle.replace(SUBSTITUTIONS.itemLabel, label);\n  }\n\n  getAriaText(type: \"label\" | \"live\"): string {\n    const { setPosition, setSize, label, messages, selected } = this;\n\n    if (!messages || !label || typeof setSize !== \"number\" || typeof setPosition !== \"number\") {\n      return null;\n    }\n\n    const text =\n      type === \"label\"\n        ? selected\n          ? messages.dragHandleChange\n          : messages.dragHandleIdle\n        : selected\n          ? messages.dragHandleActive\n          : messages.dragHandleCommit;\n\n    const replacePosition = text.replace(SUBSTITUTIONS.position, setPosition.toString());\n    const replaceLabel = replacePosition.replace(SUBSTITUTIONS.itemLabel, label);\n    return replaceLabel.replace(SUBSTITUTIONS.total, setSize.toString());\n  }\n\n  handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \" \":\n        this.selected = !this.selected;\n        this.calciteHandleChange.emit();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"up\" });\n        break;\n      case \"ArrowDown\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"down\" });\n        break;\n    }\n  };\n\n  handleBlur = (): void => {\n    if (this.blurUnselectDisabled || this.disabled) {\n      return;\n    }\n\n    if (this.selected) {\n      this.selected = false;\n      this.calciteHandleChange.emit();\n    }\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486\n      <span\n        aria-checked={this.disabled ? null : toAriaBoolean(this.selected)}\n        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}\n        aria-label={this.disabled ? null : this.getAriaText(\"label\")}\n        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}\n        onBlur={this.handleBlur}\n        onKeyDown={this.handleKeyDown}\n        ref={(el): void => {\n          this.handleButton = el;\n        }}\n        // role of radio is being applied to allow space key to select in screen readers\n        role=\"radio\"\n        tabIndex={this.disabled ? null : 0}\n        title={this.getTooltip()}\n      >\n        <calcite-icon icon={ICONS.drag} scale=\"s\" />\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/he.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/hi.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/hr.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/hu.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/icon.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/id.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { d as darkMode, a as autoMode } from './resources.js';
 import { s as stampVersion } from './config.js';

package/dist/components/index2.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { t as timeZones } from './time-zones.js';
 

package/dist/components/index3.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { t as timeZones } from './time-zones.js';
 import { e as extractContinent, i as isRegularContinent } from './continent.js';

package/dist/components/index4.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { t as timeZones } from './time-zones.js';
 import { e as extractContinent, i as isRegularContinent } from './continent.js';

package/dist/components/index5.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 class NativeDateEngine {
     constructor() {

package/dist/components/input-message.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { o as setRequestedIcon } from './dom.js';

package/dist/components/input-number.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { y as isPrimaryPointerButton, o as setRequestedIcon, g as getSlotted, a as getElementDir, t as toAriaBoolean } from './dom.js';
 import { s as submitForm, c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { n as numberKeys } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
@@ -447,7 +447,6 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -464,7 +463,6 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -584,27 +582,27 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (h("div", { key: '4afc447c454d130ac4e983faa2a5a4390e500134', class: CSS.loader }, h("calcite-progress", { key: '8f14d3e88b4a3f9d1069b2f10a3b5377353b37cd', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (h("button", { key: '60622dbfee3b9d3b96f779f37590d02863a5b395', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '98e61619db4e6cd25353bbb4cd3e998b47debdef', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (h("calcite-icon", { key: 'bd8c940cd1a47cc4051d9cbb30e19ce32748f82d', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (h("div", { key: '624f851a38ed577e84037e4bff2aef9a71176736', class: CSS.loader }, h("calcite-progress", { key: '2f53d03813ac32d35de42a026ec2234534a154ce', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (h("button", { key: '23a9c4b0be969c128ce8530099b8f69976c59502', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'a7edf1cbc4bc56413e5ff96f6cb6d6d0e683a918', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (h("calcite-icon", { key: '6e170726283b9ac315793a975e5bd8d672077ee3', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (h("button", { key: 'a33a45b1576ed55847411d9c0e493a4354188cee', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (h("button", { key: 'de4180c780fe30c27eec7e0f9466f85eeb08496b', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'b05ed816a0472df584918e6cdbeefca0f4ebccb6', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (h("button", { key: '7e8466f04ec12caccd6703701934c8e6864e2ad1', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '82f7975740d4f6dc7bcdaeab5eff839e19c15dba', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (h("button", { key: '2e12375c21c64a18cc1e2565de90734c1e38910a', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'b796613a0510d88c5a9a88e19f204dd1cfa3ae79', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (h("div", { key: '7c0d61831b7d00d383b08bc69d130c93e4b41708', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = h("div", { key: 'bde995b58c2be304e0f97751864932f4aba8b560', class: CSS.prefix }, this.prefixText);
-        const suffixText = h("div", { key: '09ecebb64862cc87c42f6a07eb43f4f492aafff9', class: CSS.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'fbd8d502aff44c1985e516ba4f48fa3e247ffa8f', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (h("div", { key: '01187ebd01cb01752782d929d3eff4a682b5f3de', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = h("div", { key: 'ee41b63a2152793001a0f1f6560b613fd9447b1a', class: CSS.prefix }, this.prefixText);
+        const suffixText = h("div", { key: '04c9c776fbc751719d700f5c7a4066aa220513b3', class: CSS.suffix }, this.suffixText);
         const childEl = (h("input", { "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode") || "decimal", key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue }));
-        return (h(Host, { key: '8bbe5d61c4d825064c541d69720c3dec29397bb6', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '88981ec407b3ca3dc30e1f4639cc165f125a2e4f', disabled: this.disabled }, h("div", { key: 'b5147afb965eb8950451efd0188de34a126cb42a', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
+        return (h(Host, { key: 'd52faa6b5b8066d75d09ede47bf69c6f4c07083c', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '450b33701515176eb435dcfdf9d63196136b91d3', disabled: this.disabled }, h("div", { key: '24f8db03f06d7782f85b6f59fb961de3c1825b8c', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, h("div", { key: 'ae8cfb188f1e67b2b26fd994e075b9d65f193aed', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '68e1e75159411ccc36981c488411741ba4f4863f', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, h("slot", { key: '68ffd29dc928221cf0e4f1b1e79fc71dc1cdbfa2', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, h("div", { key: 'eb46de7ea0c7768de8c2f73c9d53a555fd82d92c', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '256eb5868113985e7f88e3e8b2d1505bb321da10', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, h("slot", { key: '9389f0814000d0db770c60b294a81df35a9d8a3d', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, h(HiddenFormInputSlot, { key: '5efb494ebcff2e85bd0cb306ca1653dea1a79e36', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, h(HiddenFormInputSlot, { key: 'd5d25c9eece3dcc784eb0373410a6702c5f70845', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }