@handamade/psi-react 0.8.0 → 0.9.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/dist/IconButton/IconButton.d.ts +4 -0
- package/dist/IconButton/IconButton.d.ts.map +1 -1
- package/dist/Input/Input.d.ts +8 -2
- package/dist/Input/Input.d.ts.map +1 -1
- package/dist/Menu/Menu.d.ts +7 -0
- package/dist/Menu/Menu.d.ts.map +1 -1
- package/dist/index.js +161 -160
- package/dist/manifest.json +15 -1
- package/dist/patterns.json +455 -5
- package/dist/styles.css +1 -1
- package/docs/IconButton.md +1 -0
- package/docs/Input.md +1 -0
- package/docs/Menu.md +1 -1
- package/llms.txt +1 -1
- package/package.json +2 -2
package/dist/manifest.json
CHANGED
|
@@ -61,6 +61,13 @@
|
|
|
61
61
|
"description": "Square icon-only button; same variant/size/href contract as Button. Give it an accessible name (`aria-label`).",
|
|
62
62
|
"slots": [],
|
|
63
63
|
"props": [
|
|
64
|
+
{
|
|
65
|
+
"name": "aria-label",
|
|
66
|
+
"type": "string",
|
|
67
|
+
"required": true,
|
|
68
|
+
"default": null,
|
|
69
|
+
"description": "Accessible name for the icon-only control. Required: an IconButton has\nno text to name it, so omitting this ships an unnameable button (D60).\nIf you also pass `aria-labelledby`, that wins per the accname algorithm."
|
|
70
|
+
},
|
|
64
71
|
{
|
|
65
72
|
"name": "variant",
|
|
66
73
|
"type": "\"accent\" | \"neutral\" | \"ghost\" | \"danger\"",
|
|
@@ -194,6 +201,13 @@
|
|
|
194
201
|
"description": "Single-line text input with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).",
|
|
195
202
|
"slots": [],
|
|
196
203
|
"props": [
|
|
204
|
+
{
|
|
205
|
+
"name": "type",
|
|
206
|
+
"type": "\"number\" | \"text\" | \"search\" | \"email\" | \"tel\" | \"url\" | \"password\" | \"date\"",
|
|
207
|
+
"required": false,
|
|
208
|
+
"default": "text",
|
|
209
|
+
"description": "Input type."
|
|
210
|
+
},
|
|
197
211
|
{
|
|
198
212
|
"name": "size",
|
|
199
213
|
"type": "24 | 32 | 40 | 48",
|
|
@@ -718,7 +732,7 @@
|
|
|
718
732
|
"type": "(reason: \"item-select\" | \"esc\" | \"outside\") => void",
|
|
719
733
|
"required": true,
|
|
720
734
|
"default": null,
|
|
721
|
-
"description": "Called when a dismissal is *requested*; the consumer flips `open`.\n\nMenu never closes itself on `\"esc\"` or `\"item-select\"` — the popover stays\nopen until `open` becomes false (D50). `\"outside\"` is the one exception:\nlight dismiss is performed by the browser before it tells us, so by the\ntime that reason is reported the popover is already closed. Flipping\n`open` to false is still required, to keep React's state in step."
|
|
735
|
+
"description": "Called when a dismissal is *requested*; the consumer flips `open`.\n\nMenu never closes itself on `\"esc\"` or `\"item-select\"` — the popover stays\nopen until `open` becomes false (D50). `\"outside\"` is the one exception:\nlight dismiss is performed by the browser before it tells us, so by the\ntime that reason is reported the popover is already closed. Flipping\n`open` to false is still required, to keep React's state in step.\n\nInvariant (D58): a dismissal is only ever reported for a menu that is\ncurrently open according to its own `open` prop. The platform can close\nan auto popover before the consumer's state catches up — clicking another\nmenu's trigger light-dismisses this one before the consumer's click\nhandler runs — and a report for an already-closed menu would clear a\nselection that has since moved on."
|
|
722
736
|
},
|
|
723
737
|
{
|
|
724
738
|
"name": "trigger",
|
package/dist/patterns.json
CHANGED
|
@@ -1,5 +1,215 @@
|
|
|
1
1
|
{
|
|
2
2
|
"patterns": [
|
|
3
|
+
{
|
|
4
|
+
"id": "action-feedback",
|
|
5
|
+
"intent": "Transient confirmation after a completed action, with an optional undo affordance",
|
|
6
|
+
"match": [
|
|
7
|
+
"toast",
|
|
8
|
+
"snackbar",
|
|
9
|
+
"action feedback",
|
|
10
|
+
"confirmation message",
|
|
11
|
+
"undo toast"
|
|
12
|
+
],
|
|
13
|
+
"compose": {
|
|
14
|
+
"component": "Toast",
|
|
15
|
+
"props": {
|
|
16
|
+
"variant": "{param:variant}"
|
|
17
|
+
},
|
|
18
|
+
"slots": {
|
|
19
|
+
"body": [
|
|
20
|
+
"{content:message}"
|
|
21
|
+
],
|
|
22
|
+
"action": [
|
|
23
|
+
{
|
|
24
|
+
"component": "Button",
|
|
25
|
+
"props": {
|
|
26
|
+
"variant": "ghost"
|
|
27
|
+
},
|
|
28
|
+
"content": "undo-label"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"parameters": [
|
|
34
|
+
{
|
|
35
|
+
"key": "variant",
|
|
36
|
+
"ask": "What kind of outcome is being confirmed?",
|
|
37
|
+
"options": [
|
|
38
|
+
"success",
|
|
39
|
+
"danger",
|
|
40
|
+
"neutral"
|
|
41
|
+
],
|
|
42
|
+
"default": "success"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"content": {
|
|
46
|
+
"message": "[what just happened]",
|
|
47
|
+
"undo-label": "Undo"
|
|
48
|
+
},
|
|
49
|
+
"gaps": [
|
|
50
|
+
"Toast"
|
|
51
|
+
],
|
|
52
|
+
"blocked": true,
|
|
53
|
+
"preset": null
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"id": "bulk-action-bar",
|
|
57
|
+
"intent": "Bar that appears when table rows are selected: selection count, bulk actions, and a clear-selection control",
|
|
58
|
+
"match": [
|
|
59
|
+
"bulk actions",
|
|
60
|
+
"selection bar",
|
|
61
|
+
"batch actions",
|
|
62
|
+
"selected rows toolbar"
|
|
63
|
+
],
|
|
64
|
+
"compose": {
|
|
65
|
+
"component": "Toolbar",
|
|
66
|
+
"props": {
|
|
67
|
+
"gap": 12
|
|
68
|
+
},
|
|
69
|
+
"slots": {
|
|
70
|
+
"body": [
|
|
71
|
+
{
|
|
72
|
+
"component": "Tag",
|
|
73
|
+
"props": {
|
|
74
|
+
"variant": "accent",
|
|
75
|
+
"subtle": true
|
|
76
|
+
},
|
|
77
|
+
"content": "count-label"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"component": "Button",
|
|
81
|
+
"props": {
|
|
82
|
+
"variant": "neutral"
|
|
83
|
+
},
|
|
84
|
+
"content": "export-label"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"component": "Button",
|
|
88
|
+
"props": {
|
|
89
|
+
"variant": "danger-subtle"
|
|
90
|
+
},
|
|
91
|
+
"content": "delete-label"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"component": "Button",
|
|
95
|
+
"props": {
|
|
96
|
+
"variant": "ghost"
|
|
97
|
+
},
|
|
98
|
+
"content": "clear-label"
|
|
99
|
+
}
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
"parameters": [],
|
|
104
|
+
"content": {
|
|
105
|
+
"count-label": "[n] selected",
|
|
106
|
+
"export-label": "Export",
|
|
107
|
+
"delete-label": "Delete",
|
|
108
|
+
"clear-label": "Clear selection"
|
|
109
|
+
},
|
|
110
|
+
"gaps": [],
|
|
111
|
+
"blocked": false,
|
|
112
|
+
"preset": "<Toolbar\n gap={12}\n>\n <Tag subtle={true} variant=\"accent\">[n] selected</Tag>\n <Button variant=\"neutral\">Export</Button>\n <Button variant=\"danger-subtle\">Delete</Button>\n <Button variant=\"ghost\">Clear selection</Button>\n</Toolbar>\n"
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"id": "data-table",
|
|
116
|
+
"intent": "Sortable, selectable table of records with numeric columns and a per-row actions menu — compose the row menu from the row-actions pattern",
|
|
117
|
+
"match": [
|
|
118
|
+
"data table",
|
|
119
|
+
"transactions table",
|
|
120
|
+
"sortable table",
|
|
121
|
+
"records table",
|
|
122
|
+
"list of transactions"
|
|
123
|
+
],
|
|
124
|
+
"compose": {
|
|
125
|
+
"component": "Table",
|
|
126
|
+
"props": {
|
|
127
|
+
"selectable": true,
|
|
128
|
+
"sortable": true
|
|
129
|
+
},
|
|
130
|
+
"slots": {
|
|
131
|
+
"head": [
|
|
132
|
+
"{content:columns-note}"
|
|
133
|
+
],
|
|
134
|
+
"body": [
|
|
135
|
+
"{content:rows-note}"
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
"parameters": [],
|
|
140
|
+
"content": {
|
|
141
|
+
"columns-note": "[one header cell per column; numeric columns align right]",
|
|
142
|
+
"rows-note": "[one row per record; put the row-actions menu in the last cell]"
|
|
143
|
+
},
|
|
144
|
+
"gaps": [
|
|
145
|
+
"Table"
|
|
146
|
+
],
|
|
147
|
+
"blocked": true,
|
|
148
|
+
"preset": null
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"id": "date-range-filter",
|
|
152
|
+
"intent": "From/to date pair for narrowing a dated list — native date inputs, no calendar widget",
|
|
153
|
+
"match": [
|
|
154
|
+
"date range filter",
|
|
155
|
+
"from to date",
|
|
156
|
+
"date filter",
|
|
157
|
+
"period filter",
|
|
158
|
+
"filter by date"
|
|
159
|
+
],
|
|
160
|
+
"compose": {
|
|
161
|
+
"component": "Toolbar",
|
|
162
|
+
"props": {
|
|
163
|
+
"gap": 12
|
|
164
|
+
},
|
|
165
|
+
"slots": {
|
|
166
|
+
"body": [
|
|
167
|
+
{
|
|
168
|
+
"component": "Field",
|
|
169
|
+
"slots": {
|
|
170
|
+
"label": [
|
|
171
|
+
"{content:from-label}"
|
|
172
|
+
],
|
|
173
|
+
"body": [
|
|
174
|
+
{
|
|
175
|
+
"component": "Input",
|
|
176
|
+
"props": {
|
|
177
|
+
"type": "date",
|
|
178
|
+
"size": 32
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"component": "Field",
|
|
186
|
+
"slots": {
|
|
187
|
+
"label": [
|
|
188
|
+
"{content:to-label}"
|
|
189
|
+
],
|
|
190
|
+
"body": [
|
|
191
|
+
{
|
|
192
|
+
"component": "Input",
|
|
193
|
+
"props": {
|
|
194
|
+
"type": "date",
|
|
195
|
+
"size": 32
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
]
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
"parameters": [],
|
|
205
|
+
"content": {
|
|
206
|
+
"from-label": "From",
|
|
207
|
+
"to-label": "To"
|
|
208
|
+
},
|
|
209
|
+
"gaps": [],
|
|
210
|
+
"blocked": false,
|
|
211
|
+
"preset": "<Toolbar\n gap={12}\n>\n <Field\n label=\"From\"\n >\n <Input size={32} type=\"date\" />\n </Field>\n <Field\n label=\"To\"\n >\n <Input size={32} type=\"date\" />\n </Field>\n</Toolbar>\n"
|
|
212
|
+
},
|
|
3
213
|
{
|
|
4
214
|
"id": "destructive-confirm",
|
|
5
215
|
"intent": "Dialog confirming a destructive action",
|
|
@@ -59,6 +269,108 @@
|
|
|
59
269
|
"blocked": false,
|
|
60
270
|
"preset": "<Dialog\n footer={<>\n <Button size={32} variant=\"ghost\">Cancel</Button>\n <Button size={32} variant=\"danger\">[verb the object]</Button>\n </>}\n title=\"[Delete the object?]\"\n>\n [what is permanently lost]\n</Dialog>\n"
|
|
61
271
|
},
|
|
272
|
+
{
|
|
273
|
+
"id": "detail-drawer",
|
|
274
|
+
"intent": "Side sheet showing one record's detail, opened from a table row, with its primary actions in a footer",
|
|
275
|
+
"match": [
|
|
276
|
+
"detail drawer",
|
|
277
|
+
"side sheet",
|
|
278
|
+
"row detail",
|
|
279
|
+
"slide-over",
|
|
280
|
+
"record detail panel"
|
|
281
|
+
],
|
|
282
|
+
"compose": {
|
|
283
|
+
"component": "Drawer",
|
|
284
|
+
"props": {
|
|
285
|
+
"side": "{param:side}"
|
|
286
|
+
},
|
|
287
|
+
"slots": {
|
|
288
|
+
"title": [
|
|
289
|
+
"{content:title}"
|
|
290
|
+
],
|
|
291
|
+
"body": [
|
|
292
|
+
"{content:body-note}"
|
|
293
|
+
],
|
|
294
|
+
"footer": [
|
|
295
|
+
{
|
|
296
|
+
"component": "Button",
|
|
297
|
+
"props": {
|
|
298
|
+
"variant": "accent"
|
|
299
|
+
},
|
|
300
|
+
"content": "primary-label"
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"component": "Button",
|
|
304
|
+
"props": {
|
|
305
|
+
"variant": "neutral"
|
|
306
|
+
},
|
|
307
|
+
"content": "dismiss-label"
|
|
308
|
+
}
|
|
309
|
+
]
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
"parameters": [
|
|
313
|
+
{
|
|
314
|
+
"key": "side",
|
|
315
|
+
"ask": "Which edge should the drawer open from?",
|
|
316
|
+
"options": [
|
|
317
|
+
"end",
|
|
318
|
+
"start"
|
|
319
|
+
],
|
|
320
|
+
"default": "end"
|
|
321
|
+
}
|
|
322
|
+
],
|
|
323
|
+
"content": {
|
|
324
|
+
"title": "[record title]",
|
|
325
|
+
"body-note": "[key-value summary of the selected record]",
|
|
326
|
+
"primary-label": "Save",
|
|
327
|
+
"dismiss-label": "Close"
|
|
328
|
+
},
|
|
329
|
+
"gaps": [
|
|
330
|
+
"Drawer"
|
|
331
|
+
],
|
|
332
|
+
"blocked": true,
|
|
333
|
+
"preset": null
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"id": "empty-state",
|
|
337
|
+
"intent": "Placeholder shown when a list has no results, distinguishing an empty filter from an empty dataset",
|
|
338
|
+
"match": [
|
|
339
|
+
"empty state",
|
|
340
|
+
"no results",
|
|
341
|
+
"nothing here",
|
|
342
|
+
"zero state",
|
|
343
|
+
"no data"
|
|
344
|
+
],
|
|
345
|
+
"compose": {
|
|
346
|
+
"component": "Panel",
|
|
347
|
+
"props": {
|
|
348
|
+
"padding": 24
|
|
349
|
+
},
|
|
350
|
+
"slots": {
|
|
351
|
+
"body": [
|
|
352
|
+
"{content:headline}",
|
|
353
|
+
"{content:explanation}",
|
|
354
|
+
{
|
|
355
|
+
"component": "Button",
|
|
356
|
+
"props": {
|
|
357
|
+
"variant": "neutral"
|
|
358
|
+
},
|
|
359
|
+
"content": "reset-label"
|
|
360
|
+
}
|
|
361
|
+
]
|
|
362
|
+
}
|
|
363
|
+
},
|
|
364
|
+
"parameters": [],
|
|
365
|
+
"content": {
|
|
366
|
+
"headline": "[nothing matches these filters]",
|
|
367
|
+
"explanation": "[say whether the dataset is empty or the filters are too narrow]",
|
|
368
|
+
"reset-label": "Clear filters"
|
|
369
|
+
},
|
|
370
|
+
"gaps": [],
|
|
371
|
+
"blocked": false,
|
|
372
|
+
"preset": "<Panel\n padding={24}\n>\n [nothing matches these filters]\n [say whether the dataset is empty or the filters are too narrow]\n <Button variant=\"neutral\">Clear filters</Button>\n</Panel>\n"
|
|
373
|
+
},
|
|
62
374
|
{
|
|
63
375
|
"id": "filter-toolbar",
|
|
64
376
|
"intent": "Toolbar of filter controls: search, category select, active-filter tags",
|
|
@@ -95,7 +407,7 @@
|
|
|
95
407
|
},
|
|
96
408
|
{
|
|
97
409
|
"id": "row-actions",
|
|
98
|
-
"intent": "List or table row with
|
|
410
|
+
"intent": "List or table row with an icon-only actions menu, including a destructive item — hand the destructive item's confirmation off to the destructive-confirm pattern",
|
|
99
411
|
"match": [
|
|
100
412
|
"row actions",
|
|
101
413
|
"per-row actions",
|
|
@@ -112,11 +424,12 @@
|
|
|
112
424
|
"slots": {
|
|
113
425
|
"trigger": [
|
|
114
426
|
{
|
|
115
|
-
"component": "
|
|
427
|
+
"component": "IconButton",
|
|
116
428
|
"props": {
|
|
117
|
-
"variant": "ghost"
|
|
429
|
+
"variant": "ghost",
|
|
430
|
+
"aria-label": "{content:trigger-label}"
|
|
118
431
|
},
|
|
119
|
-
"content": "trigger-
|
|
432
|
+
"content": "trigger-icon"
|
|
120
433
|
}
|
|
121
434
|
],
|
|
122
435
|
"body": [
|
|
@@ -154,13 +467,14 @@
|
|
|
154
467
|
],
|
|
155
468
|
"content": {
|
|
156
469
|
"trigger-label": "Actions",
|
|
470
|
+
"trigger-icon": "[icon]",
|
|
157
471
|
"edit-label": "Edit",
|
|
158
472
|
"duplicate-label": "Duplicate",
|
|
159
473
|
"delete-label": "Delete"
|
|
160
474
|
},
|
|
161
475
|
"gaps": [],
|
|
162
476
|
"blocked": false,
|
|
163
|
-
"preset": "<Menu\n aria-label=\"Actions\"\n placement=\"bottom-end\"\n trigger={<
|
|
477
|
+
"preset": "<Menu\n aria-label=\"Actions\"\n placement=\"bottom-end\"\n trigger={<IconButton aria-label=\"Actions\" variant=\"ghost\">[icon]</IconButton>}\n>\n <MenuItem>Edit</MenuItem>\n <MenuItem>Duplicate</MenuItem>\n <MenuSeparator />\n <MenuItem variant=\"danger\">Delete</MenuItem>\n</Menu>\n"
|
|
164
478
|
},
|
|
165
479
|
{
|
|
166
480
|
"id": "settings-form-row",
|
|
@@ -201,6 +515,142 @@
|
|
|
201
515
|
"gaps": [],
|
|
202
516
|
"blocked": false,
|
|
203
517
|
"preset": "<Field\n description=\"[one-line consequence of the setting]\"\n group={true}\n label=\"[setting name]\"\n>\n <Switch>[what turning it on does]</Switch>\n</Field>\n"
|
|
518
|
+
},
|
|
519
|
+
{
|
|
520
|
+
"id": "summary-tiles",
|
|
521
|
+
"intent": "Row of headline figures above a ledger — balances or totals, one Card per figure",
|
|
522
|
+
"match": [
|
|
523
|
+
"summary tiles",
|
|
524
|
+
"stat cards",
|
|
525
|
+
"kpi row",
|
|
526
|
+
"balance cards",
|
|
527
|
+
"totals row"
|
|
528
|
+
],
|
|
529
|
+
"compose": {
|
|
530
|
+
"component": "Toolbar",
|
|
531
|
+
"props": {
|
|
532
|
+
"gap": 16
|
|
533
|
+
},
|
|
534
|
+
"slots": {
|
|
535
|
+
"body": [
|
|
536
|
+
{
|
|
537
|
+
"component": "Card",
|
|
538
|
+
"props": {
|
|
539
|
+
"variant": "stacked"
|
|
540
|
+
},
|
|
541
|
+
"content": "tile-note"
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
"component": "Card",
|
|
545
|
+
"props": {
|
|
546
|
+
"variant": "stacked"
|
|
547
|
+
},
|
|
548
|
+
"content": "tile-note"
|
|
549
|
+
}
|
|
550
|
+
]
|
|
551
|
+
}
|
|
552
|
+
},
|
|
553
|
+
"parameters": [],
|
|
554
|
+
"content": {
|
|
555
|
+
"tile-note": "[label above, figure below]"
|
|
556
|
+
},
|
|
557
|
+
"gaps": [],
|
|
558
|
+
"blocked": false,
|
|
559
|
+
"preset": "<Toolbar\n gap={16}\n>\n <Card variant=\"stacked\">[label above, figure below]</Card>\n <Card variant=\"stacked\">[label above, figure below]</Card>\n</Toolbar>\n"
|
|
560
|
+
},
|
|
561
|
+
{
|
|
562
|
+
"id": "tabbed-workspace",
|
|
563
|
+
"intent": "Tab set switching between sibling views of the same workspace, such as accounts or saved filters",
|
|
564
|
+
"match": [
|
|
565
|
+
"tabs",
|
|
566
|
+
"tabbed view",
|
|
567
|
+
"switch between accounts",
|
|
568
|
+
"tab bar",
|
|
569
|
+
"segmented views"
|
|
570
|
+
],
|
|
571
|
+
"compose": {
|
|
572
|
+
"component": "Tabs",
|
|
573
|
+
"props": {
|
|
574
|
+
"orientation": "{param:orientation}"
|
|
575
|
+
},
|
|
576
|
+
"slots": {
|
|
577
|
+
"list": [
|
|
578
|
+
"{content:tabs-note}"
|
|
579
|
+
],
|
|
580
|
+
"panels": [
|
|
581
|
+
"{content:panels-note}"
|
|
582
|
+
]
|
|
583
|
+
}
|
|
584
|
+
},
|
|
585
|
+
"parameters": [
|
|
586
|
+
{
|
|
587
|
+
"key": "orientation",
|
|
588
|
+
"ask": "How should the tab list be laid out?",
|
|
589
|
+
"options": [
|
|
590
|
+
"horizontal",
|
|
591
|
+
"vertical"
|
|
592
|
+
],
|
|
593
|
+
"default": "horizontal"
|
|
594
|
+
}
|
|
595
|
+
],
|
|
596
|
+
"content": {
|
|
597
|
+
"tabs-note": "[one tab per view; keep labels to one or two words]",
|
|
598
|
+
"panels-note": "[one panel per tab, in the same order]"
|
|
599
|
+
},
|
|
600
|
+
"gaps": [
|
|
601
|
+
"Tabs"
|
|
602
|
+
],
|
|
603
|
+
"blocked": true,
|
|
604
|
+
"preset": null
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"id": "table-pagination",
|
|
608
|
+
"intent": "Page-size selector and page range control beneath a data table",
|
|
609
|
+
"match": [
|
|
610
|
+
"pagination",
|
|
611
|
+
"table pagination",
|
|
612
|
+
"page controls",
|
|
613
|
+
"rows per page",
|
|
614
|
+
"paging"
|
|
615
|
+
],
|
|
616
|
+
"compose": {
|
|
617
|
+
"component": "Toolbar",
|
|
618
|
+
"props": {
|
|
619
|
+
"gap": 12
|
|
620
|
+
},
|
|
621
|
+
"slots": {
|
|
622
|
+
"body": [
|
|
623
|
+
{
|
|
624
|
+
"component": "Field",
|
|
625
|
+
"slots": {
|
|
626
|
+
"label": [
|
|
627
|
+
"{content:page-size-label}"
|
|
628
|
+
],
|
|
629
|
+
"body": [
|
|
630
|
+
{
|
|
631
|
+
"component": "Select",
|
|
632
|
+
"props": {
|
|
633
|
+
"size": 32
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
]
|
|
637
|
+
}
|
|
638
|
+
},
|
|
639
|
+
{
|
|
640
|
+
"component": "Pagination"
|
|
641
|
+
}
|
|
642
|
+
]
|
|
643
|
+
}
|
|
644
|
+
},
|
|
645
|
+
"parameters": [],
|
|
646
|
+
"content": {
|
|
647
|
+
"page-size-label": "Rows per page"
|
|
648
|
+
},
|
|
649
|
+
"gaps": [
|
|
650
|
+
"Pagination"
|
|
651
|
+
],
|
|
652
|
+
"blocked": true,
|
|
653
|
+
"preset": null
|
|
204
654
|
}
|
|
205
655
|
]
|
|
206
656
|
}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._button_c94w9_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_c94w9_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._button_c94w9_3:disabled{opacity:.4;cursor:not-allowed}._button_c94w9_3._disabled_c94w9_30{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_c94w9_44{height:var(--psi-button-24-height);padding-inline:var(--psi-button-24-padding-inline);gap:var(--psi-button-24-gap);font:var(--psi-button-font, var(--psi-button-24-font))}._size24_c94w9_44:has(>svg:first-child){padding-inline-start:var(--psi-button-24-padding-inline-icon)}._size32_c94w9_54{height:var(--psi-button-32-height);padding-inline:var(--psi-button-32-padding-inline);gap:var(--psi-button-32-gap);font:var(--psi-button-font, var(--psi-button-32-font))}._size32_c94w9_54:has(>svg:first-child){padding-inline-start:var(--psi-button-32-padding-inline-icon)}._size40_c94w9_64{height:var(--psi-button-40-height);padding-inline:var(--psi-button-40-padding-inline);gap:var(--psi-button-40-gap);font:var(--psi-button-font, var(--psi-button-40-font))}._size40_c94w9_64:has(>svg:first-child){padding-inline-start:var(--psi-button-40-padding-inline-icon)}._size48_c94w9_74{height:var(--psi-button-48-height);padding-inline:var(--psi-button-48-padding-inline);gap:var(--psi-button-48-gap);font:var(--psi-button-font, var(--psi-button-48-font))}._size48_c94w9_74:has(>svg:first-child){padding-inline-start:var(--psi-button-48-padding-inline-icon)}._accent_c94w9_87{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_c94w9_87:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-bg-hover)}._accent_c94w9_87:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-bg-active)}._accentSubtle_c94w9_99{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_c94w9_99:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_c94w9_99:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-subtle-bg-active)}._neutral_c94w9_111{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_c94w9_111:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-bg-hover)}._neutral_c94w9_111:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_c94w9_123{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_c94w9_123:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_c94w9_123:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_c94w9_135{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_c94w9_135:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-ghost-bg-hover)}._ghost_c94w9_135:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-ghost-bg-active)}._danger_c94w9_147{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_c94w9_147:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-bg-hover)}._danger_c94w9_147:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-bg-active)}._dangerSubtle_c94w9_159{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_c94w9_159:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_c94w9_159:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-subtle-bg-active)}._outline_c94w9_171{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_c94w9_171:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_c94w9_171:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-outline-bg-active)}._iconButton_129ca_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_129ca_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._iconButton_129ca_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_129ca_3._disabled_129ca_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_129ca_37{width:var(--psi-button-24-height);height:var(--psi-button-24-height)}._size32_129ca_42{width:var(--psi-button-32-height);height:var(--psi-button-32-height)}._size40_129ca_47{width:var(--psi-button-40-height);height:var(--psi-button-40-height)}._size48_129ca_52{width:var(--psi-button-48-height);height:var(--psi-button-48-height)}._accent_129ca_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_129ca_60:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-accent-bg-hover)}._accent_129ca_60:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-accent-bg-active)}._neutral_129ca_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_129ca_72:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-neutral-bg-hover)}._neutral_129ca_72:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-neutral-bg-active)}._ghost_129ca_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_129ca_84:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-ghost-bg-hover)}._ghost_129ca_84:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-ghost-bg-active)}._danger_129ca_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_129ca_96:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-danger-bg-hover)}._danger_129ca_96:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-danger-bg-active)}._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}._panel_jn8w4_1{background:var(--psi-panel-bg);border:1px solid var(--psi-panel-border);border-radius:var(--psi-panel-radius);padding:var(--psi-panel-padding)}._padding16_jn8w4_8{padding:var(--psi-space-16)}._navbar_1gyow_1{font:var(--psi-text-14-20-medium);position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1gyow_12{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._brand_1gyow_19{display:flex;align-items:center}._links_1gyow_20{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1gyow_20 a,._brand_1gyow_19 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1gyow_20 a{color:var(--psi-navbar-link-fg)}._links_1gyow_20 a:hover,._brand_1gyow_19 a{color:var(--psi-navbar-link-fg-hover)}._links_1gyow_20 a:focus-visible,._brand_1gyow_19 a:focus-visible{outline:2px solid var(--psi-navbar-focus-ring);outline-offset:2px}._actions_1gyow_50{display:flex;align-items:center;gap:var(--psi-space-8)}._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}._field_lplye_1{display:grid;gap:var(--psi-field-gap);border:0;margin:0;padding:0;min-width:0}._label_lplye_10{font:var(--psi-text-14-20-medium);color:var(--psi-field-label-fg);padding:0}._marker_lplye_16{color:var(--psi-field-marker-fg)}._message_lplye_20{margin:0;font:var(--psi-text-12-16-regular);color:var(--psi-field-message-fg)}._invalid_lplye_26 ._message_lplye_20{color:var(--psi-field-error-fg)}._dialog_l23jf_2{padding:0;border:1px solid var(--psi-dialog-border);border-radius:var(--psi-dialog-radius);background:var(--psi-dialog-bg);color:var(--psi-dialog-fg);max-width:calc(100vw - var(--psi-space-32))}._dialog_l23jf_2::backdrop{background:var(--psi-dialog-backdrop)}._dialog_l23jf_2[open]{animation:_dialog-enter_l23jf_1 var(--psi-duration-200) var(--psi-ease-soft)}._dialog_l23jf_2[open]::backdrop{animation:_backdrop-enter_l23jf_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _dialog-enter_l23jf_1{0%{opacity:0;transform:scale(.97)}}@keyframes _backdrop-enter_l23jf_1{0%{opacity:0}}._w400_l23jf_31{width:400px}._w560_l23jf_32{width:560px}._w720_l23jf_33{width:720px}._panel_l23jf_35{display:grid;gap:var(--psi-space-16);padding:var(--psi-space-24)}._header_l23jf_41{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--psi-space-12)}._title_l23jf_48{margin:0;font:var(--psi-text-18-28-medium);color:var(--psi-dialog-title-fg)}._footer_l23jf_54{display:flex;justify-content:flex-end;gap:var(--psi-space-8)}._input_hpei8_3{display:block;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-input-radius);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_hpei8_3::placeholder{color:var(--psi-input-placeholder)}._input_hpei8_3:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-hover)}._input_hpei8_3:focus{outline:2px solid var(--psi-input-focus-ring);outline-offset:-1px;border-color:transparent}._input_hpei8_3:disabled{opacity:.4;cursor:not-allowed}._size24_hpei8_37{height:var(--psi-input-24-height);padding-inline:var(--psi-input-24-padding-inline);font:var(--psi-input-24-font)}._size32_hpei8_43{height:var(--psi-input-32-height);padding-inline:var(--psi-input-32-padding-inline);font:var(--psi-input-32-font)}._size40_hpei8_49{height:var(--psi-input-40-height);padding-inline:var(--psi-input-40-padding-inline);font:var(--psi-input-40-font)}._size48_hpei8_55{height:var(--psi-input-48-height);padding-inline:var(--psi-input-48-padding-inline);font:var(--psi-input-48-font)}._error_hpei8_63{border-color:var(--psi-input-border-error)}._error_hpei8_63:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-error)}._select_4x9ck_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-select-radius);background-color:var(--psi-select-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;color:var(--psi-select-fg);font-family:var(--psi-font-sans);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_4x9ck_3:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-hover)}._select_4x9ck_3:focus{outline:2px solid var(--psi-select-focus-ring);outline-offset:-1px;border-color:transparent}._select_4x9ck_3:disabled{opacity:.4;cursor:not-allowed}._size24_4x9ck_37{height:var(--psi-select-24-height);padding-inline-start:var(--psi-select-24-padding-inline);padding-inline-end:var(--psi-select-24-padding-inline-end);background-position:right var(--psi-select-24-chevron-offset) center;font:var(--psi-select-24-font)}._size32_4x9ck_45{height:var(--psi-select-32-height);padding-inline-start:var(--psi-select-32-padding-inline);padding-inline-end:var(--psi-select-32-padding-inline-end);background-position:right var(--psi-select-32-chevron-offset) center;font:var(--psi-select-32-font)}._size40_4x9ck_53{height:var(--psi-select-40-height);padding-inline-start:var(--psi-select-40-padding-inline);padding-inline-end:var(--psi-select-40-padding-inline-end);background-position:right var(--psi-select-40-chevron-offset) center;font:var(--psi-select-40-font)}._size48_4x9ck_61{height:var(--psi-select-48-height);padding-inline-start:var(--psi-select-48-padding-inline);padding-inline-end:var(--psi-select-48-padding-inline-end);background-position:right var(--psi-select-48-chevron-offset) center;font:var(--psi-select-48-font)}._error_4x9ck_71{border-color:var(--psi-select-border-error)}._error_4x9ck_71:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-error)}._label_1v4vv_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_1v4vv_13{opacity:.4;cursor:not-allowed}._input_1v4vv_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._indicator_1v4vv_34{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-checkbox-box-radius);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_1v4vv_20:checked+._indicator_1v4vv_34{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_1v4vv_20:checked+._indicator_1v4vv_34:after{content:"";display:block;width:4px;height:8px;color:var(--psi-checkbox-check-fg);border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_1v4vv_20:focus-visible+._indicator_1v4vv_34{outline:2px solid var(--psi-checkbox-focus-ring);outline-offset:2px}._text_1v4vv_75{color:var(--psi-checkbox-fg)}._label_jru2c_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_jru2c_13{opacity:.4;cursor:not-allowed}._input_jru2c_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._track_jru2c_34{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_jru2c_20:checked+._track_jru2c_34{background:var(--psi-switch-track-bg-checked)}._input_jru2c_20:focus-visible+._track_jru2c_34{outline:2px solid var(--psi-switch-focus-ring);outline-offset:2px}._thumb_jru2c_58{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_jru2c_20:checked+._track_jru2c_34 ._thumb_jru2c_58{left:18px}._text_jru2c_75{color:var(--psi-switch-fg)}._tag_3oysa_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_3oysa_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_3oysa_17:hover{opacity:1}._dismiss_3oysa_17:focus-visible{outline:2px solid var(--psi-tag-focus-ring);outline-offset:2px}._neutral_3oysa_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_3oysa_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_3oysa_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_3oysa_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_3oysa_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_3oysa_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_3oysa_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_3oysa_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_3oysa_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_3oysa_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}._wrapper_1eu6z_3{position:relative;display:inline-flex}._tooltip_1eu6z_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-tooltip-radius);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_1eu6z_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_1eu6z_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_1eu6z_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_1eu6z_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}._toolbar_1i848_1{display:flex;flex-wrap:wrap;align-items:center}._gap8_1i848_7{gap:var(--psi-space-8)}._gap12_1i848_8{gap:var(--psi-space-12)}._gap16_1i848_9{gap:var(--psi-space-16)}._trigger_1a54a_4{display:inline-flex}._menu_1a54a_10{min-width:180px;margin:var(--psi-space-4);padding:var(--psi-space-4);border:1px solid var(--psi-menu-border);border-radius:var(--psi-menu-radius);background:var(--psi-menu-bg);color:var(--psi-menu-fg);font:var(--psi-text-14-20-regular)}._menu_1a54a_10:not([data-open]):not(:popover-open){display:none}._item_1a54a_31{display:flex;width:100%;align-items:center;padding:var(--psi-space-8) var(--psi-space-12);border:0;border-radius:var(--psi-radius-6);background:var(--psi-menu-item-bg);color:var(--psi-menu-item-fg);font:inherit;text-align:start;cursor:pointer}._item_1a54a_31:hover{background:var(--psi-menu-item-bg-hover)}._item_1a54a_31:active{background:var(--psi-menu-item-bg-active)}._item_1a54a_31[data-variant=danger]{color:var(--psi-menu-item-fg-danger)}._item_1a54a_31[aria-disabled=true]{color:var(--psi-menu-item-fg-disabled);cursor:default}._item_1a54a_31[aria-disabled=true]:hover{background:var(--psi-menu-item-bg)}._separator_1a54a_68{height:0;margin:var(--psi-space-4) 0;border-top:1px solid var(--psi-menu-separator-border)}@supports (anchor-name: --x){._menu_1a54a_10{position:fixed;margin:var(--psi-space-4);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}._menu_1a54a_10[data-placement=bottom-start]{position-area:block-end span-inline-end}._menu_1a54a_10[data-placement=bottom-end]{position-area:block-end span-inline-start}._menu_1a54a_10[data-placement=top-start]{position-area:block-start span-inline-end}._menu_1a54a_10[data-placement=top-end]{position-area:block-start span-inline-start}}
|
|
1
|
+
._button_c94w9_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;font-family:var(--psi-font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._button_c94w9_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._button_c94w9_3:disabled{opacity:.4;cursor:not-allowed}._button_c94w9_3._disabled_c94w9_30{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_c94w9_44{height:var(--psi-button-24-height);padding-inline:var(--psi-button-24-padding-inline);gap:var(--psi-button-24-gap);font:var(--psi-button-font, var(--psi-button-24-font))}._size24_c94w9_44:has(>svg:first-child){padding-inline-start:var(--psi-button-24-padding-inline-icon)}._size32_c94w9_54{height:var(--psi-button-32-height);padding-inline:var(--psi-button-32-padding-inline);gap:var(--psi-button-32-gap);font:var(--psi-button-font, var(--psi-button-32-font))}._size32_c94w9_54:has(>svg:first-child){padding-inline-start:var(--psi-button-32-padding-inline-icon)}._size40_c94w9_64{height:var(--psi-button-40-height);padding-inline:var(--psi-button-40-padding-inline);gap:var(--psi-button-40-gap);font:var(--psi-button-font, var(--psi-button-40-font))}._size40_c94w9_64:has(>svg:first-child){padding-inline-start:var(--psi-button-40-padding-inline-icon)}._size48_c94w9_74{height:var(--psi-button-48-height);padding-inline:var(--psi-button-48-padding-inline);gap:var(--psi-button-48-gap);font:var(--psi-button-font, var(--psi-button-48-font))}._size48_c94w9_74:has(>svg:first-child){padding-inline-start:var(--psi-button-48-padding-inline-icon)}._accent_c94w9_87{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_c94w9_87:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-bg-hover)}._accent_c94w9_87:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-bg-active)}._accentSubtle_c94w9_99{background:var(--psi-button-accent-subtle-bg);color:var(--psi-button-accent-subtle-fg)}._accentSubtle_c94w9_99:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-subtle-bg-hover)}._accentSubtle_c94w9_99:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-accent-subtle-bg-active)}._neutral_c94w9_111{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_c94w9_111:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-bg-hover)}._neutral_c94w9_111:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-bg-active)}._neutralSubtle_c94w9_123{background:var(--psi-button-neutral-subtle-bg);color:var(--psi-button-neutral-subtle-fg)}._neutralSubtle_c94w9_123:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-subtle-bg-hover)}._neutralSubtle_c94w9_123:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-neutral-subtle-bg-active)}._ghost_c94w9_135{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_c94w9_135:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-ghost-bg-hover)}._ghost_c94w9_135:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-ghost-bg-active)}._danger_c94w9_147{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_c94w9_147:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-bg-hover)}._danger_c94w9_147:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-bg-active)}._dangerSubtle_c94w9_159{background:var(--psi-button-danger-subtle-bg);color:var(--psi-button-danger-subtle-fg)}._dangerSubtle_c94w9_159:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-subtle-bg-hover)}._dangerSubtle_c94w9_159:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-danger-subtle-bg-active)}._outline_c94w9_171{background:var(--psi-button-outline-bg);color:var(--psi-button-outline-fg);border:1px solid var(--psi-button-outline-border)}._outline_c94w9_171:hover:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-outline-bg-hover);color:var(--psi-button-outline-fg-hover);border-color:transparent}._outline_c94w9_171:active:not(:disabled):not(._disabled_c94w9_30){background:var(--psi-button-outline-bg-active)}._iconButton_129ca_3{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--psi-button-radius);cursor:pointer;padding:0;text-decoration:none;-webkit-user-select:none;user-select:none;transition:background-color var(--psi-duration-150) var(--psi-ease-standard),color var(--psi-duration-150) var(--psi-ease-standard)}._iconButton_129ca_3:focus-visible{outline:2px solid var(--psi-button-focus-ring);outline-offset:2px}._iconButton_129ca_3:disabled{opacity:.4;cursor:not-allowed}._iconButton_129ca_3._disabled_129ca_29{opacity:.4;cursor:not-allowed;pointer-events:none}._size24_129ca_37{width:var(--psi-button-24-height);height:var(--psi-button-24-height)}._size32_129ca_42{width:var(--psi-button-32-height);height:var(--psi-button-32-height)}._size40_129ca_47{width:var(--psi-button-40-height);height:var(--psi-button-40-height)}._size48_129ca_52{width:var(--psi-button-48-height);height:var(--psi-button-48-height)}._accent_129ca_60{background:var(--psi-button-accent-bg);color:var(--psi-button-accent-fg)}._accent_129ca_60:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-accent-bg-hover)}._accent_129ca_60:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-accent-bg-active)}._neutral_129ca_72{background:var(--psi-button-neutral-bg);color:var(--psi-button-neutral-fg)}._neutral_129ca_72:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-neutral-bg-hover)}._neutral_129ca_72:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-neutral-bg-active)}._ghost_129ca_84{background:var(--psi-button-ghost-bg);color:var(--psi-button-ghost-fg)}._ghost_129ca_84:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-ghost-bg-hover)}._ghost_129ca_84:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-ghost-bg-active)}._danger_129ca_96{background:var(--psi-button-danger-bg);color:var(--psi-button-danger-fg)}._danger_129ca_96:hover:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-danger-bg-hover)}._danger_129ca_96:active:not(:disabled):not(._disabled_129ca_29){background:var(--psi-button-danger-bg-active)}._card_1btb3_1{background:var(--psi-card-bg);border:1px solid var(--psi-card-border);border-radius:var(--psi-card-radius);overflow:hidden}._stacked_1btb3_8{display:flex;flex-direction:column;gap:var(--psi-card-gap)}._featured_1btb3_10{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--psi-card-gap);align-items:start}@media(max-width:960px){._featured_1btb3_10{grid-template-columns:1fr}}._media_1btb3_22{min-width:0}._body_1btb3_23{min-width:0;display:flex;flex-direction:column;gap:var(--psi-card-gap);padding:var(--psi-card-gap)}._hoverLift_1btb3_31{transition:transform var(--psi-duration-350) var(--psi-ease-standard)}._hoverLift_1btb3_31:hover{transform:translateY(-6px)}._panel_jn8w4_1{background:var(--psi-panel-bg);border:1px solid var(--psi-panel-border);border-radius:var(--psi-panel-radius);padding:var(--psi-panel-padding)}._padding16_jn8w4_8{padding:var(--psi-space-16)}._navbar_1gyow_1{font:var(--psi-text-14-20-medium);position:sticky;top:0;z-index:var(--psi-z-nav);background:var(--psi-navbar-bg);backdrop-filter:blur(var(--psi-navbar-blur));-webkit-backdrop-filter:blur(var(--psi-navbar-blur));border-bottom:1px solid var(--psi-navbar-border)}._inner_1gyow_12{display:flex;align-items:center;gap:var(--psi-space-24);height:var(--psi-navbar-height)}._brand_1gyow_19{display:flex;align-items:center}._links_1gyow_20{display:flex;align-items:center;gap:var(--psi-space-20);margin-inline-start:auto}._links_1gyow_20 a,._brand_1gyow_19 a{text-decoration:none;transition:color var(--psi-duration-150) var(--psi-ease-soft)}._links_1gyow_20 a{color:var(--psi-navbar-link-fg)}._links_1gyow_20 a:hover,._brand_1gyow_19 a{color:var(--psi-navbar-link-fg-hover)}._links_1gyow_20 a:focus-visible,._brand_1gyow_19 a:focus-visible{outline:2px solid var(--psi-navbar-focus-ring);outline-offset:2px}._actions_1gyow_50{display:flex;align-items:center;gap:var(--psi-space-8)}._frame_et4fc_1{overflow:hidden}._frame_et4fc_1>img,._frame_et4fc_1>video{width:100%;height:100%;object-fit:cover;display:block}._field_lplye_1{display:grid;gap:var(--psi-field-gap);border:0;margin:0;padding:0;min-width:0}._label_lplye_10{font:var(--psi-text-14-20-medium);color:var(--psi-field-label-fg);padding:0}._marker_lplye_16{color:var(--psi-field-marker-fg)}._message_lplye_20{margin:0;font:var(--psi-text-12-16-regular);color:var(--psi-field-message-fg)}._invalid_lplye_26 ._message_lplye_20{color:var(--psi-field-error-fg)}._dialog_l23jf_2{padding:0;border:1px solid var(--psi-dialog-border);border-radius:var(--psi-dialog-radius);background:var(--psi-dialog-bg);color:var(--psi-dialog-fg);max-width:calc(100vw - var(--psi-space-32))}._dialog_l23jf_2::backdrop{background:var(--psi-dialog-backdrop)}._dialog_l23jf_2[open]{animation:_dialog-enter_l23jf_1 var(--psi-duration-200) var(--psi-ease-soft)}._dialog_l23jf_2[open]::backdrop{animation:_backdrop-enter_l23jf_1 var(--psi-duration-200) var(--psi-ease-soft)}@keyframes _dialog-enter_l23jf_1{0%{opacity:0;transform:scale(.97)}}@keyframes _backdrop-enter_l23jf_1{0%{opacity:0}}._w400_l23jf_31{width:400px}._w560_l23jf_32{width:560px}._w720_l23jf_33{width:720px}._panel_l23jf_35{display:grid;gap:var(--psi-space-16);padding:var(--psi-space-24)}._header_l23jf_41{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--psi-space-12)}._title_l23jf_48{margin:0;font:var(--psi-text-18-28-medium);color:var(--psi-dialog-title-fg)}._footer_l23jf_54{display:flex;justify-content:flex-end;gap:var(--psi-space-8)}._input_hpei8_3{display:block;width:100%;border:1px solid var(--psi-input-border);border-radius:var(--psi-input-radius);background:var(--psi-input-bg);color:var(--psi-input-fg);font-family:var(--psi-font-sans);transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._input_hpei8_3::placeholder{color:var(--psi-input-placeholder)}._input_hpei8_3:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-hover)}._input_hpei8_3:focus{outline:2px solid var(--psi-input-focus-ring);outline-offset:-1px;border-color:transparent}._input_hpei8_3:disabled{opacity:.4;cursor:not-allowed}._size24_hpei8_37{height:var(--psi-input-24-height);padding-inline:var(--psi-input-24-padding-inline);font:var(--psi-input-24-font)}._size32_hpei8_43{height:var(--psi-input-32-height);padding-inline:var(--psi-input-32-padding-inline);font:var(--psi-input-32-font)}._size40_hpei8_49{height:var(--psi-input-40-height);padding-inline:var(--psi-input-40-padding-inline);font:var(--psi-input-40-font)}._size48_hpei8_55{height:var(--psi-input-48-height);padding-inline:var(--psi-input-48-padding-inline);font:var(--psi-input-48-font)}._error_hpei8_63{border-color:var(--psi-input-border-error)}._error_hpei8_63:hover:not(:disabled):not(:focus){border-color:var(--psi-input-border-error)}._select_4x9ck_3{display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--psi-select-border);border-radius:var(--psi-select-radius);background-color:var(--psi-select-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;color:var(--psi-select-fg);font-family:var(--psi-font-sans);cursor:pointer;transition:border-color var(--psi-duration-150) var(--psi-ease-standard),outline var(--psi-duration-150) var(--psi-ease-standard)}._select_4x9ck_3:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-hover)}._select_4x9ck_3:focus{outline:2px solid var(--psi-select-focus-ring);outline-offset:-1px;border-color:transparent}._select_4x9ck_3:disabled{opacity:.4;cursor:not-allowed}._size24_4x9ck_37{height:var(--psi-select-24-height);padding-inline-start:var(--psi-select-24-padding-inline);padding-inline-end:var(--psi-select-24-padding-inline-end);background-position:right var(--psi-select-24-chevron-offset) center;font:var(--psi-select-24-font)}._size32_4x9ck_45{height:var(--psi-select-32-height);padding-inline-start:var(--psi-select-32-padding-inline);padding-inline-end:var(--psi-select-32-padding-inline-end);background-position:right var(--psi-select-32-chevron-offset) center;font:var(--psi-select-32-font)}._size40_4x9ck_53{height:var(--psi-select-40-height);padding-inline-start:var(--psi-select-40-padding-inline);padding-inline-end:var(--psi-select-40-padding-inline-end);background-position:right var(--psi-select-40-chevron-offset) center;font:var(--psi-select-40-font)}._size48_4x9ck_61{height:var(--psi-select-48-height);padding-inline-start:var(--psi-select-48-padding-inline);padding-inline-end:var(--psi-select-48-padding-inline-end);background-position:right var(--psi-select-48-chevron-offset) center;font:var(--psi-select-48-font)}._error_4x9ck_71{border-color:var(--psi-select-border-error)}._error_4x9ck_71:hover:not(:disabled):not(:focus){border-color:var(--psi-select-border-error)}._label_1v4vv_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-checkbox-fg)}._disabled_1v4vv_13{opacity:.4;cursor:not-allowed}._input_1v4vv_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._indicator_1v4vv_34{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1px solid var(--psi-checkbox-box-border);border-radius:var(--psi-checkbox-box-radius);background:var(--psi-checkbox-box-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard),border-color var(--psi-duration-150) var(--psi-ease-standard)}._input_1v4vv_20:checked+._indicator_1v4vv_34{background:var(--psi-checkbox-box-bg-checked);border-color:var(--psi-checkbox-box-border-checked)}._input_1v4vv_20:checked+._indicator_1v4vv_34:after{content:"";display:block;width:4px;height:8px;color:var(--psi-checkbox-check-fg);border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-.5px,-.5px)}._input_1v4vv_20:focus-visible+._indicator_1v4vv_34{outline:2px solid var(--psi-checkbox-focus-ring);outline-offset:2px}._text_1v4vv_75{color:var(--psi-checkbox-fg)}._label_jru2c_3{display:inline-flex;align-items:center;gap:var(--psi-space-8);cursor:pointer;-webkit-user-select:none;user-select:none;font:var(--psi-text-14-20-regular);color:var(--psi-switch-fg)}._disabled_jru2c_13{opacity:.4;cursor:not-allowed}._input_jru2c_20{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}._track_jru2c_34{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;border-radius:var(--psi-radius-full);background:var(--psi-switch-track-bg);transition:background-color var(--psi-duration-150) var(--psi-ease-standard)}._input_jru2c_20:checked+._track_jru2c_34{background:var(--psi-switch-track-bg-checked)}._input_jru2c_20:focus-visible+._track_jru2c_34{outline:2px solid var(--psi-switch-focus-ring);outline-offset:2px}._thumb_jru2c_58{position:absolute;width:16px;height:16px;border-radius:var(--psi-radius-full);background:var(--psi-switch-thumb-bg);left:2px;transition:left var(--psi-duration-150) var(--psi-ease-standard);box-shadow:0 1px 2px #00000029}._input_jru2c_20:checked+._track_jru2c_34 ._thumb_jru2c_58{left:18px}._text_jru2c_75{color:var(--psi-switch-fg)}._tag_3oysa_3{display:inline-flex;align-items:center;gap:var(--psi-space-4);height:24px;padding-inline:var(--psi-space-8);border-radius:var(--psi-radius-full);font:var(--psi-text-12-16-medium);white-space:nowrap;-webkit-user-select:none;user-select:none}._dismiss_3oysa_17{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:inherit;cursor:pointer;opacity:.7;margin-inline-start:var(--psi-space-2);margin-inline-end:calc(-1 * var(--psi-space-4));border-radius:var(--psi-radius-full)}._dismiss_3oysa_17:hover{opacity:1}._dismiss_3oysa_17:focus-visible{outline:2px solid var(--psi-tag-focus-ring);outline-offset:2px}._neutral_3oysa_43{background:var(--psi-tag-neutral-bg);color:var(--psi-tag-neutral-fg)}._accent_3oysa_48{background:var(--psi-tag-accent-bg);color:var(--psi-tag-accent-fg)}._success_3oysa_53{background:var(--psi-tag-success-bg);color:var(--psi-tag-success-fg)}._warning_3oysa_58{background:var(--psi-tag-warning-bg);color:var(--psi-tag-warning-fg)}._danger_3oysa_63{background:var(--psi-tag-danger-bg);color:var(--psi-tag-danger-fg)}._neutralSubtle_3oysa_70{background:var(--psi-tag-neutral-subtle-bg);color:var(--psi-tag-neutral-subtle-fg)}._accentSubtle_3oysa_75{background:var(--psi-tag-accent-subtle-bg);color:var(--psi-tag-accent-subtle-fg)}._successSubtle_3oysa_80{background:var(--psi-tag-success-subtle-bg);color:var(--psi-tag-success-subtle-fg)}._warningSubtle_3oysa_85{background:var(--psi-tag-warning-subtle-bg);color:var(--psi-tag-warning-subtle-fg)}._dangerSubtle_3oysa_90{background:var(--psi-tag-danger-subtle-bg);color:var(--psi-tag-danger-subtle-fg)}._wrapper_1eu6z_3{position:relative;display:inline-flex}._tooltip_1eu6z_10{position:absolute;z-index:var(--psi-z-tooltip);padding:var(--psi-space-4) var(--psi-space-8);border-radius:var(--psi-tooltip-radius);background:var(--psi-tooltip-bg);color:var(--psi-tooltip-fg);font:var(--psi-text-12-16-regular);white-space:nowrap;pointer-events:none}._top_1eu6z_24{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:var(--psi-space-4)}._bottom_1eu6z_31{top:100%;left:50%;transform:translate(-50%);margin-top:var(--psi-space-4)}._left_1eu6z_38{right:100%;top:50%;transform:translateY(-50%);margin-right:var(--psi-space-4)}._right_1eu6z_45{left:100%;top:50%;transform:translateY(-50%);margin-left:var(--psi-space-4)}._toolbar_1i848_1{display:flex;flex-wrap:wrap;align-items:center}._gap8_1i848_7{gap:var(--psi-space-8)}._gap12_1i848_8{gap:var(--psi-space-12)}._gap16_1i848_9{gap:var(--psi-space-16)}._trigger_vpa0u_4{display:inline-flex;width:fit-content}._menu_vpa0u_16{min-width:180px;margin:var(--psi-space-4);padding:var(--psi-space-4);border:1px solid var(--psi-menu-border);border-radius:var(--psi-menu-radius);background:var(--psi-menu-bg);color:var(--psi-menu-fg);font:var(--psi-text-14-20-regular)}._menu_vpa0u_16:not([data-open]):not(:popover-open){display:none}._item_vpa0u_37{display:flex;width:100%;align-items:center;padding:var(--psi-space-8) var(--psi-space-12);border:0;border-radius:var(--psi-radius-6);background:var(--psi-menu-item-bg);color:var(--psi-menu-item-fg);font:inherit;text-align:start;cursor:pointer}._item_vpa0u_37:hover{background:var(--psi-menu-item-bg-hover)}._item_vpa0u_37:active{background:var(--psi-menu-item-bg-active)}._item_vpa0u_37[data-variant=danger]{color:var(--psi-menu-item-fg-danger)}._item_vpa0u_37[aria-disabled=true]{color:var(--psi-menu-item-fg-disabled);cursor:default}._item_vpa0u_37[aria-disabled=true]:hover{background:var(--psi-menu-item-bg)}._separator_vpa0u_74{height:0;margin:var(--psi-space-4) 0;border-top:1px solid var(--psi-menu-separator-border)}@supports (anchor-name: --x){._menu_vpa0u_16{position:fixed;margin:var(--psi-space-4);position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline}._menu_vpa0u_16[data-placement=bottom-start]{position-area:block-end span-inline-end}._menu_vpa0u_16[data-placement=bottom-end]{position-area:block-end span-inline-start}._menu_vpa0u_16[data-placement=top-start]{position-area:block-start span-inline-end}._menu_vpa0u_16[data-placement=top-end]{position-area:block-start span-inline-start}}
|
package/docs/IconButton.md
CHANGED
|
@@ -7,6 +7,7 @@ Square icon-only button; same variant/size/href contract as Button. Give it an a
|
|
|
7
7
|
|
|
8
8
|
| Prop | Type | Default | Required | Description |
|
|
9
9
|
|---|---|---|---|---|
|
|
10
|
+
| `aria-label` | `string` | — | yes | Accessible name for the icon-only control. Required: an IconButton has no text to name it, so omitting this ships an unnameable button (D60). If you also pass `aria-labelledby`, that wins per the accname algorithm. |
|
|
10
11
|
| `variant` | `"accent" \| "neutral" \| "ghost" \| "danger"` | neutral | no | Visual variant. |
|
|
11
12
|
| `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Square size in px (24 \| 32 \| 40 \| 48). |
|
|
12
13
|
| `href` | `string` | — | no | Render as an anchor with this href (D33). disabled → aria-disabled, no href attribute, pointer-events: none. |
|
package/docs/Input.md
CHANGED
|
@@ -7,6 +7,7 @@ Single-line text input with pixel-true heights (24–48) and an error state. Ins
|
|
|
7
7
|
|
|
8
8
|
| Prop | Type | Default | Required | Description |
|
|
9
9
|
|---|---|---|---|---|
|
|
10
|
+
| `type` | `"number" \| "text" \| "search" \| "email" \| "tel" \| "url" \| "password" \| "date"` | text | no | Input type. |
|
|
10
11
|
| `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). |
|
|
11
12
|
| `error` | `boolean` | false | no | Show error styling. Inside a Field, the Field's error also lights this. |
|
|
12
13
|
| `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input>` element. |
|
package/docs/Menu.md
CHANGED
|
@@ -8,7 +8,7 @@ Action menu on the native Popover API top layer: the top layer and light dismiss
|
|
|
8
8
|
| Prop | Type | Default | Required | Description |
|
|
9
9
|
|---|---|---|---|---|
|
|
10
10
|
| `open` | `boolean` | — | yes | Controlled open state; syncs to showPopover()/hidePopover(). |
|
|
11
|
-
| `onClose` | `(reason: "item-select" \| "esc" \| "outside") => void` | — | yes | Called when a dismissal is *requested*; the consumer flips `open`. Menu never closes itself on `"esc"` or `"item-select"` — the popover stays open until `open` becomes false (D50). `"outside"` is the one exception: light dismiss is performed by the browser before it tells us, so by the time that reason is reported the popover is already closed. Flipping `open` to false is still required, to keep React's state in step. |
|
|
11
|
+
| `onClose` | `(reason: "item-select" \| "esc" \| "outside") => void` | — | yes | Called when a dismissal is *requested*; the consumer flips `open`. Menu never closes itself on `"esc"` or `"item-select"` — the popover stays open until `open` becomes false (D50). `"outside"` is the one exception: light dismiss is performed by the browser before it tells us, so by the time that reason is reported the popover is already closed. Flipping `open` to false is still required, to keep React's state in step. Invariant (D58): a dismissal is only ever reported for a menu that is currently open according to its own `open` prop. The platform can close an auto popover before the consumer's state catches up — clicking another menu's trigger light-dismisses this one before the consumer's click handler runs — and a report for an already-closed menu would clear a selection that has since moved on. |
|
|
12
12
|
| `trigger` | `ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>>` | — | yes | The trigger element. Must be a single React element that spreads unknown props onto a focusable node (a Psi `Button`, say): Menu clones it to add `aria-haspopup="menu"` and `aria-expanded`, so assistive tech associates the menu with the control users actually focus. |
|
|
13
13
|
| `placement` | `"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"` | bottom-start | no | Placement relative to the trigger. |
|
|
14
14
|
| `aria-label` | `string` | — | no | Accessible name for the menu when there is no visible label. |
|