@crowdstrike/glide-core 0.29.2 → 0.30.1

package/dist/slider.js

@@ -1,114 +1,523 @@
-var __decorate=this&&this.__decorate||function(e,i,t,a){var s,n=arguments.length,l=n<3?i:null===a?a=Object.getOwnPropertyDescriptor(i,t):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,i,t,a);else for(var m=e.length-1;m>=0;m--)(s=e[m])&&(l=(n<3?s(l):n>3?s(i,t,l):s(i,t))||l);return n>3&&l&&Object.defineProperty(i,t,l),l};import"./label.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./slider.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Slider=class Slider extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get value(){return this.multiple&&void 0!==this.minimumValue&&void 0!==this.maximumValue?[this.minimumValue,this.maximumValue]:void 0!==this.minimumValue?[this.minimumValue]:[]}set value(e){if(0===e.length){const e=this.max-this.min;return this.minimumValue=this.min+Math.floor(.25*e),this.maximumValue=this.multiple?this.min+Math.ceil(.75*e):void 0,void this.#e()}if(this.multiple&&2===e.length&&void 0!==e[0]&&void 0!==e[1]){if(e[0]>e[1])throw new Error("The first value must be less than the second.");const i=Math.round(e[0]/this.step)*this.step,t=Math.round(e[1]/this.step)*this.step;return this.minimumValue=Math.max(i,this.min),this.maximumValue=Math.min(t,this.max),void this.#e()}if(this.multiple&&e.length>2)throw new Error("Only two values are allowed when `multiple`.");if(!this.multiple&&e.length>0&&void 0!==e[0]){const i=Math.round(e[0]/this.step)*this.step;return this.minimumValue=Math.max(Math.min(i,this.max),this.min),this.maximumValue=void 0,void this.#e()}}get max(){return this.#i}set max(e){this.#i=e,this.maximumValue=Math.min(this.maximumValue??this.#i,e),void 0!==this.minimumValue&&this.minimumValue>e&&(this.minimumValue=this.multiple&&void 0!==this.maximumValue?Math.min(e,this.maximumValue-this.step):e),this.#e()}get min(){return this.#t}set min(e){this.#t=e,this.minimumValue=Math.max(this.minimumValue??this.#t,e),this.multiple?void 0!==this.maximumValue&&this.maximumValue<e&&(this.maximumValue=Math.max(e,this.minimumValue+this.step)):this.maximumValue=void 0,this.#e()}get multiple(){return this.#a}set multiple(e){const i=this.#a;if(this.#a=e,i&&!e)return this.maximumValue=void 0,void this.updateComplete.then((()=>{this.#e()}));if(!i&&e&&void 0!==this.minimumValue){const e=this.max-this.min,i=this.min+Math.ceil(.75*e);this.minimumValue>=i?(this.maximumValue=this.max,this.minimumValue>=this.maximumValue&&(this.minimumValue=this.maximumValue-this.step)):this.maximumValue=i,this.updateComplete.then((()=>{this.#e()}))}}get step(){return this.#s}set step(e){this.#s=e>0?e:1}get form(){return this.#n.form}get validity(){return this.#n.validity}checkValidity(){this.isCheckingValidity=!0;const e=this.#n.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#l),document.removeEventListener("mousemove",this.#m),document.removeEventListener("mouseup",this.#h)}firstUpdated(){if(!this.multiple&&1===this.value.length)return this.minimumValue=this.value.at(0),this.#d=this.value,void this.#e();if(this.multiple&&2===this.value.length)return this.minimumValue=this.value.at(0),this.maximumValue=this.value.at(1),void 0!==this.minimumValue&&void 0!==this.maximumValue&&(this.#d=[this.minimumValue,this.maximumValue]),void this.#e();if(!this.value||0===this.value.length){const e=this.max-this.min;this.minimumValue=this.min+Math.floor(.25*e),this.maximumValue=this.multiple?this.min+Math.ceil(.75*e):void 0,this.#d=this.multiple&&void 0!==this.maximumValue?[this.minimumValue,this.maximumValue]:[this.minimumValue],this.#e()}}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#l.bind(this))}formResetCallback(){this.value=this.#d}render(){return html`
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './label.js';
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import { LocalizeController } from './library/localize.js';
+import styles from './slider.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {number} [max=100]
+ * @attr {number} [min=0]
+ * @attr {boolean} [multiple=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {boolean} [readonly=false]
+ * @attr {boolean} [required=false]
+ * @attr {number} [step=1]
+ * @attr {string} [tooltip]
+ * @attr {number[]} [value=[]]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} change
+ * @fires {Event} input
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
+ */
+let Slider = class Slider extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = styles; }
+    // Intentionally not reflected to match native.
+    /**
+     * @default []
+     */
+    get value() {
+        if (this.multiple &&
+            this.minimumValue !== undefined &&
+            this.maximumValue !== undefined) {
+            return [this.minimumValue, this.maximumValue];
+        }
+        if (this.minimumValue !== undefined) {
+            return [this.minimumValue];
+        }
+        return [];
+    }
+    set value(value) {
+        if (value.length === 0) {
+            const rangeSize = this.max - this.min;
+            // To match native, when the value is emptied, we create one.
+            // Native sets it to 50% of the max, but we have a design
+            // requirement for a 25/75% split of the range size.
+            this.minimumValue = this.min + Math.floor(rangeSize * 0.25);
+            this.maximumValue = this.multiple
+                ? this.min + Math.ceil(rangeSize * 0.75)
+                : undefined;
+            this.#updateHandlesAndTrack();
+            return;
+        }
+        if (this.multiple &&
+            value.length === 2 &&
+            value[0] !== undefined &&
+            value[1] !== undefined) {
+            if (value[0] > value[1]) {
+                throw new Error('The first value must be less than the second.');
+            }
+            // Normalize values to snap to the closest valid step
+            // increment, even if a developer sets a value between
+            // steps.
+            //
+            // Doing so creates consistent behavior between programmatic
+            // updates and user interactions. Users can select values that
+            // align with steps when dragging the handles or when entering
+            // values into the inputs. This ensures programmatic updates
+            // follow the same rules.
+            //
+            // It also prevents the Slider from ending up in a state where
+            // the position visually doesn't match where a user would
+            // expect based on the step configuration.
+            const normalizedMinimum = Math.round(value[0] / this.step) * this.step;
+            const normalizedMaximum = Math.round(value[1] / this.step) * this.step;
+            // Clamp the normalized values to the allowed ranges.
+            this.minimumValue = Math.max(normalizedMinimum, this.min);
+            this.maximumValue = Math.min(normalizedMaximum, this.max);
+            this.#updateHandlesAndTrack();
+            return;
+        }
+        if (this.multiple && value.length > 2) {
+            throw new Error('Only two values are allowed when `multiple`.');
+        }
+        if (!this.multiple && value.length > 0 && value[0] !== undefined) {
+            // Normalize the value to snap to the closest valid step
+            // increment, even if a developer sets a value between steps.
+            //
+            // Doing so creates consistent behavior between programmatic
+            // updates and user interactions. Users can select values that
+            // align with step when dragging the handle or when entering
+            // values into the input. This ensures programmatic updates
+            // follow the same rules.
+            //
+            // It also prevents the Slider from ending up in a state where
+            // the position visually doesn't match where a user would
+            // expect based on the step configuration.
+            const normalizedValue = Math.round(value[0] / this.step) * this.step;
+            // Clamp the normalized value to the allowed range.
+            this.minimumValue = Math.max(Math.min(normalizedValue, this.max), this.min);
+            // When not in multiple mode, we clear the maximumValue to
+            // ensure the Slider won't get in an odd state as the
+            // minimumValue is adjusted. If a consumers add the multiple
+            // attribute, we recalculate what the maximumValue should be
+            // based on the current position of the minimum handle with
+            // respect to max and step.
+            this.maximumValue = undefined;
+            this.#updateHandlesAndTrack();
+            return;
+        }
+    }
+    /**
+     * @default 100
+     */
+    get max() {
+        return this.#max;
+    }
+    set max(max) {
+        this.#max = max;
+        this.maximumValue = Math.min(this.maximumValue ?? this.#max, max);
+        // Prevents Slider from reaching an unusable state when max
+        // changes.
+        //
+        // If max decreases below minimumValue, we need to adjust the
+        // value to maintain usability. Without this adjustment, the
+        // handle could become stuck beyond the visible track, leaving
+        // users unable to interact with it.
+        //
+        // Setting minimumValue maintains functionality to respect the
+        // relationship between handles in multiple mode. In single mode,
+        // it ensures Slider remains accessible within the valid range.
+        if (this.minimumValue !== undefined && this.minimumValue > max) {
+            this.minimumValue =
+                this.multiple && this.maximumValue !== undefined
+                    ? Math.min(max, this.maximumValue - this.step)
+                    : max;
+        }
+        this.#updateHandlesAndTrack();
+    }
+    /**
+     * @default 0
+     */
+    get min() {
+        return this.#min;
+    }
+    set min(min) {
+        this.#min = min;
+        this.minimumValue = Math.max(this.minimumValue ?? this.#min, min);
+        if (this.multiple) {
+            // Prevents the multi-handle Slider from becoming unusable
+            // when min increases.
+            //
+            // If min increases above the maximumValue, the maximum handle
+            // would become inaccessible and be outside of the visible
+            // track. This adjustment ensures both handles remain
+            // functional within the valid range while maintaining proper
+            // step separation between them.
+            if (this.maximumValue !== undefined && this.maximumValue < min) {
+                this.maximumValue = Math.max(min, this.minimumValue + this.step);
+            }
+        }
+        else {
+            // In single mode, we intentionally clear maximumValue when
+            // min changes to maintain component state consistency and
+            // prevent edge cases where maximumValue could unexpectedly
+            // influence Slider's behavior when switching between single
+            // and multiple modes.
+            this.maximumValue = undefined;
+        }
+        this.#updateHandlesAndTrack();
+    }
+    /**
+     * @default false
+     */
+    get multiple() {
+        return this.#multiple;
+    }
+    set multiple(multiple) {
+        const oldValue = this.#multiple;
+        this.#multiple = multiple;
+        if (oldValue && !multiple) {
+            // Similar to the min setter above, clear out maximumValue to
+            // prevent state inconsistencies and UX issues when switching
+            // from multiple to single.
+            this.maximumValue = undefined;
+            this.updateComplete.then(() => {
+                this.#updateHandlesAndTrack();
+            });
+            return;
+        }
+        if (!oldValue && multiple && this.minimumValue !== undefined) {
+            const rangeSize = this.max - this.min;
+            // Design calls for positioning the maximum handle at 75% of
+            // the range size.
+            const desiredMaximumValue = this.min + Math.ceil(rangeSize * 0.75);
+            // There may be cases where the current minimum value now
+            // exceeds the 75% range size threshold. We attempt to account
+            // for this case by maxing out maximumValue.
+            if (this.minimumValue >= desiredMaximumValue) {
+                this.maximumValue = this.max;
+                // If the minimum value is still larger, we lower it to help
+                // prevent the component from getting into an invalid state.
+                // This is hopefully an edge case, but one we should account
+                // for.
+                if (this.minimumValue >= this.maximumValue) {
+                    this.minimumValue = this.maximumValue - this.step;
+                }
+            }
+            else {
+                this.maximumValue = desiredMaximumValue;
+            }
+            this.updateComplete.then(() => {
+                this.#updateHandlesAndTrack();
+            });
+        }
+    }
+    /**
+     * @default 1
+     */
+    get step() {
+        return this.#step;
+    }
+    set step(step) {
+        this.#step = step > 0 ? step : 1;
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    get validity() {
+        return this.#internals.validity;
+    }
+    checkValidity() {
+        this.isCheckingValidity = true;
+        const isValid = this.#internals.checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('formdata', this.#onFormdata);
+        document.removeEventListener('mousemove', this.#onDraggingMousemove);
+        document.removeEventListener('mouseup', this.#onDraggingMouseup);
+    }
+    firstUpdated() {
+        if (!this.multiple && this.value.length === 1) {
+            this.minimumValue = this.value.at(0);
+            this.#initialValue = this.value;
+            this.#updateHandlesAndTrack();
+            return;
+        }
+        if (this.multiple && this.value.length === 2) {
+            this.minimumValue = this.value.at(0);
+            this.maximumValue = this.value.at(1);
+            if (this.minimumValue !== undefined && this.maximumValue !== undefined) {
+                this.#initialValue = [this.minimumValue, this.maximumValue];
+            }
+            this.#updateHandlesAndTrack();
+            return;
+        }
+        if (!this.value || this.value.length === 0) {
+            const rangeSize = this.max - this.min;
+            // When the native range input is not provided a value,
+            // it defaults value to 50% of the max. Our design
+            // requirements are different, in that they want the single
+            // slider or minimum handle in multiple mode to be at 25% of
+            // the range size, and the maximum handle in multiple mode to
+            // be at 75% of the range size.
+            this.minimumValue = this.min + Math.floor(rangeSize * 0.25);
+            this.maximumValue = this.multiple
+                ? this.min + Math.ceil(rangeSize * 0.75)
+                : undefined;
+            this.#initialValue =
+                this.multiple && this.maximumValue !== undefined
+                    ? [this.minimumValue, this.maximumValue]
+                    : [this.minimumValue];
+            this.#updateHandlesAndTrack();
+        }
+    }
+    formAssociatedCallback() {
+        this.form?.addEventListener('formdata', this.#onFormdata.bind(this));
+    }
+    formResetCallback() {
+        this.value = this.#initialValue;
+    }
+    render() {
+        // The Slider track has a click handler for convenience to allow
+        // users to click anywhere on the track and have a handle move
+        // to that position. This behavior is an ehancement rather than
+        // essential functionality and is a situation where the linter
+        // is being overzealous without considering the full context of
+        // the component.
+        //
+        // A keyboard user can already update the component via the
+        // input elements directly or via the handles. Exposing the
+        // track via keyboard wouldn't bring any real value in this
+        // instance.
+        /*  eslint-disable lit-a11y/click-events-have-key-events */
+        return html `
       <glide-core-private-label
-        class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
+        class=${classMap({
+            left: this.privateSplit === 'left',
+            middle: this.privateSplit === 'middle',
+        })}
         label=${ifDefined(this.label)}
         orientation=${this.orientation}
-        split=${ifDefined(this.privateSplit??void 0)}
+        split=${ifDefined(this.privateSplit ?? undefined)}
         tooltip=${ifDefined(this.tooltip)}
         ?disabled=${this.disabled}
-        ?error=${this.#u}
+        ?error=${this.#isShowValidationFeedback}
         ?hide=${this.hideLabel}
         ?required=${this.required}
       >
         <label>${this.label}</label>
 
         <div
-          class=${classMap({"slider-container":!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#u})}
+          class=${classMap({
+            'slider-container': true,
+            disabled: this.disabled,
+            readonly: this.readonly && !this.disabled,
+            error: this.#isShowValidationFeedback,
+        })}
           slot="control"
         >
-          ${when(this.multiple,(()=>html`<input
+          ${when(this.multiple, () => html `<input
                   aria-describedby="meta"
-                  aria-label=${this.#r.term("setMinimum",this.label)}
-                  aria-invalid=${this.#u}
-                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  aria-label=${this.#localize.term('setMinimum', 
+        // `this.label` is always defined because it's a
+        // required attribute.
+        //
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.label)}
+                  aria-invalid=${this.#isShowValidationFeedback}
+                  class=${classMap({
+            input: true,
+            disabled: this.disabled,
+            error: this.#isShowValidationFeedback,
+            readonly: this.readonly && !this.disabled,
+        })}
                   data-test="minimum-input"
-                  max=${ifDefined(this.maximumValue?this.maximumValue-this.step:void 0)}
+                  max=${ifDefined(this.maximumValue
+            ? this.maximumValue - this.step
+            : undefined)}
                   min=${this.min}
                   step=${this.step}
                   type="number"
-                  .value=${this.minimumValue?.toString()??""}
+                  .value=${this.minimumValue?.toString() ?? ''}
                   ?disabled=${this.disabled}
                   ?readonly=${this.readonly}
-                  @change=${this.#o.bind(this)}
-                  @input=${this.#p}
-                  @keydown=${this.#c}
-                  ${ref(this.#v)}
+                  @change=${this.#onMinimumInputChange.bind(this)}
+                  @input=${this.#onMinimumInputInput}
+                  @keydown=${this.#onInputKeydown}
+                  ${ref(this.#minimumInputElementRef)}
                 />
 
                 <div class="track-container">
                   <div
-                    class=${classMap({"unfilled-track":!0,disabled:this.disabled})}
+                    class=${classMap({
+            'unfilled-track': true,
+            disabled: this.disabled,
+        })}
                     data-test="slider"
                     role="group"
-                    @click=${this.#f.bind(this)}
-                    ${ref(this.#b)}
+                    @click=${this.#onTrackClick.bind(this)}
+                    ${ref(this.#sliderElementRef)}
                   >
                     <div
-                      class=${classMap({"filled-track":!0,disabled:this.disabled})}
-                      ${ref(this.#g)}
+                      class=${classMap({
+            'filled-track': true,
+            disabled: this.disabled,
+        })}
+                      ${ref(this.#sliderFillElementRef)}
                     ></div>
 
                     <div
                       aria-disabled=${this.disabled}
-                      aria-label=${this.#r.term("minimum",this.label)}
+                      aria-label=${this.#localize.term('minimum', 
+        // `this.label` is always defined because
+        // it's a required attribute.
+        //
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.label)}
                       aria-readonly=${this.readonly}
                       aria-valuemin=${this.min}
                       aria-valuemax=${this.max}
                       aria-valuenow=${ifDefined(this.minimumValue)}
-                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      class=${classMap({
+            handle: true,
+            disabled: this.disabled,
+            readonly: this.readonly && !this.disabled,
+        })}
                       data-test="minimum-handle"
                       role="slider"
                       tabindex="0"
-                      @mousedown=${this.#y.bind(this)}
-                      @keydown=${this.#V.bind(this)}
-                      ${ref(this.#x)}
+                      @mousedown=${this.#onMinimumHandleMousedown.bind(this)}
+                      @keydown=${this.#onMinimumHandleKeydown.bind(this)}
+                      ${ref(this.#minimumHandleElementRef)}
                     ></div>
 
                     <div
                       aria-disabled=${this.disabled}
-                      aria-label=${this.#r.term("maximum",this.label)}
+                      aria-label=${this.#localize.term('maximum', 
+        // `this.label` is always defined because
+        // it's a required attribute.
+        //
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.label)}
                       aria-readonly=${this.readonly}
                       aria-valuemin=${this.min}
                       aria-valuemax=${this.max}
                       aria-valuenow=${ifDefined(this.maximumValue)}
-                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      class=${classMap({
+            handle: true,
+            disabled: this.disabled,
+            readonly: this.readonly && !this.disabled,
+        })}
                       data-test="maximum-handle"
                       role="slider"
                       tabindex="0"
-                      @mousedown=${this.#E.bind(this)}
-                      @keydown=${this.#M.bind(this)}
-                      ${ref(this.#$)}
+                      @mousedown=${this.#onMaximumHandleMousedown.bind(this)}
+                      @keydown=${this.#onMaximumHandleKeydown.bind(this)}
+                      ${ref(this.#maximumHandleElementRef)}
                     ></div>
                   </div>
                 </div>
 
                 <input
-                  aria-label=${this.#r.term("setMaximum",this.label)}
-                  aria-invalid=${this.#u}
-                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  aria-label=${this.#localize.term('setMaximum', 
+        // `this.label` is always defined because it's a required attribute.
+        //
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.label)}
+                  aria-invalid=${this.#isShowValidationFeedback}
+                  class=${classMap({
+            input: true,
+            disabled: this.disabled,
+            error: this.#isShowValidationFeedback,
+            readonly: this.readonly && !this.disabled,
+        })}
                   data-test="maximum-input"
                   max=${this.max}
-                  min=${ifDefined(this.minimumValue?this.minimumValue+this.step:void 0)}
+                  min=${ifDefined(this.minimumValue
+            ? this.minimumValue + this.step
+            : undefined)}
                   step=${this.step}
                   type="number"
-                  .value=${this.maximumValue?.toString()??""}
+                  .value=${this.maximumValue?.toString() ?? ''}
                   ?disabled=${this.disabled}
                   ?readonly=${this.readonly}
-                  @change=${this.#R.bind(this)}
-                  @input=${this.#w}
-                  @keydown=${this.#c}
-                  ${ref(this.#k)}
-                />`),(()=>html`<div class="track-container single">
+                  @change=${this.#onMaximumInputChange.bind(this)}
+                  @input=${this.#onMaximumInputInput}
+                  @keydown=${this.#onInputKeydown}
+                  ${ref(this.#maximumInputElementRef)}
+                />`, () => html `<div class="track-container single">
                   <div
-                    class=${classMap({"unfilled-track":!0,disabled:this.disabled})}
+                    class=${classMap({
+            'unfilled-track': true,
+            disabled: this.disabled,
+        })}
                     data-test="slider"
                     role="group"
-                    @click=${this.#f.bind(this)}
-                    ${ref(this.#b)}
+                    @click=${this.#onTrackClick.bind(this)}
+                    ${ref(this.#sliderElementRef)}
                   >
                     <div
-                      class=${classMap({"filled-track":!0,disabled:this.disabled})}
-                      ${ref(this.#g)}
+                      class=${classMap({
+            'filled-track': true,
+            disabled: this.disabled,
+        })}
+                      ${ref(this.#sliderFillElementRef)}
                     ></div>
 
                     <div
@@ -119,39 +528,51 @@ var __decorate=this&&this.__decorate||function(e,i,t,a){var s,n=arguments.length
                       aria-valuemin=${this.min}
                       aria-valuemax=${this.max}
                       aria-valuenow=${ifDefined(this.minimumValue)}
-                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      class=${classMap({
+            handle: true,
+            disabled: this.disabled,
+            readonly: this.readonly && !this.disabled,
+        })}
                       data-test="single-handle"
                       role="slider"
                       tabindex="0"
-                      @mousedown=${this.#H.bind(this)}
-                      @keydown=${this.#S.bind(this)}
-                      ${ref(this.#D)}
+                      @mousedown=${this.#onSingleHandleMousedown.bind(this)}
+                      @keydown=${this.#onSingleHandleKeyDown.bind(this)}
+                      ${ref(this.#singleHandleElementRef)}
                     ></div>
                   </div>
                 </div>
 
                 <input
                   aria-label=${ifDefined(this.label)}
-                  aria-invalid=${this.#u}
-                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  aria-invalid=${this.#isShowValidationFeedback}
+                  class=${classMap({
+            input: true,
+            disabled: this.disabled,
+            error: this.#isShowValidationFeedback,
+            readonly: this.readonly && !this.disabled,
+        })}
                   data-test="single-input"
                   max=${this.max}
                   min=${this.min}
                   step=${this.step}
                   type="number"
-                  .value=${this.minimumValue?.toString()??""}
+                  .value=${this.minimumValue?.toString() ?? ''}
                   ?disabled=${this.disabled}
                   ?readonly=${this.readonly}
-                  @change=${this.#_.bind(this)}
-                  @input=${this.#I.bind(this)}
-                  @keydown=${this.#c}
-                  ${ref(this.#A)}
-                />`))}
+                  @change=${this.#onSingleInputChange.bind(this)}
+                  @input=${this.#onSingleInputInput.bind(this)}
+                  @keydown=${this.#onInputKeydown}
+                  ${ref(this.#singleInputElementRef)}
+                />`)}
         </div>
 
         <div class="meta" id="meta" slot="description">
           <slot
-            class=${classMap({description:!0,hidden:Boolean(this.#u&&this.validityMessage)})}
+            class=${classMap({
+            description: true,
+            hidden: Boolean(this.#isShowValidationFeedback && this.validityMessage),
+        })}
             name="description"
           >
             <!--
@@ -160,9 +581,567 @@ var __decorate=this&&this.__decorate||function(e,i,t,a){var s,n=arguments.length
             -->
           </slot>
 
-          ${when(this.#u&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+          ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span class="validity-message" data-test="validity-message"
                 >${unsafeHTML(this.validityMessage)}</span
-              >`))}
+              >`)}
         </div>
       </glide-core-private-label>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#n.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#n.setValidity({customError:!1},"",this.#C.value):this.#n.setValidity({customError:!0,patternMismatch:this.#n.validity.patternMismatch,valueMissing:this.#n.validity.valueMissing}," ",this.#C.value)}setValidity(e,i){this.validityMessage=i,this.#n.setValidity(e," ",this.#C.value)}constructor(){super(),this.name="",this.orientation="horizontal",this.hideLabel=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#T=!1,this.#d=[],this.#C=createRef(),this.#r=new LocalizeController(this),this.#i=100,this.#$=createRef(),this.#k=createRef(),this.#t=0,this.#x=createRef(),this.#v=createRef(),this.#a=!1,this.#D=createRef(),this.#A=createRef(),this.#b=createRef(),this.#g=createRef(),this.#s=1,this.#m=e=>{e.preventDefault();const i=this.#b.value;if(i&&this.#F){const{clientX:t}=e;if(void 0!==t){const e=i.getBoundingClientRect();this.#L(t,this.#F,e)}}},this.#h=()=>{this.#F&&(document.removeEventListener("mousemove",this.#m),document.removeEventListener("mouseup",this.#h),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.#T=!0,this.#F=void 0,setTimeout((()=>{this.#T=!1})))},this.#n=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#F;#T;#d;#C;#n;#r;#i;#$;#k;#t;#x;#v;#a;#D;#A;#b;#g;#s;get#u(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#m;#h;#L(e,i,t){const a=(e-t.left)/t.width*(this.max-this.min)+this.min,s=Math.round(a/this.step)*this.step;if(this.multiple){if(i===this.#x.value&&void 0!==this.maximumValue){const e=Math.min(Math.max(s,this.min),this.maximumValue-this.step);if(e!==this.minimumValue)return this.minimumValue=e,this.#e(),void this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}if(i===this.#$.value&&void 0!==this.minimumValue){const e=Math.min(Math.max(s,this.minimumValue+this.step),this.max);if(e!==this.maximumValue)return this.maximumValue=e,this.#e(),void this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}else{const e=Math.min(Math.max(s,this.min),this.max);e!==this.minimumValue&&(this.minimumValue=e,this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}}#l(e){this.name&&this.value&&!this.disabled&&e.formData.append(this.name,JSON.stringify(this.value))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#M(e){this.#$.value&&this.#j(e,this.#$.value)}#E(e){this.#$.value&&this.#K(e,this.#$.value)}#R(){if(this.#k.value&&void 0!==this.minimumValue){const e=Number(this.#k.value.value),i=Math.round(e/this.step)*this.step;this.maximumValue=Math.min(Math.max(i,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#w(){if(this.#k.value){const e=Number(this.#k.value.value);void 0!==this.minimumValue&&e>=this.minimumValue&&(this.maximumValue=Math.min(e,this.max),this.#e())}}#V(e){this.#x.value&&this.#j(e,this.#x.value)}#y(e){this.#x.value&&this.#K(e,this.#x.value)}#o(){if(this.#v.value&&void 0!==this.maximumValue){const e=Number(this.#v.value.value),i=Math.round(e/this.step)*this.step;this.minimumValue=Math.min(Math.max(i,this.min),this.maximumValue-this.step),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#p(){if(this.#v.value){const e=Number(this.#v.value.value);void 0!==this.maximumValue&&e<=this.maximumValue&&(this.minimumValue=Math.max(e,this.min),this.#e())}}#j(e,i){if(!this.disabled&&!this.readonly&&void 0!==this.minimumValue&&void 0!==this.maximumValue){const t=i===this.#x.value;let a=t?this.minimumValue:this.maximumValue;switch(e.key){case"ArrowLeft":case"ArrowDown":a-=this.step;break;case"ArrowRight":case"ArrowUp":a+=this.step;break;case"PageDown":a-=10*this.step;break;case"PageUp":a+=10*this.step;break;case"Home":a=t?this.min:this.minimumValue+this.step;break;case"End":a=t?this.maximumValue-this.step:this.max;break;case"Enter":return void this.form?.requestSubmit();default:return}e.preventDefault(),t?this.minimumValue=Math.min(Math.max(a,this.min),this.maximumValue-this.step):this.maximumValue=Math.min(Math.max(a,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#S(e){if(this.disabled||this.readonly)return;if(this.#D.value&&void 0!==this.minimumValue){let i=this.minimumValue;switch(e.key){case"ArrowLeft":case"ArrowDown":i-=this.step;break;case"ArrowRight":case"ArrowUp":i+=this.step;break;case"PageDown":i-=10*this.step;break;case"PageUp":i+=10*this.step;break;case"Home":i=this.min;break;case"End":i=this.max;break;case"Enter":return void this.form?.requestSubmit();default:return}e.preventDefault(),this.minimumValue=Math.min(Math.max(i,this.min),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#H(e){this.#D.value&&this.#K(e,this.#D.value)}#_(){if(this.#A.value){const e=Number(this.#A.value.value),i=Math.round(e/this.step)*this.step;this.minimumValue=Math.min(Math.max(i,this.min),this.max),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#I(){if(this.#A.value){const e=Number(this.#A.value.value);e>=0&&(this.minimumValue=Math.min(e,this.max),this.#e())}}#f(e){if(this.disabled||this.readonly)return;if(e.target===this.#x.value||e.target===this.#$.value||e.target===this.#D.value||this.#T)return;const i=this.#b.value;if(i){const t=i.getBoundingClientRect(),a=(e.clientX-t.left)/t.width*(this.max-this.min)+this.min,s=Math.round(a/this.step)*this.step;if(this.multiple&&void 0!==this.minimumValue&&void 0!==this.maximumValue){return Math.abs(s-this.minimumValue)<=Math.abs(s-this.maximumValue)?this.minimumValue=Math.min(Math.max(s,this.min),this.maximumValue-this.step):this.maximumValue=Math.min(Math.max(s,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}this.minimumValue=Math.min(Math.max(s,this.min),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#K(e,i){if(this.disabled||this.readonly)return;e.preventDefault();const t=this.#b.value;t&&(this.#F=i,document.addEventListener("mousemove",this.#m),document.addEventListener("mouseup",this.#h),this.#L(e.clientX,i,t.getBoundingClientRect()))}#e(){const e=this.#g.value,i=this.#D.value,t=this.#x.value,a=this.#$.value;if(e&&void 0!==this.minimumValue){if(!this.multiple&&i){const t=this.max-this.min,a=(this.minimumValue-this.min)/t*100;return i.style.left=`${a}%`,e.style.left="0",void(e.style.width=`${a}%`)}if(void 0!==this.maximumValue&&t&&a){const i=this.max-this.min,s=(this.minimumValue-this.min)/i*100,n=(this.maximumValue-this.min)/i*100;t.style.left=`${s}%`,a.style.left=`${n}%`,e.style.left=`${s}%`,e.style.width=n-s+"%"}}}};__decorate([property({reflect:!0,useDefault:!0})],Slider.prototype,"name",void 0),__decorate([property({type:Array})],Slider.prototype,"value",null),__decorate([property({reflect:!0}),required],Slider.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Slider.prototype,"orientation",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],Slider.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Slider.prototype,"required",void 0),__decorate([property({type:Boolean})],Slider.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],Slider.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Number})],Slider.prototype,"max",null),__decorate([property({reflect:!0,type:Number})],Slider.prototype,"min",null),__decorate([property({type:Boolean})],Slider.prototype,"multiple",null),__decorate([property({reflect:!0,type:Number,useDefault:!0})],Slider.prototype,"step",null),__decorate([property()],Slider.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],Slider.prototype,"version",void 0),__decorate([property({reflect:!0})],Slider.prototype,"tooltip",void 0),__decorate([state()],Slider.prototype,"isBlurring",void 0),__decorate([state()],Slider.prototype,"isCheckingValidity",void 0),__decorate([state()],Slider.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Slider.prototype,"maximumValue",void 0),__decorate([state()],Slider.prototype,"minimumValue",void 0),__decorate([state()],Slider.prototype,"validityMessage",void 0),Slider=__decorate([customElement("glide-core-slider"),final],Slider);export default Slider;
+    `;
+    }
+    reportValidity() {
+        this.isReportValidityOrSubmit = true;
+        const isValid = this.#internals.reportValidity();
+        // Ensures that getters referencing `this.validity.valid` are updated.
+        this.requestUpdate();
+        return isValid;
+    }
+    resetValidityFeedback() {
+        this.isReportValidityOrSubmit = false;
+    }
+    setCustomValidity(message) {
+        this.validityMessage = message;
+        if (message === '') {
+            this.#internals.setValidity({ customError: false }, '', this.#inputElementRef.value);
+        }
+        else {
+            // A validation message is required but unused because we
+            // disable native validation feedback. And an empty string
+            // isn't allowed. Thus a single space.
+            this.#internals.setValidity({
+                customError: true,
+                patternMismatch: this.#internals.validity.patternMismatch,
+                valueMissing: this.#internals.validity.valueMissing,
+            }, ' ', this.#inputElementRef.value);
+        }
+    }
+    setValidity(flags, message) {
+        this.validityMessage = message;
+        // A validation message is required but unused because we
+        // disable native validation feedback. And an empty string isn't
+        // allowed. Thus a single space.
+        this.#internals.setValidity(flags, ' ', this.#inputElementRef.value);
+    }
+    constructor() {
+        super();
+        this.name = '';
+        this.orientation = 'horizontal';
+        this.hideLabel = false;
+        this.required = false;
+        this.readonly = false;
+        this.disabled = false;
+        this.version = packageJson.version;
+        this.isBlurring = false;
+        this.isCheckingValidity = false;
+        this.isReportValidityOrSubmit = false;
+        this.#hasCompletedDrag = false;
+        this.#initialValue = [];
+        this.#inputElementRef = createRef();
+        this.#localize = new LocalizeController(this);
+        this.#max = 100;
+        this.#maximumHandleElementRef = createRef();
+        this.#maximumInputElementRef = createRef();
+        this.#min = 0;
+        this.#minimumHandleElementRef = createRef();
+        this.#minimumInputElementRef = createRef();
+        this.#multiple = false;
+        this.#singleHandleElementRef = createRef();
+        this.#singleInputElementRef = createRef();
+        this.#sliderElementRef = createRef();
+        this.#sliderFillElementRef = createRef();
+        this.#step = 1;
+        // An arrow function field instead of a method so `this` is closed
+        // over and set to the component instead of `document`.
+        this.#onDraggingMousemove = (mouseEvent) => {
+            mouseEvent.preventDefault();
+            const slider = this.#sliderElementRef.value;
+            if (slider && this.#draggingHandleElement) {
+                const { clientX } = mouseEvent;
+                if (clientX !== undefined) {
+                    const sliderRect = slider.getBoundingClientRect();
+                    this.#onDrag(clientX, this.#draggingHandleElement, sliderRect);
+                }
+            }
+        };
+        // An arrow function field instead of a method so `this` is closed
+        // over and set to the component instead of `document`.
+        this.#onDraggingMouseup = () => {
+            if (this.#draggingHandleElement) {
+                document.removeEventListener('mousemove', this.#onDraggingMousemove);
+                document.removeEventListener('mouseup', this.#onDraggingMouseup);
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+                this.#hasCompletedDrag = true;
+                this.#draggingHandleElement = undefined;
+                // Track clicks can inadvertently occur when letting go of
+                // a handle. To help prevent click events from dispatching,
+                // this variable keeps track of when we are still processing
+                // the drag event.
+                //
+                // Resetting the state in the next frame allows the drag to
+                // fully complete before accepting track click events again.
+                setTimeout(() => {
+                    this.#hasCompletedDrag = false;
+                });
+            }
+        };
+        this.#internals = this.attachInternals();
+        // Event handlers on the host aren't great because consumers can
+        // remove them. Unfortunately, the host is the only thing on
+        // which this event is dispatched because it's the host that is
+        // form-associated.
+        this.addEventListener('invalid', (event) => {
+            event?.preventDefault(); // Canceled so a native validation message isn't shown.
+            // We only want to focus the slider if the invalid event
+            // resulted from either:
+            // 1. Form submission
+            // 2. a call to reportValidity that did NOT result from
+            //    the slider blur event
+            if (this.isCheckingValidity || this.isBlurring) {
+                return;
+            }
+            this.isReportValidityOrSubmit = true;
+            const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
+            if (isFirstInvalidFormElement) {
+                this.focus();
+            }
+        });
+    }
+    #draggingHandleElement;
+    #hasCompletedDrag;
+    #initialValue;
+    #inputElementRef;
+    #internals;
+    #localize;
+    #max;
+    #maximumHandleElementRef;
+    #maximumInputElementRef;
+    #min;
+    #minimumHandleElementRef;
+    #minimumInputElementRef;
+    #multiple;
+    #singleHandleElementRef;
+    #singleInputElementRef;
+    #sliderElementRef;
+    #sliderFillElementRef;
+    #step;
+    get #isShowValidationFeedback() {
+        return (!this.disabled && !this.validity?.valid && this.isReportValidityOrSubmit);
+    }
+    // An arrow function field instead of a method so `this` is closed
+    // over and set to the component instead of `document`.
+    #onDraggingMousemove;
+    // An arrow function field instead of a method so `this` is closed
+    // over and set to the component instead of `document`.
+    #onDraggingMouseup;
+    #onDrag(clientX, handle, sliderRect) {
+        const filledPercentage = (clientX - sliderRect.left) / sliderRect.width;
+        const clampedPosition = filledPercentage * (this.max - this.min) + this.min;
+        // Ensures the calculated value aligns with the Slider's step
+        // configuration, rounding to the nearest valid step increment.
+        const snappedValue = Math.round(clampedPosition / this.step) * this.step;
+        if (!this.multiple) {
+            const newValue = Math.min(Math.max(snappedValue, this.min), this.max);
+            // To align with native, we only dispatch the input event when
+            // the value is actually changed.
+            if (newValue !== this.minimumValue) {
+                this.minimumValue = newValue;
+                this.#updateHandlesAndTrack();
+                this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            }
+            return;
+        }
+        if (handle === this.#minimumHandleElementRef.value &&
+            this.maximumValue !== undefined) {
+            const newValue = Math.min(Math.max(snappedValue, this.min), this.maximumValue - this.step);
+            // To align with native, we only dispatch the input event when
+            // the value is actually changed.
+            if (newValue !== this.minimumValue) {
+                this.minimumValue = newValue;
+                this.#updateHandlesAndTrack();
+                this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                return;
+            }
+        }
+        if (handle === this.#maximumHandleElementRef.value &&
+            this.minimumValue !== undefined) {
+            const newValue = Math.min(Math.max(snappedValue, this.minimumValue + this.step), this.max);
+            // To align with native, we only dispatch the input event when
+            // the value is actually changed.
+            if (newValue !== this.maximumValue) {
+                this.maximumValue = newValue;
+                this.#updateHandlesAndTrack();
+                this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                return;
+            }
+        }
+    }
+    #onFormdata(event) {
+        if (this.name && this.value && !this.disabled) {
+            event.formData.append(this.name, JSON.stringify(this.value));
+        }
+    }
+    #onInputKeydown(event) {
+        if (event.key === 'Enter') {
+            this.form?.requestSubmit();
+        }
+    }
+    #onMaximumHandleKeydown(event) {
+        if (this.#maximumHandleElementRef.value) {
+            this.#onMultipleHandleKeydown(event, this.#maximumHandleElementRef.value);
+        }
+    }
+    #onMaximumHandleMousedown(event) {
+        if (this.#maximumHandleElementRef.value) {
+            this.#startDragging(event, this.#maximumHandleElementRef.value);
+        }
+    }
+    #onMaximumInputChange() {
+        if (this.#maximumInputElementRef.value && this.minimumValue !== undefined) {
+            const inputValue = Number(this.#maximumInputElementRef.value.value);
+            const normalizedValue = Math.round(inputValue / this.step) * this.step;
+            this.maximumValue = Math.min(Math.max(normalizedValue, this.minimumValue + this.step), this.max);
+            this.#updateHandlesAndTrack();
+            // Unlike "input" events, "change" events aren't composed. So
+            // we have to manually dispatch them.
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    #onMaximumInputInput() {
+        if (this.#maximumInputElementRef.value) {
+            const inputValue = Number(this.#maximumInputElementRef.value.value);
+            if (this.minimumValue !== undefined && inputValue >= this.minimumValue) {
+                this.maximumValue = Math.min(inputValue, this.max);
+                this.#updateHandlesAndTrack();
+            }
+        }
+    }
+    #onMinimumHandleKeydown(event) {
+        if (this.#minimumHandleElementRef.value) {
+            this.#onMultipleHandleKeydown(event, this.#minimumHandleElementRef.value);
+        }
+    }
+    #onMinimumHandleMousedown(event) {
+        if (this.#minimumHandleElementRef.value) {
+            this.#startDragging(event, this.#minimumHandleElementRef.value);
+        }
+    }
+    #onMinimumInputChange() {
+        if (this.#minimumInputElementRef.value && this.maximumValue !== undefined) {
+            const inputValue = Number(this.#minimumInputElementRef.value.value);
+            const normalizedValue = Math.round(inputValue / this.step) * this.step;
+            this.minimumValue = Math.min(Math.max(normalizedValue, this.min), 
+            // Ensures the minimum value always stays at least one step
+            // below the maximum value, maintaining the required
+            // separation. Without this, users could set the minimum
+            // value equal to or higher than the maximum value, creating
+            // issues, both visually and operationally.
+            //
+            // Consider the case where maximumValue is 75 and step is 5.
+            // Without this, a user could set the value to 80, which
+            // would be invalid. With this constraint, the minimum value
+            // can't go higher than 70 (75-5).
+            this.maximumValue - this.step);
+            this.#updateHandlesAndTrack();
+            // Unlike "input" events, "change" events aren't composed. So
+            // we have to manually dispatch them.
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    #onMinimumInputInput() {
+        if (this.#minimumInputElementRef.value) {
+            const inputValue = Number(this.#minimumInputElementRef.value.value);
+            if (this.maximumValue !== undefined && inputValue <= this.maximumValue) {
+                this.minimumValue = Math.max(inputValue, this.min);
+                this.#updateHandlesAndTrack();
+            }
+        }
+    }
+    #onMultipleHandleKeydown(event, handle) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (this.minimumValue !== undefined && this.maximumValue !== undefined) {
+            const isMinimumHandle = handle === this.#minimumHandleElementRef.value;
+            let value = isMinimumHandle ? this.minimumValue : this.maximumValue;
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowDown': {
+                    value = value - this.step;
+                    break;
+                }
+                case 'ArrowRight':
+                case 'ArrowUp': {
+                    value = value + this.step;
+                    break;
+                }
+                case 'PageDown': {
+                    value = value - this.step * 10;
+                    break;
+                }
+                case 'PageUp': {
+                    value = value + this.step * 10;
+                    break;
+                }
+                case 'Home': {
+                    value = isMinimumHandle ? this.min : this.minimumValue + this.step;
+                    break;
+                }
+                case 'End': {
+                    value = isMinimumHandle ? this.maximumValue - this.step : this.max;
+                    break;
+                }
+                case 'Enter': {
+                    this.form?.requestSubmit();
+                    return;
+                }
+                default: {
+                    return;
+                }
+            }
+            // Prevent page scroll.
+            event.preventDefault();
+            if (isMinimumHandle) {
+                this.minimumValue = Math.min(Math.max(value, this.min), this.maximumValue - this.step);
+            }
+            else {
+                this.maximumValue = Math.min(Math.max(value, this.minimumValue + this.step), this.max);
+            }
+            this.#updateHandlesAndTrack();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    #onSingleHandleKeyDown(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const handle = this.#singleHandleElementRef.value;
+        if (handle && this.minimumValue !== undefined) {
+            let value = this.minimumValue;
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowDown': {
+                    value -= this.step;
+                    break;
+                }
+                case 'ArrowRight':
+                case 'ArrowUp': {
+                    value += this.step;
+                    break;
+                }
+                case 'PageDown': {
+                    value -= this.step * 10;
+                    break;
+                }
+                case 'PageUp': {
+                    value += this.step * 10;
+                    break;
+                }
+                case 'Home': {
+                    value = this.min;
+                    break;
+                }
+                case 'End': {
+                    value = this.max;
+                    break;
+                }
+                case 'Enter': {
+                    this.form?.requestSubmit();
+                    return;
+                }
+                default: {
+                    return;
+                }
+            }
+            event.preventDefault();
+            this.minimumValue = Math.min(Math.max(value, this.min), this.max);
+            this.#updateHandlesAndTrack();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    #onSingleHandleMousedown(event) {
+        if (this.#singleHandleElementRef.value) {
+            this.#startDragging(event, this.#singleHandleElementRef.value);
+        }
+    }
+    #onSingleInputChange() {
+        if (this.#singleInputElementRef.value) {
+            const inputValue = Number(this.#singleInputElementRef.value.value);
+            const normalizedValue = Math.round(inputValue / this.step) * this.step;
+            this.minimumValue = Math.min(Math.max(normalizedValue, this.min), this.max);
+            this.#updateHandlesAndTrack();
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    #onSingleInputInput() {
+        if (this.#singleInputElementRef.value) {
+            const inputValue = Number(this.#singleInputElementRef.value.value);
+            if (inputValue >= 0) {
+                this.minimumValue = Math.min(inputValue, this.max);
+                this.#updateHandlesAndTrack();
+            }
+        }
+    }
+    #onTrackClick(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (event.target === this.#minimumHandleElementRef.value ||
+            event.target === this.#maximumHandleElementRef.value ||
+            event.target === this.#singleHandleElementRef.value ||
+            this.#hasCompletedDrag) {
+            return;
+        }
+        const slider = this.#sliderElementRef.value;
+        if (slider) {
+            const sliderRect = slider.getBoundingClientRect();
+            const clickPosition = (event.clientX - sliderRect.left) / sliderRect.width;
+            const clampedPosition = clickPosition * (this.max - this.min) + this.min;
+            // Similar to when dragging, when clicking the track we need
+            // to ensure the calculated value aligns with the Slider's
+            // step configuration, rounding to the nearest valid step
+            // increment.
+            const snappedValue = Math.round(clampedPosition / this.step) * this.step;
+            if (this.multiple &&
+                this.minimumValue !== undefined &&
+                this.maximumValue !== undefined) {
+                // Calculate the distance to each handle to determine which
+                // one to move.
+                const minimumDistance = Math.abs(snappedValue - this.minimumValue);
+                const maximumDistance = Math.abs(snappedValue - this.maximumValue);
+                // Move the closest handle.
+                if (minimumDistance <= maximumDistance) {
+                    this.minimumValue = Math.min(Math.max(snappedValue, this.min), this.maximumValue - this.step);
+                }
+                else {
+                    this.maximumValue = Math.min(Math.max(snappedValue, this.minimumValue + this.step), this.max);
+                }
+                this.#updateHandlesAndTrack();
+                // Native fires both events in this case.
+                this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+                return;
+            }
+            this.minimumValue = Math.min(Math.max(snappedValue, this.min), this.max);
+            this.#updateHandlesAndTrack();
+            // Native fires both events in this case.
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
+    }
+    #startDragging(event, handle) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        event.preventDefault();
+        const slider = this.#sliderElementRef.value;
+        if (slider) {
+            this.#draggingHandleElement = handle;
+            // We want document-level event listeners so that the user can
+            // drag and release the handle outside of the component and it
+            // update properly. Not all users will drag the handles though,
+            // so rather than adding event listeners in connectedCallback()
+            // and having them fire any time a user moves their mouse,
+            // even if they aren't interacting directly with the Slider,
+            // we add these event listeners only when the user initiates
+            // dragging.
+            document.addEventListener('mousemove', this.#onDraggingMousemove);
+            document.addEventListener('mouseup', this.#onDraggingMouseup);
+            this.#onDrag(event.clientX, handle, slider.getBoundingClientRect());
+        }
+    }
+    #updateHandlesAndTrack() {
+        const sliderFill = this.#sliderFillElementRef.value;
+        const singleHandle = this.#singleHandleElementRef.value;
+        const minimumHandle = this.#minimumHandleElementRef.value;
+        const maximumHandle = this.#maximumHandleElementRef.value;
+        if (sliderFill && this.minimumValue !== undefined) {
+            if (!this.multiple && singleHandle) {
+                const range = this.max - this.min;
+                const calculatedPosition = ((this.minimumValue - this.min) / range) * 100;
+                singleHandle.style.left = `${calculatedPosition}%`;
+                sliderFill.style.left = '0';
+                sliderFill.style.width = `${calculatedPosition}%`;
+                return;
+            }
+            if (this.maximumValue !== undefined && minimumHandle && maximumHandle) {
+                const range = this.max - this.min;
+                const minimumPosition = ((this.minimumValue - this.min) / range) * 100;
+                const maximumPosition = ((this.maximumValue - this.min) / range) * 100;
+                minimumHandle.style.left = `${minimumPosition}%`;
+                maximumHandle.style.left = `${maximumPosition}%`;
+                sliderFill.style.left = `${minimumPosition}%`;
+                sliderFill.style.width = `${maximumPosition - minimumPosition}%`;
+            }
+        }
+    }
+};
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Slider.prototype, "name", void 0);
+__decorate([
+    property({ type: Array })
+], Slider.prototype, "value", null);
+__decorate([
+    property({ reflect: true }),
+    required
+], Slider.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Slider.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'hide-label', type: Boolean })
+], Slider.prototype, "hideLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Slider.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "readonly", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Slider.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Slider.prototype, "max", null);
+__decorate([
+    property({ reflect: true, type: Number })
+], Slider.prototype, "min", null);
+__decorate([
+    property({ type: Boolean })
+], Slider.prototype, "multiple", null);
+__decorate([
+    property({ reflect: true, type: Number, useDefault: true })
+], Slider.prototype, "step", null);
+__decorate([
+    property()
+], Slider.prototype, "privateSplit", void 0);
+__decorate([
+    property({ reflect: true })
+], Slider.prototype, "version", void 0);
+__decorate([
+    property({ reflect: true })
+], Slider.prototype, "tooltip", void 0);
+__decorate([
+    state()
+], Slider.prototype, "isBlurring", void 0);
+__decorate([
+    state()
+], Slider.prototype, "isCheckingValidity", void 0);
+__decorate([
+    state()
+], Slider.prototype, "isReportValidityOrSubmit", void 0);
+__decorate([
+    state()
+], Slider.prototype, "maximumValue", void 0);
+__decorate([
+    state()
+], Slider.prototype, "minimumValue", void 0);
+__decorate([
+    state()
+], Slider.prototype, "validityMessage", void 0);
+Slider = __decorate([
+    customElement('glide-core-slider'),
+    final
+], Slider);
+export default Slider;