@esri/solutions-components 0.8.12 → 0.8.13

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

@@ -7,32 +7,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const filter = require('./filter-b524f88d.js');
-const dom = require('./dom-c9c2c835.js');
-const floatingUi = require('./floating-ui-984cc970.js');
-const form = require('./form-fed676d6.js');
-const guid = require('./guid-ae73cd27.js');
-const interactive = require('./interactive-3ab7044d.js');
-const label = require('./label-32573e1d.js');
-const loadable = require('./loadable-5a794992.js');
-const locale = require('./locale-d237c9d5.js');
-const observers = require('./observers-db4527e4.js');
-const openCloseComponent = require('./openCloseComponent-19a769d0.js');
-const t9n = require('./t9n-993a84de.js');
-const utils = require('./utils-65d812ea.js');
-const component = require('./component-ac7c3bd8.js');
-const Validation = require('./Validation-b02c6710.js');
-const debounce = require('./debounce-30afab47.js');
-const key = require('./key-c5504030.js');
-const math = require('./math-318a1646.js');
-require('./resources-9447c777.js');
-require('./browser-d08a5f99.js');
+const index = require('./index-79b35510.js');
+const core = require('./core-b459e4f2.js');
+const filter = require('./filter-f363c8fb.js');
+const dom = require('./dom-1c78fa73.js');
+const floatingUi = require('./floating-ui-06d961ad.js');
+const form = require('./form-a27f759c.js');
+const guid = require('./guid-a7528dfa.js');
+const interactive = require('./interactive-f08f0369.js');
+const label = require('./label-85cf6821.js');
+const loadable = require('./loadable-b374ef4b.js');
+const locale = require('./locale-5efdf085.js');
+const observers = require('./observers-4fa351d9.js');
+const openCloseComponent = require('./openCloseComponent-6a283ac3.js');
+const t9n = require('./t9n-9d199056.js');
+const component = require('./component-d48747c9.js');
+const Validation = require('./Validation-eb9afded.js');
+const utils = require('./utils-e3996e43.js');
+const debounce = require('./debounce-7f1e04d6.js');
+const key = require('./key-7ed07912.js');
+const math = require('./math-11993213.js');
+require('./resources-1c0e54c1.js');
+require('./browser-a96d0614.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS$1 = {
     button: "x-button",
@@ -43,13 +44,8 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
         ref: ref }, index.h("calcite-icon", { icon: "x", scale: component.getIconScale(scale) })));
 }
 
-/**
- * Do not edit directly
- * Generated on Wed, 17 Jan 2024 17:52:08 GMT
- */
-const calciteSize48 = "48px";
-
-const comboboxCss = ":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{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid 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([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:-moz-placeholder-shown{text-overflow:ellipsis}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-s)}:host([scale=m]) .input--icon,:host([scale=l]) .input--icon{padding-inline:0.25rem}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = ":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{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.wrapper:hover .icon{color:var(--calcite-color-text-1)}:host(:focus-within) .wrapper,.wrapper--active{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([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:-moz-placeholder-shown{text-overflow:ellipsis}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-color-text-3)}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const CalciteComboboxStyle0 = comboboxCss;
 
 const isGroup = (el) => el.tagName === utils.ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -93,6 +89,9 @@ const Combobox = class {
             this.setFocus();
         };
         this.keyDownHandler = (event) => {
+            if (this.readOnly) {
+                return;
+            }
             const { key } = event;
             switch (key) {
                 case "Tab":
@@ -143,7 +142,7 @@ const Combobox = class {
                     }
                     break;
                 case " ":
-                    if (!this.textInput.value) {
+                    if (!this.textInput.value && !event.defaultPrevented) {
                         if (!this.open) {
                             this.open = true;
                             this.shiftActiveItemIndex(1);
@@ -181,7 +180,7 @@ const Combobox = class {
                     event.preventDefault();
                     break;
                 case "Enter":
-                    if (this.activeItemIndex > -1) {
+                    if (this.open && this.activeItemIndex > -1) {
                         this.toggleSelection(this.filteredItems[this.activeItemIndex]);
                         event.preventDefault();
                     }
@@ -245,6 +244,9 @@ const Combobox = class {
             this.calciteComboboxChipClose.emit();
         };
         this.clickHandler = (event) => {
+            if (this.readOnly) {
+                return;
+            }
             const composedPath = event.composedPath();
             if (composedPath.some((node) => node.tagName === "CALCITE-CHIP")) {
                 this.open = false;
@@ -272,7 +274,7 @@ const Combobox = class {
             const chipContainerElWidth = dom.getElementWidth(chipContainerEl);
             const { fontSize, fontFamily } = getComputedStyle(textInput);
             const inputTextWidth = dom.getTextWidth(placeholder, `${fontSize} ${fontFamily}`);
-            const inputWidth = (inputTextWidth || parseInt(calciteSize48)) + chipContainerElGap;
+            const inputWidth = (inputTextWidth || parseInt(core.calciteSize48)) + chipContainerElGap;
             const allSelectedIndicatorChipElWidth = dom.getElementWidth(allSelectedIndicatorChipEl);
             const selectedIndicatorChipElWidth = dom.getElementWidth(selectedIndicatorChipEl);
             const largestSelectedIndicatorChipWidth = Math.max(allSelectedIndicatorChipElWidth, selectedIndicatorChipElWidth);
@@ -423,6 +425,19 @@ const Combobox = class {
         this.maxItems = 0;
         this.validationMessage = undefined;
         this.validationIcon = undefined;
+        this.validity = {
+            valid: false,
+            badInput: false,
+            customError: false,
+            patternMismatch: false,
+            rangeOverflow: false,
+            rangeUnderflow: false,
+            stepMismatch: false,
+            tooLong: false,
+            tooShort: false,
+            typeMismatch: false,
+            valueMissing: false,
+        };
         this.name = undefined;
         this.allowCustomValues = undefined;
         this.overlayPositioning = "absolute";
@@ -436,6 +451,7 @@ const Combobox = class {
         this.messageOverrides = undefined;
         this.selectedItems = [];
         this.filteredItems = [];
+        this.readOnly = false;
         this.items = [];
         this.groupItems = [];
         this.needsIcon = undefined;
@@ -504,7 +520,7 @@ const Combobox = class {
     //
     //--------------------------------------------------------------------------
     documentClickHandler(event) {
-        if (this.disabled || !dom.isPrimaryPointerButton(event)) {
+        if (this.disabled) {
             return;
         }
         const composedPath = event.composedPath();
@@ -578,7 +594,6 @@ const Combobox = class {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
         this.updateItems();
         this.setFilteredPlacements();
-        this.reposition(true);
         if (this.open) {
             this.openHandler();
             openCloseComponent.onToggleOpenCloseComponent(this);
@@ -592,7 +607,7 @@ const Combobox = class {
     }
     componentDidLoad() {
         form.afterConnectDefaultValueSet(this, this.getValue());
-        this.reposition(true);
+        floatingUi.connectFloatingUI(this, this.referenceEl, this.floatingEl);
         loadable.setComponentLoaded(this);
     }
     componentDidRender() {
@@ -922,7 +937,7 @@ const Combobox = class {
     //
     //--------------------------------------------------------------------------
     renderChips() {
-        const { activeChipIndex, scale, selectionMode, messages } = this;
+        const { activeChipIndex, readOnly, scale, selectionMode, messages } = this;
         return this.selectedItems.map((item, i) => {
             const chipClasses = {
                 chip: true,
@@ -931,7 +946,7 @@ const Combobox = class {
             const ancestors = [...utils.getItemAncestors(item)].reverse();
             const pathLabel = [...ancestors, item].map((el) => el.textLabel);
             const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-            return (index.h("calcite-chip", { class: chipClasses, closable: true, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, selected: item.selected, title: label, value: item.value }, label));
+            return (index.h("calcite-chip", { appearance: readOnly ? "outline" : "solid", class: chipClasses, closable: !readOnly, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), scale: scale, selected: item.selected, title: label, value: item.value }, label));
         });
     }
     renderAllSelectedIndicatorChip() {
@@ -1019,6 +1034,15 @@ const Combobox = class {
                 [utils.CSS.chipInvisible]: chipInvisible,
             }, scale: scale, title: label, value: "" }, label));
     }
+    get showingInlineIcon() {
+        const { placeholderIcon, selectionMode, selectedItems, open } = this;
+        const selectedItem = selectedItems[0];
+        const selectedIcon = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
+        const singleSelectionMode = utils.isSingleLike(selectionMode);
+        return !open && selectedItem
+            ? !!selectedIcon && singleSelectionMode
+            : !!placeholderIcon && (!selectedItem || singleSelectionMode);
+    }
     renderInput() {
         const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
         const single = utils.isSingleLike(selectionMode);
@@ -1030,13 +1054,13 @@ const Combobox = class {
             } }, showLabel && (index.h("span", { class: {
                 label: true,
                 "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
-            }, key: "label" }, selectedItem.textLabel)), index.h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": label.getLabelText(this), class: {
-                input: true,
+            }, key: "label" }, selectedItem.textLabel)), index.h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": label.getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+                [utils.CSS.input]: true,
                 "input--single": true,
                 "input--transparent": this.activeChipIndex > -1,
                 "input--hidden": showLabel,
-                "input--icon": !!this.placeholderIcon,
-            }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
+                "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
+            }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, readOnly: this.readOnly, role: "combobox", type: "text",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (el) => (this.textInput = el) })));
     }
@@ -1059,45 +1083,43 @@ const Combobox = class {
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: setContainerEl }, index.h("ul", { class: { list: true, "list--hide": !open } }, index.h("slot", null)))));
     }
-    renderIconStart() {
-        const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
+    renderSelectedOrPlaceholderIcon() {
+        const { selectedItems, placeholderIcon, placeholderIconFlipRtl } = this;
         const selectedItem = selectedItems[0];
         const selectedIcon = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
-        const singleSelectionMode = utils.isSingleLike(selectionMode);
-        const iconAtStart = !this.open && selectedItem
-            ? !!selectedIcon && singleSelectionMode
-            : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
-        return (iconAtStart && (index.h("span", { class: "icon-start" }, index.h("calcite-icon", { class: "selected-icon", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: component.getIconScale(this.scale) }))));
+        return (this.showingInlineIcon && (index.h("span", { class: "icon-start", key: "selected-placeholder-icon" }, index.h("calcite-icon", { class: "selected-icon", flipRtl: this.open && selectedItem ? selectedItem.iconFlipRtl : placeholderIconFlipRtl, icon: !this.open && selectedItem ? selectedIcon : placeholderIcon, scale: component.getIconScale(this.scale) }))));
     }
-    renderIconEnd() {
+    renderChevronIcon() {
         const { open } = this;
-        return (index.h("span", { class: "icon-end" }, index.h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: component.getIconScale(this.scale) })));
+        return (index.h("span", { class: "icon-end", key: "chevron" }, index.h("calcite-icon", { class: utils.CSS.icon, icon: open ? "chevron-up" : "chevron-down", scale: component.getIconScale(this.scale) })));
     }
     render() {
         var _a;
-        const { selectionDisplay, guid, label: label$1, open } = this;
+        const { selectionDisplay, guid, label, open, readOnly } = this;
         const singleSelectionMode = utils.isSingleLike(this.selectionMode);
         const allSelectionDisplay = selectionDisplay === "all";
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        return (index.h(index.Host, { onClick: this.comboboxFocusHandler }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": label.getLabelText(this), "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+        return (index.h(index.Host, { key: 'd7bb6fbd99d46d6baacd027bf67d440156aa8235', onClick: this.comboboxFocusHandler }, index.h(interactive.InteractiveContainer, { key: 'f0e960f155ffed736782818874432e49aec7da43', disabled: this.disabled }, index.h("div", { key: '5b69d59411f589c99d1087ffc9d2f34a02ce4abf', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
-            }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
+            }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setReferenceEl }, index.h("div", { class: {
+            ref: this.setReferenceEl }, this.renderSelectedOrPlaceholderIcon(), index.h("div", { class: {
                 "grid-input": true,
                 [utils.CSS.selectionDisplayFit]: fitSelectionDisplay,
                 [utils.CSS.selectionDisplaySingle]: singleSelectionDisplay,
-            }, ref: this.setChipContainerEl }, this.renderIconStart(), !singleSelectionMode && !singleSelectionDisplay && this.renderChips(), !singleSelectionMode &&
+            }, key: "grid",
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: this.setChipContainerEl }, !singleSelectionMode && !singleSelectionDisplay && this.renderChips(), !singleSelectionMode &&
             !allSelectionDisplay && [
             this.renderSelectedIndicatorChip(),
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], index.h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label$1), this.renderInput()), isClearable ? (index.h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), index.h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), index.h(form.HiddenFormInputSlot, { component: this }), this.validationMessage ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], index.h("label", { key: '9b9988f68638cbf4b5379e815dd9ed88b5b83430', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (index.h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), index.h("ul", { key: 'e52aae918a2ad75c1f84e6761d4651a59397e5f7', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), index.h(form.HiddenFormInputSlot, { key: 'feb9c678d698e149bc58b0aed458dee9d6fb8115', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -1116,12 +1138,12 @@ const Combobox = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-Combobox.style = comboboxCss;
+Combobox.style = CalciteComboboxStyle0;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 /**
  * Calculate slope of the tangents
@@ -1251,6 +1273,7 @@ function area({ data, min, max, t }) {
 }
 
 const graphCss = ":host{display:block;block-size:100%}.svg{fill:currentColor;stroke:transparent;margin:0px;display:block;block-size:100%;inline-size:100%;padding:0px}.svg .graph-path--highlight{fill:var(--calcite-color-brand);opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteGraphStyle0 = graphCss;
 
 const Graph = class {
     constructor(hostRef) {
@@ -1328,12 +1351,12 @@ const Graph = class {
     }
     get el() { return index.getElement(this); }
 };
-Graph.style = graphCss;
+Graph.style = CalciteGraphStyle0;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     container: "container",
@@ -1365,7 +1388,8 @@ const CSS = {
 };
 const maxTickElementThreshold = 250;
 
-const sliderCss = "@charset \"UTF-8\";: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}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid 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          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const sliderCss = "@charset \"UTF-8\";: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}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{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          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteSliderStyle0 = sliderCss;
 
 function isRange(value) {
     return Array.isArray(value);
@@ -1375,6 +1399,54 @@ const Slider = class {
         index.registerInstance(this, hostRef);
         this.calciteSliderInput = index.createEvent(this, "calciteSliderInput", 6);
         this.calciteSliderChange = index.createEvent(this, "calciteSliderChange", 6);
+        //--------------------------------------------------------------------------
+        //
+        //  Event Listeners
+        //
+        //--------------------------------------------------------------------------
+        this.handleKeyDown = (event) => {
+            const mirror = this.shouldMirror();
+            const { activeProp, max, min, pageStep, step } = this;
+            const value = this[activeProp];
+            const { key: key$1 } = event;
+            if (key.isActivationKey(key$1)) {
+                event.preventDefault();
+                return;
+            }
+            let adjustment;
+            if (key$1 === "ArrowUp" || key$1 === "ArrowRight") {
+                const directionFactor = mirror && key$1 === "ArrowRight" ? -1 : 1;
+                adjustment = value + step * directionFactor;
+            }
+            else if (key$1 === "ArrowDown" || key$1 === "ArrowLeft") {
+                const directionFactor = mirror && key$1 === "ArrowLeft" ? -1 : 1;
+                adjustment = value - step * directionFactor;
+            }
+            else if (key$1 === "PageUp") {
+                if (pageStep) {
+                    adjustment = value + pageStep;
+                }
+            }
+            else if (key$1 === "PageDown") {
+                if (pageStep) {
+                    adjustment = value - pageStep;
+                }
+            }
+            else if (key$1 === "Home") {
+                adjustment = min;
+            }
+            else if (key$1 === "End") {
+                adjustment = max;
+            }
+            if (isNaN(adjustment)) {
+                return;
+            }
+            event.preventDefault();
+            const fixedDecimalAdjustment = Number(adjustment.toFixed(math.decimalPlaces(step)));
+            this.setValue({
+                [activeProp]: this.clamp(fixedDecimalAdjustment, activeProp),
+            });
+        };
         this.activeProp = "value";
         this.guid = `calcite-slider-${guid.guid()}`;
         this.onThumbBlur = () => {
@@ -1467,12 +1539,14 @@ const Slider = class {
             return locale.numberStringFormatter.localize(value.toString());
         };
         this.disabled = false;
+        this.fillPlacement = "start";
         this.form = undefined;
         this.groupSeparator = false;
         this.hasHistogram = false;
         this.histogram = undefined;
         this.histogramStops = undefined;
         this.labelHandles = false;
+        this.labelFormatter = undefined;
         this.labelTicks = false;
         this.max = 100;
         this.maxLabel = undefined;
@@ -1582,20 +1656,40 @@ const Slider = class {
                 minInterval,
                 mirror,
             });
-        return (index.h(index.Host, { id: id, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { "aria-label": label.getLabelText(this), class: {
+        const fillPlacement = valueIsRange ? "start" : this.fillPlacement;
+        const trackRangePlacementStyles = fillPlacement === "none"
+            ? {
+                left: `unset`,
+                right: `unset`,
+            }
+            : fillPlacement === "end"
+                ? {
+                    left: `${mirror ? minInterval : maxInterval}%`,
+                    right: `${mirror ? maxInterval : minInterval}%`,
+                }
+                : /* default */
+                    {
+                        left: `${mirror ? 100 - maxInterval : minInterval}%`,
+                        right: `${mirror ? minInterval : 100 - maxInterval}%`,
+                    };
+        return (index.h(index.Host, { key: '86ec64bfb42495e7fc927751ad7d2a667b0a625d', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { key: '842aacebaf4199a088f71b2d2ad7420845cf2629', disabled: this.disabled }, index.h("div", { key: '364511c370bbf454958accdd4c3084a1c339de22', "aria-label": label.getLabelText(this), class: {
                 [CSS.container]: true,
                 [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), index.h("div", { class: CSS.track,
+            } }, this.renderGraph(), index.h("div", { key: 'b382bc88c07796d339dd972bcea3459ce8664de9', class: CSS.track,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeTrackRef }, index.h("div", { class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: {
-                left: `${mirror ? 100 - maxInterval : minInterval}%`,
-                right: `${mirror ? minInterval : 100 - maxInterval}%`,
-            } }), index.h("div", { class: CSS.ticks }, this.tickValues.map((tick) => {
+            ref: this.storeTrackRef }, index.h("div", { key: 'ba6aeb6fca50edd0c2d13077a49ac00f0aa93cf3', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), index.h("div", { key: '013d292f6046b456443c9537facac8a6a2b1c4e6', class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
-            let activeTicks = tick >= min && tick <= value;
-            if (useMinValue) {
-                activeTicks = tick >= this.minValue && tick <= this.maxValue;
+            let activeTicks = false;
+            if (fillPlacement === "start" || fillPlacement === "end") {
+                if (useMinValue) {
+                    activeTicks = tick >= this.minValue && tick <= this.maxValue;
+                }
+                else {
+                    const rangeStart = fillPlacement === "start" ? min : value;
+                    const rangeEnd = fillPlacement === "start" ? value : this.max;
+                    activeTicks = tick >= rangeStart && tick <= rangeEnd;
+                }
             }
             return (index.h("span", { class: {
                     [CSS.tick]: true,
@@ -1604,7 +1698,7 @@ const Slider = class {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), index.h("div", { class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { component: this }))))));
+        }))), index.h("div", { key: '31e1150688ac0371ed3b32a839c855b79ae9ed47', class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { key: '3de3bb38e26cd71ee3a49541d61534b004ff137b', component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");
@@ -1619,7 +1713,11 @@ const Slider = class {
         const valueProp = isMinThumb ? "minValue" : valueIsRange ? "maxValue" : "value";
         const ariaLabel = isMinThumb ? this.minLabel : valueIsRange ? this.maxLabel : this.minLabel;
         const ariaValuenow = isMinThumb ? this.minValue : value;
-        const displayedValue = isMinThumb ? this.formatValue(this.minValue) : this.formatValue(value);
+        const displayedValue = valueProp === "minValue"
+            ? this.internalLabelFormatter(this.minValue, "min")
+            : valueProp === "maxValue"
+                ? this.internalLabelFormatter(this.maxValue, "max")
+                : this.internalLabelFormatter(value, "value");
         const thumbStyle = isMinThumb
             ? { left: `${mirror ? 100 - minInterval : minInterval}%` }
             : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };
@@ -1665,55 +1763,7 @@ const Slider = class {
                 [CSS.tickLabel]: true,
                 [CSS.tickMin]: isMinTickLabel,
                 [CSS.tickMax]: isMaxTickLabel,
-            } }, this.formatValue(tick))) : null;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    keyDownHandler(event) {
-        const mirror = this.shouldMirror();
-        const { activeProp, max, min, pageStep, step } = this;
-        const value = this[activeProp];
-        const { key: key$1 } = event;
-        if (key.isActivationKey(key$1)) {
-            event.preventDefault();
-            return;
-        }
-        let adjustment;
-        if (key$1 === "ArrowUp" || key$1 === "ArrowRight") {
-            const directionFactor = mirror && key$1 === "ArrowRight" ? -1 : 1;
-            adjustment = value + step * directionFactor;
-        }
-        else if (key$1 === "ArrowDown" || key$1 === "ArrowLeft") {
-            const directionFactor = mirror && key$1 === "ArrowLeft" ? -1 : 1;
-            adjustment = value - step * directionFactor;
-        }
-        else if (key$1 === "PageUp") {
-            if (pageStep) {
-                adjustment = value + pageStep;
-            }
-        }
-        else if (key$1 === "PageDown") {
-            if (pageStep) {
-                adjustment = value - pageStep;
-            }
-        }
-        else if (key$1 === "Home") {
-            adjustment = min;
-        }
-        else if (key$1 === "End") {
-            adjustment = max;
-        }
-        if (isNaN(adjustment)) {
-            return;
-        }
-        event.preventDefault();
-        const fixedDecimalAdjustment = Number(adjustment.toFixed(math.decimalPlaces(step)));
-        this.setValue({
-            [activeProp]: this.clamp(fixedDecimalAdjustment, activeProp),
-        });
+            } }, this.internalLabelFormatter(tick, "tick"))) : null;
     }
     pointerDownHandler(event) {
         if (this.disabled || !dom.isPrimaryPointerButton(event)) {
@@ -1729,7 +1779,7 @@ const Slider = class {
             }
             else {
                 const closerToMax = Math.abs(this.maxValue - position) < Math.abs(this.minValue - position);
-                prop = closerToMax || position > this.maxValue ? "maxValue" : "minValue";
+                prop = closerToMax || position >= this.maxValue ? "maxValue" : "minValue";
             }
         }
         this.lastDragPropValue = this[prop];
@@ -1836,17 +1886,14 @@ const Slider = class {
         window.addEventListener("pointercancel", this.dragEnd);
     }
     focusActiveHandle(valueX) {
-        switch (this.dragProp) {
-            case "minValue":
-                this.minHandle.focus();
-                break;
-            case "maxValue":
-            case "value":
-                this.maxHandle.focus();
-                break;
-            case "minMaxValue":
-                this.getClosestHandle(valueX).focus();
-                break;
+        if (this.dragProp === "minValue") {
+            this.minHandle.focus();
+        }
+        else if (this.dragProp === "maxValue" || this.dragProp === "value") {
+            this.maxHandle.focus();
+        }
+        else if (this.dragProp === "minMaxValue") {
+            this.getClosestHandle(valueX).focus();
         }
     }
     emitInput() {
@@ -1914,25 +1961,23 @@ const Slider = class {
         const percent = (x - left) / width;
         const mirror = this.shouldMirror();
         const clampedValue = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
-        let value = Number(clampedValue.toFixed(math.decimalPlaces(this.step)));
-        if (this.snap && this.step) {
-            value = this.getClosestStep(value);
-        }
-        return value;
+        const value = Number(clampedValue.toFixed(math.decimalPlaces(this.step)));
+        return !(this.snap && this.step) ? value : this.getClosestStep(value);
     }
     /**
      * Get closest allowed value along stepped values
      *
-     * @param num
+     * @param value
      * @internal
      */
-    getClosestStep(num) {
-        num = Number(this.clamp(num).toFixed(math.decimalPlaces(this.step)));
-        if (this.step) {
-            const step = Math.round(num / this.step) * this.step;
-            num = Number(this.clamp(step).toFixed(math.decimalPlaces(this.step)));
+    getClosestStep(value) {
+        const { max, min, step } = this;
+        let snappedValue = Math.floor((value - min) / step) * step + min;
+        snappedValue = Math.min(Math.max(snappedValue, min), max);
+        if (snappedValue > max) {
+            snappedValue -= step;
         }
-        return num;
+        return snappedValue;
     }
     getClosestHandle(valueX) {
         return this.getDistanceX(this.maxHandle, valueX) > this.getDistanceX(this.minHandle, valueX)
@@ -2135,6 +2180,17 @@ const Slider = class {
         const handleBounds = handle.getBoundingClientRect();
         return dom.intersects(maxLabelBounds, handleBounds);
     }
+    internalLabelFormatter(value, type) {
+        const customFormatter = this.labelFormatter;
+        if (!customFormatter) {
+            return this.formatValue(value);
+        }
+        const formattedValue = customFormatter(value, type, this.formatValue);
+        if (formattedValue == null) {
+            return this.formatValue(value);
+        }
+        return formattedValue;
+    }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -2145,7 +2201,7 @@ const Slider = class {
         "maxValue": ["minMaxValueHandler"]
     }; }
 };
-Slider.style = sliderCss;
+Slider.style = CalciteSliderStyle0;
 
 exports.calcite_combobox = Combobox;
 exports.calcite_graph = Graph;