@cssints/headless 0.6.0 → 0.6.1
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/README.md +1 -1
- package/dist/index.d.mts +0 -70
- package/dist/index.mjs +36 -72
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -128,7 +128,7 @@ Left to the host: pane bounds in pixels (percent only), nested groups, and F6 (w
|
|
|
128
128
|
```sh
|
|
129
129
|
cd packages/headless
|
|
130
130
|
bun run test # vp test run: vitest browser mode, real Chromium (playwright; needs the browser installed: bunx playwright install chromium)
|
|
131
|
-
bun run typecheck #
|
|
131
|
+
bun run typecheck # effect-tsrs
|
|
132
132
|
bun run build # vp pack: dist/ (ESM and declarations; solid-js is a peer)
|
|
133
133
|
```
|
|
134
134
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Accessor } from "solid-js";
|
|
2
|
-
//#region src/canvas-math.d.ts
|
|
3
2
|
/**
|
|
4
3
|
* The fixed-point math of the canvas, copied from the Quint specs. Integers only, power-of-two
|
|
5
4
|
* denominators, every intermediate below 2^53, so doubles are exact and the DOM implementation can
|
|
@@ -49,8 +48,6 @@ interface SnapContext extends SnapNode {
|
|
|
49
48
|
type SnapCandidates = (context: SnapContext) => readonly number[];
|
|
50
49
|
/** The default policy and the one `specs/canvas/pointer.qnt` models: every `GRID` units. */
|
|
51
50
|
export declare const gridCandidates: SnapCandidates;
|
|
52
|
-
//#endregion
|
|
53
|
-
//#region src/prefs.d.ts
|
|
54
51
|
/**
|
|
55
52
|
* The user preferences a primitive honours. The host resolves them from
|
|
56
53
|
* wherever it keeps them and injects a `Partial<Prefs>` per primitive;
|
|
@@ -74,8 +71,6 @@ export interface Prefs {
|
|
|
74
71
|
export declare const DEFAULT_PREFS: Prefs;
|
|
75
72
|
/** Merge an injected partial with the defaults; never mutates the input. */
|
|
76
73
|
export declare const withPrefs: (partial?: Partial<Prefs>) => Prefs;
|
|
77
|
-
//#endregion
|
|
78
|
-
//#region src/canvas.d.ts
|
|
79
74
|
/**
|
|
80
75
|
* Headless infinite canvas: camera, selection and node-move state plus attribute / prop objects
|
|
81
76
|
* for a viewport, a camera layer, the nodes and a live region. No elements, no styling beyond the
|
|
@@ -376,8 +371,6 @@ interface Canvas {
|
|
|
376
371
|
readonly removeNodes: (ids: readonly string[]) => void;
|
|
377
372
|
}
|
|
378
373
|
export declare const createCanvas: (options: CanvasOptions) => Canvas;
|
|
379
|
-
//#endregion
|
|
380
|
-
//#region src/disclosure.d.ts
|
|
381
374
|
/**
|
|
382
375
|
* Options are read lazily: pass a component's `props` (or an object with
|
|
383
376
|
* getters), never destructured values, so `disabled` stays reactive.
|
|
@@ -431,8 +424,6 @@ interface Disclosure {
|
|
|
431
424
|
* pass `value` + `onValueChange` to own the state.
|
|
432
425
|
*/
|
|
433
426
|
export declare const createDisclosure: (options?: DisclosureOptions) => Disclosure;
|
|
434
|
-
//#endregion
|
|
435
|
-
//#region src/player.d.ts
|
|
436
427
|
/**
|
|
437
428
|
* A playback engine the primitive drives. Mediabunny is one; the primitive
|
|
438
429
|
* never imports a media library (`@cssints/headless` stays `solid-js`-only).
|
|
@@ -556,8 +547,6 @@ interface Player {
|
|
|
556
547
|
* no elements live here.
|
|
557
548
|
*/
|
|
558
549
|
export declare const createPlayer: (options: PlayerOptions) => Player;
|
|
559
|
-
//#endregion
|
|
560
|
-
//#region src/accordion.d.ts
|
|
561
550
|
/**
|
|
562
551
|
* Options are read lazily (getters) so `multiple` / `disabled` stay reactive;
|
|
563
552
|
* pass a component's `props`, never destructured values.
|
|
@@ -641,8 +630,6 @@ export interface Accordion {
|
|
|
641
630
|
* while uncontrolled.
|
|
642
631
|
*/
|
|
643
632
|
export declare const createAccordion: (options?: AccordionOptions) => Accordion;
|
|
644
|
-
//#endregion
|
|
645
|
-
//#region src/alert.d.ts
|
|
646
633
|
export interface AlertOptions {
|
|
647
634
|
/** Rendered at mount; `undefined` starts with no live region. */
|
|
648
635
|
readonly message?: string | undefined;
|
|
@@ -675,8 +662,6 @@ export interface Alert {
|
|
|
675
662
|
* region is live; the primitive keeps the region mounted and unhides it.
|
|
676
663
|
*/
|
|
677
664
|
export declare const createAlert: (options?: AlertOptions) => Alert;
|
|
678
|
-
//#endregion
|
|
679
|
-
//#region src/alertdialog.d.ts
|
|
680
665
|
export interface AlertDialogOptions {
|
|
681
666
|
/** Controlled: the host owns the open state and this is the only thing that changes it. */
|
|
682
667
|
readonly value?: boolean | undefined;
|
|
@@ -765,8 +750,6 @@ declare const YES_POS = 2;
|
|
|
765
750
|
* open state through an effect, so a rejected request leaves them untouched.
|
|
766
751
|
*/
|
|
767
752
|
export declare const createAlertDialog: (options?: AlertDialogOptions) => AlertDialog;
|
|
768
|
-
//#endregion
|
|
769
|
-
//#region src/breadcrumb.d.ts
|
|
770
753
|
export interface BreadcrumbItem {
|
|
771
754
|
readonly label: string;
|
|
772
755
|
readonly href?: string | undefined;
|
|
@@ -813,8 +796,6 @@ export interface Breadcrumb {
|
|
|
813
796
|
* markup; the navigation landmark is a UA/AT concern).
|
|
814
797
|
*/
|
|
815
798
|
export declare const createBreadcrumb: (options: BreadcrumbOptions) => Breadcrumb;
|
|
816
|
-
//#endregion
|
|
817
|
-
//#region src/button.d.ts
|
|
818
799
|
export interface ButtonOptions {
|
|
819
800
|
/** A toggle button carries `aria-pressed`; a command button does not. */
|
|
820
801
|
readonly isToggle?: boolean;
|
|
@@ -862,8 +843,6 @@ export interface Button {
|
|
|
862
843
|
* uncontrolled. A command button's activation never carries a value.
|
|
863
844
|
*/
|
|
864
845
|
export declare const createButton: (options?: ButtonOptions) => Button;
|
|
865
|
-
//#endregion
|
|
866
|
-
//#region src/carousel.d.ts
|
|
867
846
|
export type CarouselRole = "region" | "group";
|
|
868
847
|
/**
|
|
869
848
|
* Options are read lazily (getters); pass a component's `props`.
|
|
@@ -995,8 +974,6 @@ export interface Carousel {
|
|
|
995
974
|
* (and `prefers-reduced-motion`) in the consumer.
|
|
996
975
|
*/
|
|
997
976
|
export declare const createCarousel: (options?: CarouselOptions) => Carousel;
|
|
998
|
-
//#endregion
|
|
999
|
-
//#region src/checkbox.d.ts
|
|
1000
977
|
export type CheckboxState = "true" | "false" | "mixed";
|
|
1001
978
|
export interface CheckboxOptions {
|
|
1002
979
|
/** Controlled: the host owns the value and this is the only thing that changes it. */
|
|
@@ -1053,8 +1030,6 @@ export interface Checkbox {
|
|
|
1053
1030
|
* pass `value` + `onValueChange` to own the state.
|
|
1054
1031
|
*/
|
|
1055
1032
|
export declare const createCheckbox: (options?: CheckboxOptions) => Checkbox;
|
|
1056
|
-
//#endregion
|
|
1057
|
-
//#region src/checkbox-group.d.ts
|
|
1058
1033
|
export type CheckboxGroupFocus = "none" | "parent" | "c0" | "c1" | "c2";
|
|
1059
1034
|
export type ParentChecked = "true" | "false" | "mixed";
|
|
1060
1035
|
export interface CheckboxGroupOptions<T = unknown> {
|
|
@@ -1131,8 +1106,6 @@ export interface CheckboxGroup<T = unknown> {
|
|
|
1131
1106
|
* Behaviour is checked against `specs/apg/checkbox-group.qnt` by the bridge.
|
|
1132
1107
|
*/
|
|
1133
1108
|
export declare const createCheckboxGroup: <T = unknown>(options: CheckboxGroupOptions<T>) => CheckboxGroup<T>;
|
|
1134
|
-
//#endregion
|
|
1135
|
-
//#region src/combobox.d.ts
|
|
1136
1109
|
/**
|
|
1137
1110
|
* APG combobox (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/): state plus
|
|
1138
1111
|
* getter-backed attribute objects for a listbox popup. No elements, no styling.
|
|
@@ -1253,8 +1226,6 @@ export interface ComboboxOptions {
|
|
|
1253
1226
|
readonly onFocusRelease?: () => void;
|
|
1254
1227
|
}
|
|
1255
1228
|
export declare const createCombobox: (options: ComboboxOptions) => Combobox;
|
|
1256
|
-
//#endregion
|
|
1257
|
-
//#region src/dialog-modal.d.ts
|
|
1258
1229
|
export type DialogRole = "dialog" | "alertdialog";
|
|
1259
1230
|
export interface DialogModalOptions {
|
|
1260
1231
|
/** Controlled: the host owns the open state and this is the only thing that changes it. */
|
|
@@ -1323,8 +1294,6 @@ export interface DialogModal {
|
|
|
1323
1294
|
* are requests the host may ignore.
|
|
1324
1295
|
*/
|
|
1325
1296
|
export declare const createDialogModal: (options?: DialogModalOptions) => DialogModal;
|
|
1326
|
-
//#endregion
|
|
1327
|
-
//#region src/feed.d.ts
|
|
1328
1297
|
/**
|
|
1329
1298
|
* Options are read lazily (getters); pass a component's `props`.
|
|
1330
1299
|
*/
|
|
@@ -1412,8 +1381,6 @@ export interface Feed {
|
|
|
1412
1381
|
* request; `loadStart` / `loadFail` are adapter lifecycle events.
|
|
1413
1382
|
*/
|
|
1414
1383
|
export declare const createFeed: (options?: FeedOptions) => Feed;
|
|
1415
|
-
//#endregion
|
|
1416
|
-
//#region src/grid.d.ts
|
|
1417
1384
|
/**
|
|
1418
1385
|
* APG grid primitive on Solid 2: roving focus, 2-D navigation, edit mode, a
|
|
1419
1386
|
* cell/row/column selection rectangle and sortable column headers. State plus
|
|
@@ -1584,8 +1551,6 @@ export declare const packSort: (column: number, dir: GridSortDirection) => numbe
|
|
|
1584
1551
|
* snapshot); `rows`/`cols`/`page` are captured once.
|
|
1585
1552
|
*/
|
|
1586
1553
|
export declare const createGrid: (options?: GridOptions) => Grid;
|
|
1587
|
-
//#endregion
|
|
1588
|
-
//#region src/link.d.ts
|
|
1589
1554
|
export interface LinkOptions {
|
|
1590
1555
|
readonly href?: string | undefined;
|
|
1591
1556
|
/** Render a native `<a href>` (the default when `href` is set). */
|
|
@@ -1622,8 +1587,6 @@ export interface Link {
|
|
|
1622
1587
|
* cause browsers to enhance the element". Platform: native.
|
|
1623
1588
|
*/
|
|
1624
1589
|
export declare const createLink: (options?: LinkOptions) => Link;
|
|
1625
|
-
//#endregion
|
|
1626
|
-
//#region src/listbox.d.ts
|
|
1627
1590
|
export type ListboxSelectionMode = "single" | "multiple" | "none";
|
|
1628
1591
|
export interface ListboxItem {
|
|
1629
1592
|
readonly id: string;
|
|
@@ -1729,8 +1692,6 @@ export interface Listbox {
|
|
|
1729
1692
|
* move is a request the host may ignore.
|
|
1730
1693
|
*/
|
|
1731
1694
|
export declare const createListbox: (options: ListboxOptions) => Listbox;
|
|
1732
|
-
//#endregion
|
|
1733
|
-
//#region src/menu.d.ts
|
|
1734
1695
|
/**
|
|
1735
1696
|
* APG menu family on Solid 2: `createMenu` (menu button + the checkable /
|
|
1736
1697
|
* menuitemcheckbox / menuitemradio capability) and `createMenubar` (roving
|
|
@@ -1953,8 +1914,6 @@ export interface Menubar {
|
|
|
1953
1914
|
};
|
|
1954
1915
|
}
|
|
1955
1916
|
export declare const createMenubar: (options: MenubarOptions) => Menubar;
|
|
1956
|
-
//#endregion
|
|
1957
|
-
//#region src/meter.d.ts
|
|
1958
1917
|
/**
|
|
1959
1918
|
* A controlled numeric display; the consumer feeds `value`/`min`/`max`.
|
|
1960
1919
|
* `valueText` overrides the default percentage `aria-valuetext`.
|
|
@@ -1992,8 +1951,6 @@ export interface Meter {
|
|
|
1992
1951
|
* this primitive only derives the ARIA contract; no state machine runs here.
|
|
1993
1952
|
*/
|
|
1994
1953
|
export declare const createMeter: (options?: MeterOptions) => Meter;
|
|
1995
|
-
//#endregion
|
|
1996
|
-
//#region src/radio.d.ts
|
|
1997
1954
|
export type RadioFlavor = "roving" | "activedescendant";
|
|
1998
1955
|
export interface RadioGroupOptions<T = unknown> {
|
|
1999
1956
|
/** Radio values, one per radio; the observable `value` is the checked one. */
|
|
@@ -2075,8 +2032,6 @@ export interface RadioGroup<T = unknown> {
|
|
|
2075
2032
|
* callback, which `createControllable` does not expose.
|
|
2076
2033
|
*/
|
|
2077
2034
|
export declare const createRadioGroup: <T = unknown>(options: RadioGroupOptions<T>) => RadioGroup<T>;
|
|
2078
|
-
//#endregion
|
|
2079
|
-
//#region src/resizable-panels.d.ts
|
|
2080
2035
|
export type PanelsOrientation = "vertical" | "horizontal";
|
|
2081
2036
|
/** One pane of the group. Sizes are percentages of the group (0..100). */
|
|
2082
2037
|
export interface ResizablePaneOptions {
|
|
@@ -2170,8 +2125,6 @@ export interface ResizablePanels {
|
|
|
2170
2125
|
* DOM is checked against it by the differential walk.
|
|
2171
2126
|
*/
|
|
2172
2127
|
export declare const createResizablePanels: (options: ResizablePanelsOptions) => ResizablePanels;
|
|
2173
|
-
//#endregion
|
|
2174
|
-
//#region src/slider.d.ts
|
|
2175
2128
|
export type SliderOrientation = "horizontal" | "vertical";
|
|
2176
2129
|
export type SliderDirection = "ltr" | "rtl";
|
|
2177
2130
|
export interface SliderOptions {
|
|
@@ -2243,8 +2196,6 @@ export interface Slider {
|
|
|
2243
2196
|
* deliberately only fixes a discrete rail press.
|
|
2244
2197
|
*/
|
|
2245
2198
|
export declare const createSlider: (options?: SliderOptions) => Slider;
|
|
2246
|
-
//#endregion
|
|
2247
|
-
//#region src/slider-multithumb.d.ts
|
|
2248
2199
|
export type SliderMultiThumbIndex = 0 | 1;
|
|
2249
2200
|
export interface SliderMultiThumbOptions {
|
|
2250
2201
|
readonly min?: number;
|
|
@@ -2312,8 +2263,6 @@ export interface SliderMultiThumb {
|
|
|
2312
2263
|
* omits them (the event names the thumb).
|
|
2313
2264
|
*/
|
|
2314
2265
|
export declare const createSliderMultiThumb: (options?: SliderMultiThumbOptions) => SliderMultiThumb;
|
|
2315
|
-
//#endregion
|
|
2316
|
-
//#region src/spinbutton.d.ts
|
|
2317
2266
|
export interface SpinbuttonOptions {
|
|
2318
2267
|
readonly min?: number;
|
|
2319
2268
|
readonly max?: number;
|
|
@@ -2402,8 +2351,6 @@ export interface Spinbutton {
|
|
|
2402
2351
|
* APG text.
|
|
2403
2352
|
*/
|
|
2404
2353
|
export declare const createSpinbutton: (options?: SpinbuttonOptions) => Spinbutton;
|
|
2405
|
-
//#endregion
|
|
2406
|
-
//#region src/switch.d.ts
|
|
2407
2354
|
export interface SwitchOptions {
|
|
2408
2355
|
/** Controlled: the host owns the state and this is the only thing that changes it. */
|
|
2409
2356
|
readonly value?: boolean | undefined;
|
|
@@ -2458,8 +2405,6 @@ export interface Switch {
|
|
|
2458
2405
|
* pass `value` + `onValueChange` to own the state.
|
|
2459
2406
|
*/
|
|
2460
2407
|
export declare const createSwitch: (options?: SwitchOptions) => Switch;
|
|
2461
|
-
//#endregion
|
|
2462
|
-
//#region src/tabs.d.ts
|
|
2463
2408
|
export type TabsOrientation = "horizontal" | "vertical";
|
|
2464
2409
|
export type TabsActivation = "automatic" | "manual";
|
|
2465
2410
|
/**
|
|
@@ -2544,8 +2489,6 @@ export interface Tabs {
|
|
|
2544
2489
|
* Programmatic methods (`select`, `setSelected`, `keyDown`) are requests too.
|
|
2545
2490
|
*/
|
|
2546
2491
|
export declare const createTabs: (options?: TabsOptions) => Tabs;
|
|
2547
|
-
//#endregion
|
|
2548
|
-
//#region src/timeline.d.ts
|
|
2549
2492
|
/**
|
|
2550
2493
|
* APG has no waterfall pattern. This is the span timeline the o11y dashboard
|
|
2551
2494
|
* needs: spans laid out on a shared tick axis with nesting/indentation, a
|
|
@@ -2653,8 +2596,6 @@ export interface Timeline {
|
|
|
2653
2596
|
* reactive.
|
|
2654
2597
|
*/
|
|
2655
2598
|
export declare const createTimeline: (options?: TimelineOptions) => Timeline;
|
|
2656
|
-
//#endregion
|
|
2657
|
-
//#region src/toolbar.d.ts
|
|
2658
2599
|
/**
|
|
2659
2600
|
* APG Toolbar on Solid 2: state plus attribute objects, no elements, no
|
|
2660
2601
|
* styling. A faithful transcription of `specs/apg/toolbar.qnt`.
|
|
@@ -2726,8 +2667,6 @@ export interface Toolbar {
|
|
|
2726
2667
|
readonly itemProps: (index: number) => ToolbarItemProps;
|
|
2727
2668
|
}
|
|
2728
2669
|
export declare const createToolbar: (options: ToolbarOptions) => Toolbar;
|
|
2729
|
-
//#endregion
|
|
2730
|
-
//#region src/tooltip.d.ts
|
|
2731
2670
|
export interface TooltipTriggerInput {
|
|
2732
2671
|
readonly id?: string;
|
|
2733
2672
|
/** Id of this trigger's tooltip element (needed for `aria-describedby`). */
|
|
@@ -2826,8 +2765,6 @@ export interface TooltipGroup {
|
|
|
2826
2765
|
* gated, so a rejected request leaves the visible tooltip untouched.
|
|
2827
2766
|
*/
|
|
2828
2767
|
export declare const createTooltipGroup: (options: TooltipGroupOptions) => TooltipGroup;
|
|
2829
|
-
//#endregion
|
|
2830
|
-
//#region src/treegrid.d.ts
|
|
2831
2768
|
/**
|
|
2832
2769
|
* APG treegrid primitive on Solid 2: a fixed tree of rows, row/cell roving focus
|
|
2833
2770
|
* across the three APG navigation models, expansion and row selection. State plus
|
|
@@ -2919,8 +2856,6 @@ export declare const treegridCellPart: (row: number, col: number) => string;
|
|
|
2919
2856
|
export declare const createTreegrid: (options?: TreegridOptions) => Treegrid;
|
|
2920
2857
|
/** The `data-part` target the treegrid roving tab stop should focus. */
|
|
2921
2858
|
export declare const treegridFocusTargetPart: (grid: Treegrid) => string | null;
|
|
2922
|
-
//#endregion
|
|
2923
|
-
//#region src/treeview.d.ts
|
|
2924
2859
|
/** A tree node: `parent` is 0 for a root; order in `nodes` is document order. */
|
|
2925
2860
|
export interface TreeviewNode {
|
|
2926
2861
|
readonly id: number;
|
|
@@ -3015,8 +2950,6 @@ export interface Treeview {
|
|
|
3015
2950
|
* explicit `resetTypeahead` method; add a timer when a consumer wants one.
|
|
3016
2951
|
*/
|
|
3017
2952
|
export declare const createTreeview: (options?: TreeviewOptions) => Treeview;
|
|
3018
|
-
//#endregion
|
|
3019
|
-
//#region src/windowsplitter.d.ts
|
|
3020
2953
|
export type SplitterOrientation = "vertical" | "horizontal";
|
|
3021
2954
|
export type SplitterFocus = "none" | "splitter" | "primary" | "secondary";
|
|
3022
2955
|
/** Options are read lazily: pass an object with getters, never destructured values. */
|
|
@@ -3094,8 +3027,6 @@ export interface WindowSplitter {
|
|
|
3094
3027
|
* `collapsed` is derived from the controlled value plus the last request.
|
|
3095
3028
|
*/
|
|
3096
3029
|
export declare const createWindowSplitter: (options?: WindowSplitterOptions) => WindowSplitter;
|
|
3097
|
-
//#endregion
|
|
3098
|
-
//#region src/listbox-rearrangeable.d.ts
|
|
3099
3030
|
export type RearrangeableList = "a" | "b";
|
|
3100
3031
|
export interface RearrangeableListboxOptions {
|
|
3101
3032
|
/** Option labels; the option id is the index, and every option starts in list A. */
|
|
@@ -3159,5 +3090,4 @@ export interface RearrangeableListbox {
|
|
|
3159
3090
|
* host that holds the value moves nothing.
|
|
3160
3091
|
*/
|
|
3161
3092
|
export declare const createRearrangeableListbox: (options: RearrangeableListboxOptions) => RearrangeableListbox;
|
|
3162
|
-
//#endregion
|
|
3163
3093
|
export { type Canvas, type CanvasGoal, type CanvasLayerProps, type CanvasLiveRegionProps, type CanvasMessages, type CanvasMode, type CanvasMove, type CanvasNodeGeometry, type CanvasNodeInput, type CanvasNodeProps, type CanvasNodeRole, type CanvasOptions, type CanvasSnapshot, type CanvasViewportProps, type Disclosure, type DisclosureOptions, type DisclosurePanelProps, type DisclosureTriggerProps, type MarqueeMode, NO_POS, type PlaybackAdapter, type PlaybackAdapterEvent, type Player, type PlayerButtonProps, type PlayerOptions, type PlayerPlayProps, type PlayerSeekProps, type PlayerStage, type PlayerSurfaceProps, type PlayerToggleProps, type PointerInput, type SnapAxis, type SnapCandidates, type SnapContext, YES_POS };
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createEffect, createMemo, createRoot, createSignal, createUniqueId, getOwner, onCleanup, onSettled, runWithOwner, untrack } from "solid-js";
|
|
2
|
-
|
|
2
|
+
// src/canvas-math.ts
|
|
3
3
|
/**
|
|
4
4
|
* The fixed-point math of the canvas, copied from the Quint specs. Integers only, power-of-two
|
|
5
5
|
* denominators, every intermediate below 2^53, so doubles are exact and the DOM implementation can
|
|
@@ -108,8 +108,7 @@ const snapNudge = (v, on, zf, nearest) => (snapTarget(v, on, zf, nearest) ?? v)
|
|
|
108
108
|
/** Live drag delta on one axis; `base` is the dragged node's committed position on it. */
|
|
109
109
|
const liveDD = (w, g, base, on, zf, nearest) => rawD(w, g) + snapNudge(base + rawD(w, g), on, zf, nearest);
|
|
110
110
|
const clampPos = (value, extent) => clampI(value, -1e6, WORLD_BOUND - extent);
|
|
111
|
-
|
|
112
|
-
//#region src/prefs.ts
|
|
111
|
+
// src/prefs.ts
|
|
113
112
|
/** Today's behaviour, used for every pref the host does not inject. */
|
|
114
113
|
const DEFAULT_PREFS = {
|
|
115
114
|
motion: "full",
|
|
@@ -125,8 +124,7 @@ const withPrefs = (partial) => ({
|
|
|
125
124
|
...DEFAULT_PREFS,
|
|
126
125
|
...partial
|
|
127
126
|
});
|
|
128
|
-
|
|
129
|
-
//#region src/canvas.ts
|
|
127
|
+
// src/canvas.ts
|
|
130
128
|
const DEFAULT_VIEWPORT = {
|
|
131
129
|
width: 800,
|
|
132
130
|
height: 600
|
|
@@ -967,8 +965,7 @@ const createCanvas = (options) => {
|
|
|
967
965
|
removeNodes
|
|
968
966
|
};
|
|
969
967
|
};
|
|
970
|
-
|
|
971
|
-
//#region src/controllable.ts
|
|
968
|
+
// src/controllable.ts
|
|
972
969
|
/**
|
|
973
970
|
* The request/commit split (map ticket `rt1p`): `request` is what a user
|
|
974
971
|
* event does. A change of intent calls `onChange`; uncontrolled it also
|
|
@@ -993,8 +990,7 @@ const createControllable = (options) => {
|
|
|
993
990
|
};
|
|
994
991
|
return [current, request];
|
|
995
992
|
};
|
|
996
|
-
|
|
997
|
-
//#region src/disclosure.ts
|
|
993
|
+
// src/disclosure.ts
|
|
998
994
|
/**
|
|
999
995
|
* APG Disclosure (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/):
|
|
1000
996
|
* state plus attribute objects for a trigger and a panel. No styling, no
|
|
@@ -1042,8 +1038,7 @@ const createDisclosure = (options = {}) => {
|
|
|
1042
1038
|
}
|
|
1043
1039
|
};
|
|
1044
1040
|
};
|
|
1045
|
-
|
|
1046
|
-
//#region src/player.ts
|
|
1041
|
+
// src/player.ts
|
|
1047
1042
|
const RATE_PERCENTS = [
|
|
1048
1043
|
50,
|
|
1049
1044
|
100,
|
|
@@ -1297,8 +1292,7 @@ const createPlayer = (options) => {
|
|
|
1297
1292
|
}
|
|
1298
1293
|
};
|
|
1299
1294
|
};
|
|
1300
|
-
|
|
1301
|
-
//#region src/accordion.ts
|
|
1295
|
+
// src/accordion.ts
|
|
1302
1296
|
const HEADING_LEVELS = 6;
|
|
1303
1297
|
const count = (expanded) => expanded.filter(Boolean).length;
|
|
1304
1298
|
/** Re-establish the mode's constraints, exactly as the spec's `normExpanded`. */
|
|
@@ -1409,8 +1403,7 @@ const createAccordion = (options = {}) => {
|
|
|
1409
1403
|
})
|
|
1410
1404
|
};
|
|
1411
1405
|
};
|
|
1412
|
-
|
|
1413
|
-
//#region src/alert.ts
|
|
1406
|
+
// src/alert.ts
|
|
1414
1407
|
/**
|
|
1415
1408
|
* APG Alert (https://www.w3.org/WAI/ARIA/apg/patterns/alert/): a brief message
|
|
1416
1409
|
* in a `role=alert` live region. Platform: native live-region markup
|
|
@@ -1450,8 +1443,7 @@ const createAlert = (options = {}) => {
|
|
|
1450
1443
|
}
|
|
1451
1444
|
};
|
|
1452
1445
|
};
|
|
1453
|
-
|
|
1454
|
-
//#region src/alertdialog.ts
|
|
1446
|
+
// src/alertdialog.ts
|
|
1455
1447
|
const NO_POS = 1;
|
|
1456
1448
|
const YES_POS = 2;
|
|
1457
1449
|
/**
|
|
@@ -1684,8 +1676,7 @@ const createAlertDialog = (options = {}) => {
|
|
|
1684
1676
|
}
|
|
1685
1677
|
};
|
|
1686
1678
|
};
|
|
1687
|
-
|
|
1688
|
-
//#region src/breadcrumb.ts
|
|
1679
|
+
// src/breadcrumb.ts
|
|
1689
1680
|
/**
|
|
1690
1681
|
* APG Breadcrumb (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/): a trail
|
|
1691
1682
|
* of links in hierarchical order, the current page LAST and marked
|
|
@@ -1731,8 +1722,7 @@ const createBreadcrumb = (options) => {
|
|
|
1731
1722
|
})
|
|
1732
1723
|
};
|
|
1733
1724
|
};
|
|
1734
|
-
|
|
1735
|
-
//#region src/button.ts
|
|
1725
|
+
// src/button.ts
|
|
1736
1726
|
/**
|
|
1737
1727
|
* APG Button (https://www.w3.org/WAI/ARIA/apg/patterns/button/): a command
|
|
1738
1728
|
* button and (with `isToggle`) a toggle button exposing `aria-pressed`.
|
|
@@ -1776,8 +1766,7 @@ const createButton = (options = {}) => {
|
|
|
1776
1766
|
}
|
|
1777
1767
|
};
|
|
1778
1768
|
};
|
|
1779
|
-
|
|
1780
|
-
//#region src/carousel.ts
|
|
1769
|
+
// src/carousel.ts
|
|
1781
1770
|
/**
|
|
1782
1771
|
* APG Carousel (https://www.w3.org/WAI/ARIA/apg/patterns/carousel/): state plus
|
|
1783
1772
|
* prop objects for the rotation/prev/next controls, slides and the optional
|
|
@@ -1967,8 +1956,7 @@ const createCarousel = (options = {}) => {
|
|
|
1967
1956
|
})
|
|
1968
1957
|
};
|
|
1969
1958
|
};
|
|
1970
|
-
|
|
1971
|
-
//#region src/checkbox.ts
|
|
1959
|
+
// src/checkbox.ts
|
|
1972
1960
|
/**
|
|
1973
1961
|
* APG Checkbox (https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/): one
|
|
1974
1962
|
* dual-state, optionally tri-state, checkbox. Platform choice (packages/headless/docs/
|
|
@@ -2063,8 +2051,7 @@ const createCheckbox = (options = {}) => {
|
|
|
2063
2051
|
}
|
|
2064
2052
|
};
|
|
2065
2053
|
};
|
|
2066
|
-
|
|
2067
|
-
//#region src/checkbox-group.ts
|
|
2054
|
+
// src/checkbox-group.ts
|
|
2068
2055
|
const CHILDREN = [
|
|
2069
2056
|
"c0",
|
|
2070
2057
|
"c1",
|
|
@@ -2232,8 +2219,7 @@ const createCheckboxGroup = (options) => {
|
|
|
2232
2219
|
})
|
|
2233
2220
|
};
|
|
2234
2221
|
};
|
|
2235
|
-
|
|
2236
|
-
//#region src/combobox.ts
|
|
2222
|
+
// src/combobox.ts
|
|
2237
2223
|
const PAGE_SIZE = 4;
|
|
2238
2224
|
const toOption = (input) => typeof input === "string" ? {
|
|
2239
2225
|
value: input,
|
|
@@ -2521,8 +2507,7 @@ const createCombobox = (options) => {
|
|
|
2521
2507
|
}
|
|
2522
2508
|
};
|
|
2523
2509
|
};
|
|
2524
|
-
|
|
2525
|
-
//#region src/dialog-modal.ts
|
|
2510
|
+
// src/dialog-modal.ts
|
|
2526
2511
|
/**
|
|
2527
2512
|
* APG Dialog (Modal) on Solid 2. `modal` adds `aria-modal`. Focus moves into
|
|
2528
2513
|
* the dialog on open and is the host's to restore on close (the fixture does,
|
|
@@ -2599,8 +2584,7 @@ const createDialogModal = (options = {}) => {
|
|
|
2599
2584
|
}
|
|
2600
2585
|
};
|
|
2601
2586
|
};
|
|
2602
|
-
|
|
2603
|
-
//#region src/feed.ts
|
|
2587
|
+
// src/feed.ts
|
|
2604
2588
|
/**
|
|
2605
2589
|
* APG Feed (https://www.w3.org/WAI/ARIA/apg/patterns/feed/): state plus prop
|
|
2606
2590
|
* objects for the feed container, its articles and the two outside focus
|
|
@@ -2735,8 +2719,7 @@ const createFeed = (options = {}) => {
|
|
|
2735
2719
|
}
|
|
2736
2720
|
};
|
|
2737
2721
|
};
|
|
2738
|
-
|
|
2739
|
-
//#region src/grid.ts
|
|
2722
|
+
// src/grid.ts
|
|
2740
2723
|
const GRID_KEYS = /* @__PURE__ */ new Set([
|
|
2741
2724
|
"ArrowRight",
|
|
2742
2725
|
"ArrowLeft",
|
|
@@ -3145,8 +3128,7 @@ const createGrid = (options = {}) => {
|
|
|
3145
3128
|
}
|
|
3146
3129
|
};
|
|
3147
3130
|
};
|
|
3148
|
-
|
|
3149
|
-
//#region src/link.ts
|
|
3131
|
+
// src/link.ts
|
|
3150
3132
|
/**
|
|
3151
3133
|
* APG Link (https://www.w3.org/WAI/ARIA/apg/patterns/link/): a native `<a href>`
|
|
3152
3134
|
* brings focus and activation for free; a custom element takes `role=link` and
|
|
@@ -3195,8 +3177,7 @@ const createLink = (options = {}) => {
|
|
|
3195
3177
|
}
|
|
3196
3178
|
};
|
|
3197
3179
|
};
|
|
3198
|
-
|
|
3199
|
-
//#region src/listbox.ts
|
|
3180
|
+
// src/listbox.ts
|
|
3200
3181
|
const normalizeSelected = (indices, count) => [...new Set(indices)].filter((index) => index >= 0 && index < count).sort((a, b) => a - b);
|
|
3201
3182
|
const sameSelection = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
|
|
3202
3183
|
/**
|
|
@@ -3543,8 +3524,7 @@ const createListbox = (options) => {
|
|
|
3543
3524
|
})
|
|
3544
3525
|
};
|
|
3545
3526
|
};
|
|
3546
|
-
|
|
3547
|
-
//#region src/menu.ts
|
|
3527
|
+
// src/menu.ts
|
|
3548
3528
|
const toItem = (input, index, base) => {
|
|
3549
3529
|
if (typeof input === "string") return {
|
|
3550
3530
|
label: input,
|
|
@@ -4248,8 +4228,7 @@ const createMenubar = (options) => {
|
|
|
4248
4228
|
})
|
|
4249
4229
|
};
|
|
4250
4230
|
};
|
|
4251
|
-
|
|
4252
|
-
//#region src/meter.ts
|
|
4231
|
+
// src/meter.ts
|
|
4253
4232
|
const clamp$1 = (value, lo, hi) => value < lo ? lo : value > hi ? hi : value;
|
|
4254
4233
|
/**
|
|
4255
4234
|
* APG Meter (https://www.w3.org/WAI/ARIA/apg/patterns/meter/): a graphical
|
|
@@ -4297,8 +4276,7 @@ const createMeter = (options = {}) => {
|
|
|
4297
4276
|
}
|
|
4298
4277
|
};
|
|
4299
4278
|
};
|
|
4300
|
-
|
|
4301
|
-
//#region src/radio.ts
|
|
4279
|
+
// src/radio.ts
|
|
4302
4280
|
/**
|
|
4303
4281
|
* APG Radio Group (https://www.w3.org/WAI/ARIA/apg/patterns/radio/): a
|
|
4304
4282
|
* `radiogroup` with `role=radio` items. Platform choice (packages/headless/docs/
|
|
@@ -4484,8 +4462,7 @@ const createRadioGroup = (options) => {
|
|
|
4484
4462
|
})
|
|
4485
4463
|
};
|
|
4486
4464
|
};
|
|
4487
|
-
|
|
4488
|
-
//#region src/resizable-panels.ts
|
|
4465
|
+
// src/resizable-panels.ts
|
|
4489
4466
|
const DEFAULT_MIN = 10;
|
|
4490
4467
|
const DEFAULT_MAX = 80;
|
|
4491
4468
|
const DEFAULT_STEP = 10;
|
|
@@ -4767,8 +4744,7 @@ const createResizablePanels = (options) => {
|
|
|
4767
4744
|
separatorProps
|
|
4768
4745
|
};
|
|
4769
4746
|
};
|
|
4770
|
-
|
|
4771
|
-
//#region src/slider.ts
|
|
4747
|
+
// src/slider.ts
|
|
4772
4748
|
const valueTextFor$1 = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "high";
|
|
4773
4749
|
/**
|
|
4774
4750
|
* APG Slider (https://www.w3.org/WAI/ARIA/apg/patterns/slider/): a single
|
|
@@ -4874,8 +4850,7 @@ const createSlider = (options = {}) => {
|
|
|
4874
4850
|
} }
|
|
4875
4851
|
};
|
|
4876
4852
|
};
|
|
4877
|
-
|
|
4878
|
-
//#region src/slider-multithumb.ts
|
|
4853
|
+
// src/slider-multithumb.ts
|
|
4879
4854
|
const valueTextFor = (value) => value <= 3 ? "low" : value <= 7 ? "medium" : "high";
|
|
4880
4855
|
const keyOf = (pair) => `${pair[0]},${pair[1]}`;
|
|
4881
4856
|
const pairOf = (key) => {
|
|
@@ -5005,8 +4980,7 @@ const createSliderMultiThumb = (options = {}) => {
|
|
|
5005
4980
|
})
|
|
5006
4981
|
};
|
|
5007
4982
|
};
|
|
5008
|
-
|
|
5009
|
-
//#region src/spinbutton.ts
|
|
4983
|
+
// src/spinbutton.ts
|
|
5010
4984
|
/**
|
|
5011
4985
|
* APG Spinbutton (https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/): a text
|
|
5012
4986
|
* field plus increase / decrease buttons. Plain Solid signals, no elements, no
|
|
@@ -5210,8 +5184,7 @@ const createSpinbutton = (options = {}) => {
|
|
|
5210
5184
|
}
|
|
5211
5185
|
};
|
|
5212
5186
|
};
|
|
5213
|
-
|
|
5214
|
-
//#region src/switch.ts
|
|
5187
|
+
// src/switch.ts
|
|
5215
5188
|
/**
|
|
5216
5189
|
* APG Switch (https://www.w3.org/WAI/ARIA/apg/patterns/switch/): a binary on/off
|
|
5217
5190
|
* input. Platform choice (packages/headless/docs/apg-platform-features.md): **native
|
|
@@ -5300,8 +5273,7 @@ const createSwitch = (options = {}) => {
|
|
|
5300
5273
|
}
|
|
5301
5274
|
};
|
|
5302
5275
|
};
|
|
5303
|
-
|
|
5304
|
-
//#region src/tabs.ts
|
|
5276
|
+
// src/tabs.ts
|
|
5305
5277
|
/**
|
|
5306
5278
|
* APG Tabs (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): state plus prop
|
|
5307
5279
|
* objects for a tablist, tabs and panels. Roving tabindex, wrapping arrows,
|
|
@@ -5438,8 +5410,7 @@ const createTabs = (options = {}) => {
|
|
|
5438
5410
|
})
|
|
5439
5411
|
};
|
|
5440
5412
|
};
|
|
5441
|
-
|
|
5442
|
-
//#region src/timeline.ts
|
|
5413
|
+
// src/timeline.ts
|
|
5443
5414
|
const LAST_NODE = 5;
|
|
5444
5415
|
const DOMAIN_MIN = 0;
|
|
5445
5416
|
const DOMAIN_MAX = 100;
|
|
@@ -5675,8 +5646,7 @@ const createTimeline = (options = {}) => {
|
|
|
5675
5646
|
}
|
|
5676
5647
|
};
|
|
5677
5648
|
};
|
|
5678
|
-
|
|
5679
|
-
//#region src/toolbar.ts
|
|
5649
|
+
// src/toolbar.ts
|
|
5680
5650
|
const AXIS = (o) => o === "horizontal" ? "inline" : "block";
|
|
5681
5651
|
const delta = (axis, key) => {
|
|
5682
5652
|
if (axis === "inline") {
|
|
@@ -5856,8 +5826,7 @@ const createToolbar = (options) => {
|
|
|
5856
5826
|
})
|
|
5857
5827
|
};
|
|
5858
5828
|
};
|
|
5859
|
-
|
|
5860
|
-
//#region src/tooltip.ts
|
|
5829
|
+
// src/tooltip.ts
|
|
5861
5830
|
const letters = ["a", "b"];
|
|
5862
5831
|
const letterOf = (index) => letters[index] ?? "a";
|
|
5863
5832
|
const shownOf = (vis) => [vis === 1, vis === 2];
|
|
@@ -6145,8 +6114,7 @@ const createTooltipGroup = (options) => {
|
|
|
6145
6114
|
})
|
|
6146
6115
|
};
|
|
6147
6116
|
};
|
|
6148
|
-
|
|
6149
|
-
//#region src/treegrid.ts
|
|
6117
|
+
// src/treegrid.ts
|
|
6150
6118
|
const PARENTS = [
|
|
6151
6119
|
-1,
|
|
6152
6120
|
0,
|
|
@@ -6525,8 +6493,7 @@ const createTreegrid = (options = {}) => {
|
|
|
6525
6493
|
};
|
|
6526
6494
|
/** The `data-part` target the treegrid roving tab stop should focus. */
|
|
6527
6495
|
const treegridFocusTargetPart = (grid) => grid.focusTargetPart();
|
|
6528
|
-
|
|
6529
|
-
//#region src/treeview.ts
|
|
6496
|
+
// src/treeview.ts
|
|
6530
6497
|
/**
|
|
6531
6498
|
* The fixed tree of `specs/apg/treeview.qnt` (ids are pre-order = document
|
|
6532
6499
|
* order): 1 Projects > {2 Reports > {3 Roadmap, 4 Summary}, 5 Notes}, 6 Photos
|
|
@@ -6862,8 +6829,7 @@ const createTreeview = (options = {}) => {
|
|
|
6862
6829
|
})
|
|
6863
6830
|
};
|
|
6864
6831
|
};
|
|
6865
|
-
|
|
6866
|
-
//#region src/windowsplitter.ts
|
|
6832
|
+
// src/windowsplitter.ts
|
|
6867
6833
|
const KEY_TAGS = /* @__PURE__ */ new Set([
|
|
6868
6834
|
"ArrowLeft",
|
|
6869
6835
|
"ArrowRight",
|
|
@@ -7024,8 +6990,7 @@ const createWindowSplitter = (options = {}) => {
|
|
|
7024
6990
|
secondaryProps: paneProps("secondary")
|
|
7025
6991
|
};
|
|
7026
6992
|
};
|
|
7027
|
-
|
|
7028
|
-
//#region src/listbox-rearrangeable.ts
|
|
6993
|
+
// src/listbox-rearrangeable.ts
|
|
7029
6994
|
const other = (list) => list === "a" ? "b" : "a";
|
|
7030
6995
|
const normalize = (indices, count) => [...new Set(indices)].filter((index) => index >= 0 && index < count).sort((x, y) => x - y);
|
|
7031
6996
|
const same = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
|
|
@@ -7274,5 +7239,4 @@ const createRearrangeableListbox = (options) => {
|
|
|
7274
7239
|
})
|
|
7275
7240
|
};
|
|
7276
7241
|
};
|
|
7277
|
-
//#endregion
|
|
7278
7242
|
export { DEFAULT_PREFS, DRAG_PX, GRID, NO_POS, SNAP_PX, TONE, TREEVIEW_NODES, TWEEN_TICKS, WORLD_BOUND, YES_POS, ZMAX, ZMIN, ZONE, cellPart, createAccordion, createAlert, createAlertDialog, createBreadcrumb, createButton, createCanvas, createCarousel, createCheckbox, createCheckboxGroup, createCombobox, createDialogModal, createDisclosure, createFeed, createGrid, createLink, createListbox, createMenu, createMenubar, createMeter, createPlayer, createRadioGroup, createRearrangeableListbox, createResizablePanels, createSlider, createSliderMultiThumb, createSpinbutton, createSwitch, createTabs, createTimeline, createToolbar, createTooltipGroup, createTreegrid, createTreeview, createWindowSplitter, gridCandidates, headerPart, packSelection, packSort, rowPart, treegridCellPart, treegridFocusTargetPart, treegridRowPart, withPrefs };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cssints/headless",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Headless APG widgets on Solid 2: state plus attribute objects, no elements, no styling, each conformance-checked against its Quint spec",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|