@foldkit/ui 0.163.0 → 0.164.0-canary.c9c641bf8179

package/dist/slider/index.js

@@ -6,17 +6,20 @@ import { defineTaggedUnion } from 'foldkit/schema';
 import { modifyFields } from 'foldkit/struct';
 import { defineView } from 'foldkit/submodel';
 import * as Subscription from 'foldkit/subscription';
-import { attributeSelector } from '../internal/selectors.js';
+import { accessibleNameAttributes } from '../internal/accessibleName.js';
+import { clamp, fractionOfValue, percentageFromFraction, } from '../internal/range.js';
+import { attributeSelector, idSelector } from '../internal/selectors.js';
+export { fractionOfValue } from '../internal/range.js';
 // MODEL
 const DragState = defineTaggedUnion({
     Idle: {},
     Dragging: { originValue: Schema.Number },
 });
-/** Schema for the slider component's private interaction state. The current
+/** Schema for the Slider's private interaction state. The current
  *  value is owned by the parent and passed in via `ViewInputs.value`, so it is
- *  not stored here. `min`/`max`/`step` are configuration the drag subscription
- *  reads to map pointer positions into values. `dragState` tracks the active
- *  drag phase and captures the pre-drag value so Escape can restore it. */
+ *  not stored here. `min`, `max`, and `step` configure how the drag Subscription
+ *  maps pointer positions into values. `dragState` tracks the active drag phase
+ *  and captures the pre-drag value so Escape can restore it. */
 export const Model = Schema.Struct({
     id: Schema.String,
     min: Schema.Number,
@@ -25,7 +28,7 @@ export const Model = Schema.Struct({
     dragState: DragState,
 });
 // MESSAGE
-/** Union of all messages the slider component can produce. */
+/** Union of all Messages the Slider can produce. */
 export const Message = defineMessageUnion({
     PressedThumb: { originValue: Schema.Number },
     PressedPointer: {
@@ -48,11 +51,11 @@ export const Message = defineMessageUnion({
     },
 });
 // OUT MESSAGE
-/** Union of all out-messages the slider component can emit to its parent. */
+/** Union of all OutMessages the Slider can emit to its parent. */
 export const OutMessage = defineMessageUnion({
     ChangedValue: { value: Schema.Number },
 });
-/** Creates an initial slider model from a config. The value lives in the
+/** Creates an initial Slider Model from a config. The value lives in the
  *  parent Model; initialize it there and snap it with {@link snapAndClamp}. */
 export const init = (config) => (__foldkitBrandViewResult(({
     id: config.id,
@@ -73,25 +76,13 @@ const roundToStepPrecision = (value, step) => {
     const decimals = stepDecimals(step);
     return __foldkitBrandViewResult((Number(value.toFixed(decimals))), "@foldkit/ui/slider/index.js#roundToStepPrecision");
 };
-const clamp = (value, min, max) => __foldkitBrandViewResult((Math.min(Math.max(value, min), max)), "@foldkit/ui/slider/index.js#clamp");
 /** Snaps a value to the nearest step and clamps it into `[min, max]`. Exported
- *  so a parent can conform the value it owns to the slider's range, for example
+ *  so a parent can conform the value it owns to the Slider's range, for example
  *  when seeding the initial value or reacting to an external update. */
 export const snapAndClamp = (value, min, max, step) => {
     const snapped = min + Math.round((value - min) / step) * step;
     return __foldkitBrandViewResult((roundToStepPrecision(clamp(snapped, min, max), step)), "@foldkit/ui/slider/index.js#snapAndClamp");
 };
-/** Computes the fraction (0–1) of a value between min and max. Returns 0 when
- *  the range has zero width. */
-export const fractionOfValue = (value, min, max) => {
-    const range = max - min;
-    if (range <= 0) {
-        return __foldkitBrandViewResult((0), "@foldkit/ui/slider/index.js#fractionOfValue");
-    }
-    else {
-        return __foldkitBrandViewResult((clamp((value - min) / range, 0, 1)), "@foldkit/ui/slider/index.js#fractionOfValue");
-    }
-};
 const PAGE_STEP_MULTIPLIER = 10;
 const nextValueForDirection = (value, min, max, step, direction) => __foldkitBrandViewResult((Match.value(direction).pipe(Match.withReturnType(), Match.when('StepIncrement', () => __foldkitBrandViewResult((snapAndClamp(value + step, min, max, step)), "@foldkit/ui/slider/index.js#anonymous")), Match.when('StepDecrement', () => __foldkitBrandViewResult((snapAndClamp(value - step, min, max, step)), "@foldkit/ui/slider/index.js#anonymous~2")), Match.when('PageIncrement', () => __foldkitBrandViewResult((snapAndClamp(value + step * PAGE_STEP_MULTIPLIER, min, max, step)), "@foldkit/ui/slider/index.js#anonymous~3")), Match.when('PageDecrement', () => __foldkitBrandViewResult((snapAndClamp(value - step * PAGE_STEP_MULTIPLIER, min, max, step)), "@foldkit/ui/slider/index.js#anonymous~4")), Match.when('Min', () => __foldkitBrandViewResult((min), "@foldkit/ui/slider/index.js#anonymous~5")), Match.when('Max', () => __foldkitBrandViewResult((max), "@foldkit/ui/slider/index.js#anonymous~6")), Match.exhaustive)), "@foldkit/ui/slider/index.js#nextValueForDirection");
 const withUpdateReturn = Match.withReturnType();
@@ -155,21 +146,64 @@ export const reflectRange = Function.dual(2, (model, range) => __foldkitBrandVie
 // SUBSCRIPTION
 const DragActivity = Schema.Literals(['Idle', 'Active']);
 const dragActivityFromModel = (model) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(Match.withReturnType(), Match.tag('Dragging', () => __foldkitBrandViewResult(('Active'), "@foldkit/ui/slider/index.js#anonymous~18")), Match.orElse(() => __foldkitBrandViewResult(('Idle'), "@foldkit/ui/slider/index.js#anonymous~19")))), "@foldkit/ui/slider/index.js#dragActivityFromModel");
-const trackElement = (id, root) => __foldkitBrandViewResult((Option.fromNullishOr(root.querySelector(attributeSelector('data-slider-track-id', id)))), "@foldkit/ui/slider/index.js#trackElement");
-const valueFromClientX = (clientX, trackElement_, min, max) => {
-    const rect = trackElement_.getBoundingClientRect();
-    if (rect.width === 0) {
-        return __foldkitBrandViewResult((min), "@foldkit/ui/slider/index.js#valueFromClientX");
+const findTrackElement = (sliderId, trackRoot) => __foldkitBrandViewResult((Option.fromNullishOr(trackRoot.querySelector(attributeSelector('data-slider-track-id', sliderId)))), "@foldkit/ui/slider/index.js#findTrackElement");
+const isVerticalTrack = (track) => __foldkitBrandViewResult((track.getAttribute('data-orientation') === 'vertical' ||
+    track.hasAttribute('data-vertical')), "@foldkit/ui/slider/index.js#isVerticalTrack");
+const isEdgeAlignedTrack = (track) => __foldkitBrandViewResult((track.getAttribute('data-thumb-alignment') === 'edge'), "@foldkit/ui/slider/index.js#isEdgeAlignedTrack");
+const findThumbElementForTrack = (track) => __foldkitBrandViewResult((pipe(track.getAttribute('data-slider-track-id'), Option.fromNullishOr, Option.flatMap(sliderId => {
+    const thumbSelector = idSelector(`${sliderId}-thumb`);
+    const maybeSliderRoot = Option.fromNullishOr(track.closest(attributeSelector('data-slider-id', sliderId)));
+    return __foldkitBrandViewResult((Option.match(maybeSliderRoot, {
+        onNone: () => __foldkitBrandViewResult((Option.fromNullishOr(track.ownerDocument.getElementById(`${sliderId}-thumb`))), "@foldkit/ui/slider/index.js#onNone~2"),
+        onSome: sliderRoot => __foldkitBrandViewResult((Option.fromNullishOr(sliderRoot.querySelector(thumbSelector))), "@foldkit/ui/slider/index.js#onSome~2"),
+    })), "@foldkit/ui/slider/index.js#anonymous~20");
+}))), "@foldkit/ui/slider/index.js#findThumbElementForTrack");
+const edgeInsetForTrack = (track) => {
+    if (!isEdgeAlignedTrack(track)) {
+        return __foldkitBrandViewResult((0), "@foldkit/ui/slider/index.js#edgeInsetForTrack");
+    }
+    const maybeThumb = findThumbElementForTrack(track);
+    if (Option.isNone(maybeThumb)) {
+        return __foldkitBrandViewResult((0), "@foldkit/ui/slider/index.js#edgeInsetForTrack");
+    }
+    const thumbRect = maybeThumb.value.getBoundingClientRect();
+    const thumbSize = isVerticalTrack(track) ? thumbRect.height : thumbRect.width;
+    return __foldkitBrandViewResult((thumbSize / 2), "@foldkit/ui/slider/index.js#edgeInsetForTrack");
+};
+const fractionOfPointerPosition = (pointerPosition, trackSize, edgeInset) => {
+    const travelSize = trackSize - edgeInset * 2;
+    if (travelSize <= 0) {
+        return __foldkitBrandViewResult((clamp(pointerPosition / trackSize, 0, 1)), "@foldkit/ui/slider/index.js#fractionOfPointerPosition");
     }
     else {
-        const fraction = clamp((clientX - rect.left) / rect.width, 0, 1);
-        return __foldkitBrandViewResult((min + fraction * (max - min)), "@foldkit/ui/slider/index.js#valueFromClientX");
+        return __foldkitBrandViewResult((clamp((pointerPosition - edgeInset) / travelSize, 0, 1)), "@foldkit/ui/slider/index.js#fractionOfPointerPosition");
     }
 };
-/** Builds slider drag subscriptions, looking up the track
- *  element through the supplied root resolver. Use this when the slider is
- *  rendered inside a Shadow DOM. The root is read lazily so consumers can
- *  resolve it at subscription time. */
+/** Maps a pointer position to a Slider value. Vertical tracks place `min` at
+ *  the bottom and `max` at the top. Edge-aligned tracks measure the rendered
+ *  thumb and map the pointer across the same inset range it travels through. */
+export const valueFromPointer = (clientX, clientY, track, min, max) => {
+    const trackRect = track.getBoundingClientRect();
+    if (isVerticalTrack(track)) {
+        if (trackRect.height === 0) {
+            return __foldkitBrandViewResult((min), "@foldkit/ui/slider/index.js#valueFromPointer");
+        }
+        else {
+            const fraction = fractionOfPointerPosition(trackRect.bottom - clientY, trackRect.height, edgeInsetForTrack(track));
+            return __foldkitBrandViewResult((min + fraction * (max - min)), "@foldkit/ui/slider/index.js#valueFromPointer");
+        }
+    }
+    if (trackRect.width === 0) {
+        return __foldkitBrandViewResult((min), "@foldkit/ui/slider/index.js#valueFromPointer");
+    }
+    else {
+        const fraction = fractionOfPointerPosition(clientX - trackRect.left, trackRect.width, edgeInsetForTrack(track));
+        return __foldkitBrandViewResult((min + fraction * (max - min)), "@foldkit/ui/slider/index.js#valueFromPointer");
+    }
+};
+/** Builds Slider drag Subscriptions that find the track through the supplied
+ *  root resolver. Use this when the Slider is rendered inside a Shadow DOM.
+ *  The resolver runs at subscription time. */
 export const subscriptionsForRoot = (getTrackRoot) => __foldkitBrandViewResult((Subscription.make()(entry => (__foldkitBrandViewResult(({
     dragPointer: entry({
         dragActivity: DragActivity,
@@ -184,9 +218,9 @@ export const subscriptionsForRoot = (getTrackRoot) => __foldkitBrandViewResult((
             max: model.max,
         }), "@foldkit/ui/slider/index.js#modelToDependencies")),
         dependenciesToStream: ({ dragActivity, id, min, max }) => {
-            const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((Option.map(trackElement(id, getTrackRoot()), element => __foldkitBrandViewResult((Message.MovedDragPointer({
-                value: valueFromClientX(event.clientX, element, min, max),
-            })), "@foldkit/ui/slider/index.js#anonymous~23"))), "@foldkit/ui/slider/index.js#anonymous~22"))), "@foldkit/ui/slider/index.js#anonymous~21")), Stream.filter(Option.isSome), Stream.map(option => __foldkitBrandViewResult((option.value), "@foldkit/ui/slider/index.js#anonymous~24"))), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => __foldkitBrandViewResult((Message.ReleasedDragPointer()), "@foldkit/ui/slider/index.js#anonymous~25"))));
+            const pointerEvents = Stream.merge(Stream.fromEventListener(document, 'pointermove').pipe(Stream.mapEffect(event => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((Option.map(findTrackElement(id, getTrackRoot()), track => __foldkitBrandViewResult((Message.MovedDragPointer({
+                value: valueFromPointer(event.clientX, event.clientY, track, min, max),
+            })), "@foldkit/ui/slider/index.js#anonymous~24"))), "@foldkit/ui/slider/index.js#anonymous~23"))), "@foldkit/ui/slider/index.js#anonymous~22")), Stream.filter(Option.isSome), Stream.map(option => __foldkitBrandViewResult((option.value), "@foldkit/ui/slider/index.js#anonymous~25"))), Stream.fromEventListener(document, 'pointerup').pipe(Stream.map(() => __foldkitBrandViewResult((Message.ReleasedDragPointer()), "@foldkit/ui/slider/index.js#anonymous~26"))));
             // NOTE: prevents text selection and locks cursor to grabbing while the
             // user drags the thumb. Matches the approach used in drag-and-drop.
             const documentDragStyles = Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
@@ -195,54 +229,112 @@ export const subscriptionsForRoot = (getTrackRoot) => __foldkitBrandViewResult((
                 const cursorStyle = document.createElement('style');
                 cursorStyle.textContent = '* { cursor: grabbing !important; }';
                 document.head.appendChild(cursorStyle);
-                return __foldkitBrandViewResult((cursorStyle), "@foldkit/ui/slider/index.js#anonymous~27");
+                return __foldkitBrandViewResult((cursorStyle), "@foldkit/ui/slider/index.js#anonymous~28");
             }), cursorStyle => __foldkitBrandViewResult((Effect.sync(() => {
                 document.documentElement.style.removeProperty('user-select');
                 document.documentElement.style.removeProperty('-webkit-user-select');
                 cursorStyle.remove();
-            })), "@foldkit/ui/slider/index.js#anonymous~28")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/ui/slider/index.js#anonymous~30")))), "@foldkit/ui/slider/index.js#anonymous~26"));
-            return __foldkitBrandViewResult((Stream.when(Stream.merge(pointerEvents, documentDragStyles), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/slider/index.js#anonymous~31")))), "@foldkit/ui/slider/index.js#dependenciesToStream");
+            })), "@foldkit/ui/slider/index.js#anonymous~29")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/ui/slider/index.js#anonymous~31")))), "@foldkit/ui/slider/index.js#anonymous~27"));
+            return __foldkitBrandViewResult((Stream.when(Stream.merge(pointerEvents, documentDragStyles), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/slider/index.js#anonymous~32")))), "@foldkit/ui/slider/index.js#dependenciesToStream");
         },
     }),
     dragEscape: entry({ dragActivity: DragActivity }, {
         modelToDependencies: model => (__foldkitBrandViewResult(({
             dragActivity: dragActivityFromModel(model),
         }), "@foldkit/ui/slider/index.js#modelToDependencies~2")),
-        dependenciesToStream: ({ dragActivity }) => __foldkitBrandViewResult((Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => __foldkitBrandViewResult((key === 'Escape'), "@foldkit/ui/slider/index.js#anonymous~32")), Stream.map(() => __foldkitBrandViewResult((Message.CancelledDrag()), "@foldkit/ui/slider/index.js#anonymous~33"))), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/slider/index.js#anonymous~34")))), "@foldkit/ui/slider/index.js#dependenciesToStream~2"),
+        dependenciesToStream: ({ dragActivity }) => __foldkitBrandViewResult((Stream.when(Stream.fromEventListener(document, 'keydown').pipe(Stream.filter(({ key }) => __foldkitBrandViewResult((key === 'Escape'), "@foldkit/ui/slider/index.js#anonymous~33")), Stream.map(() => __foldkitBrandViewResult((Message.CancelledDrag()), "@foldkit/ui/slider/index.js#anonymous~34"))), Effect.sync(() => __foldkitBrandViewResult((dragActivity === 'Active'), "@foldkit/ui/slider/index.js#anonymous~35")))), "@foldkit/ui/slider/index.js#dependenciesToStream~2"),
     }),
-}), "@foldkit/ui/slider/index.js#anonymous~20")))), "@foldkit/ui/slider/index.js#subscriptionsForRoot");
-/** Default drag subscriptions, with the track looked up via `document`. */
-export const subscriptions = subscriptionsForRoot(() => __foldkitBrandViewResult((document), "@foldkit/ui/slider/index.js#anonymous~35"));
+}), "@foldkit/ui/slider/index.js#anonymous~21")))), "@foldkit/ui/slider/index.js#subscriptionsForRoot");
+/** Default drag Subscriptions, with the track looked up via `document`. */
+export const subscriptions = subscriptionsForRoot(() => __foldkitBrandViewResult((document), "@foldkit/ui/slider/index.js#anonymous~36"));
 // VIEW
 const LEFT_MOUSE_BUTTON = 0;
 const labelId = (id) => __foldkitBrandViewResult((`${id}-label`), "@foldkit/ui/slider/index.js#labelId");
-const keyToDirection = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.whenOr('ArrowRight', 'ArrowUp', () => __foldkitBrandViewResult(('StepIncrement'), "@foldkit/ui/slider/index.js#anonymous~36")), Match.whenOr('ArrowLeft', 'ArrowDown', () => __foldkitBrandViewResult(('StepDecrement'), "@foldkit/ui/slider/index.js#anonymous~37")), Match.when('PageUp', () => __foldkitBrandViewResult(('PageIncrement'), "@foldkit/ui/slider/index.js#anonymous~38")), Match.when('PageDown', () => __foldkitBrandViewResult(('PageDecrement'), "@foldkit/ui/slider/index.js#anonymous~39")), Match.when('Home', () => __foldkitBrandViewResult(('Min'), "@foldkit/ui/slider/index.js#anonymous~40")), Match.when('End', () => __foldkitBrandViewResult(('Max'), "@foldkit/ui/slider/index.js#anonymous~41")), Match.option)), "@foldkit/ui/slider/index.js#keyToDirection");
-const percentString = (fraction) => __foldkitBrandViewResult((`${Math.round(fraction * 10000) / 100}%`), "@foldkit/ui/slider/index.js#percentString");
+const keyToDirection = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.whenOr('ArrowRight', 'ArrowUp', () => __foldkitBrandViewResult(('StepIncrement'), "@foldkit/ui/slider/index.js#anonymous~37")), Match.whenOr('ArrowLeft', 'ArrowDown', () => __foldkitBrandViewResult(('StepDecrement'), "@foldkit/ui/slider/index.js#anonymous~38")), Match.when('PageUp', () => __foldkitBrandViewResult(('PageIncrement'), "@foldkit/ui/slider/index.js#anonymous~39")), Match.when('PageDown', () => __foldkitBrandViewResult(('PageDecrement'), "@foldkit/ui/slider/index.js#anonymous~40")), Match.when('Home', () => __foldkitBrandViewResult(('Min'), "@foldkit/ui/slider/index.js#anonymous~41")), Match.when('End', () => __foldkitBrandViewResult(('Max'), "@foldkit/ui/slider/index.js#anonymous~42")), Match.option)), "@foldkit/ui/slider/index.js#keyToDirection");
+/** Direction in which the Slider lays out its track and maps pointer input. */
+export const Orientation = Schema.Literals(['Horizontal', 'Vertical']);
+/** Whether the thumb's center or outer edge aligns with the track endpoints. */
+export const ThumbAlignment = Schema.Literals(['Center', 'Edge']);
+const filledTrackStyle = (orientation, thumbAlignment, thumbSize, fraction) => __foldkitBrandViewResult((Match.value({ orientation, thumbAlignment }).pipe(Match.withReturnType(), Match.when({ orientation: 'Vertical', thumbAlignment: 'Center' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    right: '0',
+    height: percentageFromFraction(fraction),
+    width: '100%',
+    'pointer-events': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~43"))), Match.when({ orientation: 'Vertical', thumbAlignment: 'Edge' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    right: '0',
+    height: `calc((100% - ${thumbSize}) * ${fraction} + ${thumbSize} / 2)`,
+    width: '100%',
+    'pointer-events': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~44"))), Match.when({ orientation: 'Horizontal', thumbAlignment: 'Center' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    bottom: '0',
+    width: percentageFromFraction(fraction),
+    'pointer-events': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~45"))), Match.when({ orientation: 'Horizontal', thumbAlignment: 'Edge' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    bottom: '0',
+    width: `calc((100% - ${thumbSize}) * ${fraction} + ${thumbSize} / 2)`,
+    'pointer-events': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~46"))), Match.exhaustive)), "@foldkit/ui/slider/index.js#filledTrackStyle");
+const thumbStyle = (orientation, thumbAlignment, thumbSize, fraction) => __foldkitBrandViewResult((Match.value({ orientation, thumbAlignment }).pipe(Match.withReturnType(), Match.when({ orientation: 'Vertical', thumbAlignment: 'Center' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    bottom: percentageFromFraction(fraction),
+    left: '50%',
+    transform: 'translateX(-50%) translateY(50%)',
+    'touch-action': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~47"))), Match.when({ orientation: 'Vertical', thumbAlignment: 'Edge' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    bottom: `calc((100% - ${thumbSize}) * ${fraction})`,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    'touch-action': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~48"))), Match.when({ orientation: 'Horizontal', thumbAlignment: 'Center' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    left: percentageFromFraction(fraction),
+    transform: 'translateX(-50%)',
+    'touch-action': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~49"))), Match.when({ orientation: 'Horizontal', thumbAlignment: 'Edge' }, () => (__foldkitBrandViewResult(({
+    position: 'absolute',
+    left: `calc((100% - ${thumbSize}) * ${fraction})`,
+    'touch-action': 'none',
+}), "@foldkit/ui/slider/index.js#anonymous~50"))), Match.exhaustive)), "@foldkit/ui/slider/index.js#thumbStyle");
 /** Renders an accessible slider by building ARIA attribute groups and
  *  delegating layout to the consumer's `toView` callback. Follows the
  *  WAI-ARIA slider pattern: role="slider" on the thumb, aria-valuemin /
  *  aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
- *  end. Pointer drag is handled by the component's drag subscriptions. */
+ *  end. Pointer drag is handled by the Slider's drag Subscriptions. */
 export const view = defineView((model, viewInputs, h) => {
-    const { value, formatValue, isDisabled = false, isReadOnly = false, name, getTrackRoot = () => __foldkitBrandViewResult((document), "@foldkit/ui/slider/index.js#anonymous~43"), } = viewInputs;
+    const { value, formatValue, isDisabled = false, isReadOnly = false, name, orientation = 'Horizontal', thumbAlignment = 'Center', thumbSize = '0.75rem', getTrackRoot = () => __foldkitBrandViewResult((document), "@foldkit/ui/slider/index.js#anonymous~52"), } = viewInputs;
     const { id, min, max } = model;
     const isDragging = model.dragState._tag === 'Dragging';
     const fraction = fractionOfValue(value, min, max);
-    const handleKeyDown = (key) => __foldkitBrandViewResult((Option.map(keyToDirection(key), direction => __foldkitBrandViewResult((Message.PressedKeyboardNavigation({ direction, value })), "@foldkit/ui/slider/index.js#anonymous~44"))), "@foldkit/ui/slider/index.js#handleKeyDown");
-    const pointerAtClientX = (clientX) => __foldkitBrandViewResult((Option.map(trackElement(id, getTrackRoot()), element => __foldkitBrandViewResult((Message.PressedPointer({
-        value: valueFromClientX(clientX, element, min, max),
+    const handleKeyDown = (key) => __foldkitBrandViewResult((Option.map(keyToDirection(key), direction => __foldkitBrandViewResult((Message.PressedKeyboardNavigation({ direction, value })), "@foldkit/ui/slider/index.js#anonymous~53"))), "@foldkit/ui/slider/index.js#handleKeyDown");
+    const pressedPointerMessageAt = (clientX, clientY) => __foldkitBrandViewResult((Option.map(findTrackElement(id, getTrackRoot()), track => __foldkitBrandViewResult((Message.PressedPointer({
+        value: valueFromPointer(clientX, clientY, track, min, max),
         originValue: value,
-    })), "@foldkit/ui/slider/index.js#anonymous~45"))), "@foldkit/ui/slider/index.js#pointerAtClientX");
-    const trackPointerHandler = (_pointerType, button, _screenX, _screenY, _timeStamp, clientX) => __foldkitBrandViewResult((pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.flatMap(() => __foldkitBrandViewResult((pointerAtClientX(clientX)), "@foldkit/ui/slider/index.js#anonymous~46")))), "@foldkit/ui/slider/index.js#trackPointerHandler");
-    const thumbPointerHandler = (_pointerType, button) => __foldkitBrandViewResult((pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => __foldkitBrandViewResult((Message.PressedThumb({ originValue: value })), "@foldkit/ui/slider/index.js#anonymous~47")))), "@foldkit/ui/slider/index.js#thumbPointerHandler");
+    })), "@foldkit/ui/slider/index.js#anonymous~54"))), "@foldkit/ui/slider/index.js#pressedPointerMessageAt");
+    const trackPointerHandler = (_pointerType, button, _screenX, _screenY, _timeStamp, clientX, clientY) => __foldkitBrandViewResult((pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.flatMap(() => __foldkitBrandViewResult((pressedPointerMessageAt(clientX, clientY)), "@foldkit/ui/slider/index.js#anonymous~55")))), "@foldkit/ui/slider/index.js#trackPointerHandler");
+    const thumbPointerHandler = (_pointerType, button) => __foldkitBrandViewResult((pipe(button, Option.liftPredicate(Equal.equals(LEFT_MOUSE_BUTTON)), Option.map(() => __foldkitBrandViewResult((Message.PressedThumb({ originValue: value })), "@foldkit/ui/slider/index.js#anonymous~56")))), "@foldkit/ui/slider/index.js#thumbPointerHandler");
     const stateAttributes = [
         ...(isDragging ? [h.DataAttribute('dragging', '')] : []),
         ...(isDisabled ? [h.DataAttribute('disabled', '')] : []),
         ...(isReadOnly ? [h.DataAttribute('readonly', '')] : []),
     ];
+    const orientationAttributeValue = String.toLowerCase(orientation);
     const rootAttributes = [
         h.DataAttribute('slider-id', id),
-        h.DataAttribute('orientation', 'horizontal'),
+        h.DataAttribute('orientation', orientationAttributeValue),
+        h.DataAttribute(orientationAttributeValue, ''),
         ...stateAttributes,
     ];
     const isInteractive = !isDisabled && !isReadOnly;
@@ -251,33 +343,22 @@ export const view = defineView((model, viewInputs, h) => {
         : [];
     const trackAttributes = [
         h.DataAttribute('slider-track-id', id),
+        h.DataAttribute('orientation', orientationAttributeValue),
+        h.DataAttribute(orientationAttributeValue, ''),
+        h.DataAttribute('thumb-alignment', String.toLowerCase(thumbAlignment)),
         h.Style({ position: 'relative', 'touch-action': 'none' }),
         ...stateAttributes,
         ...trackInteractionAttributes,
     ];
     const filledTrackAttributes = [
-        h.Style({
-            position: 'absolute',
-            left: '0',
-            top: '0',
-            bottom: '0',
-            width: percentString(fraction),
-            'pointer-events': 'none',
-        }),
+        h.Style(filledTrackStyle(orientation, thumbAlignment, thumbSize, fraction)),
         ...stateAttributes,
     ];
-    const resolveThumbLabel = () => {
-        if (viewInputs.ariaLabel !== undefined) {
-            return __foldkitBrandViewResult(([h.AriaLabel(viewInputs.ariaLabel)]), "@foldkit/ui/slider/index.js#resolveThumbLabel");
-        }
-        else if (viewInputs.ariaLabelledBy !== undefined) {
-            return __foldkitBrandViewResult(([h.AriaLabelledBy(viewInputs.ariaLabelledBy)]), "@foldkit/ui/slider/index.js#resolveThumbLabel");
-        }
-        else {
-            return __foldkitBrandViewResult(([h.AriaLabelledBy(labelId(id))]), "@foldkit/ui/slider/index.js#resolveThumbLabel");
-        }
-    };
-    const thumbLabelAttributes = resolveThumbLabel();
+    const thumbLabelAttributes = accessibleNameAttributes({
+        ariaLabel: viewInputs.ariaLabel,
+        ariaLabelledBy: viewInputs.ariaLabelledBy,
+        fallbackLabelId: labelId(id),
+    }, h);
     const maybeAriaValuetext = formatValue !== undefined ? [h.AriaValuetext(formatValue(value))] : [];
     const thumbInteractionAttributes = isInteractive
         ? [
@@ -289,7 +370,7 @@ export const view = defineView((model, viewInputs, h) => {
         h.Id(`${id}-thumb`),
         h.Role('slider'),
         h.Tabindex(0),
-        h.AriaOrientation('horizontal'),
+        h.AriaOrientation(orientationAttributeValue),
         h.AriaValuemin(min),
         h.AriaValuemax(max),
         h.AriaValuenow(value),
@@ -297,12 +378,7 @@ export const view = defineView((model, viewInputs, h) => {
         ...thumbLabelAttributes,
         ...(isDisabled ? [h.AriaDisabled(true)] : []),
         ...(isReadOnly ? [h.AriaReadonly(true)] : []),
-        h.Style({
-            position: 'absolute',
-            left: percentString(fraction),
-            transform: 'translateX(-50%)',
-            'touch-action': 'none',
-        }),
+        h.Style(thumbStyle(orientation, thumbAlignment, thumbSize, fraction)),
         ...stateAttributes,
         ...thumbInteractionAttributes,
     ];
@@ -317,5 +393,5 @@ export const view = defineView((model, viewInputs, h) => {
         thumb: childAttributes(thumbAttributes),
         label: childAttributes(labelAttributes),
         hiddenInput: childAttributes(hiddenInputAttributes),
-    })), "@foldkit/ui/slider/index.js#anonymous~42");
+    })), "@foldkit/ui/slider/index.js#anonymous~51");
 });

package/dist/slider/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, reflectRange, view, subscriptions, subscriptionsForRoot, fractionOfValue, snapAndClamp, Model, Message, OutMessage, type PressedThumb, type PressedPointer, type MovedDragPointer, type ReleasedDragPointer, type CancelledDrag, type PressedKeyboardNavigation, } from './index.js';
+export { init, update, reflectRange, view, subscriptions, subscriptionsForRoot, fractionOfValue, snapAndClamp, valueFromPointer, Model, Message, Orientation, OutMessage, ThumbAlignment, type PressedThumb, type PressedPointer, type MovedDragPointer, type ReleasedDragPointer, type CancelledDrag, type PressedKeyboardNavigation, } from './index.js';
 export type { InitConfig, ViewInputs, SliderAttributes } from './index.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/slider/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/slider/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,KAAK,EACL,OAAO,EACP,UAAU,EACV,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,yBAAyB,GAC/B,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/slider/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,cAAc,EACd,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,yBAAyB,GAC/B,MAAM,YAAY,CAAA;AAEnB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA"}

package/dist/slider/public.js

@@ -1 +1 @@
-export { init, update, reflectRange, view, subscriptions, subscriptionsForRoot, fractionOfValue, snapAndClamp, Model, Message, OutMessage, } from './index.js';
+export { init, update, reflectRange, view, subscriptions, subscriptionsForRoot, fractionOfValue, snapAndClamp, valueFromPointer, Model, Message, Orientation, OutMessage, ThumbAlignment, } from './index.js';

package/dist/test/apps/disabledButton.d.ts

@@ -11,6 +11,7 @@ export declare const Model: Schema.Struct<{
             readonly id: Schema.String;
             readonly isShowing: Schema.Boolean;
             readonly transitionState: Schema.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+            readonly transitionGeneration: Schema.Number;
         }>;
         readonly maybeFocusSelector: Schema.Option<Schema.String>;
     }>;
@@ -34,8 +35,12 @@ export declare const Message: import("foldkit/message").MessageUnion<{
                 message: import("foldkit/message").MessageUnion<{
                     readonly Showed: {};
                     readonly Hid: {};
-                    readonly CompletedWaitForPaint: {};
-                    readonly EndedAnimation: {};
+                    readonly CompletedWaitForPaint: {
+                        generation: Schema.Number;
+                    };
+                    readonly EndedAnimation: {
+                        generation: Schema.Number;
+                    };
                 }>;
             };
         }>;
@@ -54,6 +59,7 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 readonly id: string;
                 readonly isShowing: boolean;
                 readonly transitionState: "EnterAnimating" | "EnterStart" | "Idle" | "LeaveAnimating" | "LeaveStart";
+                readonly transitionGeneration: number;
             };
             readonly maybeFocusSelector: Option.Option<string>;
         };
@@ -65,6 +71,10 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     } | {
         readonly _tag: "GotDialogMessage";
         readonly message: {
+            readonly _tag: "RequestedOpen";
+        } | {
+            readonly _tag: "RequestedClose";
+        } | {
             readonly _tag: "CompletedCloseDialog";
         } | {
             readonly _tag: "CompletedReleaseDialogResources";
@@ -76,17 +86,15 @@ export declare const update: (model: Model, message: Message) => Readonly<{
             readonly _tag: "GotAnimationMessage";
             readonly message: {
                 readonly _tag: "CompletedWaitForPaint";
+                readonly generation: number;
             } | {
                 readonly _tag: "EndedAnimation";
+                readonly generation: number;
             } | {
                 readonly _tag: "Hid";
             } | {
                 readonly _tag: "Showed";
             };
-        } | {
-            readonly _tag: "RequestedClose";
-        } | {
-            readonly _tag: "RequestedOpen";
         } | {
             readonly _tag: "SucceededAcquireResources";
         } | {

package/dist/test/apps/disabledButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disabledButton.d.ts","sourceRoot":"","sources":["../../../src/test/apps/disabledButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAGrD,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAMxC,eAAO,MAAM,KAAK;;;;;;;;;;;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,OAAO;;;;QAGE,OAAO;;;;;;;;;;;;;;;;;;;;EAC3B,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAoBD,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQjD,CAAA;AAeJ,qCAAqC;AACrC,eAAO,MAAM,IAAI,UAAW,KAAK,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAQ5D,CAAA;AAED,uDAAuD;AACvD,eAAO,MAAM,cAAc,UAAW,KAAK,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAyBtE,CAAA"}
+{"version":3,"file":"disabledButton.d.ts","sourceRoot":"","sources":["../../../src/test/apps/disabledButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAGrD,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAMxC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,OAAO;;;;QAGE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;EAC3B,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAoBD,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQjD,CAAA;AAeJ,qCAAqC;AACrC,eAAO,MAAM,IAAI,UAAW,KAAK,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAQ5D,CAAA;AAED,uDAAuD;AACvD,eAAO,MAAM,cAAc,UAAW,KAAK,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAyBtE,CAAA"}