@esri/solutions-components 0.10.27 → 0.10.28

package/dist/cjs/calcite-filter_5.cjs.entry.js

@@ -7,26 +7,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const filter = require('./filter-a9429bde.js');
-const interactive = require('./interactive-3b85d8df.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-351282c5.js');
-const t9n = require('./t9n-e41672d2.js');
-const resources = require('./resources-f11e9bd6.js');
+const index = require('./index-4b68e4b4.js');
+const filter = require('./filter-e600c2fe.js');
+const interactive = require('./interactive-a128ac30.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-da840314.js');
+const t9n = require('./t9n-ed5c03a7.js');
+const resources = require('./resources-18f799c7.js');
 const debounce = require('./debounce-7f1e04d6.js');
-const dom = require('./dom-3d3a8f25.js');
-const observers = require('./observers-5f9f67ee.js');
-const resources$1 = require('./resources-c5f09989.js');
-const browser = require('./browser-2893460e.js');
-const sortableComponent = require('./sortableComponent-8684e273.js');
-require('./key-82084ef6.js');
-require('./guid-42cda8c9.js');
+const dom = require('./dom-795d4a33.js');
+const observers = require('./observers-18d87cb5.js');
+const resources$1 = require('./resources-cf1791da.js');
+const browser = require('./browser-333a21c5.js');
+const sortableComponent = require('./sortableComponent-5dfc7ff8.js');
+require('./key-47c9469a.js');
+require('./guid-e84a8375.js');
 
 /*!
  * 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.2
+ * v2.13.0
  */
 const CSS$3 = {
     container: "container",
@@ -49,8 +49,7 @@ const Filter = class {
         //  Private Methods
         //
         // --------------------------------------------------------------------------
-        this.filterDebounced = debounce.debounce((value, emit = false, onFilter) => this.items.length &&
-            this.updateFiltered(filter.filter(this.items, value, this.filterProps), emit, onFilter), resources.DEBOUNCE.filter);
+        this.filterDebounced = debounce.debounce((value, emit = false, onFilter) => this.updateFiltered(filter.filter(this.items ?? [], value, this.filterProps), emit, onFilter), resources.DEBOUNCE.filter);
         this.inputHandler = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -107,13 +106,10 @@ const Filter = class {
     //--------------------------------------------------------------------------
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
-        if (this.items.length) {
-            this.updateFiltered(filter.filter(this.items, this.value, this.filterProps));
-        }
+        this.updateFiltered(filter.filter(this.items ?? [], this.value, this.filterProps));
         await t9n.setUpMessages(this);
     }
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
     }
@@ -121,7 +117,6 @@ const Filter = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
         this.filterDebounced.cancel();
@@ -167,7 +162,7 @@ const Filter = class {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (index.h(interactive.InteractiveContainer, { key: 'da4ff667fdb02ae8b85c56cd717b416f3256145d', disabled: disabled }, index.h("div", { key: 'f4406a403101afa7c97da11f8408fa464aa8a08c', class: CSS$3.container }, index.h("label", { key: 'aace74138ebea71058044e05d4fe44cb7ee6beb2' }, index.h("calcite-input", { key: 'cc7dca3364cc73bf42a78d76155477af98d72552', clearable: true, disabled: disabled, icon: ICONS$1.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        return (index.h(interactive.InteractiveContainer, { key: 'c4a624e52409ed90839b506f5d99ab623767260e', disabled: disabled }, index.h("div", { key: '1f2ef99156489719dd2f938bc5ce8a05185866bf', class: CSS$3.container }, index.h("label", { key: '6fe8c6cf73f554908be38299263d23380a4ed089' }, index.h("calcite-input", { key: '6765e00d208d6898221540769865d84aa1c64974', clearable: true, disabled: disabled, icon: ICONS$1.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 })))));
     }
@@ -187,7 +182,7 @@ Filter.style = CalciteFilterStyle0;
 /*!
  * 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.2
+ * v2.13.0
  */
 const CSS$2 = {
     handle: "handle",
@@ -202,7 +197,7 @@ const SUBSTITUTIONS = {
     total: "{total}",
 };
 
-const handleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-color-border-input);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:not([disabled])) .handle:focus{color:var(--calcite-color-text-1);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:not([disabled])) .handle--selected{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const handleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-handle-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-handle-background-color, transparent);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-hover, var(--calcite-color-foreground-2))}:host(:not([disabled])) .handle:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1))}:host(:not([disabled])) .handle--selected{color:var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-selected, var(--calcite-color-foreground-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteHandleStyle0 = handleCss;
 
 const Handle = class {
@@ -275,7 +270,6 @@ const Handle = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         t9n.connectMessages(this);
         locale.connectLocalized(this);
     }
@@ -290,7 +284,6 @@ const Handle = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         t9n.disconnectMessages(this);
         locale.disconnectLocalized(this);
     }
@@ -344,13 +337,11 @@ const Handle = class {
     //
     // --------------------------------------------------------------------------
     render() {
-        return (
-        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        index.h("span", { key: '043550c81bdf21e953f33e7b3ffc04c982ae17e3', "aria-checked": this.disabled ? null : dom.toAriaBoolean(this.selected), "aria-disabled": this.disabled ? dom.toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS$2.handle]: true, [CSS$2.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (index.h(interactive.InteractiveContainer, { key: '1a694de393421691c83e7265850275c217ef7ffe', disabled: this.disabled }, index.h("span", { key: '82ff692c15c2d9294ceb814b3f7f06bb4d8ff0e0', "aria-checked": this.disabled ? null : dom.toAriaBoolean(this.selected), "aria-disabled": this.disabled ? dom.toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS$2.handle]: true, [CSS$2.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() }, index.h("calcite-icon", { key: '1d432a3f6e17366782fe92b8347f2f301b181b7b', icon: ICONS.drag, scale: "s" })));
+            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip() }, index.h("calcite-icon", { key: '25862a953826aea2d594507157aaffc21d07001c', icon: ICONS.drag, scale: "s" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -369,7 +360,7 @@ Handle.style = CalciteHandleStyle0;
 /*!
  * 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.2
+ * v2.13.0
  */
 const listSelector$1 = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
@@ -379,11 +370,13 @@ function getListItemChildLists(slotEl) {
 }
 function getListItemChildren(slotEl) {
     const assignedElements = slotEl.assignedElements({ flatten: true });
-    const listItemGroupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector))
+    const listItemGroupChildren = assignedElements
+        .filter((el) => el?.matches(listItemGroupSelector))
         .map((group) => Array.from(group.querySelectorAll(listItemSelector$1)))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
     const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector$1));
-    const listItemListChildren = assignedElements.filter((el) => el?.matches(listSelector$1))
+    const listItemListChildren = assignedElements
+        .filter((el) => el?.matches(listSelector$1))
         .map((list) => Array.from(list.querySelectorAll(listItemSelector$1)))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
     return [...listItemListChildren, ...listItemGroupChildren, ...listItemChildren];
@@ -408,7 +401,7 @@ function getDepth(element, includeGroup = false) {
 /*!
  * 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.2
+ * v2.13.0
  */
 const CSS$1 = {
     container: "container",
@@ -428,7 +421,7 @@ const SLOTS$1 = {
 /*!
  * 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.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -464,7 +457,7 @@ const List = class {
         this.focusableItems = [];
         this.handleSelector = "calcite-handle";
         this.listItems = [];
-        this.mutationObserver = observers.createObserver("mutation", () => this.updateListItems());
+        this.mutationObserver = observers.createObserver("mutation", () => this.updateListItems({ performFilter: true }));
         this.visibleItems = [];
         this.handleDefaultSlotChange = (event) => {
             updateListItemChildren(getListItemChildren(event.target));
@@ -529,8 +522,10 @@ const List = class {
                 value: item.value,
             }));
         };
-        this.updateListItems = debounce.debounce((emit = false) => {
-            const { selectionAppearance, selectionMode, dragEnabled, el } = this;
+        this.updateListItems = debounce.debounce((options) => {
+            const emitFilterChange = options?.emitFilterChange ?? false;
+            const performFilter = options?.performFilter ?? false;
+            const { selectionAppearance, selectionMode, dragEnabled, el, filterEl, filterEnabled } = this;
             const items = Array.from(this.el.querySelectorAll(listItemSelector));
             items.forEach((item) => {
                 item.selectionAppearance = selectionAppearance;
@@ -544,18 +539,19 @@ const List = class {
                 return;
             }
             this.listItems = items;
-            if (this.filterEnabled) {
+            if (filterEnabled && performFilter) {
                 this.dataForFilter = this.getItemData();
-                if (this.filterEl) {
-                    this.filterEl.items = this.dataForFilter;
+                if (filterEl) {
+                    filterEl.items = this.dataForFilter;
+                    this.filterAndUpdateData();
                 }
             }
             this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
-            this.updateFilteredItems(emit);
+            this.updateFilteredItems(emitFilterChange);
             this.borderItems();
             this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
             this.setActiveListItem();
-            this.updateSelectedItems(emit);
+            this.updateSelectedItems();
             this.setUpSorting();
         }, debounceTimeout);
         this.focusRow = (focusEl) => {
@@ -644,14 +640,14 @@ const List = class {
     async handleFilterTextChange() {
         this.performFilter();
     }
-    async handlefilterPropsChange() {
+    async handleFilterPropsChange() {
         this.performFilter();
     }
     onMessagesChange() {
         /* wired up by t9n util */
     }
     handleListItemChange() {
-        this.updateListItems();
+        this.updateListItems({ performFilter: true });
     }
     handleCalciteListItemToggle(event) {
         if (this.parentListEl) {
@@ -751,9 +747,8 @@ const List = class {
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         this.connectObserver();
-        this.updateListItems();
+        this.updateListItems({ performFilter: true });
         this.setUpSorting();
-        interactive.connectInteractive(this);
         this.setParentList();
     }
     async componentWillLoad() {
@@ -769,7 +764,6 @@ const List = class {
     disconnectedCallback() {
         this.disconnectObserver();
         sortableComponent.disconnectSortableComponent(this);
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -800,7 +794,7 @@ const List = class {
     // --------------------------------------------------------------------------
     render() {
         const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filteredItems, hasFilterActionsStart, hasFilterActionsEnd, hasFilterNoResults, filterProps, } = this;
-        return (index.h(interactive.InteractiveContainer, { key: '84991009060a8b97b9901ca97f32b32fa6e830fa', disabled: this.disabled }, index.h("div", { key: '27f5a904be599be5768bb1a7693111573e745e0f', class: CSS.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? index.h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, index.h("table", { key: 'dd343a43f26edcb50f87a064a41471756a94afeb', "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (index.h("thead", { class: CSS.sticky }, index.h("tr", null, index.h("th", { colSpan: resources$1.MAX_COLUMNS }, index.h("calcite-stack", { class: CSS.stack }, index.h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, filterProps: filterProps, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), index.h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, index.h("tbody", { key: '90a288eea3e02d5261e369e14b687852c1ff876b', class: CSS.tableContainer }, index.h("slot", { key: '08992c3c5ad4d5afe86e7e1cd38327c5f4281bd1', onSlotchange: this.handleDefaultSlotChange }))), index.h("div", { key: '689185b56a2990e00a409ddbc4e4c135115791d3', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, index.h("slot", { key: '929ef7f843f5c8e7290a3cbcebea8c5c4cf38707', name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
+        return (index.h(interactive.InteractiveContainer, { key: 'c3139afe4fe7c7462578a51a4578971c97473167', disabled: this.disabled }, index.h("div", { key: '5e99dc8b479c35609c5f0318723b3da84ec23ef4', class: CSS.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? index.h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, index.h("table", { key: 'a31ba050d3141351e491141365e8244ed3ca5303', "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (index.h("thead", { class: CSS.sticky }, index.h("tr", null, index.h("th", { colSpan: resources$1.MAX_COLUMNS }, index.h("calcite-stack", { class: CSS.stack }, index.h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, filterProps: filterProps, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, ref: this.setFilterEl, value: filterText }), index.h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, index.h("tbody", { key: '3ed1b8d9a4387c3ea0f4ff38e5388be35b32d89b', class: CSS.tableContainer }, index.h("slot", { key: '712562533b4609749cbff0968bd0a9e77d99758e', onSlotchange: this.handleDefaultSlotChange }))), index.h("div", { key: '3ff977013e0ca0d58229e1305dca702000d91a99', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, index.h("slot", { key: '7c2bf6389c8b5f4b6f617950e4068baf6b1dc358', name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //
@@ -882,17 +876,20 @@ const List = class {
         if (filterEl.filteredItems) {
             this.filteredData = filterEl.filteredItems;
         }
-        this.updateListItems(emit);
+        this.updateListItems({ emitFilterChange: emit });
     }
-    async performFilter() {
+    async filterAndUpdateData() {
+        await this.filterEl?.filter(this.filterText);
+        this.updateFilteredData();
+    }
+    performFilter() {
         const { filterEl, filterText, filterProps } = this;
         if (!filterEl) {
             return;
         }
         filterEl.value = filterText;
         filterEl.filterProps = filterProps;
-        await filterEl.filter(filterText);
-        this.updateFilteredData();
+        this.filterAndUpdateData();
     }
     handleNudgeEvent(event) {
         const { handleSelector, dragSelector } = this;
@@ -936,7 +933,7 @@ const List = class {
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "filterText": ["handleFilterTextChange"],
-        "filterProps": ["handlefilterPropsChange"],
+        "filterProps": ["handleFilterPropsChange"],
         "messageOverrides": ["onMessagesChange"],
         "filterEnabled": ["handleListItemChange"],
         "group": ["handleListItemChange"],
@@ -948,7 +945,7 @@ const List = class {
 };
 List.style = CalciteListStyle0;
 
-const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);--calcite-list-item-icon-color:var(--calcite-color-brand)}:host([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-color-border-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-color-foreground-1)}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.container:active{background-color:var(--calcite-color-foreground-1)}.container--border{border-inline-start-width:4px;border-inline-start-style:solid}.container--border-selected{border-inline-start-color:var(--calcite-color-brand)}.container--border-unselected{border-inline-start-color:transparent}.container:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);margin-inline-start:var(--calcite-list-item-spacing-indent, 1.5rem)}.nested-container--open{display:flex}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:stretch;padding:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}tr,td{outline-color:transparent}tr{position:relative}tr:focus,td:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-font-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-color-text-1)}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}.description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}:host([selected]) .description{color:var(--calcite-color-text-2)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;padding-block:0px;color:var(--calcite-color-border-input)}.selection-container--single{color:transparent}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-color-border-1)}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-item-icon-color)}.open-container{color:var(--calcite-color-text-3)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-color-text-1)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.actions-start calcite-action,.actions-start calcite-handle,.actions-end calcite-action,.actions-end calcite-handle,.content-start calcite-action,.content-start calcite-handle,.content-end calcite-action,.content-end calcite-handle,.selection-container calcite-action,.selection-container calcite-handle,.drag-container calcite-action,.drag-container calcite-handle,.open-container calcite-action,.open-container calcite-handle{align-self:stretch}.open-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0px}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}tr:focus .actions-start,tr:focus .actions-end{inset-block:0.125rem}tr:focus .actions-start .close,tr:focus .actions-start ::slotted(calcite-action),tr:focus .actions-start ::slotted(calcite-action-menu),tr:focus .actions-start ::slotted(calcite-handle),tr:focus .actions-start ::slotted(calcite-dropdown),tr:focus .actions-end .close,tr:focus .actions-end ::slotted(calcite-action),tr:focus .actions-end ::slotted(calcite-action-menu),tr:focus .actions-end ::slotted(calcite-handle),tr:focus .actions-end ::slotted(calcite-dropdown){block-size:calc(100% - 0.25rem)}tr:focus::after,tr:focus::before{position:absolute;content:\"\";inline-size:0.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-brand);inset-block:0}tr:focus::before{inset-inline-start:0}tr:focus::after{inset-inline-end:0}.container--border:focus::before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}:host([hidden]){display:none}[hidden]{display:none}";
+const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);--calcite-list-item-icon-color:var(--calcite-color-brand)}:host([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-color-border-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-color-foreground-1)}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.container:active{background-color:var(--calcite-color-foreground-1)}.container--border{border-inline-start-width:4px;border-inline-start-style:solid}.container--border-selected{border-inline-start-color:var(--calcite-color-brand)}.container--border-unselected{border-inline-start-color:transparent}.container:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);margin-inline-start:var(--calcite-list-item-spacing-indent, 1.5rem)}.nested-container--open{display:flex}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:stretch;padding:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content-container--unavailable{opacity:var(--calcite-opacity-disabled)}tr,td{outline-color:transparent}tr{position:relative}tr:focus,td:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-font-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-color-text-1)}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}.description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}:host([selected]) .description{color:var(--calcite-color-text-2)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-block:0px;color:var(--calcite-color-border-input);padding-inline:var(--calcite-spacing-md) var(--calcite-spacing-xxs)}.selection-container--single{color:transparent}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-color-border-1)}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-item-icon-color)}.open-container{color:var(--calcite-color-text-3)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-color-text-1)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.actions-start calcite-action,.actions-start calcite-handle,.actions-end calcite-action,.actions-end calcite-handle,.content-start calcite-action,.content-start calcite-handle,.content-end calcite-action,.content-end calcite-handle,.selection-container calcite-action,.selection-container calcite-handle,.drag-container calcite-action,.drag-container calcite-handle,.open-container calcite-action,.open-container calcite-handle{align-self:stretch}.open-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0px}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}tr:focus .actions-start,tr:focus .actions-end{inset-block:0.125rem}tr:focus .actions-start .close,tr:focus .actions-start ::slotted(calcite-action),tr:focus .actions-start ::slotted(calcite-action-menu),tr:focus .actions-start ::slotted(calcite-handle),tr:focus .actions-start ::slotted(calcite-dropdown),tr:focus .actions-end .close,tr:focus .actions-end ::slotted(calcite-action),tr:focus .actions-end ::slotted(calcite-action-menu),tr:focus .actions-end ::slotted(calcite-handle),tr:focus .actions-end ::slotted(calcite-dropdown){block-size:calc(100% - 0.25rem)}tr:focus::after,tr:focus::before{position:absolute;content:\"\";inline-size:0.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-brand);inset-block:0}tr:focus::before{inset-inline-start:0}tr:focus::after{inset-inline-end:0}.container--border:focus::before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteListItemStyle0 = listItemCss;
 
 const focusMap = new Map();
@@ -1144,6 +1141,7 @@ const ListItem = class {
         this.setSize = null;
         this.setPosition = null;
         this.selected = false;
+        this.unavailable = false;
         this.value = undefined;
         this.selectionMode = null;
         this.selectionAppearance = null;
@@ -1194,7 +1192,6 @@ const ListItem = class {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         const { el } = this;
@@ -1213,7 +1210,6 @@ const ListItem = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -1306,7 +1302,7 @@ const ListItem = class {
         return !hasCustomContent && (!!label || !!description) ? (index.h("div", { class: resources$1.CSS.content, key: "content" }, label ? (index.h("div", { class: resources$1.CSS.label, key: "label" }, label)) : null, description ? (index.h("div", { class: resources$1.CSS.description, key: "description" }, description)) : null)) : null;
     }
     renderContentContainer() {
-        const { description, label, selectionMode, hasCustomContent } = this;
+        const { description, label, selectionMode, hasCustomContent, unavailable } = this;
         const hasCenterContent = hasCustomContent || !!label || !!description;
         const content = [
             this.renderContentStart(),
@@ -1316,6 +1312,7 @@ const ListItem = class {
         ];
         return (index.h("td", { "aria-label": label, class: {
                 [resources$1.CSS.contentContainer]: true,
+                [resources$1.CSS.contentContainerUnavailable]: unavailable,
                 [resources$1.CSS.contentContainerSelectable]: selectionMode !== "none",
                 [resources$1.CSS.contentContainerHasCenterContent]: hasCenterContent,
             }, key: "content-container", onClick: this.handleItemClick, onFocusin: this.focusCellContent, ref: (el) => (this.contentEl = el), role: "gridcell" }, content));
@@ -1325,7 +1322,7 @@ const ListItem = class {
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (index.h(index.Host, { key: 'e5c6ac9b3b611040a89e45804935c9c6e0edce2d' }, index.h(interactive.InteractiveContainer, { key: '352c056d23f70ef0c5596e9bc447c57dad7523c9', disabled: disabled }, index.h("div", { key: 'c19950786e18433c5197309442118d72806698a9', class: { [resources$1.CSS.wrapper]: true, [resources$1.CSS.wrapperBordered]: bordered } }, index.h("tr", { key: 'a77a11612d4b15afdfe0146c2808312de96756bc', "aria-expanded": openable ? dom.toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": dom.toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        return (index.h(index.Host, { key: 'a610ab740c82b6088400839884d58d4d867829db' }, index.h(interactive.InteractiveContainer, { key: 'f05bf10e82fab03ddfdaf3ab2e100dcbd6d69c63', disabled: disabled }, index.h("div", { key: '4bf63ed08d2a4a049e060d26d3699656558d495e', class: { [resources$1.CSS.wrapper]: true, [resources$1.CSS.wrapperBordered]: bordered } }, index.h("tr", { key: 'd231a113c3bd8ee7f67c2ffb0cf804c142a95fb9', "aria-expanded": openable ? dom.toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": dom.toAriaBoolean(selected), "aria-setsize": setSize, class: {
                 [resources$1.CSS.container]: true,
                 [resources$1.CSS.containerHover]: true,
                 [resources$1.CSS.containerBorder]: showBorder,
@@ -1431,7 +1428,7 @@ const Stack = class {
         return (index.h("div", { class: CSS$1.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: SLOTS$1.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
     }
     render() {
-        return (index.h(index.Host, { key: '6469377ccf7311aefda5e864aac7cb5870b24ded' }, index.h("div", { key: 'd897fc4e108392784147cc0c8ed0a4bf5d347ca1', class: CSS$1.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+        return (index.h(index.Host, { key: '97f052828720d715fd3b11a4b0e77fa085127796' }, index.h("div", { key: '5351cc20a8a437763894fef35ecc7a7240cb7c46', class: CSS$1.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
     }
 };
 Stack.style = CalciteStackStyle0;

package/dist/cjs/calcite-flow_4.cjs.entry.js

@@ -7,12 +7,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const observers = require('./observers-5f9f67ee.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-a09603ee.js');
+const index = require('./index-4b68e4b4.js');
+const observers = require('./observers-18d87cb5.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-339b55f0.js');
 const mapViewUtils = require('./mapViewUtils-18c46b84.js');
-require('./browser-2893460e.js');
+require('./browser-333a21c5.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./interfaces-09c4c40e.js');
@@ -20,7 +20,7 @@ require('./interfaces-09c4c40e.js');
 /*!
  * 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.2
+ * v2.13.0
  */
 const CSS = {
     frame: "frame",
@@ -149,7 +149,7 @@ const Flow = class {
             [CSS.frameAdvancing]: flowDirection === "advancing",
             [CSS.frameRetreating]: flowDirection === "retreating",
         };
-        return (index.h("div", { key: '93590e2eec869cef65a59c01aa2c6001b431da9a', class: frameDirectionClasses }, index.h("slot", { key: '5b97e4147abb053391f170f5e36bac4670934072' })));
+        return (index.h("div", { key: '01fbee965d48cb54fa5bd1b53a3435538df84332', class: frameDirectionClasses }, index.h("slot", { key: '495880eceeb04387dd1352aa00337f037ab0636c' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/calcite-graph_2.cjs.entry.js

@@ -7,25 +7,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const guid = require('./guid-42cda8c9.js');
-const observers = require('./observers-5f9f67ee.js');
-const dom = require('./dom-3d3a8f25.js');
-const form = require('./form-8132060d.js');
-const interactive = require('./interactive-3b85d8df.js');
-const key = require('./key-82084ef6.js');
-const label = require('./label-e7d3c371.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-351282c5.js');
-const math = require('./math-14740338.js');
-require('./browser-2893460e.js');
-require('./resources-f11e9bd6.js');
-require('./component-7f2bd646.js');
+const index = require('./index-4b68e4b4.js');
+const guid = require('./guid-e84a8375.js');
+const observers = require('./observers-18d87cb5.js');
+const dom = require('./dom-795d4a33.js');
+const form = require('./form-6dd8050a.js');
+const interactive = require('./interactive-a128ac30.js');
+const key = require('./key-47c9469a.js');
+const label = require('./label-726fc287.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-da840314.js');
+const math = require('./math-089392ef.js');
+require('./browser-333a21c5.js');
+require('./resources-18f799c7.js');
+require('./component-5d190962.js');
 
 /*!
  * 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.2
+ * v2.13.0
  */
 /**
  * Calculate slope of the tangents
@@ -236,7 +236,7 @@ Graph.style = CalciteGraphStyle0;
 /*!
  * 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.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -349,7 +349,7 @@ const Slider = class {
             }
             event.preventDefault();
             if (this.dragProp) {
-                const value = this.translate(event.clientX || event.pageX);
+                const value = this.mapToRange(event.clientX || event.pageX);
                 if (isRange(this.value) && this.dragProp === "minMaxValue") {
                     if (this.minValueDragRange && this.maxValueDragRange && this.minMaxValueRange) {
                         const newMinValue = value - this.minValueDragRange;
@@ -469,7 +469,6 @@ const Slider = class {
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         this.setMinMaxFromValue();
         this.setValueFromMinMax();
@@ -477,7 +476,6 @@ const Slider = class {
         form.connectForm(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         form.disconnectForm(this);
         locale.disconnectLocalized(this);
@@ -552,11 +550,11 @@ const Slider = class {
                         left: `${mirror ? 100 - maxInterval : minInterval}%`,
                         right: `${mirror ? minInterval : 100 - maxInterval}%`,
                     };
-        return (index.h(index.Host, { key: 'c0ebc9073b3609d1d47379b5efccbe31c68915ed', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { key: '1f6930631e4c83e5b47ae1d5c64c10dbe58ed8e7', disabled: this.disabled }, index.h("div", { key: '09a30ae372ca5e52fde36a0a85adc76d14ca1461', "aria-label": label.getLabelText(this), class: {
+        return (index.h(index.Host, { key: 'dee9376120224b51dfa12f3e87fbdce4a481a1ed', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { key: '65bca4d477d57ced846ef97b466917b6d7fc2f21', disabled: this.disabled }, index.h("div", { key: '99dd57b50ded2302ca1d255708d9e4bd90de3ecb', "aria-label": label.getLabelText(this), class: {
                 [CSS.container]: true,
                 [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), index.h("div", { key: 'e996119bc9bba42340d24b2dc8b2ad7daaf02e6e', class: CSS.track, ref: this.storeTrackRef }, index.h("div", { key: 'fb768d8462137621d7a891d0767e2e27864307fc', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), index.h("div", { key: '408a0a05ef7503b1af724cfd95e3fb40f94bcbf8', class: CSS.ticks }, this.tickValues.map((tick) => {
+            } }, this.renderGraph(), index.h("div", { key: '47647c0d347232a0ddb384333b15860a0264aefa', class: CSS.track, ref: this.storeTrackRef }, index.h("div", { key: '3dc176871f6245f2dde77a016ddc747ad9571d3d', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), index.h("div", { key: '0c08b977678d6ac7e8b9944157e51948969a5dc5', class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = false;
             if (fillPlacement === "start" || fillPlacement === "end") {
@@ -576,7 +574,7 @@ const Slider = class {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), index.h("div", { key: 'c511ee11206dadb2b23199708abf2d2703423559', class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { key: 'f6684d5f25ade745730db775a5e51298b5eb8048', component: this }))))));
+        }))), index.h("div", { key: '51996cb05142dbeec20093ca12b017adee23f293', class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { key: '6fd5c00374205d47e226a417674264417323a5c3', component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");
@@ -615,7 +613,7 @@ const Slider = class {
         if (thumbPlacement === "below") {
             thumbContent.reverse();
         }
-        return (index.h("div", { "aria-disabled": this.disabled, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": ariaValuenow, class: {
+        return (index.h("div", { "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": ariaValuenow, class: {
                 [CSS.thumb]: true,
                 [CSS.thumbValue]: !isMinThumb,
                 [CSS.thumbActive]: this.lastDragProp !== "minMaxValue" && this.dragProp === valueProp,
@@ -646,7 +644,7 @@ const Slider = class {
             return;
         }
         const x = event.clientX || event.pageX;
-        const position = this.translate(x);
+        const position = this.mapToRange(x);
         let prop = "value";
         if (isRange(this.value)) {
             const inRange = position >= this.minValue && position <= this.maxValue;
@@ -830,7 +828,7 @@ const Slider = class {
      * @param x
      * @internal
      */
-    translate(x) {
+    mapToRange(x) {
         const range = this.max - this.min;
         const { left, width } = this.trackEl.getBoundingClientRect();
         const percent = (x - left) / width;