@radix-ng/primitives 1.0.0-beta.3 → 1.0.0-beta.5

package/fesm2022/radix-ng-primitives-slider.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, Directive, computed, input, numberAttribute, booleanAttribute, model, output, signal, NgModule } from '@angular/core';
+import { inject, ElementRef, DestroyRef, Directive, computed, input, numberAttribute, booleanAttribute, model, output, signal, afterNextRender, afterRenderEffect, untracked, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import * as i1 from '@radix-ng/primitives/core';
-import { createContext, clamp, injectControlValueAccessor, injectId, RdxControlValueAccessor } from '@radix-ng/primitives/core';
+import { createContext, clamp, injectControlValueAccessor, injectDocument, injectId, createCancelableChangeEventDetails, RdxControlValueAccessor } from '@radix-ng/primitives/core';
 export { clamp } from '@radix-ng/primitives/core';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
 
 /**
  * The Slider context exposes the root directive instance to every child part.
@@ -33,6 +34,20 @@ function getMidpoint(element) {
     const rect = element.getBoundingClientRect();
     return { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 };
 }
+/** Calculates the control-relative percent for an edge-aligned thumb. */
+function getInsetThumbPositionPercent(control, thumb, thumbValuePercent, vertical) {
+    const thumbRect = thumb.getBoundingClientRect();
+    const controlRect = control.getBoundingClientRect();
+    const side = vertical ? 'height' : 'width';
+    const controlSide = controlRect[side];
+    if (!(controlSide > 0)) {
+        return undefined;
+    }
+    const controlSize = controlSide - thumbRect[side];
+    const thumbOffsetFromControlEdge = thumbRect[side] / 2 + (controlSize * thumbValuePercent) / 100;
+    const nextPosition = (thumbOffsetFromControlEdge / controlSide) * 100;
+    return Number.isFinite(nextPosition) ? nextPosition : undefined;
+}
 /** Converts an array of values into clamped 0–100 percentages. */
 function valueArrayToPercentages(values, min, max) {
     return values.map((value) => clamp(valueToPercent(value, min, max), 0, 100));
@@ -303,11 +318,22 @@ class RdxSliderControl {
         this.styles = null;
         this.moveCount = 0;
         this.currentInteractionValue = null;
+        this.touchId = null;
+        this.insetThumbOffset = 0;
+        this.onTouchStart = (event) => this.handleTouchStart(event);
         this.onMove = (event) => this.handleMove(event);
         this.onUp = (event) => this.handleUp(event);
         this.onCancel = (event) => this.handleUp(event);
-        this.root.controlRef.set(this.elementRef.nativeElement);
-        inject(DestroyRef).onDestroy(() => this.stopListening());
+        this.onTouchMove = (event) => this.handleMove(event);
+        this.onTouchEnd = (event) => this.handleUp(event);
+        const control = this.elementRef.nativeElement;
+        this.root.controlRef.set(control);
+        control.style.setProperty('touch-action', 'none');
+        control.addEventListener('touchstart', this.onTouchStart, { passive: true });
+        inject(DestroyRef).onDestroy(() => {
+            control.removeEventListener('touchstart', this.onTouchStart);
+            this.stopListening();
+        });
     }
     onPointerDown(event) {
         const control = this.elementRef.nativeElement;
@@ -318,11 +344,16 @@ class RdxSliderControl {
         if (!target) {
             return;
         }
+        if (this.isTargetDisabledThumb(target)) {
+            this.root.resetPressedThumb();
+            return;
+        }
         // Suppress the nested range input's native click-to-set and drag so the
         // control fully owns pointer interaction (otherwise releasing on a thumb
         // fires a native change that snaps the value to the press point inside
         // the thumb-sized input). Focus is restored manually via focusThumb.
         event.preventDefault();
+        this.touchId = null;
         this.styles = this.document.defaultView?.getComputedStyle(control) ?? null;
         this.startPressing({ x: event.clientX, y: event.clientY });
         const finger = this.getFingerState({ x: event.clientX, y: event.clientY });
@@ -332,7 +363,7 @@ class RdxSliderControl {
         this.root.setDragging(true);
         // Pressing directly on a thumb sets a center offset; only a rail press changes value on down.
         if (this.root.pressedThumbCenterOffset == null) {
-            this.setValueFromPointer(finger, 'track-press');
+            this.setValueFromPointer(finger, 'track-press', event);
         }
         this.root.focusThumb(finger.thumbIndex);
         control.setPointerCapture(event.pointerId);
@@ -341,13 +372,50 @@ class RdxSliderControl {
         this.document.addEventListener('pointerup', this.onUp, { once: true });
         this.document.addEventListener('pointercancel', this.onCancel, { once: true });
     }
+    handleTouchStart(event) {
+        if (this.root.isDisabled()) {
+            return;
+        }
+        const touch = event.changedTouches[0];
+        if (!touch) {
+            return;
+        }
+        if (this.isTargetDisabledThumb(event.target)) {
+            this.root.resetPressedThumb();
+            return;
+        }
+        this.touchId = touch.identifier;
+        this.styles = this.document.defaultView?.getComputedStyle(this.elementRef.nativeElement) ?? null;
+        const fingerCoords = this.getFingerCoords(event);
+        if (fingerCoords == null) {
+            return;
+        }
+        this.startPressing(fingerCoords);
+        const finger = this.getFingerState(fingerCoords);
+        if (finger == null) {
+            return;
+        }
+        this.root.focusThumb(finger.thumbIndex);
+        const applied = this.setValueFromPointer(finger, 'track-press', event);
+        if (applied && finger.didSwap) {
+            this.root.focusThumb(finger.thumbIndex);
+        }
+        this.moveCount = 0;
+        this.document.addEventListener('touchmove', this.onTouchMove, { passive: true });
+        this.document.addEventListener('touchend', this.onTouchEnd, { passive: true, once: true });
+        this.document.addEventListener('touchcancel', this.onTouchEnd, { passive: true, once: true });
+    }
     handleMove(event) {
+        const fingerCoords = this.getFingerCoords(event);
+        if (fingerCoords == null) {
+            return;
+        }
         this.moveCount += 1;
-        if (event.buttons === 0) {
+        if ('buttons' in event && event.buttons === 0) {
             this.handleUp(event);
             return;
         }
-        const finger = this.getFingerState({ x: event.clientX, y: event.clientY });
+        const finger = this.getFingerState(fingerCoords);
         if (finger == null) {
             return;
         }
@@ -355,7 +423,7 @@ class RdxSliderControl {
             if (!this.root.dragging() && this.moveCount > INTENTIONAL_DRAG_COUNT_THRESHOLD) {
                 this.root.setDragging(true);
             }
-            const applied = this.setValueFromPointer(finger, 'drag');
+            const applied = this.setValueFromPointer(finger, 'drag', event);
             if (applied && finger.didSwap) {
                 this.root.focusThumb(finger.thumbIndex);
             }
@@ -367,13 +435,14 @@ class RdxSliderControl {
         this.root.pressedThumbCenterOffset = null;
         this.root.pressedInput = null;
         if (this.currentInteractionValue != null) {
-            this.root.commitValue();
+            this.root.commitValue(event);
         }
         const control = this.elementRef.nativeElement;
-        if (control.hasPointerCapture?.(event.pointerId)) {
+        if ('pointerId' in event && control.hasPointerCapture?.(event.pointerId)) {
             control.releasePointerCapture(event.pointerId);
         }
         this.root.resetPressedThumb();
+        this.touchId = null;
         this.root.pressedValues = null;
         this.currentInteractionValue = null;
         this.stopListening();
@@ -382,6 +451,31 @@ class RdxSliderControl {
         this.document.removeEventListener('pointermove', this.onMove);
         this.document.removeEventListener('pointerup', this.onUp);
         this.document.removeEventListener('pointercancel', this.onCancel);
+        this.document.removeEventListener('touchmove', this.onTouchMove);
+        this.document.removeEventListener('touchend', this.onTouchEnd);
+        this.document.removeEventListener('touchcancel', this.onTouchEnd);
+    }
+    getFingerCoords(event) {
+        if ('changedTouches' in event) {
+            if (this.touchId == null) {
+                return null;
+            }
+            for (let i = 0; i < event.changedTouches.length; i += 1) {
+                const touch = event.changedTouches[i];
+                if (touch.identifier === this.touchId) {
+                    return { x: touch.clientX, y: touch.clientY };
+                }
+            }
+            return null;
+        }
+        return { x: event.clientX, y: event.clientY };
+    }
+    isTargetDisabledThumb(target) {
+        const NodeCtor = this.elementRef.nativeElement.ownerDocument.defaultView?.Node;
+        if (!NodeCtor || !(target instanceof NodeCtor)) {
+            return false;
+        }
+        return this.root.thumbList().some((thumb) => thumb.disabled() && thumb.element.contains(target));
     }
     startPressing(finger) {
         const values = this.root.values();
@@ -423,10 +517,18 @@ class RdxSliderControl {
             this.root.pressedThumbIndex = closestThumbIndex;
             this.root.pressedInput = this.root.thumbList()[closestThumbIndex]?.inputElement ?? null;
         }
+        this.insetThumbOffset = 0;
+        if (this.root.inset()) {
+            const thumb = this.root.thumbList()[closestThumbIndex]?.element;
+            if (thumb) {
+                const rect = thumb.getBoundingClientRect();
+                this.insetThumbOffset = (this.root.orientation() === 'vertical' ? rect.height : rect.width) / 2;
+            }
+        }
     }
-    setValueFromPointer(finger, reason) {
+    setValueFromPointer(finger, reason, event) {
         const nextValues = Array.isArray(finger.value) ? finger.value : [finger.value];
-        const applied = this.root.setValue(nextValues, reason);
+        const applied = this.root.setValue(nextValues, reason, event, finger.thumbIndex);
         if (applied) {
             this.currentInteractionValue = finger.value;
             if (finger.didSwap) {
@@ -452,7 +554,7 @@ class RdxSliderControl {
         }
         const { width, height, bottom, left, right } = control.getBoundingClientRect();
         const controlOffset = getControlOffset(this.styles, vertical, rtl);
-        const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end;
+        const controlSize = (vertical ? height : width) - controlOffset.start - controlOffset.end - this.insetThumbOffset * 2;
         // A collapsed/unmeasurable track would divide by zero and yield NaN values.
         if (!(controlSize > 0)) {
             return null;
@@ -463,7 +565,7 @@ class RdxSliderControl {
         const valueSize = vertical
             ? bottom - fingerY - controlOffset.end
             : (rtl ? right - fingerX : fingerX - left) - controlOffset.start;
-        const valueRescaled = clamp(valueSize / controlSize, 0, 1);
+        const valueRescaled = clamp((valueSize - this.insetThumbOffset) / controlSize, 0, 1);
         let newValue = (max - min) * valueRescaled + min;
         newValue = roundValueToStep(newValue, step, min);
         newValue = clamp(newValue, min, max);
@@ -503,6 +605,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+function getInsetStyles(vertical, range, start, end) {
+    const startEdge = vertical ? 'bottom' : 'inset-inline-start';
+    const mainSide = vertical ? 'height' : 'width';
+    const crossSide = vertical ? 'width' : 'height';
+    const styles = {
+        position: vertical ? 'absolute' : 'relative',
+        [crossSide]: 'inherit'
+    };
+    if (start === undefined || (range && end === undefined)) {
+        styles['visibility'] = 'hidden';
+    }
+    if (!range) {
+        styles[startEdge] = 0;
+        styles[mainSide] = `${start ?? 0}%`;
+        return styles;
+    }
+    styles[startEdge] = `${start ?? 0}%`;
+    styles[mainSide] = `${(end ?? 0) - (start ?? 0)}%`;
+    return styles;
+}
 /**
  * Visualises the portion of the track between the slider's minimum (or the first
  * thumb in a range) and the active value.
@@ -518,11 +640,16 @@ class RdxSliderIndicator {
             const values = this.root.values();
             const min = this.root.min();
             const max = this.root.max();
+            const inset = this.root.inset();
             const startEdge = vertical ? 'bottom' : 'inset-inline-start';
             const mainSide = vertical ? 'height' : 'width';
             const crossSide = vertical ? 'width' : 'height';
             const start = valueToPercent(values[0], min, max);
             const end = valueToPercent(values[values.length - 1], min, max);
+            if (inset) {
+                const [startPosition, endPosition] = this.root.indicatorPosition();
+                return getInsetStyles(vertical, range, startPosition, endPosition);
+            }
             const styles = {
                 position: vertical ? 'absolute' : 'relative',
                 [crossSide]: 'inherit'
@@ -566,6 +693,21 @@ function sortByDomOrder(list) {
         return 0;
     });
 }
+function cloneChangeEventWithTarget(event, value, name) {
+    const EventCtor = event.constructor;
+    let clonedEvent;
+    try {
+        clonedEvent = new EventCtor(event.type, event);
+    }
+    catch {
+        clonedEvent = new Event(event.type, event);
+    }
+    Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: { value, name }
+    });
+    return clonedEvent;
+}
 /**
  * Groups all parts of the slider and owns its state, value-change logic and
  * thumb registration. A single directive drives both orientations — there are no
@@ -577,6 +719,7 @@ class RdxSliderRoot {
     constructor() {
         /** @ignore */
         this.cva = injectControlValueAccessor();
+        this.document = injectDocument();
         this.id = input(injectId('rdx-slider-'), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * The minimum value of the slider.
@@ -612,12 +755,20 @@ class RdxSliderRoot {
          * The reading direction. Mirrors the horizontal axis when set to `'rtl'`.
          * @default 'ltr'
          */
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+        this.dir = injectDirection(this.dirInput);
         /**
          * How thumbs behave when they meet in a range slider.
          * @default 'push'
          */
         this.thumbCollisionBehavior = input('push', ...(ngDevMode ? [{ debugName: "thumbCollisionBehavior" }] : /* istanbul ignore next */ []));
+        /**
+         * How the thumbs align with the control when the value is at min/max.
+         * `center` aligns the thumb center to the control edge; `edge`/`edge-client-only`
+         * inset thumbs so their outer edge aligns to the control edge.
+         * @default 'center'
+         */
+        this.thumbAlignment = input('center', ...(ngDevMode ? [{ debugName: "thumbAlignment" }] : /* istanbul ignore next */ []));
         /** Options forwarded to `Intl.NumberFormat` when displaying and announcing values. */
         this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
         /** Locale used for value formatting. */
@@ -648,6 +799,8 @@ class RdxSliderRoot {
         this.lastUsedThumbIndex = signal(-1, ...(ngDevMode ? [{ debugName: "lastUsedThumbIndex" }] : /* istanbul ignore next */ []));
         /** @ignore Whether a pointer drag is in progress. */
         this.dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        /** @ignore Edge-aligned thumb/indicator positions, in control-relative percentages. */
+        this.indicatorPosition = signal([undefined, undefined], ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : /* istanbul ignore next */ []));
         /** @ignore Pointer-drag scratch state (not reactive). */
         this.pressedThumbIndex = -1;
         /** @ignore */
@@ -660,6 +813,10 @@ class RdxSliderRoot {
         this.lastChangeReason = 'none';
         /** @ignore */
         this.isDisabled = computed(() => !!this.cva.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.inset = computed(() => this.thumbAlignment() !== 'center', ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.renderBeforeHydration = computed(() => this.thumbAlignment() === 'edge', ...(ngDevMode ? [{ debugName: "renderBeforeHydration" }] : /* istanbul ignore next */ []));
         /** @ignore The current value source (controlled value, else default, else min). */
         this.currentRaw = computed(() => this.cva.value() ?? this.defaultValue() ?? this.min(), ...(ngDevMode ? [{ debugName: "currentRaw" }] : /* istanbul ignore next */ []));
         /** Whether the slider has multiple thumbs (the value is an array). */
@@ -700,6 +857,18 @@ class RdxSliderRoot {
         this.thumbList()[index]?.inputElement?.focus({ preventScroll: true });
     }
     /** @ignore */
+    setIndicatorPosition(index, position) {
+        this.indicatorPosition.update(([start, end]) => {
+            if (index === 0) {
+                return [position, end];
+            }
+            if (index === this.values().length - 1) {
+                return [start, position];
+            }
+            return [start, end];
+        });
+    }
+    /** @ignore */
     formatValue(value) {
         return formatNumber(value, this.locale(), this.format());
     }
@@ -716,21 +885,29 @@ class RdxSliderRoot {
      * Applies a new full set of values, preserving the single/range value shape.
      * Returns `false` when the value did not change.
      */
-    setValue(nextValues, reason) {
+    setValue(nextValues, reason, event, activeThumbIndex = -1) {
         const next = this.range() ? nextValues : nextValues[0];
         const current = this.outputValue();
         const hasNaN = Array.isArray(next) ? next.some((v) => Number.isNaN(v)) : Number.isNaN(next);
         if (hasNaN || areValuesEqual(next, current)) {
             return false;
         }
+        const trigger = event?.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
+        const changeEvent = cloneChangeEventWithTarget(event ?? new Event('slider.value-change'), next, this.name());
+        const { eventDetails: baseEventDetails } = createCancelableChangeEventDetails(reason, changeEvent, trigger);
+        const eventDetails = Object.assign(baseEventDetails, { activeThumbIndex });
+        this.onValueChange.emit({ value: next, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return false;
+        }
         this.lastChangeReason = reason;
+        this.lastChangeEvent = eventDetails.event;
         this.value.set(next);
         this.cva.setValue(next);
-        this.onValueChange.emit(next);
         return true;
     }
     /** @ignore Keyboard / native input path: clamps to neighbours, commits immediately. */
-    handleInputChange(valueInput, index, reason = 'keyboard') {
+    handleInputChange(valueInput, index, reason = 'keyboard', event) {
         if (this.isDisabled()) {
             return;
         }
@@ -739,15 +916,24 @@ class RdxSliderRoot {
             return;
         }
         const arr = Array.isArray(result) ? result : [result];
-        const applied = this.setValue(arr, reason);
+        const applied = this.setValue(arr, reason, event, index);
         this.cva.markAsTouched();
         if (applied) {
-            this.onValueCommitted.emit(this.outputValue());
+            this.commitValue(event, reason);
         }
     }
     /** @ignore Emits the committed value at the end of a pointer drag. */
-    commitValue() {
-        this.onValueCommitted.emit(this.outputValue());
+    commitValue(event, reason = this.lastChangeReason) {
+        const commitEvent = event ?? this.lastChangeEvent ?? new Event('slider.value-commit');
+        const trigger = commitEvent.currentTarget instanceof HTMLElement ? commitEvent.currentTarget : undefined;
+        this.onValueCommitted.emit({
+            value: this.outputValue(),
+            eventDetails: {
+                reason,
+                event: commitEvent,
+                trigger
+            }
+        });
     }
     /** @ignore */
     markAsTouched() {
@@ -763,8 +949,12 @@ class RdxSliderRoot {
         this.pressedThumbCenterOffset = null;
         this.pressedInput = null;
     }
+    /** @ignore */
+    getOwnerWindow() {
+        return this.document.defaultView ?? undefined;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [provideSliderRootContext(() => inject(RdxSliderRoot))], exportAs: ["rdxSliderRoot"], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxSliderRoot, isStandalone: true, selector: "div[rdxSliderRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, largeStep: { classPropertyName: "largeStep", publicName: "largeStep", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenValues: { classPropertyName: "minStepsBetweenValues", publicName: "minStepsBetweenValues", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, thumbCollisionBehavior: { classPropertyName: "thumbCollisionBehavior", publicName: "thumbCollisionBehavior", isSignal: true, isRequired: false, transformFunction: null }, thumbAlignment: { classPropertyName: "thumbAlignment", publicName: "thumbAlignment", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange", onValueCommitted: "onValueCommitted" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "attr.aria-labelledby": "ariaLabelledBy()", "attr.dir": "dir()", "attr.data-orientation": "orientation()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-dragging": "dragging() ? \"\" : undefined" } }, providers: [provideSliderRootContext(() => inject(RdxSliderRoot))], exportAs: ["rdxSliderRoot"], hostDirectives: [{ directive: i1.RdxControlValueAccessor, inputs: ["value", "value", "disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRoot, decorators: [{
             type: Directive,
@@ -788,7 +978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-dragging]': 'dragging() ? "" : undefined'
                     }
                 }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], minStepsBetweenValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenValues", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], thumbCollisionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbCollisionBehavior", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onValueCommitted: [{ type: i0.Output, args: ["onValueCommitted"] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], largeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeStep", required: false }] }], minStepsBetweenValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenValues", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], thumbCollisionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbCollisionBehavior", required: false }] }], thumbAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbAlignment", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onValueCommitted: [{ type: i0.Output, args: ["onValueCommitted"] }] } });
 
 /**
  * A draggable handle. Render one per value; place an `input[rdxSliderThumbInput]`
@@ -817,12 +1007,15 @@ class RdxSliderThumb {
             const value = this.value();
             return value === undefined ? NaN : valueToPercent(value, this.root.min(), this.root.max());
         }, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+        this.insetPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "insetPosition" }] : /* istanbul ignore next */ []));
         this.thumbStyle = computed(() => {
             const vertical = this.root.orientation() === 'vertical';
             const rtl = this.root.dir() === 'rtl';
             const startEdge = vertical ? 'bottom' : 'inset-inline-start';
             const crossOffset = vertical ? 'left' : 'top';
             const percent = this.percent();
+            const inset = this.root.inset();
+            const position = this.insetPosition();
             if (!Number.isFinite(percent)) {
                 return { position: 'absolute', visibility: 'hidden' };
             }
@@ -841,10 +1034,13 @@ class RdxSliderThumb {
             }
             const style = {
                 position: 'absolute',
-                [startEdge]: `${percent}%`,
+                [startEdge]: inset ? `${position ?? 0}%` : `${percent}%`,
                 [crossOffset]: '50%',
                 translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`
             };
+            if (inset && position === undefined) {
+                style['visibility'] = 'hidden';
+            }
             if (zIndex !== undefined) {
                 style['z-index'] = zIndex;
             }
@@ -853,7 +1049,44 @@ class RdxSliderThumb {
         // Registration is DOM-order sorted on the root and reads no inputs, so the constructor
         // (where the host element already exists) is the right place; cleanup goes via DestroyRef.
         this.root.registerThumb(this);
-        inject(DestroyRef).onDestroy(() => this.root.unregisterThumb(this));
+        const destroyRef = inject(DestroyRef);
+        destroyRef.onDestroy(() => this.root.unregisterThumb(this));
+        afterNextRender(() => {
+            const win = this.root.getOwnerWindow();
+            const ResizeObserverCtor = win
+                ?.ResizeObserver;
+            if (!ResizeObserverCtor) {
+                this.updateInsetPosition();
+                return;
+            }
+            const observer = new ResizeObserverCtor(() => this.updateInsetPosition());
+            const control = this.root.controlRef();
+            if (control) {
+                observer.observe(control);
+            }
+            observer.observe(this.element);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+        afterRenderEffect(() => {
+            this.root.inset();
+            this.percent();
+            this.index();
+            this.root.values();
+            untracked(() => queueMicrotask(() => this.updateInsetPosition()));
+        });
+    }
+    updateInsetPosition() {
+        if (!this.root.inset()) {
+            this.insetPosition.set(undefined);
+            return;
+        }
+        const control = this.root.controlRef();
+        if (!control) {
+            return;
+        }
+        const position = getInsetThumbPositionPercent(control, this.element, this.percent(), this.root.orientation() === 'vertical');
+        this.insetPosition.set(position);
+        this.root.setIndicatorPosition(this.index(), position);
     }
     onPointerDown(event) {
         if (this.disabled()) {
@@ -918,7 +1151,7 @@ class RdxSliderThumbInput {
     onChange(event) {
         const value = event.target.valueAsNumber;
         if (!Number.isNaN(value)) {
-            this.root.handleInputChange(value, this.thumb.index(), 'input');
+            this.root.handleInputChange(value, this.thumb.index(), 'input-change', event);
         }
     }
     onFocus() {
@@ -981,7 +1214,7 @@ class RdxSliderThumbInput {
                 break;
         }
         if (newValue !== null) {
-            this.root.handleInputChange(newValue, index, 'keyboard');
+            this.root.handleInputChange(newValue, index, 'keyboard', event);
             event.preventDefault();
         }
     }
@@ -1113,5 +1346,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_KEYS, ARROW_KEYS, COMPOSITE_KEYS, RdxSliderControl, RdxSliderIndicator, RdxSliderModule, RdxSliderRoot, RdxSliderThumb, RdxSliderThumbInput, RdxSliderTrack, RdxSliderValue, areValuesEqual, asc, formatNumber, getControlOffset, getDecimalPrecision, getDefaultAriaValueText, getMidpoint, getNewValue, getPushedThumbValues, getSliderValue, injectSliderRootContext, provideSliderRootContext, replaceArrayItemAtIndex, resolveThumbCollision, roundValueToStep, validateMinimumDistance, valueArrayToPercentages, valueToPercent };
+export { ALL_KEYS, ARROW_KEYS, COMPOSITE_KEYS, RdxSliderControl, RdxSliderIndicator, RdxSliderModule, RdxSliderRoot, RdxSliderThumb, RdxSliderThumbInput, RdxSliderTrack, RdxSliderValue, areValuesEqual, asc, formatNumber, getControlOffset, getDecimalPrecision, getDefaultAriaValueText, getInsetThumbPositionPercent, getMidpoint, getNewValue, getPushedThumbValues, getSliderValue, injectSliderRootContext, provideSliderRootContext, replaceArrayItemAtIndex, resolveThumbCollision, roundValueToStep, validateMinimumDistance, valueArrayToPercentages, valueToPercent };
 //# sourceMappingURL=radix-ng-primitives-slider.mjs.map