@silverpoint/core 0.2.0 → 0.6.0
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 +4 -0
- package/dist/catalog.d.ts +97 -0
- package/dist/catalog.js +8002 -0
- package/dist/catalog.js.map +1 -0
- package/dist/chunk-KFBSQH5G.js +34 -0
- package/dist/chunk-KFBSQH5G.js.map +1 -0
- package/dist/chunk-OLYKR5PS.js +632 -0
- package/dist/chunk-OLYKR5PS.js.map +1 -0
- package/dist/chunk-PD4MD7JU.js +170 -0
- package/dist/chunk-PD4MD7JU.js.map +1 -0
- package/dist/dashboard-demos.d.ts +2 -1
- package/dist/index.d.ts +10 -55
- package/dist/index.js +36 -793
- package/dist/index.js.map +1 -1
- package/dist/model-CLhtoG75.d.ts +53 -0
- package/dist/{types-D1hjElfL.d.ts → props-Dq8FC8GG.d.ts} +369 -143
- package/dist/types-B81k-s9_.d.ts +148 -0
- package/dist/ui-demos.d.ts +17 -0
- package/dist/ui-demos.js +129 -0
- package/dist/ui-demos.js.map +1 -0
- package/dist/ui.d.ts +545 -0
- package/dist/ui.js +716 -0
- package/dist/ui.js.map +1 -0
- package/package.json +19 -1
package/dist/ui.d.ts
ADDED
|
@@ -0,0 +1,545 @@
|
|
|
1
|
+
import { n as Seed, t as GroundRef, u as SubstrateName, q as InkMode, ay as ToneLevel, o as Stroke, G as Geometry, aA as UiTokens, am as Ground, az as ToneSpec, v as ProviderConfig } from './props-Dq8FC8GG.js';
|
|
2
|
+
|
|
3
|
+
/** Control size; heights come from the ground's `ui.controlHeight` (Data Model §3.8). */
|
|
4
|
+
type UiSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
/** Props every UI component takes, as `CommonChartProps` does for charts (API Spec §3). */
|
|
6
|
+
interface CommonUiProps {
|
|
7
|
+
/** The frame variant and every related id derive from it (REQ-307, REQ-329). */
|
|
8
|
+
id?: string;
|
|
9
|
+
/** Overrides `id` for the frame variant only. */
|
|
10
|
+
seed?: Seed;
|
|
11
|
+
/** Style ground. Defaults to the dashboard's, then the app provider's, or `silverpoint` (REQ-311). */
|
|
12
|
+
ground?: GroundRef;
|
|
13
|
+
/** Prepared substrate within the ground (REQ-046). */
|
|
14
|
+
substrate?: SubstrateName;
|
|
15
|
+
/** `ink` by default; `precision` disables inking (REQ-021, REQ-306). */
|
|
16
|
+
mode?: InkMode;
|
|
17
|
+
/** Default `'md'`. */
|
|
18
|
+
size?: UiSize;
|
|
19
|
+
/** Added to the component's root element, after its own classes. */
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
/** An item of Tabs, Segmented or RadioGroup; keys are unique (REQ-325). */
|
|
23
|
+
interface UiItem {
|
|
24
|
+
key: string;
|
|
25
|
+
label: string;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
}
|
|
28
|
+
type StepStatus = 'wait' | 'process' | 'finish' | 'error';
|
|
29
|
+
interface StepItem {
|
|
30
|
+
key: string;
|
|
31
|
+
title: string;
|
|
32
|
+
description?: string;
|
|
33
|
+
/** Derived from `current` when omitted; `'error'` must be explicit. */
|
|
34
|
+
status?: StepStatus;
|
|
35
|
+
}
|
|
36
|
+
/** Button emphasis. Not a tone: `tone` names only a level 1-4 of the ground's ramp (A-07). */
|
|
37
|
+
type UiVariant = 'default' | 'primary' | 'danger';
|
|
38
|
+
type AlertKind = 'info' | 'success' | 'warning' | 'error';
|
|
39
|
+
type UiOrientation = 'horizontal' | 'vertical';
|
|
40
|
+
/** A tonal level a component may ask for; 0 (no fill) is not one. */
|
|
41
|
+
type UiToneLevel = Exclude<ToneLevel, 0>;
|
|
42
|
+
interface SpButtonProps extends CommonUiProps {
|
|
43
|
+
/** Default `'default'`; `danger` also draws the exact ✕ glyph (REQ-310). */
|
|
44
|
+
variant?: UiVariant;
|
|
45
|
+
/** Default `'button'`. */
|
|
46
|
+
type?: 'button' | 'submit' | 'reset';
|
|
47
|
+
/** Not focusable, not submitted; drawn with the disabled tone. */
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
/** Accessible name of an icon-only button (REQ-319). */
|
|
50
|
+
label?: string;
|
|
51
|
+
/** Fills the width of its container. */
|
|
52
|
+
block?: boolean;
|
|
53
|
+
/** Renders an `<a>`. */
|
|
54
|
+
href?: string;
|
|
55
|
+
}
|
|
56
|
+
interface SpInputProps extends CommonUiProps {
|
|
57
|
+
/** Native input type. Default `'text'`. */
|
|
58
|
+
type?: 'text' | 'search' | 'email' | 'url' | 'tel' | 'password' | 'number';
|
|
59
|
+
/** Hint shown while empty; not a substitute for the accessible name. */
|
|
60
|
+
placeholder?: string;
|
|
61
|
+
/** Form field name; the native input submits under it (REQ-323). */
|
|
62
|
+
name?: string;
|
|
63
|
+
/** Not focusable and not submitted. */
|
|
64
|
+
disabled?: boolean;
|
|
65
|
+
/** Focusable and submitted, but not editable. */
|
|
66
|
+
readOnly?: boolean;
|
|
67
|
+
/** Sets `aria-invalid` and draws the exact ⚠ glyph (REQ-334). */
|
|
68
|
+
invalid?: boolean;
|
|
69
|
+
/** Help or error text under the control, referenced by `aria-describedby` (REQ-334). */
|
|
70
|
+
message?: string;
|
|
71
|
+
/** Accessible name, when no `<label for>` names the control. */
|
|
72
|
+
label?: string;
|
|
73
|
+
}
|
|
74
|
+
interface SpCheckboxProps extends CommonUiProps {
|
|
75
|
+
/** The visible text and accessible name. */
|
|
76
|
+
label: string;
|
|
77
|
+
/** Form field name; submitted as `on` when checked. */
|
|
78
|
+
name?: string;
|
|
79
|
+
/** Not focusable and not submitted. */
|
|
80
|
+
disabled?: boolean;
|
|
81
|
+
/** Draws the exact dash and sets the native `indeterminate` state. */
|
|
82
|
+
indeterminate?: boolean;
|
|
83
|
+
}
|
|
84
|
+
interface SpRadioGroupProps extends CommonUiProps {
|
|
85
|
+
/** The choices; each a native radio. Keys are unique (REQ-325). */
|
|
86
|
+
items: readonly UiItem[];
|
|
87
|
+
/** Required: the native radios submit under it (REQ-323). */
|
|
88
|
+
name: string;
|
|
89
|
+
/** The group's name, its `<legend>`. */
|
|
90
|
+
label: string;
|
|
91
|
+
/** Default `'vertical'`. */
|
|
92
|
+
orientation?: UiOrientation;
|
|
93
|
+
}
|
|
94
|
+
interface SpSwitchProps extends CommonUiProps {
|
|
95
|
+
/** The visible text and accessible name. */
|
|
96
|
+
label: string;
|
|
97
|
+
/** Form field name; submitted as `on` when on. */
|
|
98
|
+
name?: string;
|
|
99
|
+
/** Not focusable and not submitted. */
|
|
100
|
+
disabled?: boolean;
|
|
101
|
+
}
|
|
102
|
+
interface SpSliderProps extends CommonUiProps {
|
|
103
|
+
/** Accessible name of the native range input. */
|
|
104
|
+
label: string;
|
|
105
|
+
/** Default `0`. */
|
|
106
|
+
min?: number;
|
|
107
|
+
/** Default `100`. */
|
|
108
|
+
max?: number;
|
|
109
|
+
/** Default `1`. */
|
|
110
|
+
step?: number;
|
|
111
|
+
/** Form field name; the native input submits under it. */
|
|
112
|
+
name?: string;
|
|
113
|
+
/** Not focusable and not submitted. */
|
|
114
|
+
disabled?: boolean;
|
|
115
|
+
/** Values on the rail that get a labelled mark. */
|
|
116
|
+
marks?: readonly number[];
|
|
117
|
+
}
|
|
118
|
+
interface SpRateProps extends CommonUiProps {
|
|
119
|
+
/** The group's name, its `<legend>`. */
|
|
120
|
+
label: string;
|
|
121
|
+
/** Default `5`, in 1..10; each mark an exact lozenge. */
|
|
122
|
+
count?: number;
|
|
123
|
+
/** Form field name; the native radios submit under it. */
|
|
124
|
+
name?: string;
|
|
125
|
+
/** Not focusable and not submitted. */
|
|
126
|
+
disabled?: boolean;
|
|
127
|
+
/** Shows the value; the keyboard and the pointer do not change it. */
|
|
128
|
+
readOnly?: boolean;
|
|
129
|
+
}
|
|
130
|
+
interface SpSegmentedProps extends CommonUiProps {
|
|
131
|
+
/** The options; each a native radio. Keys are unique (REQ-325). */
|
|
132
|
+
items: readonly UiItem[];
|
|
133
|
+
/** The control's name, its `<legend>`. */
|
|
134
|
+
label: string;
|
|
135
|
+
/** Form field name; the native radios submit under it. */
|
|
136
|
+
name?: string;
|
|
137
|
+
/** Fills the width of its container. */
|
|
138
|
+
block?: boolean;
|
|
139
|
+
}
|
|
140
|
+
interface SpTabsProps extends CommonUiProps {
|
|
141
|
+
/** The tabs; a disabled one is skipped by the arrows. Keys are unique (REQ-325). */
|
|
142
|
+
items: readonly UiItem[];
|
|
143
|
+
/** Accessible name of the tab list. */
|
|
144
|
+
label?: string;
|
|
145
|
+
/** Default `'horizontal'`. */
|
|
146
|
+
orientation?: UiOrientation;
|
|
147
|
+
/** Default `'automatic'`: a tab is selected as focus reaches it. */
|
|
148
|
+
activation?: 'automatic' | 'manual';
|
|
149
|
+
}
|
|
150
|
+
interface SpStepsProps extends CommonUiProps {
|
|
151
|
+
/** The steps, in order; a status is derived from `current` unless set. */
|
|
152
|
+
items: readonly StepItem[];
|
|
153
|
+
/** 0-based. */
|
|
154
|
+
current: number;
|
|
155
|
+
/** Default `'horizontal'`. */
|
|
156
|
+
orientation?: UiOrientation;
|
|
157
|
+
/** Accessible name of the list. */
|
|
158
|
+
label?: string;
|
|
159
|
+
}
|
|
160
|
+
interface SpCardProps extends CommonUiProps {
|
|
161
|
+
/** Heading of the card; without it the card is a plain container. */
|
|
162
|
+
title?: string;
|
|
163
|
+
/** Default `3`. */
|
|
164
|
+
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
165
|
+
}
|
|
166
|
+
interface SpTagProps extends CommonUiProps {
|
|
167
|
+
/** Tonal level, default `1`. */
|
|
168
|
+
tone?: UiToneLevel;
|
|
169
|
+
/** Adds a native close button; each adapter raises its close event. */
|
|
170
|
+
closable?: boolean;
|
|
171
|
+
/** Accessible name of the close button. Default `Remove <text>`. */
|
|
172
|
+
closeLabel?: string;
|
|
173
|
+
}
|
|
174
|
+
interface SpBadgeProps extends CommonUiProps {
|
|
175
|
+
/** The number shown, up to `max`. */
|
|
176
|
+
count?: number;
|
|
177
|
+
/** Default `99`; above it the badge reads `99+`. */
|
|
178
|
+
max?: number;
|
|
179
|
+
/** A dot with no number. */
|
|
180
|
+
dot?: boolean;
|
|
181
|
+
/** Accessible text of the badge, e.g. `unread messages`. */
|
|
182
|
+
label?: string;
|
|
183
|
+
}
|
|
184
|
+
interface SpDividerProps extends CommonUiProps {
|
|
185
|
+
/** Default `'horizontal'`. */
|
|
186
|
+
orientation?: UiOrientation;
|
|
187
|
+
/** A caption set in the rule. */
|
|
188
|
+
text?: string;
|
|
189
|
+
/** Default `'center'`. */
|
|
190
|
+
align?: 'start' | 'center' | 'end';
|
|
191
|
+
}
|
|
192
|
+
interface SpProgressProps extends CommonUiProps {
|
|
193
|
+
/** 0..100; omitted, the progress is indeterminate. */
|
|
194
|
+
value?: number;
|
|
195
|
+
/** Default `'line'`. */
|
|
196
|
+
shape?: 'line' | 'circle';
|
|
197
|
+
/** Accessible name (REQ-318). */
|
|
198
|
+
label: string;
|
|
199
|
+
/** Default `true`. */
|
|
200
|
+
showValue?: boolean;
|
|
201
|
+
}
|
|
202
|
+
interface SpAlertProps extends CommonUiProps {
|
|
203
|
+
/** Default `'info'`. */
|
|
204
|
+
kind?: AlertKind;
|
|
205
|
+
/** Bold first line of the alert. */
|
|
206
|
+
title?: string;
|
|
207
|
+
/** Adds a native close button; each adapter raises its close event. */
|
|
208
|
+
closable?: boolean;
|
|
209
|
+
/** Accessible name of the close button. Default `'Close'`. */
|
|
210
|
+
closeLabel?: string;
|
|
211
|
+
}
|
|
212
|
+
interface SpSkeletonProps extends CommonUiProps {
|
|
213
|
+
/** Default `3`, in 1..8. */
|
|
214
|
+
lines?: number;
|
|
215
|
+
/** Draws an avatar placeholder before the lines. */
|
|
216
|
+
avatar?: boolean;
|
|
217
|
+
/** Default `'Loading'`. */
|
|
218
|
+
label?: string;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/** The catalog's groups (PRD §6.11), in the order the documentation lists them. */
|
|
222
|
+
type UiGroup = 'actions' | 'data-entry' | 'navigation' | 'data-display' | 'feedback';
|
|
223
|
+
/** One UI component: every gate, fixture set and example page iterates this list. */
|
|
224
|
+
interface UiComponentRow {
|
|
225
|
+
/** Catalog name, as the PRD writes it. */
|
|
226
|
+
readonly name: string;
|
|
227
|
+
/** Kebab-case subpath: `@silverpoint/<adapter>/ui/<slug>`. */
|
|
228
|
+
readonly slug: string;
|
|
229
|
+
/** The exported name, the same in the three adapters (OQ-U2). */
|
|
230
|
+
readonly component: string;
|
|
231
|
+
readonly group: UiGroup;
|
|
232
|
+
/** The batch of step 6c that implements it (plan-and-tasks.md). */
|
|
233
|
+
readonly batch: 'B1' | 'B2' | 'B3';
|
|
234
|
+
/** Declared states (Data Model §5); one fixture and one demo each. */
|
|
235
|
+
readonly states: readonly string[];
|
|
236
|
+
}
|
|
237
|
+
/** The 17 components of `0.3.0` and their 45 declared states (REQ-300, Data Model §5). */
|
|
238
|
+
declare const UI_COMPONENTS: readonly UiComponentRow[];
|
|
239
|
+
|
|
240
|
+
/** A linear value's domain. Without `step` the value is only clamped (Progress). */
|
|
241
|
+
interface UiRange {
|
|
242
|
+
readonly min: number;
|
|
243
|
+
readonly max: number;
|
|
244
|
+
readonly step?: number;
|
|
245
|
+
}
|
|
246
|
+
interface UiValue {
|
|
247
|
+
/** The value to render: clamped, on its step. */
|
|
248
|
+
readonly value: number;
|
|
249
|
+
/** Where it sits along its range, in [0, 1] with 2 decimals (DD-025, I-22). */
|
|
250
|
+
readonly fraction: number;
|
|
251
|
+
/** The input was not drawable as given. */
|
|
252
|
+
readonly corrected: boolean;
|
|
253
|
+
}
|
|
254
|
+
/** A range as drawn: the given one if valid, else `0..100` step 1, warned `SP017` (REQ-324). */
|
|
255
|
+
declare function uiRange(range: UiRange, component?: string): UiRange;
|
|
256
|
+
/**
|
|
257
|
+
* A value on its range: clamped, rounded to the nearest step counted from `min` (never past `max`
|
|
258
|
+
* when `max` is off the step grid), and its exact fraction. Anything corrected warns `SP017`
|
|
259
|
+
* (REQ-324). Pure apart from the development warning.
|
|
260
|
+
*/
|
|
261
|
+
declare function uiValue(value: number, range: UiRange, component?: string): UiValue;
|
|
262
|
+
/** A Rate's `count`: an integer in 1..10, default 5; anything else corrected with `SP017`. */
|
|
263
|
+
declare function uiRateCount(count: number | undefined, component?: string): number;
|
|
264
|
+
|
|
265
|
+
/** The circle Progress draws in a fixed 100 × 100 view box (DD-025). */
|
|
266
|
+
declare const UI_PROGRESS_VIEWBOX = 100;
|
|
267
|
+
/**
|
|
268
|
+
* The circle Progress: the exact track and the exact filled arc, from 12 o'clock clockwise, on the
|
|
269
|
+
* charts' polar engine. Both are `encoding`, so no inker touches them (REQ-304). `stroke` is the
|
|
270
|
+
* ring's width in view-box units; the ring is inset by half of it so nothing is clipped.
|
|
271
|
+
*/
|
|
272
|
+
declare function uiProgressArc(fraction: number, stroke: number): {
|
|
273
|
+
readonly track: Stroke;
|
|
274
|
+
readonly fill: Stroke;
|
|
275
|
+
};
|
|
276
|
+
|
|
277
|
+
interface UiStep {
|
|
278
|
+
readonly key: string;
|
|
279
|
+
readonly status: StepStatus;
|
|
280
|
+
/**
|
|
281
|
+
* The connector after this step carries the status of the step it leads to, written as
|
|
282
|
+
* `data-status`; a `wait` connector is dashed (C-4). `null` after the last step.
|
|
283
|
+
*/
|
|
284
|
+
readonly connector: StepStatus | null;
|
|
285
|
+
/** The step `current` points at, after clamping: it carries `aria-current` (REQ-318). */
|
|
286
|
+
readonly current: boolean;
|
|
287
|
+
}
|
|
288
|
+
/**
|
|
289
|
+
* Status per step, derived from `current` (finish before, process at, wait after) unless the item
|
|
290
|
+
* sets one, and the connectors between them. Keys are de-duplicated (`SP019`); a `current` outside
|
|
291
|
+
* the list or not an integer is clamped and rounded (`SP017`, REQ-324).
|
|
292
|
+
*/
|
|
293
|
+
declare function uiSteps(items: readonly StepItem[], current: number, component?: string): readonly UiStep[];
|
|
294
|
+
|
|
295
|
+
/** The composite's root element, as much of the DOM as this reads; the core has no DOM types. */
|
|
296
|
+
interface UiRovingRoot {
|
|
297
|
+
querySelectorAll(selector: string): ArrayLike<unknown>;
|
|
298
|
+
closest(selector: string): {
|
|
299
|
+
getAttribute(name: string): string | null;
|
|
300
|
+
} | null;
|
|
301
|
+
readonly ownerDocument: {
|
|
302
|
+
readonly activeElement: unknown;
|
|
303
|
+
} | null;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* The keyboard of a composite (REQ-315), for a `keydown` on its root: the transition is
|
|
307
|
+
* `uiRovingKey`; this finds the items, reads the direction from the nearest `dir` (REQ-321), and
|
|
308
|
+
* moves focus —and, when `activate`, selects by clicking the item, so the adapter's own click or
|
|
309
|
+
* change handler runs. `both` takes the axis from the key, as a radio group does. A key it does
|
|
310
|
+
* not use is left to the browser.
|
|
311
|
+
*/
|
|
312
|
+
declare function uiRovingFocus(event: {
|
|
313
|
+
readonly key: string;
|
|
314
|
+
preventDefault(): void;
|
|
315
|
+
}, root: UiRovingRoot, selector: string, orientation: UiOrientation | 'both', activate: boolean): void;
|
|
316
|
+
|
|
317
|
+
type UiRovingKey = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';
|
|
318
|
+
interface UiRovingState {
|
|
319
|
+
/** The focused item; `-1` when none is yet. */
|
|
320
|
+
readonly index: number;
|
|
321
|
+
readonly count: number;
|
|
322
|
+
readonly disabled: readonly boolean[];
|
|
323
|
+
}
|
|
324
|
+
/**
|
|
325
|
+
* The WAI-ARIA APG roving-focus transition of a tab list or radio-like group (REQ-315): arrows
|
|
326
|
+
* along the orientation move to the next enabled item and wrap at the ends, `rtl` mirrors the
|
|
327
|
+
* horizontal arrows (REQ-321), Home and End go to the first and last enabled item, and disabled
|
|
328
|
+
* items are skipped (REQ-326). Cross-axis arrows, and any key with no enabled item to go to, keep
|
|
329
|
+
* the index. Pure.
|
|
330
|
+
*/
|
|
331
|
+
declare function uiRovingKey(state: UiRovingState, key: UiRovingKey, orientation: UiOrientation, dir: 'ltr' | 'rtl'): number;
|
|
332
|
+
/** Whether a `KeyboardEvent.key` moves a roving focus: the arrows, Home and End (REQ-315). */
|
|
333
|
+
declare const uiIsRovingKey: (key: string) => key is UiRovingKey;
|
|
334
|
+
|
|
335
|
+
type UiFrameKind = 'control' | 'pill' | 'box' | 'card' | 'round';
|
|
336
|
+
/**
|
|
337
|
+
* Each frame kind is drawn once in a square box and cut into slices for the grounds build
|
|
338
|
+
* (DD-022): four corners of `slice` px, and four edges between them when `size > 2 * slice`.
|
|
339
|
+
* `round` and `box` have no edges; they frame fixed-size squares.
|
|
340
|
+
*/
|
|
341
|
+
declare const UI_FRAME_KINDS: Readonly<Record<UiFrameKind, Readonly<{
|
|
342
|
+
size: number;
|
|
343
|
+
slice: number;
|
|
344
|
+
radius: number;
|
|
345
|
+
}>>>;
|
|
346
|
+
/**
|
|
347
|
+
* The frame variant of a component: from `seed`, else `id`, by the charts' seed rule; `0` with
|
|
348
|
+
* neither (REQ-307, I-21). Never from mount order, randomness or time (Art. 4). `variants` is read
|
|
349
|
+
* as an integer in 1..6.
|
|
350
|
+
*/
|
|
351
|
+
declare function uiFrameVariant(seed: Seed | undefined, id: string | undefined, variants: number): number;
|
|
352
|
+
/**
|
|
353
|
+
* The exact outline of a frame kind: the input the grounds build inks, once per variant, into the
|
|
354
|
+
* pieces of `ui.css` (DD-022). It is an `ornament` stroke —a frame carries no value (Art. 1, as
|
|
355
|
+
* amended)— so the ground's inker may draw it by hand, with its vertices preserved. Build time only.
|
|
356
|
+
*/
|
|
357
|
+
declare function uiFrameOutline(kind: UiFrameKind): Geometry;
|
|
358
|
+
|
|
359
|
+
/**
|
|
360
|
+
* Keeps the first item of each key and skips later ones, and any item without a key, warning
|
|
361
|
+
* `SP019` without throwing (REQ-325). Returns the input itself when every key is unique.
|
|
362
|
+
*/
|
|
363
|
+
declare function uiItems<T extends {
|
|
364
|
+
readonly key: string;
|
|
365
|
+
}>(items: readonly T[], component: string): readonly T[];
|
|
366
|
+
/**
|
|
367
|
+
* The key a composite shows as selected (Data Model §2.14): the given key if an enabled item has
|
|
368
|
+
* it; otherwise `null` for a RadioGroup (`'none'`), the first enabled key for Segmented and Tabs
|
|
369
|
+
* (`'first'`). Silent: a key that leaves `items` is an ordinary state of dynamic data (A-06).
|
|
370
|
+
*/
|
|
371
|
+
declare function uiSelectedKey(items: readonly UiItem[], value: string | null | undefined, fallback: 'none' | 'first'): string | null;
|
|
372
|
+
|
|
373
|
+
/**
|
|
374
|
+
* A Button or Badge needs an accessible name: its text content or a `label`. Without either it
|
|
375
|
+
* still renders, and warns `SP018` in development (REQ-319).
|
|
376
|
+
*/
|
|
377
|
+
declare function uiRequireName(component: string, text: string | undefined, label: string | undefined): void;
|
|
378
|
+
|
|
379
|
+
/** The `ui` tokens of a ground that declares none (Data Model §3.8). */
|
|
380
|
+
declare const UI_TOKEN_DEFAULTS: UiTokens;
|
|
381
|
+
/**
|
|
382
|
+
* A ground's `ui` tokens, or the defaults, held to their domain: heights ≥ 24 px, focus ≥ 2 px,
|
|
383
|
+
* 1..6 variants. A `weight` ground has no inker that draws by hand, so its frame is always the
|
|
384
|
+
* exact `css` one with a single variant (DD-022). Pure.
|
|
385
|
+
*/
|
|
386
|
+
declare function resolveUiTokens(ground: Ground): UiTokens;
|
|
387
|
+
|
|
388
|
+
/** One repeating layer of a control's tone: a tile the grounds build inks and lays as a CSS mask. */
|
|
389
|
+
interface UiToneLayer {
|
|
390
|
+
readonly width: number;
|
|
391
|
+
readonly height: number;
|
|
392
|
+
readonly strokes: readonly Stroke[];
|
|
393
|
+
}
|
|
394
|
+
/**
|
|
395
|
+
* The tone of a control at one step of a ground's ramp (DD-026, REQ-308): one layer of hachure,
|
|
396
|
+
* two for cross-hatch (each its own period, laid as two mask layers), none for a `weight` step,
|
|
397
|
+
* whose tone is the frame's line weight. Its lines are `ornament`: a tone is not a value, so the
|
|
398
|
+
* ground's inker may draw them by hand, vertices preserved. Build time only. Pure.
|
|
399
|
+
*/
|
|
400
|
+
declare function uiToneTile(spec: ToneSpec): readonly UiToneLayer[];
|
|
401
|
+
|
|
402
|
+
/** Exact glyphs in a 16 × 16 box: their strokes are values, never inked (REQ-304, REQ-310). */
|
|
403
|
+
declare const UI_GLYPHS: Readonly<{
|
|
404
|
+
tick: "M3.5,8.5L6.5,11.5L12.5,4.5";
|
|
405
|
+
dash: "M4,8H12";
|
|
406
|
+
cross: "M4.5,4.5L11.5,11.5M11.5,4.5L4.5,11.5";
|
|
407
|
+
warning: "M8,2.5L14.5,13.5H1.5Z M8,6.5V9.5 M8,11.5V11.5";
|
|
408
|
+
/** A radio's selection: filled by ui.css. */
|
|
409
|
+
dot: "M11,8A3,3 0 1,1 5,8A3,3 0 1,1 11,8Z";
|
|
410
|
+
/** A Rate mark (C-2). */
|
|
411
|
+
lozenge: "M8,1.5L14.5,8L8,14.5L1.5,8Z";
|
|
412
|
+
info: "M14.5,8A6.5,6.5 0 1,1 1.5,8A6.5,6.5 0 1,1 14.5,8Z M8,7.5V11.5 M8,4.75V4.75";
|
|
413
|
+
}>;
|
|
414
|
+
type UiGlyph = keyof typeof UI_GLYPHS;
|
|
415
|
+
|
|
416
|
+
/**
|
|
417
|
+
* The markup contract of the UI components (API delta §4), as data: every adapter writes this tree
|
|
418
|
+
* and nothing else, and the parity gate compares each adapter's server render with it (REQ-327).
|
|
419
|
+
* An adapter binds behaviour —value, events, forms— to the elements marked `bind`, and puts the
|
|
420
|
+
* consumer's content where a `slot` stands. It computes nothing (Art. 2).
|
|
421
|
+
*/
|
|
422
|
+
type UiAttrValue = string | true;
|
|
423
|
+
interface UiElement {
|
|
424
|
+
readonly tag: string;
|
|
425
|
+
/** HTML attribute names; `true` is a boolean attribute. */
|
|
426
|
+
readonly attrs: Readonly<Record<string, UiAttrValue>>;
|
|
427
|
+
readonly children: readonly UiNode[];
|
|
428
|
+
/** What an adapter binds to the element: see `UiBind`. */
|
|
429
|
+
readonly bind?: UiBind;
|
|
430
|
+
}
|
|
431
|
+
/**
|
|
432
|
+
* `native`: a control an adapter binds value, events and forms to —one, or one per item of a
|
|
433
|
+
* composite, told apart by its `value` or `data-key`. `close`: the button that emits `close`.
|
|
434
|
+
*/
|
|
435
|
+
type UiBind = 'native' | 'close';
|
|
436
|
+
type UiSlot = 'content' | 'prefix' | 'suffix' | 'extra' | 'footer';
|
|
437
|
+
type UiNode = UiElement | {
|
|
438
|
+
readonly text: string;
|
|
439
|
+
} | {
|
|
440
|
+
readonly slot: UiSlot;
|
|
441
|
+
};
|
|
442
|
+
/** What a component inherits around it: the provider, the dashboard cell, the environment. */
|
|
443
|
+
interface UiEnvironment {
|
|
444
|
+
readonly provider?: ProviderConfig;
|
|
445
|
+
/** The configuration of the dashboard whose cell holds the component (REQ-311). */
|
|
446
|
+
readonly cell?: ProviderConfig;
|
|
447
|
+
/** `prefers-contrast: more` or `forced-colors: active` holds (REQ-123). */
|
|
448
|
+
readonly forcedPrecision?: boolean;
|
|
449
|
+
}
|
|
450
|
+
interface UiResolved {
|
|
451
|
+
readonly ground: string;
|
|
452
|
+
readonly substrate: SubstrateName;
|
|
453
|
+
readonly mode: InkMode;
|
|
454
|
+
readonly size: UiSize;
|
|
455
|
+
/** 0..5: `ui.css` folds it onto the variants the ground draws. */
|
|
456
|
+
readonly frame: number;
|
|
457
|
+
}
|
|
458
|
+
/**
|
|
459
|
+
* Ground, substrate and mode with the charts' precedence: prop, then dashboard, then provider,
|
|
460
|
+
* then the library default; a forced `precision` applies after, and nothing overrides it (REQ-311).
|
|
461
|
+
*/
|
|
462
|
+
declare function resolveUi(props: CommonUiProps, env: UiEnvironment): UiResolved;
|
|
463
|
+
/** `SpButton`: a native `<button>`, or `<a>` with `href` (REQ-314, REQ-310). */
|
|
464
|
+
declare function uiButtonView(props: SpButtonProps, r: UiResolved, content: {
|
|
465
|
+
readonly text?: string;
|
|
466
|
+
}): UiElement;
|
|
467
|
+
/** `SpInput`: a native `<input>` in a framed box, its message after it (REQ-314, REQ-334). */
|
|
468
|
+
declare function uiInputView(props: SpInputProps, r: UiResolved, state: {
|
|
469
|
+
readonly value: string;
|
|
470
|
+
readonly prefix?: boolean;
|
|
471
|
+
readonly suffix?: boolean;
|
|
472
|
+
}): UiElement;
|
|
473
|
+
/** `SpCheckbox`: native state; the tick and dash are drawn and shown by it (REQ-310). */
|
|
474
|
+
declare function uiCheckboxView(props: SpCheckboxProps, r: UiResolved, state: {
|
|
475
|
+
readonly checked: boolean;
|
|
476
|
+
}): UiElement;
|
|
477
|
+
/** `SpSwitch`: a native checkbox with `role="switch"`, a pill track and an exact knob (REQ-314). */
|
|
478
|
+
declare function uiSwitchView(props: SpSwitchProps, r: UiResolved, state: {
|
|
479
|
+
readonly checked: boolean;
|
|
480
|
+
}): UiElement;
|
|
481
|
+
/** `SpCard`: an `<article>` named by its heading, or a `<section>` without a title (REQ-318). */
|
|
482
|
+
declare function uiCardView(props: SpCardProps, r: UiResolved, slots: {
|
|
483
|
+
readonly extra?: boolean;
|
|
484
|
+
readonly footer?: boolean;
|
|
485
|
+
}): UiElement;
|
|
486
|
+
/** `SpDivider`: a `separator`; with text, the text between two rules (REQ-318). */
|
|
487
|
+
declare function uiDividerView(props: SpDividerProps, r: UiResolved): UiElement;
|
|
488
|
+
|
|
489
|
+
/** `SpRadioGroup`: a `<fieldset>` of native radios; the value `null` checks none (REQ-314, REQ-322). */
|
|
490
|
+
declare function uiRadioGroupView(props: SpRadioGroupProps, r: UiResolved, state: {
|
|
491
|
+
readonly value: string | null;
|
|
492
|
+
}): UiElement;
|
|
493
|
+
/** `SpSegmented`: native radios in one frame; the selected segment toned and heightened (REQ-308, REQ-309). */
|
|
494
|
+
declare function uiSegmentedView(props: SpSegmentedProps, r: UiResolved, state: {
|
|
495
|
+
readonly value: string | null;
|
|
496
|
+
}): UiElement;
|
|
497
|
+
/** `SpTabs`: a tablist of native buttons, one tab stop on the selected; panels are the content (REQ-314, REQ-315). */
|
|
498
|
+
declare function uiTabsView(props: SpTabsProps, r: UiResolved, state: {
|
|
499
|
+
readonly value: string | null;
|
|
500
|
+
}): UiElement;
|
|
501
|
+
/**
|
|
502
|
+
* `SpTabPanel`: a `tabpanel` labelled by its tab, focusable, hidden unless its tab is selected.
|
|
503
|
+
* `tabs` is what the enclosing `SpTabs` shares: its `id` and the selected key.
|
|
504
|
+
*/
|
|
505
|
+
declare function uiTabPanelView(props: {
|
|
506
|
+
readonly value: string;
|
|
507
|
+
}, tabs: {
|
|
508
|
+
readonly id?: string;
|
|
509
|
+
readonly value: string | null;
|
|
510
|
+
}): UiElement;
|
|
511
|
+
/**
|
|
512
|
+
* `SpSlider`: a native range over the drawing. Its fraction is a custom property (DD-025): fill
|
|
513
|
+
* and thumb sit at it exactly; the thumb is the one heightening (REQ-309).
|
|
514
|
+
*/
|
|
515
|
+
declare function uiSliderView(props: SpSliderProps, r: UiResolved, state: {
|
|
516
|
+
readonly value: number;
|
|
517
|
+
}): UiElement;
|
|
518
|
+
/** `SpRate`: `count` native radios valued 1..count, drawn as exact lozenges; filled up to the value (C-2). */
|
|
519
|
+
declare function uiRateView(props: SpRateProps, r: UiResolved, state: {
|
|
520
|
+
readonly value: number;
|
|
521
|
+
}): UiElement;
|
|
522
|
+
|
|
523
|
+
/** `SpSteps`: an ordered list; the current step has `aria-current="step"` and the heightening (REQ-318, REQ-309). */
|
|
524
|
+
declare function uiStepsView(props: SpStepsProps, r: UiResolved): UiElement;
|
|
525
|
+
/** `SpTag`: framed and toned at its level (default 1); closable, a native close button (REQ-308). */
|
|
526
|
+
declare function uiTagView(props: SpTagProps, r: UiResolved, content: {
|
|
527
|
+
readonly text?: string;
|
|
528
|
+
}): UiElement;
|
|
529
|
+
/** `SpBadge`: its count is text beside the content, so it is in the accessible name (REQ-318). */
|
|
530
|
+
declare function uiBadgeView(props: SpBadgeProps, r: UiResolved, content: {
|
|
531
|
+
readonly text?: string;
|
|
532
|
+
}): UiElement;
|
|
533
|
+
/** `SpProgress`: a `progressbar`; without a value, indeterminate: no `aria-valuenow`, a static tone (REQ-318, REQ-320). */
|
|
534
|
+
declare function uiProgressView(props: SpProgressProps, r: UiResolved): UiElement;
|
|
535
|
+
/**
|
|
536
|
+
* `SpAlert`: `alert` for error and warning, `status` otherwise (REQ-318). Error alone takes a tone,
|
|
537
|
+
* the ground's `alertError`, with its text on a plate (C-3); every kind has its exact glyph.
|
|
538
|
+
*/
|
|
539
|
+
declare function uiAlertView(props: SpAlertProps, r: UiResolved, state: {
|
|
540
|
+
readonly closable: boolean;
|
|
541
|
+
}): UiElement;
|
|
542
|
+
/** `SpSkeleton`: `aria-busy`, a label for assistive technology, and hidden toned shapes (REQ-318). */
|
|
543
|
+
declare function uiSkeletonView(props: SpSkeletonProps, r: UiResolved): UiElement;
|
|
544
|
+
|
|
545
|
+
export { type AlertKind, type CommonUiProps, type SpAlertProps, type SpBadgeProps, type SpButtonProps, type SpCardProps, type SpCheckboxProps, type SpDividerProps, type SpInputProps, type SpProgressProps, type SpRadioGroupProps, type SpRateProps, type SpSegmentedProps, type SpSkeletonProps, type SpSliderProps, type SpStepsProps, type SpSwitchProps, type SpTabsProps, type SpTagProps, type StepItem, type StepStatus, UI_COMPONENTS, UI_FRAME_KINDS, UI_GLYPHS, UI_PROGRESS_VIEWBOX, UI_TOKEN_DEFAULTS, type UiAttrValue, type UiBind, type UiComponentRow, type UiElement, type UiEnvironment, type UiFrameKind, type UiGlyph, type UiGroup, type UiItem, type UiNode, type UiOrientation, type UiRange, type UiResolved, type UiRovingKey, type UiRovingRoot, type UiRovingState, type UiSize, type UiSlot, type UiStep, type UiToneLayer, type UiToneLevel, type UiValue, type UiVariant, resolveUi, resolveUiTokens, uiAlertView, uiBadgeView, uiButtonView, uiCardView, uiCheckboxView, uiDividerView, uiFrameOutline, uiFrameVariant, uiInputView, uiIsRovingKey, uiItems, uiProgressArc, uiProgressView, uiRadioGroupView, uiRange, uiRateCount, uiRateView, uiRequireName, uiRovingFocus, uiRovingKey, uiSegmentedView, uiSelectedKey, uiSkeletonView, uiSliderView, uiSteps, uiStepsView, uiSwitchView, uiTabPanelView, uiTabsView, uiTagView, uiToneTile, uiValue };
|