@foldkit/ui 0.163.0 → 0.164.0-canary.9f851d747bdd

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/dist/anchor/anchor.d.ts +33 -7
  2. package/dist/anchor/anchor.d.ts.map +1 -1
  3. package/dist/anchor/anchor.js +92 -14
  4. package/dist/anchor/public.d.ts +1 -1
  5. package/dist/anchor/public.d.ts.map +1 -1
  6. package/dist/anchor/public.js +1 -1
  7. package/dist/animation/index.d.ts +3 -0
  8. package/dist/animation/index.d.ts.map +1 -1
  9. package/dist/animation/schema.d.ts +13 -4
  10. package/dist/animation/schema.d.ts.map +1 -1
  11. package/dist/animation/schema.js +8 -4
  12. package/dist/animation/update.d.ts +15 -5
  13. package/dist/animation/update.d.ts.map +1 -1
  14. package/dist/animation/update.js +56 -28
  15. package/dist/combobox/multi.d.ts +5 -0
  16. package/dist/combobox/multi.d.ts.map +1 -1
  17. package/dist/combobox/shared.d.ts +19 -7
  18. package/dist/combobox/shared.d.ts.map +1 -1
  19. package/dist/combobox/shared.js +13 -13
  20. package/dist/combobox/single.d.ts +5 -0
  21. package/dist/combobox/single.d.ts.map +1 -1
  22. package/dist/datePicker/index.d.ts +13 -2
  23. package/dist/datePicker/index.d.ts.map +1 -1
  24. package/dist/dialog/index.d.ts +13 -2
  25. package/dist/dialog/index.d.ts.map +1 -1
  26. package/dist/dialog/index.js +22 -8
  27. package/dist/index.d.ts +2 -0
  28. package/dist/index.d.ts.map +1 -1
  29. package/dist/index.js +2 -0
  30. package/dist/internal/accessibleName.d.ts +9 -0
  31. package/dist/internal/accessibleName.d.ts.map +1 -0
  32. package/dist/internal/accessibleName.js +12 -0
  33. package/dist/internal/range.d.ts +7 -0
  34. package/dist/internal/range.d.ts.map +1 -0
  35. package/dist/internal/range.js +12 -0
  36. package/dist/listbox/multi.d.ts +5 -0
  37. package/dist/listbox/multi.d.ts.map +1 -1
  38. package/dist/listbox/shared.d.ts +15 -4
  39. package/dist/listbox/shared.d.ts.map +1 -1
  40. package/dist/listbox/shared.js +12 -11
  41. package/dist/listbox/single.d.ts +5 -0
  42. package/dist/listbox/single.d.ts.map +1 -1
  43. package/dist/menu/index.d.ts +16 -4
  44. package/dist/menu/index.d.ts.map +1 -1
  45. package/dist/menu/index.js +12 -11
  46. package/dist/meter/index.d.ts +26 -0
  47. package/dist/meter/index.d.ts.map +1 -0
  48. package/dist/meter/index.js +67 -0
  49. package/dist/meter/public.d.ts +3 -0
  50. package/dist/meter/public.d.ts.map +1 -0
  51. package/dist/meter/public.js +1 -0
  52. package/dist/popover/index.d.ts +20 -4
  53. package/dist/popover/index.d.ts.map +1 -1
  54. package/dist/popover/index.js +8 -8
  55. package/dist/progress/index.d.ts +24 -0
  56. package/dist/progress/index.d.ts.map +1 -0
  57. package/dist/progress/index.js +85 -0
  58. package/dist/progress/public.d.ts +3 -0
  59. package/dist/progress/public.d.ts.map +1 -0
  60. package/dist/progress/public.js +1 -0
  61. package/dist/slider/index.d.ts +61 -28
  62. package/dist/slider/index.d.ts.map +1 -1
  63. package/dist/slider/index.js +157 -81
  64. package/dist/slider/public.d.ts +1 -1
  65. package/dist/slider/public.d.ts.map +1 -1
  66. package/dist/slider/public.js +1 -1
  67. package/dist/test/apps/disabledButton.d.ts +14 -6
  68. package/dist/test/apps/disabledButton.d.ts.map +1 -1
  69. package/dist/toast/index.d.ts +89 -44
  70. package/dist/toast/index.d.ts.map +1 -1
  71. package/dist/toast/schema.d.ts +15 -4
  72. package/dist/toast/schema.d.ts.map +1 -1
  73. package/dist/toast/test.d.ts +6 -0
  74. package/dist/toast/test.d.ts.map +1 -1
  75. package/dist/toast/test.js +36 -2
  76. package/dist/toast/update.d.ts +42 -2
  77. package/dist/toast/update.d.ts.map +1 -1
  78. package/dist/tooltip/tooltip.d.ts +7 -7
  79. package/package.json +9 -9
@@ -8,7 +8,7 @@ import * as Mount from 'foldkit/mount';
8
8
  import { modifyFields } from 'foldkit/struct';
9
9
  import { defineView } from 'foldkit/submodel';
10
10
  import * as Update from 'foldkit/update';
11
- import { AnchorConfig, anchorSetup, portalToContainingRoot, } from '../anchor/index.js';
11
+ import { AnchorConfig, anchorSetup, portalBackdrop } from '../anchor/index.js';
12
12
  // NOTE: Animation imports are split across schema + update to avoid a circular
13
13
  // dependency: animation → html → runtime → devtools → popover → animation.
14
14
  // The barrel (../animation) imports from html, which starts the cycle.
@@ -122,18 +122,18 @@ export const FocusButton = Command.define('FocusButton', {
122
122
  });
123
123
  /** Detects whether the popover button moved or the leave animation ended. Whichever comes first; both outcomes signal the Animation submodel that leave is complete. */
124
124
  export const DetectMovementOrAnimationEnd = Command.define('DetectMovementOrAnimationEnd', {
125
- args: { id: Schema.String },
125
+ args: { id: Schema.String, generation: Schema.Number },
126
126
  messages: [Message.GotAnimationMessage],
127
- execute: ({ id }) => __foldkitBrandViewResult((Effect.raceFirst(Dom.detectElementMovement(buttonSelector(id)).pipe(Effect.as(Message.GotAnimationMessage({
128
- message: Animation.Message.EndedAnimation(),
127
+ execute: ({ id, generation }) => __foldkitBrandViewResult((Effect.raceFirst(Dom.detectElementMovement(buttonSelector(id)).pipe(Effect.as(Message.GotAnimationMessage({
128
+ message: Animation.Message.EndedAnimation({ generation }),
129
129
  }))), Dom.waitForAnimationSettled(panelSelector(id)).pipe(Effect.as(Message.GotAnimationMessage({
130
- message: Animation.Message.EndedAnimation(),
130
+ message: Animation.Message.EndedAnimation({ generation }),
131
131
  }))))), "@foldkit/ui/popover/index.js#execute~5"),
132
132
  });
133
133
  const foldAnimationOutMessage = Animation.OutMessage.match({
134
- StartedLeaveAnimating: () => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
134
+ StartedLeaveAnimating: ({ generation }) => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
135
135
  model,
136
- commands: [DetectMovementOrAnimationEnd({ id: model.id })],
136
+ commands: [DetectMovementOrAnimationEnd({ id: model.id, generation })],
137
137
  }), "@foldkit/ui/popover/index.js#anonymous"))), "@foldkit/ui/popover/index.js#StartedLeaveAnimating"),
138
138
  TransitionedOut: () => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({ model }), "@foldkit/ui/popover/index.js#anonymous~2"))), "@foldkit/ui/popover/index.js#TransitionedOut"),
139
139
  });
@@ -286,7 +286,7 @@ export const AnchorPopover = Mount.define('AnchorPopover', {
286
286
  export const PortalPopoverBackdrop = Mount.define('PortalPopoverBackdrop', {
287
287
  messages: [Message.CompletedPortalPopoverBackdrop],
288
288
  execute: ({ element }) => __foldkitBrandViewResult((Effect.gen(function* () {
289
- yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((portalToContainingRoot(element)), "@foldkit/ui/popover/index.js#anonymous~12")), cleanup => __foldkitBrandViewResult((Effect.sync(cleanup)), "@foldkit/ui/popover/index.js#anonymous~13"));
289
+ yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((portalBackdrop(element)), "@foldkit/ui/popover/index.js#anonymous~12")), cleanup => __foldkitBrandViewResult((Effect.sync(cleanup)), "@foldkit/ui/popover/index.js#anonymous~13"));
290
290
  return __foldkitBrandViewResult((Message.CompletedPortalPopoverBackdrop()), "@foldkit/ui/popover/index.js#anonymous~11");
291
291
  })), "@foldkit/ui/popover/index.js#execute~7"),
292
292
  });
@@ -0,0 +1,24 @@
1
+ import type { Attribute, Html, HtmlBuilder } from 'foldkit/html';
2
+ /** Attribute groups provided to a Progress view. */
3
+ export type ProgressAttributes<Message> = Readonly<{
4
+ progress: ReadonlyArray<Attribute<Message>>;
5
+ label: ReadonlyArray<Attribute<Message>>;
6
+ track: ReadonlyArray<Attribute<Message>>;
7
+ indicator: ReadonlyArray<Attribute<Message>>;
8
+ }>;
9
+ /** Configuration for rendering Progress with {@link view}. */
10
+ export type ViewConfig<Message> = Readonly<{
11
+ id: string;
12
+ value?: number;
13
+ min?: number;
14
+ max?: number;
15
+ valueText?: string | ((value: number, max: number) => string);
16
+ ariaLabel?: string;
17
+ ariaLabelledBy?: string;
18
+ toView: (attributes: ProgressAttributes<Message>) => Html;
19
+ }>;
20
+ /** Returns the label element id, derived from the progress base id. */
21
+ export declare const labelId: (id: string) => string;
22
+ /** Renders an accessible progress indicator as a stateless controlled view. */
23
+ export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
24
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/progress/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAYhE,oDAAoD;AACpD,MAAM,MAAM,kBAAkB,CAAC,OAAO,IAAI,QAAQ,CAAC;IACjD,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAC3C,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACxC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACxC,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;CAC7C,CAAC,CAAA;AAEF,8DAA8D;AAC9D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;CAC1D,CAAC,CAAA;AAEF,uEAAuE;AACvE,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAA;AAE5D,+EAA+E;AAC/E,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,CAAC,OAAO,CAAC,KACxB,WAAW,CAAC,OAAO,CAAC,KACtB,IAuFF,CAAA"}
@@ -0,0 +1,85 @@
1
+ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
2
+ import { Predicate } from 'effect';
3
+ import { accessibleNameAttributes } from '../internal/accessibleName.js';
4
+ import { clamp, fractionOfValue, normalizeRangeMax, percentageFromFraction, } from '../internal/range.js';
5
+ /** Returns the label element id, derived from the progress base id. */
6
+ export const labelId = (id) => __foldkitBrandViewResult((`${id}-label`), "@foldkit/ui/progress/index.js#labelId");
7
+ /** Renders an accessible progress indicator as a stateless controlled view. */
8
+ export const view = (config, h) => {
9
+ const min = config.min ?? 0;
10
+ const max = normalizeRangeMax(min, config.max ?? 100);
11
+ const accessibleName = accessibleNameAttributes({
12
+ ariaLabel: config.ariaLabel,
13
+ ariaLabelledBy: config.ariaLabelledBy,
14
+ fallbackLabelId: labelId(config.id),
15
+ }, h);
16
+ const visibleLabelAttributes = [
17
+ h.Id(labelId(config.id)),
18
+ ];
19
+ const resolveDeterminateValueTextAttributes = (clampedValue) => {
20
+ if (config.valueText === undefined) {
21
+ return __foldkitBrandViewResult(([]), "@foldkit/ui/progress/index.js#resolveDeterminateValueTextAttributes");
22
+ }
23
+ else if (Predicate.isString(config.valueText)) {
24
+ return __foldkitBrandViewResult(([h.AriaValuetext(config.valueText)]), "@foldkit/ui/progress/index.js#resolveDeterminateValueTextAttributes");
25
+ }
26
+ else {
27
+ return __foldkitBrandViewResult(([h.AriaValuetext(config.valueText(clampedValue, max))]), "@foldkit/ui/progress/index.js#resolveDeterminateValueTextAttributes");
28
+ }
29
+ };
30
+ if (config.value === undefined) {
31
+ const stateAttributes = [
32
+ h.DataAttribute('state', 'indeterminate'),
33
+ h.DataAttribute('indeterminate', ''),
34
+ ];
35
+ const valueTextAttributes = Predicate.isString(config.valueText)
36
+ ? [h.AriaValuetext(config.valueText)]
37
+ : [];
38
+ const progressAttributes = [
39
+ h.Id(config.id),
40
+ h.Role('progressbar'),
41
+ ...valueTextAttributes,
42
+ ...accessibleName,
43
+ ...stateAttributes,
44
+ ];
45
+ return __foldkitBrandViewResult((config.toView({
46
+ progress: progressAttributes,
47
+ label: visibleLabelAttributes,
48
+ track: stateAttributes,
49
+ indicator: stateAttributes,
50
+ })), "@foldkit/ui/progress/index.js#view");
51
+ }
52
+ else {
53
+ const clampedValue = clamp(config.value, min, max);
54
+ const fraction = fractionOfValue(clampedValue, min, max);
55
+ const state = clampedValue >= max ? 'complete' : 'loading';
56
+ const stateAttributes = [h.DataAttribute('state', state)];
57
+ const valueAttributes = [
58
+ h.DataAttribute('value', String(clampedValue)),
59
+ h.DataAttribute('min', String(min)),
60
+ h.DataAttribute('max', String(max)),
61
+ ];
62
+ const progressAttributes = [
63
+ h.Id(config.id),
64
+ h.Role('progressbar'),
65
+ h.AriaValuemin(min),
66
+ h.AriaValuemax(max),
67
+ h.AriaValuenow(clampedValue),
68
+ ...resolveDeterminateValueTextAttributes(clampedValue),
69
+ ...accessibleName,
70
+ ...valueAttributes,
71
+ ...stateAttributes,
72
+ ];
73
+ const indicatorAttributes = [
74
+ h.Style({ width: percentageFromFraction(fraction) }),
75
+ ...valueAttributes,
76
+ ...stateAttributes,
77
+ ];
78
+ return __foldkitBrandViewResult((config.toView({
79
+ progress: progressAttributes,
80
+ label: visibleLabelAttributes,
81
+ track: stateAttributes,
82
+ indicator: indicatorAttributes,
83
+ })), "@foldkit/ui/progress/index.js#view");
84
+ }
85
+ };
@@ -0,0 +1,3 @@
1
+ export { view, labelId } from './index.js';
2
+ export type { ViewConfig, ProgressAttributes } from './index.js';
3
+ //# sourceMappingURL=public.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/progress/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE1C,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA"}
@@ -0,0 +1 @@
1
+ export { view, labelId } from './index.js';
@@ -3,11 +3,12 @@ import { type Update } from 'foldkit';
3
3
  import { type ChildAttribute, type Html } from 'foldkit/html';
4
4
  import { type Reflect } from 'foldkit/submodel';
5
5
  import * as Subscription from 'foldkit/subscription';
6
- /** Schema for the slider component's private interaction state. The current
6
+ export { fractionOfValue } from '../internal/range.js';
7
+ /** Schema for the Slider's private interaction state. The current
7
8
  * value is owned by the parent and passed in via `ViewInputs.value`, so it is
8
- * not stored here. `min`/`max`/`step` are configuration the drag subscription
9
- * reads to map pointer positions into values. `dragState` tracks the active
10
- * drag phase and captures the pre-drag value so Escape can restore it. */
9
+ * not stored here. `min`, `max`, and `step` configure how the drag Subscription
10
+ * maps pointer positions into values. `dragState` tracks the active drag phase
11
+ * and captures the pre-drag value so Escape can restore it. */
11
12
  export declare const Model: Schema.Struct<{
12
13
  readonly id: Schema.String;
13
14
  readonly min: Schema.Number;
@@ -21,7 +22,7 @@ export declare const Model: Schema.Struct<{
21
22
  }>;
22
23
  }>;
23
24
  export type Model = typeof Model.Type;
24
- /** Union of all messages the slider component can produce. */
25
+ /** Union of all Messages the Slider can produce. */
25
26
  export declare const Message: import("foldkit/message").MessageUnion<{
26
27
  readonly PressedThumb: {
27
28
  originValue: Schema.Number;
@@ -47,30 +48,27 @@ export type MovedDragPointer = typeof Message.MovedDragPointer.Type;
47
48
  export type ReleasedDragPointer = typeof Message.ReleasedDragPointer.Type;
48
49
  export type CancelledDrag = typeof Message.CancelledDrag.Type;
49
50
  export type PressedKeyboardNavigation = typeof Message.PressedKeyboardNavigation.Type;
50
- /** Union of all out-messages the slider component can emit to its parent. */
51
+ /** Union of all OutMessages the Slider can emit to its parent. */
51
52
  export declare const OutMessage: import("foldkit/message").MessageUnion<{
52
53
  readonly ChangedValue: {
53
54
  value: Schema.Number;
54
55
  };
55
56
  }>;
56
57
  export type OutMessage = typeof OutMessage.Type;
57
- /** Configuration for creating a slider model with `init`. */
58
+ /** Configuration for creating a Slider Model with `init`. */
58
59
  export type InitConfig = Readonly<{
59
60
  id: string;
60
61
  min: number;
61
62
  max: number;
62
63
  step: number;
63
64
  }>;
64
- /** Creates an initial slider model from a config. The value lives in the
65
+ /** Creates an initial Slider Model from a config. The value lives in the
65
66
  * parent Model; initialize it there and snap it with {@link snapAndClamp}. */
66
67
  export declare const init: (config: InitConfig) => Model;
67
68
  /** Snaps a value to the nearest step and clamps it into `[min, max]`. Exported
68
- * so a parent can conform the value it owns to the slider's range, for example
69
+ * so a parent can conform the value it owns to the Slider's range, for example
69
70
  * when seeding the initial value or reacting to an external update. */
70
71
  export declare const snapAndClamp: (value: number, min: number, max: number, step: number) => number;
71
- /** Computes the fraction (0–1) of a value between min and max. Returns 0 when
72
- * the range has zero width. */
73
- export declare const fractionOfValue: (value: number, min: number, max: number) => number;
74
72
  /** Processes a Slider Message and returns the next Model, optional Commands,
75
73
  * and an optional OutMessage for the parent. The value lives in the parent
76
74
  * Model: the view supplies the current value on the Messages that need it,
@@ -121,10 +119,13 @@ export declare const reflectRange: Reflect<Model, Readonly<{
121
119
  min: number;
122
120
  max: number;
123
121
  }>>;
124
- /** Builds slider drag subscriptions, looking up the track
125
- * element through the supplied root resolver. Use this when the slider is
126
- * rendered inside a Shadow DOM. The root is read lazily so consumers can
127
- * resolve it at subscription time. */
122
+ /** Maps a pointer position to a Slider value. Vertical tracks place `min` at
123
+ * the bottom and `max` at the top. Edge-aligned tracks measure the rendered
124
+ * thumb and map the pointer across the same inset range it travels through. */
125
+ export declare const valueFromPointer: (clientX: number, clientY: number, track: Element, min: number, max: number) => number;
126
+ /** Builds Slider drag Subscriptions that find the track through the supplied
127
+ * root resolver. Use this when the Slider is rendered inside a Shadow DOM.
128
+ * The resolver runs at subscription time. */
128
129
  export declare const subscriptionsForRoot: (getTrackRoot: () => Document | ShadowRoot) => {
129
130
  readonly dragPointer: Subscription.EntryWithoutKeepAlive<{
130
131
  readonly id: string;
@@ -198,7 +199,7 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
198
199
  readonly __subscription: never;
199
200
  };
200
201
  };
201
- /** Default drag subscriptions, with the track looked up via `document`. */
202
+ /** Default drag Subscriptions, with the track looked up via `document`. */
202
203
  export declare const subscriptions: {
203
204
  readonly dragPointer: Subscription.EntryWithoutKeepAlive<{
204
205
  readonly id: string;
@@ -272,8 +273,8 @@ export declare const subscriptions: {
272
273
  readonly __subscription: never;
273
274
  };
274
275
  };
275
- /** Attribute groups the slider component provides to the consumer's `toView`
276
- * callback. Each bundle carries the boundary's captured dispatch, so the
276
+ /** Attribute groups the Slider provides to the consumer's `toView`
277
+ * callback. Each group carries the boundary's captured dispatch, so the
277
278
  * consumer can spread it directly into element attributes without manual
278
279
  * Message wrapping. */
279
280
  export type SliderAttributes = Readonly<{
@@ -284,12 +285,32 @@ export type SliderAttributes = Readonly<{
284
285
  label: ReadonlyArray<ChildAttribute>;
285
286
  hiddenInput: ReadonlyArray<ChildAttribute>;
286
287
  }>;
288
+ /** Direction in which the Slider lays out its track and maps pointer input. */
289
+ export declare const Orientation: Schema.Literals<readonly ["Horizontal", "Vertical"]>;
290
+ export type Orientation = typeof Orientation.Type;
291
+ /** Whether the thumb's center or outer edge aligns with the track endpoints. */
292
+ export declare const ThumbAlignment: Schema.Literals<readonly ["Center", "Edge"]>;
293
+ export type ThumbAlignment = typeof ThumbAlignment.Type;
287
294
  /** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
288
295
  export type ViewInputs = Readonly<{
289
296
  /** The current value, read straight from the parent Model. The thumb
290
297
  * position, `aria-valuenow`, and the filled track all derive from it. */
291
298
  value: number;
292
299
  toView: (attributes: SliderAttributes) => Html;
300
+ /** Layout axis for the track, filled track, and thumb. Vertical Sliders
301
+ * place `min` at the bottom and `max` at the top. */
302
+ orientation?: Orientation;
303
+ /** How the thumb aligns within the track. `Center` keeps the thumb's
304
+ * center on the value point and lets it overflow by half its size at the
305
+ * extremes, matching the Slider's previous behavior. `Edge` insets the
306
+ * thumb's travel by `thumbSize` so it stays fully inside the track.
307
+ * Defaults to `Center` so existing Sliders keep their geometry. */
308
+ thumbAlignment?: ThumbAlignment;
309
+ /** CSS length of the thumb along the track axis, used only when
310
+ * `thumbAlignment` is `Edge` to inset the thumb's travel and align the
311
+ * fill with the thumb's center. Set this to the size your `toView`
312
+ * callback styles the thumb with. Defaults to `0.75rem`. */
313
+ thumbSize?: string;
293
314
  ariaLabel?: string;
294
315
  ariaLabelledBy?: string;
295
316
  formatValue?: (value: number) => string;
@@ -309,17 +330,16 @@ export type ViewInputs = Readonly<{
309
330
  * way. */
310
331
  isReadOnly?: boolean;
311
332
  name?: string;
312
- /** Resolves the root that holds the slider track when looking it up by its
313
- * `data-slider-track-id` attribute. Defaults to `document`. Provide a
314
- * ShadowRoot when rendering the slider inside a shadow tree so pointer
315
- * events on the track can map clientX into a value. */
333
+ /** Resolves the DOM root containing the Slider track. Defaults to `document`.
334
+ * Provide a ShadowRoot when rendering the Slider inside a shadow tree so pointer
335
+ * events on the track can map the pointer position into a value. */
316
336
  getTrackRoot?: () => Document | ShadowRoot;
317
337
  }>;
318
338
  /** Renders an accessible slider by building ARIA attribute groups and
319
339
  * delegating layout to the consumer's `toView` callback. Follows the
320
340
  * WAI-ARIA slider pattern: role="slider" on the thumb, aria-valuemin /
321
341
  * aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
322
- * end. Pointer drag is handled by the component's drag subscriptions. */
342
+ * end. Pointer drag is handled by the Slider's drag Subscriptions. */
323
343
  export declare const view: import("foldkit/submodel").View<{
324
344
  readonly id: string;
325
345
  readonly min: number;
@@ -354,6 +374,20 @@ export declare const view: import("foldkit/submodel").View<{
354
374
  * position, `aria-valuenow`, and the filled track all derive from it. */
355
375
  value: number;
356
376
  toView: (attributes: SliderAttributes) => Html;
377
+ /** Layout axis for the track, filled track, and thumb. Vertical Sliders
378
+ * place `min` at the bottom and `max` at the top. */
379
+ orientation?: Orientation;
380
+ /** How the thumb aligns within the track. `Center` keeps the thumb's
381
+ * center on the value point and lets it overflow by half its size at the
382
+ * extremes, matching the Slider's previous behavior. `Edge` insets the
383
+ * thumb's travel by `thumbSize` so it stays fully inside the track.
384
+ * Defaults to `Center` so existing Sliders keep their geometry. */
385
+ thumbAlignment?: ThumbAlignment;
386
+ /** CSS length of the thumb along the track axis, used only when
387
+ * `thumbAlignment` is `Edge` to inset the thumb's travel and align the
388
+ * fill with the thumb's center. Set this to the size your `toView`
389
+ * callback styles the thumb with. Defaults to `0.75rem`. */
390
+ thumbSize?: string;
357
391
  ariaLabel?: string;
358
392
  ariaLabelledBy?: string;
359
393
  formatValue?: (value: number) => string;
@@ -373,10 +407,9 @@ export declare const view: import("foldkit/submodel").View<{
373
407
  * way. */
374
408
  isReadOnly?: boolean;
375
409
  name?: string;
376
- /** Resolves the root that holds the slider track when looking it up by its
377
- * `data-slider-track-id` attribute. Defaults to `document`. Provide a
378
- * ShadowRoot when rendering the slider inside a shadow tree so pointer
379
- * events on the track can map clientX into a value. */
410
+ /** Resolves the DOM root containing the Slider track. Defaults to `document`.
411
+ * Provide a ShadowRoot when rendering the Slider inside a shadow tree so pointer
412
+ * events on the track can map the pointer position into a value. */
380
413
  getTrackRoot?: () => Document | ShadowRoot;
381
414
  }>>;
382
415
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"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"}