@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.4

package/dist/components/calcite-input-time-picker/customElement.js

@@ -15,10 +15,11 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTime } from "../../chunks/useTime.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}calcite-time-picker{--calcite-time-picker-color: var(--calcite-input-time-picker-digit-text-color);--calcite-time-picker-icon-color: var(--calcite-input-time-picker-digit-icon-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color);--calcite-time-picker-button-background-color-hover: var(--calcite-input-time-picker-action-background-color-hover);--calcite-time-picker-button-background-color-press: var(--calcite-input-time-picker-action-background-color-press);--calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-digit-border-color-hover);--calcite-time-picker-input-border-color-press: var(--calcite-input-time-picker-digit-border-color-press)}.container{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) );align-items:center;background-color:var(--calcite-input-time-picker-input-background-color, var(--calcite-color-foreground-1));border:1px solid var(--calcite-input-time-picker-input-border-color, var(--calcite-color-border-input));border-radius:var(--calcite-input-time-picker-input-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-input-time-picker-input-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:flex;color:var(--calcite-input-time-picker-input-text-color, var(--calcite-color-text-1));flex-wrap:nowrap;font-weight:var(--calcite-font-weight-normal);inline-size:100%;padding-block:var(--calcite-spacing-base);-webkit-user-select:none;user-select:none}.container:focus-within{border-color:var(--calcite-color-brand);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.read-only{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.clock-icon{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) )}.hour-suffix,.minute-suffix,.second-suffix{white-space:pre}.input-container{display:flex;flex-grow:1}.input{align-items:center;display:flex;block-size:100%;justify-content:center;min-inline-size:max-content}.input.empty{inline-size:var(--calcite-spacing-xl)}.input:focus,.input:hover:focus{background-color:Highlight;color:HighlightText;outline:2px solid transparent;outline-offset:2px}.toggle-icon{--calcite-icon-color: var(--calcite-input-time-picker-icon-color, var(--calcite-color-text-3));align-items:center;block-size:24px;cursor:pointer;display:flex;inline-size:24px;justify-content:center}.toggle-icon:hover{--calcite-icon-color: var(--calcite-input-time-picker-icon-color-hover, var(--calcite-color-text-1))}:host([scale=s]) .container{block-size:1.5rem;font-size:var(--calcite-font-size-sm);gap:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .input-container{line-height:1rem}:host([scale=m]) .container{block-size:2rem;font-size:var(--calcite-font-size);gap:var(--calcite-spacing-md);padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .input-container{line-height:1.5rem}:host([scale=l]) .container{block-size:2.75rem;font-size:var(--calcite-font-size-md);gap:var(--calcite-spacing-lg);padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .input-container{line-height:2.25rem}:host([status=invalid]) .container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) .container:focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-time-picker{--calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color, transparent);--calcite-time-picker-corner-radius: var( --calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round) )}calcite-popover{--calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round))}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.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:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}calcite-time-picker{--calcite-time-picker-color: var(--calcite-input-time-picker-digit-text-color);--calcite-time-picker-icon-color: var(--calcite-input-time-picker-digit-icon-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color);--calcite-time-picker-button-background-color-hover: var(--calcite-input-time-picker-action-background-color-hover);--calcite-time-picker-button-background-color-press: var(--calcite-input-time-picker-action-background-color-press);--calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-digit-border-color-hover);--calcite-time-picker-input-border-color-press: var(--calcite-input-time-picker-digit-border-color-press)}.container{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) );align-items:center;background-color:var(--calcite-input-time-picker-input-background-color, var(--calcite-color-foreground-1));border:1px solid var(--calcite-input-time-picker-input-border-color, var(--calcite-color-border-input));border-radius:var(--calcite-input-time-picker-input-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-input-time-picker-input-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:flex;color:var(--calcite-input-time-picker-input-text-color, var(--calcite-color-text-1));flex-wrap:nowrap;font-weight:var(--calcite-font-weight-normal);inline-size:100%;padding-block:var(--calcite-spacing-base);-webkit-user-select:none;user-select:none}.container:focus-within{border-color:var(--calcite-color-brand);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.read-only{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.content-container{display:grid;flex-grow:1}.content-container .input-container,.content-container .placeholder{grid-column:1;grid-row:1}.content-container .input-container--hidden{opacity:0}.clock-icon{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) )}.hour-suffix,.minute-suffix,.second-suffix{white-space:pre}.placeholder{color:var(--calcite-color-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-container{display:flex;flex-grow:1}.input{align-items:center;display:flex;block-size:100%;justify-content:center;min-inline-size:max-content}.input.empty{inline-size:var(--calcite-spacing-xl)}.input:focus,.input:hover:focus{background-color:Highlight;color:HighlightText;outline:2px solid transparent;outline-offset:2px}.toggle-icon{--calcite-icon-color: var(--calcite-input-time-picker-icon-color, var(--calcite-color-text-3));align-items:center;block-size:24px;cursor:pointer;display:flex;inline-size:24px;justify-content:center}.toggle-icon:hover{--calcite-icon-color: var(--calcite-input-time-picker-icon-color-hover, var(--calcite-color-text-1))}:host([scale=s]) .container{block-size:1.5rem;font-size:var(--calcite-font-size-sm);gap:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .input-container,:host([scale=s]) .placeholder{line-height:1rem}:host([scale=m]) .container{block-size:2rem;font-size:var(--calcite-font-size);gap:var(--calcite-spacing-md);padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .input-container,:host([scale=m]) .placeholder{line-height:1.5rem}:host([scale=l]) .container{block-size:2.75rem;font-size:var(--calcite-font-size-md);gap:var(--calcite-spacing-lg);padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .input-container,:host([scale=l]) .placeholder{line-height:2.25rem}:host([status=invalid]) .container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) .container:focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-time-picker{--calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color, transparent);--calcite-time-picker-corner-radius: var( --calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round) )}calcite-popover{--calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round))}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.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:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   clockIcon: "clock-icon",
   container: "container",
+  contentContainer: "content-container",
   decimalSeparator: "decimal-separator",
   empty: "empty",
   fractionalSecond: "fractional-second",
@@ -26,9 +27,11 @@ const CSS = {
   hourSuffix: "hour-suffix",
   input: "input",
   inputContainer: "input-container",
+  inputContainerHidden: "input-container--hidden",
   meridiem: "meridiem",
   minute: "minute",
   minuteSuffix: "minute-suffix",
+  placeholder: "placeholder",
   readOnly: "read-only",
   second: "second",
   secondSuffix: "second-suffix",
@@ -61,6 +64,7 @@ class InputTimePicker extends LitElement {
     this.time = useTime(this);
     this.interactiveContainer = useInteractive(this);
     this.timePickerRef = createRef();
+    this.hasFocus = false;
     this.disabled = false;
     this.focusTrapDisabled = false;
     this.hourFormat = "user";
@@ -78,11 +82,13 @@ class InputTimePicker extends LitElement {
     this.calciteInputTimePickerClose = createEvent({ cancelable: false });
     this.calciteInputTimePickerOpen = createEvent({ cancelable: false });
     this.listen("blur", this.blurHandler);
+    this.listen("focus", this.focusHandler);
+    this.listen("focusout", this.focusOutHandler);
     this.listen("keydown", this.keyDownHandler);
     this.listen("calciteTimeChange", this.timeChangeHandler);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hourFormat: [3, {}, { reflect: true }], label: 1, labelText: 1, max: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], name: 1, numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: 1, placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { hasFocus: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hourFormat: [3, {}, { reflect: true }], label: 1, labelText: 1, max: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], name: 1, numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: 1, placeholder: 1, placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -93,6 +99,9 @@ class InputTimePicker extends LitElement {
   static {
     this.styles = styles;
   }
+  get showPlaceholder() {
+    return (this.placeholder && !this.hasFocus && !this.time.hasValue) ?? false;
+  }
   async reposition(delayed = false) {
     this.popoverEl?.reposition(delayed);
   }
@@ -136,12 +145,18 @@ class InputTimePicker extends LitElement {
   blurHandler() {
     this.changeEventHandler();
   }
+  focusHandler() {
+    this.hasFocus = true;
+  }
+  focusOutHandler() {
+    this.hasFocus = false;
+  }
   changeEventHandler() {
     const { previousEmittedValue, value } = this;
     if (previousEmittedValue !== value) {
       const changeEvent = this.calciteInputTimePickerChange.emit();
       if (changeEvent.defaultPrevented) {
-        this.time.setValue(this.previousEmittedValue);
+        this.time.setValue(this.previousEmittedValue ?? null);
       } else {
         this.previousEmittedValue = value;
       }
@@ -229,6 +244,12 @@ class InputTimePicker extends LitElement {
       }
     }
   }
+  mouseDownHandler(event) {
+    if (this.showPlaceholder) {
+      event.preventDefault();
+      this.setFocus();
+    }
+  }
   onLabelClick() {
     this.setFocus();
   }
@@ -258,7 +279,7 @@ class InputTimePicker extends LitElement {
     this.open = false;
   }
   requestTimePickerUpdate() {
-    this.timePickerRef.value.manager?.component.requestUpdate();
+    this.timePickerRef.value?.manager?.component.requestUpdate();
   }
   setCalcitePopoverEl(el) {
     this.popoverEl = el;
@@ -305,23 +326,26 @@ class InputTimePicker extends LitElement {
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-controls=${IDS.inputContainer} aria-labelledby=${IDS.inputContainer} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.readOnly]: readOnly
-    })} role=combobox ${ref(this.containerRef)}><calcite-icon class=${safeClassMap(CSS.clockIcon)} .icon=${ICONS.clock} .scale=${scale === "l" ? "m" : "s"}></calcite-icon><div aria-label=${getLabelText(this) ?? nothing} .ariaRequired=${this.required} class=${safeClassMap(CSS.inputContainer)} dir=ltr id=${IDS.inputContainer} role=group>${showMeridiem && meridiemStart && this.renderMeridiem() || ""}<span aria-label=${this.messages.hour ?? nothing} aria-valuemax=23 aria-valuemin=1 aria-valuenow=${(hourIsNumber && parseInt(hour) || "0") ?? nothing} aria-valuetext=${hour ?? nothing} class=${safeClassMap({
+    })} role=combobox ${ref(this.containerRef)}><calcite-icon class=${safeClassMap(CSS.clockIcon)} .icon=${ICONS.clock} .scale=${scale === "l" ? "m" : "s"}></calcite-icon><div class=${safeClassMap(CSS.contentContainer)}>${this.showPlaceholder && html`<div class=${safeClassMap(CSS.placeholder)}>${this.placeholder}</div>` || ""}<div aria-label=${getLabelText(this) ?? nothing} .ariaRequired=${this.required} class=${safeClassMap({
+      [CSS.inputContainer]: true,
+      [CSS.inputContainerHidden]: this.showPlaceholder
+    })} dir=ltr id=${IDS.inputContainer} role=group>${showMeridiem && meridiemStart && this.renderMeridiem() || ""}<span aria-label=${this.messages.hour ?? nothing} aria-valuemax=23 aria-valuemin=1 aria-valuenow=${(hourIsNumber && parseInt(hour) || "0") ?? nothing} aria-valuetext=${hour ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedHour,
       [CSS.hour]: true,
       [CSS.input]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleHourKeyDownEvent : void 0} role=spinbutton tabindex=0 ${ref(this.hourRef)}>${localizedHour || emptyPlaceholder}</span><span class=${safeClassMap(CSS.hourSuffix)}>${localizedHourSuffix}</span><span aria-label=${this.messages.minute ?? nothing} aria-valuemax=12 aria-valuemin=1 aria-valuenow=${(minuteIsNumber && parseInt(minute) || "0") ?? nothing} aria-valuetext=${minute ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleHourKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.hourRef)}>${localizedHour || emptyPlaceholder}</span><span class=${safeClassMap(CSS.hourSuffix)}>${localizedHourSuffix}</span><span aria-label=${this.messages.minute ?? nothing} aria-valuemax=12 aria-valuemin=1 aria-valuenow=${(minuteIsNumber && parseInt(minute) || "0") ?? nothing} aria-valuetext=${minute ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedMinute,
       [CSS.input]: true,
       [CSS.minute]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMinuteKeyDownEvent : void 0} role=spinbutton tabindex=0 ${ref(this.minuteRef)}>${localizedMinute || emptyPlaceholder}</span><span class=${safeClassMap(CSS.minuteSuffix)}>${localizedMinuteSuffix}</span>${showSecond && html`<span aria-label=${this.messages.second ?? nothing} aria-valuemax=59 aria-valuemin=0 aria-valuenow=${(secondIsNumber && parseInt(second) || "0") ?? nothing} aria-valuetext=${second ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMinuteKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.minuteRef)}>${localizedMinute || emptyPlaceholder}</span><span class=${safeClassMap(CSS.minuteSuffix)}>${localizedMinuteSuffix}</span>${showSecond && html`<span aria-label=${this.messages.second ?? nothing} aria-valuemax=59 aria-valuemin=0 aria-valuenow=${(secondIsNumber && parseInt(second) || "0") ?? nothing} aria-valuetext=${second ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedSecond,
       [CSS.input]: true,
       [CSS.second]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleSecondKeyDownEvent : void 0} role=spinbutton tabindex=0 ${ref(this.secondRef)}>${localizedSecond || emptyPlaceholder}</span>` || ""}${showFractionalSecond && html`<span class=${safeClassMap(CSS.decimalSeparator)}>${localizedDecimalSeparator}</span>` || ""}${showFractionalSecond && html`<span aria-label=${this.messages.fractionalSecond ?? nothing} aria-valuemax=999 aria-valuemin=1 aria-valuenow=${(fractionalSecondIsNumber && parseInt(fractionalSecond) || "0") ?? nothing} aria-valuetext=${localizedFractionalSecond ?? nothing} class=${safeClassMap({
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.secondRef)}>${localizedSecond || emptyPlaceholder}</span>` || ""}${showFractionalSecond && html`<span class=${safeClassMap(CSS.decimalSeparator)}>${localizedDecimalSeparator}</span>` || ""}${showFractionalSecond && html`<span aria-label=${this.messages.fractionalSecond ?? nothing} aria-valuemax=999 aria-valuemin=1 aria-valuenow=${(fractionalSecondIsNumber && parseInt(fractionalSecond) || "0") ?? nothing} aria-valuetext=${localizedFractionalSecond ?? nothing} class=${safeClassMap({
       [CSS.empty]: !localizedFractionalSecond,
       [CSS.fractionalSecond]: true,
       [CSS.input]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleFractionalSecondKeyDownEvent : void 0} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(decimalPlaces(this.step), "-")}</span>` || ""}${localizedSecondSuffix && html`<span class=${safeClassMap(CSS.secondSuffix)}>${localizedSecondSuffix}</span>` || ""}${showMeridiem && !meridiemStart && this.renderMeridiem() || ""}</div>${!this.readOnly && this.renderToggleIcon(this.open) || ""}</div><calcite-popover auto-close .focusTrapDisabled=${this.focusTrapDisabled} .focusTrapOptions=${{ initialFocus: false }} .label=${messages.chooseTime} lang=${this.messages._lang ?? nothing} offset-distance=0 @calcitePopoverBeforeClose=${this.popoverBeforeCloseHandler} @calcitePopoverBeforeOpen=${this.popoverBeforeOpenHandler} @calcitePopoverClose=${this.popoverCloseHandler} @calcitePopoverOpen=${this.popoverOpenHandler} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} pointer-disabled .referenceElement=${this.containerRef.value} trigger-disabled ${ref(this.setCalcitePopoverEl)}><calcite-time-picker .hourFormat=${this.time.hourFormat} lang=${this.messages._lang ?? nothing} .messageOverrides=${this.messageOverrides} .numberingSystem=${this.numberingSystem} @calciteTimePickerChange=${this.timePickerChangeHandler} .scale=${this.scale} .step=${this.step} tabindex=${(this.open ? void 0 : -1) ?? nothing} .time=${this.time} .value=${this.value} ${ref(this.timePickerRef)}></calcite-time-picker></calcite-popover>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleFractionalSecondKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(decimalPlaces(this.step), "-")}</span>` || ""}${localizedSecondSuffix && html`<span class=${safeClassMap(CSS.secondSuffix)}>${localizedSecondSuffix}</span>` || ""}${showMeridiem && !meridiemStart && this.renderMeridiem() || ""}</div></div>${!this.readOnly && this.renderToggleIcon(this.open) || ""}</div><calcite-popover auto-close .focusTrapDisabled=${this.focusTrapDisabled} .focusTrapOptions=${{ initialFocus: false }} .label=${messages.chooseTime} lang=${this.messages._lang ?? nothing} offset-distance=0 @calcitePopoverBeforeClose=${this.popoverBeforeCloseHandler} @calcitePopoverBeforeOpen=${this.popoverBeforeOpenHandler} @calcitePopoverClose=${this.popoverCloseHandler} @calcitePopoverOpen=${this.popoverOpenHandler} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} pointer-disabled .referenceElement=${this.containerRef.value} trigger-disabled ${ref(this.setCalcitePopoverEl)}><calcite-time-picker .hourFormat=${this.time.hourFormat ?? void 0} lang=${this.messages._lang ?? nothing} .messageOverrides=${this.messageOverrides} .numberingSystem=${this.numberingSystem} @calciteTimePickerChange=${this.timePickerChangeHandler} .scale=${this.scale} .step=${this.step} tabindex=${(this.open ? void 0 : -1) ?? nothing} .time=${this.time} .value=${this.value} ${ref(this.timePickerRef)}></calcite-time-picker></calcite-popover>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderMeridiem() {
     const { handleMeridiemKeyDownEvent, localizedMeridiem, meridiem } = this.time;
@@ -330,7 +354,7 @@ class InputTimePicker extends LitElement {
       [CSS.empty]: !localizedMeridiem,
       [CSS.input]: true,
       [CSS.meridiem]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMeridiemKeyDownEvent : void 0} role=spinbutton tabindex=0 ${ref(this.meridiemRef)}>${localizedMeridiem || "--"}</span>`;
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleMeridiemKeyDownEvent : void 0} @mousedown=${this.mouseDownHandler} role=spinbutton tabindex=0 ${ref(this.meridiemRef)}>${localizedMeridiem || "--"}</span>`;
   }
   renderToggleIcon(open) {
     return html`<span class=${safeClassMap(CSS.toggleIcon)} @click=${this.toggleIconClickHandler}><calcite-icon .icon=${open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></span>`;

package/dist/components/calcite-input-time-zone/customElement.d.ts

@@ -21,14 +21,10 @@ export abstract class InputTimeZone extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Specifies the component's maximum number of options to display before displaying a scrollbar.
    *
@@ -655,7 +651,7 @@ export abstract class InputTimeZone extends LitElement {
    */
   accessor mode: TimeZoneMode;
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `mode` is `"offset"`, specifies how the offset will be displayed, where
    *
@@ -695,7 +691,7 @@ export abstract class InputTimeZone extends LitElement {
    *
    * @see [MDN - Date.prototype.toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
    */
-  accessor referenceDate: Date | string;
+  accessor referenceDate: Date | string | undefined;
   /**
    * Specifies the size of the component.
    *
@@ -709,18 +705,16 @@ export abstract class InputTimeZone extends LitElement {
    */
   accessor status: Status;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *
@@ -734,7 +728,7 @@ export abstract class InputTimeZone extends LitElement {
    *
    * @see [Identifying time zones and zone offsets](https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC).
    */
-  accessor value: string;
+  accessor value: string | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-input-time-zone/customElement.js

@@ -167,7 +167,7 @@ function getMessageOrKeyFallback(messages, key) {
   return messages[key] || key;
 }
 function getCity(timeZone) {
-  return timeZone.split("/").pop();
+  return timeZone.split("/").pop() ?? "";
 }
 function toUserFriendlyName(timeZoneName) {
   return timeZoneName.replace(/_/g, " ");
@@ -190,7 +190,7 @@ function flattenTimeZoneItems(timeZoneItems) {
   return hasGroups(timeZoneItems) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems;
 }
 function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
-  return valueToMatch == null ? null : flattenTimeZoneItems(timeZoneItems).find(
+  return valueToMatch === void 0 || timeZoneItems === void 0 ? void 0 : flattenTimeZoneItems(timeZoneItems).find(
     (item) => (
       // intentional == to match string to number
       item[prop] == valueToMatch
@@ -304,7 +304,7 @@ class InputTimeZone extends LitElement {
     if (!normalized) {
       if (this.clearable) {
         this._value = normalized;
-        this.selectedTimeZoneItem = null;
+        this.selectedTimeZoneItem = void 0;
         return;
       }
       this._value = oldValue;
@@ -326,7 +326,9 @@ class InputTimeZone extends LitElement {
     if (this.mode !== "region" || !this.selectedTimeZoneItem) {
       return;
     }
-    this.comboboxRef.value.selectedItems[0].heading = this.getItemLabel(this.selectedTimeZoneItem, open);
+    if (this.comboboxRef.value) {
+      this.comboboxRef.value.selectedItems[0].heading = this.getItemLabel(this.selectedTimeZoneItem, open);
+    }
   }
   onComboboxBeforeClose(event) {
     event.stopPropagation();
@@ -346,13 +348,13 @@ class InputTimeZone extends LitElement {
     if (!selectedItem) {
       this._value = "";
       this.requestUpdate("value", previousValue);
-      this.selectedTimeZoneItem = null;
+      this.selectedTimeZoneItem = void 0;
       this.calciteInputTimeZoneChange.emit();
       return;
     }
-    const selected = this.findTimeZoneItemByLabel(selectedItem.getAttribute("data-label"));
-    const selectedValue = `${selected.value}`;
-    if (this.value === selectedValue && selected.label === this.selectedTimeZoneItem.label) {
+    const selected = this.findTimeZoneItemByLabel(selectedItem.getAttribute("data-label") ?? void 0);
+    const selectedValue = selected?.value === void 0 ? void 0 : `${selected?.value}`;
+    if (this.value === selectedValue && selected?.label === this.selectedTimeZoneItem?.label) {
       return;
     }
     this._value = selectedValue;
@@ -382,7 +384,7 @@ class InputTimeZone extends LitElement {
   }
   updateTimeZoneSelection() {
     if (this.value === "" && this.clearable) {
-      this.selectedTimeZoneItem = null;
+      this.selectedTimeZoneItem = void 0;
       return;
     }
     const fallbackValue = this.mode === "offset" ? getUserTimeZoneOffset() : getUserTimeZoneName();

package/dist/components/calcite-list-item/customElement.d.ts

@@ -97,9 +97,7 @@ export abstract class ListItem extends LitElement {
    */
   accessor sortHandleOpen: boolean;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

package/dist/components/calcite-meter/customElement.d.ts

@@ -36,9 +36,7 @@ export abstract class Meter extends LitElement {
    */
   accessor fillType: MeterFillType;
   /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
+   * Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists.
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */

package/dist/components/calcite-panel/customElement.d.ts

@@ -48,13 +48,13 @@ export abstract class Panel extends LitElement {
   /** Passes a function to run before the component closes. */
   accessor beforeClose: (() => Promise<void>) | undefined;
   /**
-   * When `true`, displays a close button in the component.
+   * When `true`, displays a close button in the trailing side of the component's header.
    *
    * @default false
    */
   accessor closable: boolean;
   /**
-   * When `true`, the component will be hidden.
+   * When `true`, hides the component.
    *
    * @default false
    */
@@ -103,7 +103,7 @@ export abstract class Panel extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
@@ -141,9 +141,7 @@ export abstract class Panel extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

package/dist/components/calcite-popover/customElement.d.ts

@@ -32,7 +32,7 @@ export abstract class Popover extends LitElement {
    * @default false
    */
   accessor flipDisabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, prevents focus trapping.
@@ -117,9 +117,7 @@ export abstract class Popover extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

package/dist/components/calcite-radio-button/customElement.d.ts

@@ -21,11 +21,7 @@ export abstract class RadioButton extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;

package/dist/components/calcite-rating/customElement.d.ts

@@ -24,11 +24,7 @@ export abstract class Rating extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -22,11 +22,7 @@ export abstract class SegmentedControl extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string;
   /** Specifies the component's label text. */
   accessor labelText: string;

package/dist/components/calcite-select/customElement.d.ts

@@ -23,11 +23,7 @@ export abstract class Select extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string;
   /**
    * Specifies an accessible label for the component.

package/dist/components/calcite-sheet/customElement.d.ts

@@ -97,9 +97,7 @@ export abstract class Sheet extends LitElement {
    */
   accessor resizable: boolean;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

package/dist/components/calcite-slider/customElement.d.ts

@@ -33,12 +33,8 @@ export abstract class Slider extends LitElement {
    * @default "start"
    */
   accessor fillPlacement: "start" | "none" | "end";
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -56,9 +52,9 @@ export abstract class Slider extends LitElement {
    *
    * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/graph/interfaces.ts#L5).
    */
-  accessor histogram: DataSeries;
+  accessor histogram: DataSeries | undefined;
   /** Specifies a list of single color stops for a histogram, sorted by offset in ascending order. */
-  accessor histogramStops: ColorStop[];
+  accessor histogramStops: ColorStop[] | undefined;
   /** When specified, allows users to customize handle labels. */
   accessor labelFormatter: (value: number, type: "value" | "min" | "max" | "tick", defaultFormatter: (value: number) => string) => string | undefined;
   /**
@@ -68,7 +64,7 @@ export abstract class Slider extends LitElement {
    */
   accessor labelHandles: boolean;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * When `true` and `ticks` is specified, displays label tick marks with their numeric value.
    *
@@ -82,7 +78,7 @@ export abstract class Slider extends LitElement {
    */
   accessor max: number;
   /** When `minValue` and `maxValue` are specified for multiple values, specifies the accessible name for the `maxValue` handle, such as `"Temperature, upper bound"`. */
-  accessor maxLabel: string;
+  accessor maxLabel: string | undefined;
   /** For multiple values, specifies the component's upper value. */
   accessor maxValue: number;
   /** Overrides individual strings used by the component. */
@@ -94,7 +90,7 @@ export abstract class Slider extends LitElement {
    */
   accessor min: number;
   /** Specifies the accessible name associated with the `value` handle (for single values) or `minValue` handle (for multiple values). For instance, `"Temperature, lower bound"`. */
-  accessor minLabel: string;
+  accessor minLabel: string | undefined;
   /** For multiple values, the component's lower value. */
   accessor minValue: number;
   /**
@@ -110,11 +106,11 @@ export abstract class Slider extends LitElement {
    *
    * Required to pass the component's `value` on form submission
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /** Specifies the interval to move with the `Page up` or `Page down` keys. */
-  accessor pageStep: number;
+  accessor pageStep: number | undefined;
   /**
    * When `true`, sets a finer point for handles.
    *
@@ -153,11 +149,11 @@ export abstract class Slider extends LitElement {
    */
   accessor step: number;
   /** Specifies the interval between tick marks on the number line. */
-  accessor ticks: number;
+  accessor ticks: number | undefined;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *

package/dist/components/calcite-slider/customElement.js

@@ -65,14 +65,14 @@ class Slider extends LitElement {
       }
       this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
-      if (this.lastDragPropValue != this[this.dragProp]) {
+      if (this.dragProp && this.lastDragPropValue != this[this.dragProp]) {
         this.emitChange();
       }
-      this.dragProp = null;
-      this.lastDragPropValue = null;
-      this.minValueDragRange = null;
-      this.maxValueDragRange = null;
-      this.minMaxValueRange = null;
+      this.dragProp = void 0;
+      this.lastDragPropValue = void 0;
+      this.minValueDragRange = void 0;
+      this.maxValueDragRange = void 0;
+      this.minMaxValueRange = void 0;
     };
     this.dragUpdate = (event) => {
       if (this.disabled || !this.trackRef.value) {
@@ -133,9 +133,6 @@ class Slider extends LitElement {
     this.interactiveContainer = useInteractive(this);
     this._value = defaultValue;
     this.activeProp = "value";
-    this.maxValueDragRange = null;
-    this.minMaxValueRange = null;
-    this.minValueDragRange = null;
     this.tickValues = [];
     this.disabled = false;
     this.fillPlacement = "start";
@@ -245,7 +242,7 @@ class Slider extends LitElement {
       event.preventDefault();
       return;
     }
-    let adjustment;
+    let adjustment = NaN;
     if (key === "ArrowUp" || key === "ArrowRight") {
       const directionFactor = mirror && key === "ArrowRight" ? -1 : 1;
       adjustment = value + step * directionFactor;
@@ -362,7 +359,7 @@ class Slider extends LitElement {
     return ticks;
   }
   onThumbBlur() {
-    this.activeProp = null;
+    this.activeProp = void 0;
   }
   onThumbFocus(event) {
     const thumb = event.currentTarget;
@@ -408,7 +405,7 @@ class Slider extends LitElement {
     window.removeEventListener("pointercancel", this.dragEnd);
   }
   setValue(values) {
-    let valueChanged;
+    let valueChanged = false;
     Object.keys(values).forEach((propName) => {
       const newValue = values[propName];
       if (!valueChanged) {
@@ -483,16 +480,17 @@ class Slider extends LitElement {
     return (num - this.min) / range;
   }
   adjustHostObscuredHandleLabel(name) {
-    const label = this.el.shadowRoot.querySelector(`.handle__label--${name}`);
-    const labelStatic = this.el.shadowRoot.querySelector(`.handle__label--${name}.static`);
-    const labelTransformed = this.el.shadowRoot.querySelector(`.handle__label--${name}.transformed`);
+    const shadowRoot = this.el.shadowRoot;
+    const label = shadowRoot.querySelector(`.handle__label--${name}`);
+    const labelStatic = shadowRoot.querySelector(`.handle__label--${name}.static`);
+    const labelTransformed = shadowRoot.querySelector(`.handle__label--${name}.transformed`);
     const labelStaticBounds = labelStatic.getBoundingClientRect();
     const labelStaticOffset = this.getHostOffset(labelStaticBounds.left, labelStaticBounds.right);
     label.style.transform = `translateX(${labelStaticOffset}px)`;
     labelTransformed.style.transform = `translateX(${labelStaticOffset}px)`;
   }
   hyphenateCollidingRangeHandleLabels() {
-    const { shadowRoot } = this.el;
+    const shadowRoot = this.el.shadowRoot;
     const mirror = this.shouldMirror();
     const leftModifier = mirror ? "value" : "minValue";
     const rightModifier = mirror ? "minValue" : "value";
@@ -566,10 +564,11 @@ class Slider extends LitElement {
     if (this.hasHistogram && !this.precise && !this.labelHandles) {
       return;
     }
-    const minHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
-    const maxHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbValue}`);
-    const minTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMin}`);
-    const maxTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMax}`);
+    const shadowRoot = this.el.shadowRoot;
+    const minHandle = shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
+    const maxHandle = shadowRoot.querySelector(`.${CSS.thumbValue}`);
+    const minTickLabel = shadowRoot.querySelector(`.${CSS.tickMin}`);
+    const maxTickLabel = shadowRoot.querySelector(`.${CSS.tickMax}`);
     if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
       minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
       maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";