@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.
- package/dist/anchor/anchor.d.ts +33 -7
- package/dist/anchor/anchor.d.ts.map +1 -1
- package/dist/anchor/anchor.js +92 -14
- package/dist/anchor/public.d.ts +1 -1
- package/dist/anchor/public.d.ts.map +1 -1
- package/dist/anchor/public.js +1 -1
- package/dist/animation/index.d.ts +3 -0
- package/dist/animation/index.d.ts.map +1 -1
- package/dist/animation/schema.d.ts +13 -4
- package/dist/animation/schema.d.ts.map +1 -1
- package/dist/animation/schema.js +8 -4
- package/dist/animation/update.d.ts +15 -5
- package/dist/animation/update.d.ts.map +1 -1
- package/dist/animation/update.js +56 -28
- package/dist/combobox/multi.d.ts +5 -0
- package/dist/combobox/multi.d.ts.map +1 -1
- package/dist/combobox/shared.d.ts +19 -7
- package/dist/combobox/shared.d.ts.map +1 -1
- package/dist/combobox/shared.js +13 -13
- package/dist/combobox/single.d.ts +5 -0
- package/dist/combobox/single.d.ts.map +1 -1
- package/dist/datePicker/index.d.ts +13 -2
- package/dist/datePicker/index.d.ts.map +1 -1
- package/dist/dialog/index.d.ts +13 -2
- package/dist/dialog/index.d.ts.map +1 -1
- package/dist/dialog/index.js +22 -8
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/internal/accessibleName.d.ts +9 -0
- package/dist/internal/accessibleName.d.ts.map +1 -0
- package/dist/internal/accessibleName.js +12 -0
- package/dist/internal/range.d.ts +7 -0
- package/dist/internal/range.d.ts.map +1 -0
- package/dist/internal/range.js +12 -0
- package/dist/listbox/multi.d.ts +5 -0
- package/dist/listbox/multi.d.ts.map +1 -1
- package/dist/listbox/shared.d.ts +15 -4
- package/dist/listbox/shared.d.ts.map +1 -1
- package/dist/listbox/shared.js +12 -11
- package/dist/listbox/single.d.ts +5 -0
- package/dist/listbox/single.d.ts.map +1 -1
- package/dist/menu/index.d.ts +16 -4
- package/dist/menu/index.d.ts.map +1 -1
- package/dist/menu/index.js +12 -11
- package/dist/meter/index.d.ts +26 -0
- package/dist/meter/index.d.ts.map +1 -0
- package/dist/meter/index.js +67 -0
- package/dist/meter/public.d.ts +3 -0
- package/dist/meter/public.d.ts.map +1 -0
- package/dist/meter/public.js +1 -0
- package/dist/popover/index.d.ts +20 -4
- package/dist/popover/index.d.ts.map +1 -1
- package/dist/popover/index.js +8 -8
- package/dist/progress/index.d.ts +24 -0
- package/dist/progress/index.d.ts.map +1 -0
- package/dist/progress/index.js +85 -0
- package/dist/progress/public.d.ts +3 -0
- package/dist/progress/public.d.ts.map +1 -0
- package/dist/progress/public.js +1 -0
- package/dist/slider/index.d.ts +61 -28
- package/dist/slider/index.d.ts.map +1 -1
- package/dist/slider/index.js +157 -81
- package/dist/slider/public.d.ts +1 -1
- package/dist/slider/public.d.ts.map +1 -1
- package/dist/slider/public.js +1 -1
- package/dist/test/apps/disabledButton.d.ts +14 -6
- package/dist/test/apps/disabledButton.d.ts.map +1 -1
- package/dist/toast/index.d.ts +89 -44
- package/dist/toast/index.d.ts.map +1 -1
- package/dist/toast/schema.d.ts +15 -4
- package/dist/toast/schema.d.ts.map +1 -1
- package/dist/toast/test.d.ts +6 -0
- package/dist/toast/test.d.ts.map +1 -1
- package/dist/toast/test.js +36 -2
- package/dist/toast/update.d.ts +42 -2
- package/dist/toast/update.d.ts.map +1 -1
- package/dist/tooltip/tooltip.d.ts +7 -7
- package/package.json +9 -9
package/dist/popover/index.js
CHANGED
|
@@ -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,
|
|
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((
|
|
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 @@
|
|
|
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';
|
package/dist/slider/index.d.ts
CHANGED
|
@@ -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
|
-
|
|
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
|
|
9
|
-
*
|
|
10
|
-
*
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
-
/**
|
|
125
|
-
*
|
|
126
|
-
*
|
|
127
|
-
|
|
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
|
|
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
|
|
276
|
-
* callback. Each
|
|
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
|
|
313
|
-
*
|
|
314
|
-
*
|
|
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
|
|
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
|
|
377
|
-
*
|
|
378
|
-
*
|
|
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":"AAAA,OAAO,EAML,MAAM,EAIP,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,IAAI,EAAmB,MAAM,cAAc,CAAA;AAI9E,OAAO,EAAE,KAAK,OAAO,EAAc,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,MAAM,EAIP,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,IAAI,EAAmB,MAAM,cAAc,CAAA;AAI9E,OAAO,EAAE,KAAK,OAAO,EAAc,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAA;AAUpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAStD;;;;gEAIgE;AAChE,eAAO,MAAM,KAAK;;;;;;;;YARJ,WAAW;;;EAcvB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,oDAAoD;AACpD,eAAO,MAAM,OAAO;;QACF,WAAW;;;QAEzB,KAAK;QACL,WAAW;;;QAEO,KAAK;;;;;QAIvB,SAAS;QAQT,KAAK;;EAEP,CAAA;AAEF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAEzC,MAAM,MAAM,YAAY,GAAG,OAAO,OAAO,CAAC,YAAY,CAAC,IAAI,CAAA;AAC3D,MAAM,MAAM,cAAc,GAAG,OAAO,OAAO,CAAC,cAAc,CAAC,IAAI,CAAA;AAC/D,MAAM,MAAM,gBAAgB,GAAG,OAAO,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAA;AACnE,MAAM,MAAM,mBAAmB,GAAG,OAAO,OAAO,CAAC,mBAAmB,CAAC,IAAI,CAAA;AACzE,MAAM,MAAM,aAAa,GAAG,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,CAAA;AAC7D,MAAM,MAAM,yBAAyB,GACnC,OAAO,OAAO,CAAC,yBAAyB,CAAC,IAAI,CAAA;AAI/C,kEAAkE;AAClE,eAAO,MAAM,UAAU;;QACL,KAAK;;EACrB,CAAA;AACF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,6DAA6D;AAC7D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;CACb,CAAC,CAAA;AAEF;+EAC+E;AAC/E,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAMxC,CAAA;AAqBF;;wEAEwE;AACxE,eAAO,MAAM,YAAY,UAChB,MAAM,OACR,MAAM,OACN,MAAM,QACL,MAAM,KACX,MAGF,CAAA;AAkDD;;;;aAIa;AACb,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EjD,CAAA;AAEJ;;;oDAGoD;AACpD,eAAO,MAAM,YAAY,EAAE,OAAO,CAChC,KAAK,EACL,QAAQ,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC,CAQvC,CAAA;AAkFD;;gFAEgF;AAChF,eAAO,MAAM,gBAAgB,YAClB,MAAM,WACN,MAAM,SACR,OAAO,OACT,MAAM,OACN,MAAM,KACV,MA2BF,CAAA;AAED;;8CAE8C;AAC9C,eAAO,MAAM,oBAAoB,iBACjB,MAAM,QAAQ,GAAG,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGtC,CAAA;AAEL,2EAA2E;AAC3E,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAuC,CAAA;AA0BjE;;;wBAGwB;AACxB,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACnC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,WAAW,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IAC1C,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACpC,WAAW,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;CAC3C,CAAC,CAAA;AAEF,+EAA+E;AAC/E,eAAO,MAAM,WAAW,sDAA8C,CAAA;AACtE,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAA;AAEjD,gFAAgF;AAChF,eAAO,MAAM,cAAc,8CAAsC,CAAA;AACjE,MAAM,MAAM,cAAc,GAAG,OAAO,cAAc,CAAC,IAAI,CAAA;AAmFvD,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;8EAC0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC9C;0DACsD;IACtD,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB;;;;wEAIoE;IACpE,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B;;;iEAG6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;;;gCAG4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;;eAQW;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;yEAEqE;IACrE,YAAY,CAAC,EAAE,MAAM,QAAQ,GAAG,UAAU,CAAA;CAC3C,CAAC,CAAA;AAEF;;;;uEAIuE;AACvE,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAhDf;8EAC0E;WACnE,MAAM;YACL,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI;IAC9C;0DACsD;kBACxC,WAAW;IACzB;;;;wEAIoE;qBACnD,cAAc;IAC/B;;;iEAG6D;gBACjD,MAAM;gBACN,MAAM;qBACD,MAAM;kBACT,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;IACvC;;;gCAG4B;iBACf,OAAO;IACpB;;;;;;;;eAQW;iBACE,OAAO;WACb,MAAM;IACb;;yEAEqE;mBACtD,MAAM,QAAQ,GAAG,UAAU;GA2J3C,CAAA"}
|