@foldkit/ui 0.163.0-canary.c9e82fbb078a → 0.163.0-canary.ca7e5731a9f5

package/dist/slider/index.d.ts

@@ -3,11 +3,11 @@ import { type Update } from 'foldkit';
 import { type ChildAttribute, type Html } from 'foldkit/html';
 import { type Reflect } from 'foldkit/submodel';
 import * as Subscription from 'foldkit/subscription';
-/** 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 declare const Model: Schema.Struct<{
     readonly id: Schema.String;
     readonly min: Schema.Number;
@@ -21,7 +21,7 @@ export declare const Model: Schema.Struct<{
     }>;
 }>;
 export type Model = typeof Model.Type;
-/** Union of all messages the slider component can produce. */
+/** Union of all Messages the Slider can produce. */
 export declare const Message: import("foldkit/message").MessageUnion<{
     readonly PressedThumb: {
         originValue: Schema.Number;
@@ -47,25 +47,25 @@ export type MovedDragPointer = typeof Message.MovedDragPointer.Type;
 export type ReleasedDragPointer = typeof Message.ReleasedDragPointer.Type;
 export type CancelledDrag = typeof Message.CancelledDrag.Type;
 export type PressedKeyboardNavigation = typeof Message.PressedKeyboardNavigation.Type;
-/** 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 declare const OutMessage: import("foldkit/message").MessageUnion<{
     readonly ChangedValue: {
         value: Schema.Number;
     };
 }>;
 export type OutMessage = typeof OutMessage.Type;
-/** Configuration for creating a slider model with `init`. */
+/** Configuration for creating a Slider Model with `init`. */
 export type InitConfig = Readonly<{
     id: string;
     min: number;
     max: number;
     step: 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 declare const init: (config: InitConfig) => Model;
 /** 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 declare const snapAndClamp: (value: number, min: number, max: number, step: number) => number;
 /** Computes the fraction (0–1) of a value between min and max. Returns 0 when
@@ -121,10 +121,13 @@ export declare const reflectRange: Reflect<Model, Readonly<{
     min: number;
     max: number;
 }>>;
-/** 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 declare const valueFromPointer: (clientX: number, clientY: number, track: Element, min: number, max: number) => number;
+/** 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 declare const subscriptionsForRoot: (getTrackRoot: () => Document | ShadowRoot) => {
     readonly dragPointer: Subscription.EntryWithoutKeepAlive<{
         readonly id: string;
@@ -198,7 +201,7 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
         readonly __subscription: never;
     };
 };
-/** Default drag subscriptions, with the track looked up via `document`. */
+/** Default drag Subscriptions, with the track looked up via `document`. */
 export declare const subscriptions: {
     readonly dragPointer: Subscription.EntryWithoutKeepAlive<{
         readonly id: string;
@@ -272,8 +275,8 @@ export declare const subscriptions: {
         readonly __subscription: never;
     };
 };
-/** Attribute groups the slider component provides to the consumer's `toView`
- *  callback. Each bundle carries the boundary's captured dispatch, so the
+/** Attribute groups the Slider provides to the consumer's `toView`
+ *  callback. Each group carries the boundary's captured dispatch, so the
  *  consumer can spread it directly into element attributes without manual
  *  Message wrapping. */
 export type SliderAttributes = Readonly<{
@@ -284,12 +287,32 @@ export type SliderAttributes = Readonly<{
     label: ReadonlyArray<ChildAttribute>;
     hiddenInput: ReadonlyArray<ChildAttribute>;
 }>;
+/** Direction in which the Slider lays out its track and maps pointer input. */
+export declare const Orientation: Schema.Literals<readonly ["Horizontal", "Vertical"]>;
+export type Orientation = typeof Orientation.Type;
+/** Whether the thumb's center or outer edge aligns with the track endpoints. */
+export declare const ThumbAlignment: Schema.Literals<readonly ["Center", "Edge"]>;
+export type ThumbAlignment = typeof ThumbAlignment.Type;
 /** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
 export type ViewInputs = Readonly<{
     /** The current value, read straight from the parent Model. The thumb
      *  position, `aria-valuenow`, and the filled track all derive from it. */
     value: number;
     toView: (attributes: SliderAttributes) => Html;
+    /** Layout axis for the track, filled track, and thumb. Vertical Sliders
+     *  place `min` at the bottom and `max` at the top. */
+    orientation?: Orientation;
+    /** How the thumb aligns within the track. `Center` keeps the thumb's
+     *  center on the value point and lets it overflow by half its size at the
+     *  extremes, matching the Slider's previous behavior. `Edge` insets the
+     *  thumb's travel by `thumbSize` so it stays fully inside the track.
+     *  Defaults to `Center` so existing Sliders keep their geometry. */
+    thumbAlignment?: ThumbAlignment;
+    /** CSS length of the thumb along the track axis, used only when
+     *  `thumbAlignment` is `Edge` to inset the thumb's travel and align the
+     *  fill with the thumb's center. Set this to the size your `toView`
+     *  callback styles the thumb with. Defaults to `0.75rem`. */
+    thumbSize?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
     formatValue?: (value: number) => string;
@@ -309,17 +332,16 @@ export type ViewInputs = Readonly<{
      *  way. */
     isReadOnly?: boolean;
     name?: string;
-    /** Resolves the root that holds the slider track when looking it up by its
-     *  `data-slider-track-id` attribute. Defaults to `document`. Provide a
-     *  ShadowRoot when rendering the slider inside a shadow tree so pointer
-     *  events on the track can map clientX into a value. */
+    /** Resolves the DOM root containing the Slider track. Defaults to `document`.
+     *  Provide a ShadowRoot when rendering the Slider inside a shadow tree so pointer
+     *  events on the track can map the pointer position into a value. */
     getTrackRoot?: () => Document | ShadowRoot;
 }>;
 /** 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 declare const view: import("foldkit/submodel").View<{
     readonly id: string;
     readonly min: number;
@@ -354,6 +376,20 @@ export declare const view: import("foldkit/submodel").View<{
      *  position, `aria-valuenow`, and the filled track all derive from it. */
     value: number;
     toView: (attributes: SliderAttributes) => Html;
+    /** Layout axis for the track, filled track, and thumb. Vertical Sliders
+     *  place `min` at the bottom and `max` at the top. */
+    orientation?: Orientation;
+    /** How the thumb aligns within the track. `Center` keeps the thumb's
+     *  center on the value point and lets it overflow by half its size at the
+     *  extremes, matching the Slider's previous behavior. `Edge` insets the
+     *  thumb's travel by `thumbSize` so it stays fully inside the track.
+     *  Defaults to `Center` so existing Sliders keep their geometry. */
+    thumbAlignment?: ThumbAlignment;
+    /** CSS length of the thumb along the track axis, used only when
+     *  `thumbAlignment` is `Edge` to inset the thumb's travel and align the
+     *  fill with the thumb's center. Set this to the size your `toView`
+     *  callback styles the thumb with. Defaults to `0.75rem`. */
+    thumbSize?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
     formatValue?: (value: number) => string;
@@ -373,10 +409,9 @@ export declare const view: import("foldkit/submodel").View<{
      *  way. */
     isReadOnly?: boolean;
     name?: string;
-    /** Resolves the root that holds the slider track when looking it up by its
-     *  `data-slider-track-id` attribute. Defaults to `document`. Provide a
-     *  ShadowRoot when rendering the slider inside a shadow tree so pointer
-     *  events on the track can map clientX into a value. */
+    /** Resolves the DOM root containing the Slider track. Defaults to `document`.
+     *  Provide a ShadowRoot when rendering the Slider inside a shadow tree so pointer
+     *  events on the track can map the pointer position into a value. */
     getTrackRoot?: () => Document | ShadowRoot;
 }>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"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"}

package/dist/slider/index.js

@@ -6,17 +6,17 @@ 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 { attributeSelector, idSelector } from '../internal/selectors.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 +25,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 +48,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,
@@ -75,7 +75,7 @@ const roundToStepPrecision = (value, step) => {
 };
 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;
@@ -155,21 +155,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 +227,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 +238,113 @@ 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 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");
 const percentString = (fraction) => __foldkitBrandViewResult((`${Math.round(fraction * 10000) / 100}%`), "@foldkit/ui/slider/index.js#percentString");
+/** 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: percentString(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: percentString(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: percentString(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: percentString(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,19 +353,15 @@ 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 = () => {
@@ -289,7 +387,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 +395,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 +410,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/ui",
-  "version": "0.163.0-canary.c9e82fbb078a",
+  "version": "0.163.0-canary.ca7e5731a9f5",
   "description": "Headless, accessible UI components for Foldkit",
   "type": "module",
   "main": "./dist/index.js",
@@ -122,7 +122,7 @@
   ],
   "peerDependencies": {
     "effect": "4.0.0-rc.116",
-    "foldkit": "0.163.0-canary.c9e82fbb078a"
+    "foldkit": "0.163.0-canary.ca7e5731a9f5"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0"
@@ -134,8 +134,8 @@
     "rimraf": "^6.1.3",
     "typescript": "^7.0.2",
     "vitest": "^5.0.0",
-    "@foldkit/vite-plugin": "0.24.0-canary.c9e82fbb078a",
-    "foldkit": "0.163.0-canary.c9e82fbb078a"
+    "@foldkit/vite-plugin": "0.24.0-canary.ca7e5731a9f5",
+    "foldkit": "0.163.0-canary.ca7e5731a9f5"
   },
   "keywords": [
     "foldkit",