@foldkit/ui 0.162.0 → 0.163.0-canary.5401108272c3

package/dist/slider/index.js

@@ -3,20 +3,20 @@ import { Effect, Equal, Function, Match, Option, Schema, Stream, String, pipe, }
 import { childAttributes } from 'foldkit/html';
 import { defineMessageUnion } from 'foldkit/message';
 import { defineTaggedUnion } from 'foldkit/schema';
-import { evo } from 'foldkit/struct';
+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;
@@ -113,7 +113,7 @@ const withChangedValue = (model, currentValue, nextValue) => {
  *  Model. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     PressedThumb: ({ originValue }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~7"))), Match.orElse(() => (__foldkitBrandViewResult(({
-        model: evo(model, {
+        model: modifyFields(model, {
             dragState: () => __foldkitBrandViewResult((DragState.Dragging({ originValue })), "@foldkit/ui/slider/index.js#dragState"),
         }),
     }), "@foldkit/ui/slider/index.js#anonymous~8"))))), "@foldkit/ui/slider/index.js#PressedThumb"),
@@ -125,7 +125,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
     // off-center on a non-zero-width thumb.
     PressedPointer: ({ value, originValue }) => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~9"))), Match.orElse(() => {
         const snapped = snapAndClamp(value, model.min, model.max, model.step);
-        return __foldkitBrandViewResult((withChangedValue(evo(model, {
+        return __foldkitBrandViewResult((withChangedValue(modifyFields(model, {
             dragState: () => __foldkitBrandViewResult((DragState.Dragging({ originValue })), "@foldkit/ui/slider/index.js#dragState~2"),
         }), originValue, snapped)), "@foldkit/ui/slider/index.js#anonymous~10");
     }))), "@foldkit/ui/slider/index.js#PressedPointer"),
@@ -136,10 +136,10 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
         }),
     }), "@foldkit/ui/slider/index.js#anonymous~11"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~12"))))), "@foldkit/ui/slider/index.js#MovedDragPointer"),
     ReleasedDragPointer: () => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', () => (__foldkitBrandViewResult(({
-        model: evo(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/slider/index.js#dragState~3") }),
+        model: modifyFields(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/slider/index.js#dragState~3") }),
     }), "@foldkit/ui/slider/index.js#anonymous~13"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~14"))))), "@foldkit/ui/slider/index.js#ReleasedDragPointer"),
     CancelledDrag: () => __foldkitBrandViewResult((Match.value(model.dragState).pipe(withUpdateReturn, Match.tag('Dragging', ({ originValue }) => (__foldkitBrandViewResult(({
-        model: evo(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/slider/index.js#dragState~4") }),
+        model: modifyFields(model, { dragState: () => __foldkitBrandViewResult((DragState.Idle()), "@foldkit/ui/slider/index.js#dragState~4") }),
         outMessage: OutMessage.ChangedValue({ value: originValue }),
     }), "@foldkit/ui/slider/index.js#anonymous~15"))), Match.orElse(() => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/slider/index.js#anonymous~16"))))), "@foldkit/ui/slider/index.js#CancelledDrag"),
     PressedKeyboardNavigation: ({ direction, value }) => __foldkitBrandViewResult((withChangedValue(model, value, nextValueForDirection(value, model.min, model.max, model.step, direction))), "@foldkit/ui/slider/index.js#PressedKeyboardNavigation"),
@@ -148,28 +148,71 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
  *  derive from external state (e.g. a bounded buffer whose first/last index
  *  shifts over time). The parent owns the value, so conform it to the new range
  *  in the same update with {@link snapAndClamp}. */
-export const reflectRange = Function.dual(2, (model, range) => __foldkitBrandViewResult((evo(model, {
+export const reflectRange = Function.dual(2, (model, range) => __foldkitBrandViewResult((modifyFields(model, {
     min: () => __foldkitBrandViewResult((range.min), "@foldkit/ui/slider/index.js#min"),
     max: () => __foldkitBrandViewResult((range.max), "@foldkit/ui/slider/index.js#max"),
 })), "@foldkit/ui/slider/index.js#anonymous~17"));
 // 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/dist/switch/index.d.ts

@@ -67,7 +67,7 @@ export declare const descriptionId: (id: string) => string;
  *
  *  // In update:
  *  ToggledNotifications: ({ isChecked }) => ({
- *    model: evo(model, { notificationsEnabled: () => isChecked }),
+ *    model: modifyFields(model, { notificationsEnabled: () => isChecked }),
  *  }),
  *  ``` */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/switch/index.js

@@ -22,7 +22,7 @@ export const descriptionId = (id) => __foldkitBrandViewResult((`${id}-descriptio
  *
  *  // In update:
  *  ToggledNotifications: ({ isChecked }) => ({
- *    model: evo(model, { notificationsEnabled: () => isChecked }),
+ *    model: modifyFields(model, { notificationsEnabled: () => isChecked }),
  *  }),
  *  ``` */
 export const view = (config, h) => {

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

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

package/dist/tabs/index.js

@@ -4,7 +4,7 @@ import * as Command from 'foldkit/command';
 import * as Dom from 'foldkit/dom';
 import { childAttributes } from 'foldkit/html';
 import { defineMessageUnion } from 'foldkit/message';
-import { evo } from 'foldkit/struct';
+import { modifyFields } from 'foldkit/struct';
 import { defineView } from 'foldkit/submodel';
 import { idSelector } from '../internal/selectors.js';
 import { keyToIndex } from '../keyboard.js';
@@ -65,12 +65,14 @@ export const FocusTab = Command.define('FocusTab', {
  *  `selectedValue`. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     SelectedTab: ({ index, value }) => (__foldkitBrandViewResult(({
-        model: evo(model, { maybeFocusedIndex: () => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/tabs/index.js#maybeFocusedIndex") }),
+        model: modifyFields(model, { maybeFocusedIndex: () => __foldkitBrandViewResult((Option.none()), "@foldkit/ui/tabs/index.js#maybeFocusedIndex") }),
         commands: [FocusTab({ id: model.id, index })],
         outMessage: OutMessage.Selected({ value, index }),
     }), "@foldkit/ui/tabs/index.js#SelectedTab")),
     FocusedTab: ({ index }) => (__foldkitBrandViewResult(({
-        model: evo(model, { maybeFocusedIndex: () => __foldkitBrandViewResult((Option.some(index)), "@foldkit/ui/tabs/index.js#maybeFocusedIndex~2") }),
+        model: modifyFields(model, {
+            maybeFocusedIndex: () => __foldkitBrandViewResult((Option.some(index)), "@foldkit/ui/tabs/index.js#maybeFocusedIndex~2"),
+        }),
         commands: [FocusTab({ id: model.id, index })],
     }), "@foldkit/ui/tabs/index.js#FocusedTab")),
     CompletedFocusTab: () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/tabs/index.js#CompletedFocusTab")),

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

@@ -65,10 +65,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     } | {
         readonly _tag: "GotDialogMessage";
         readonly message: {
-            readonly _tag: "RequestedClose";
-        } | {
-            readonly _tag: "RequestedOpen";
-        } | {
             readonly _tag: "CompletedCloseDialog";
         } | {
             readonly _tag: "CompletedReleaseDialogResources";
@@ -87,6 +83,10 @@ export declare const update: (model: Model, message: Message) => Readonly<{
             } | {
                 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;AAmBD,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"}

package/dist/test/apps/disabledButton.js

@@ -1,7 +1,7 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Option, Schema } from 'effect';
 import { defineMessageUnion } from 'foldkit/message';
-import { evo } from 'foldkit/struct';
+import { modifyFields } from 'foldkit/struct';
 import * as Update from 'foldkit/update';
 import * as Dialog from '../../dialog/index.js';
 // MODEL
@@ -28,13 +28,13 @@ const foldDialogOutMessage = Dialog.OutMessage.match({
 const foldDialog = Update.foldChild({
     update: Dialog.update,
     read: (model) => __foldkitBrandViewResult((Option.some(model.dialog)), "@foldkit/ui/test/apps/disabledButton.js#read"),
-    write: (model, nextDialog) => __foldkitBrandViewResult((evo(model, { dialog: () => __foldkitBrandViewResult((nextDialog), "@foldkit/ui/test/apps/disabledButton.js#dialog") })), "@foldkit/ui/test/apps/disabledButton.js#write"),
+    write: (model, nextDialog) => __foldkitBrandViewResult((modifyFields(model, { dialog: () => __foldkitBrandViewResult((nextDialog), "@foldkit/ui/test/apps/disabledButton.js#dialog") })), "@foldkit/ui/test/apps/disabledButton.js#write"),
     toParentMessage: message => __foldkitBrandViewResult((Message.GotDialogMessage({ message })), "@foldkit/ui/test/apps/disabledButton.js#toParentMessage"),
     foldOutMessage: foldDialogOutMessage,
 });
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     ClickedToggle: () => (__foldkitBrandViewResult(({
-        model: evo(model, { isEnabled: isEnabled => __foldkitBrandViewResult((!isEnabled), "@foldkit/ui/test/apps/disabledButton.js#isEnabled") }),
+        model: modifyFields(model, { isEnabled: isEnabled => __foldkitBrandViewResult((!isEnabled), "@foldkit/ui/test/apps/disabledButton.js#isEnabled") }),
     }), "@foldkit/ui/test/apps/disabledButton.js#ClickedToggle")),
     ClickedSubmit: () => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/test/apps/disabledButton.js#ClickedSubmit")),
     GotDialogMessage: ({ message: dialogMessage }) => __foldkitBrandViewResult((foldDialog(model, dialogMessage)), "@foldkit/ui/test/apps/disabledButton.js#GotDialogMessage"),