@usableapp/cardds 0.3.0 → 0.4.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.
Files changed (89) hide show
  1. package/README.md +9 -5
  2. package/css/actions.css +38 -27
  3. package/css/base.css +9 -9
  4. package/css/card.css +24 -23
  5. package/css/choice.css +50 -50
  6. package/css/forms.css +18 -18
  7. package/css/journey.css +16 -16
  8. package/css/layover.css +45 -45
  9. package/css/lists.css +43 -43
  10. package/css/media.css +33 -33
  11. package/css/numbers.css +25 -25
  12. package/css/people.css +11 -11
  13. package/css/sheet.css +21 -21
  14. package/css/theme.template.css +6 -3
  15. package/dist/actions/Btn.d.ts +109 -108
  16. package/dist/actions/BtnRow.d.ts +2 -2
  17. package/dist/actions/Chip.d.ts +102 -101
  18. package/dist/actions/Dot.d.ts +2 -2
  19. package/dist/actions/Dropdown.d.ts +4 -4
  20. package/dist/actions/Fab.d.ts +2 -2
  21. package/dist/actions/IconBtn.d.ts +107 -106
  22. package/dist/actions/Link.d.ts +105 -104
  23. package/dist/actions/Segment.d.ts +3 -3
  24. package/dist/cardds.css +333 -321
  25. package/dist/cards/Card.d.ts +99 -98
  26. package/dist/cards/CardFoot.d.ts +2 -2
  27. package/dist/cards/CardHead.d.ts +2 -2
  28. package/dist/cards/CardParts.d.ts +7 -7
  29. package/dist/cards/Placeholder.d.ts +2 -2
  30. package/dist/cards/Stat.d.ts +7 -5
  31. package/dist/cards/Stat.js +2 -2
  32. package/dist/choice/Calendar.d.ts +2 -2
  33. package/dist/choice/Check.d.ts +3 -3
  34. package/dist/choice/DayStrip.d.ts +3 -3
  35. package/dist/choice/Mood.d.ts +2 -2
  36. package/dist/choice/Slider.d.ts +2 -2
  37. package/dist/forms/AddRow.d.ts +2 -2
  38. package/dist/forms/Composer.d.ts +2 -2
  39. package/dist/forms/Field.d.ts +2 -2
  40. package/dist/forms/FileBtn.d.ts +2 -2
  41. package/dist/forms/Pin.d.ts +2 -2
  42. package/dist/journey/NoteRow.d.ts +2 -2
  43. package/dist/journey/Route.d.ts +2 -2
  44. package/dist/journey/TileBadge.d.ts +2 -2
  45. package/dist/layover/Banner.d.ts +2 -2
  46. package/dist/layover/Callout.d.ts +2 -2
  47. package/dist/layover/Deck.d.ts +3 -3
  48. package/dist/lists/Bubble.d.ts +3 -3
  49. package/dist/lists/Kv.d.ts +5 -5
  50. package/dist/lists/Legend.d.ts +3 -3
  51. package/dist/lists/Row.d.ts +5 -4
  52. package/dist/lists/Timeline.d.ts +3 -3
  53. package/dist/media/MapArea.d.ts +2 -2
  54. package/dist/media/Mosaic.d.ts +3 -3
  55. package/dist/media/Postcard.d.ts +2 -2
  56. package/dist/media/Quote.d.ts +2 -2
  57. package/dist/media/Tile.d.ts +5 -4
  58. package/dist/numbers/Badge.d.ts +2 -2
  59. package/dist/numbers/Band.d.ts +3 -3
  60. package/dist/numbers/Bars.d.ts +3 -3
  61. package/dist/numbers/DotGrid.d.ts +2 -2
  62. package/dist/numbers/Picker.d.ts +3 -3
  63. package/dist/numbers/Ring.d.ts +2 -2
  64. package/dist/numbers/Track.d.ts +3 -3
  65. package/dist/people/Avatar.d.ts +100 -99
  66. package/dist/people/AvatarPick.d.ts +3 -3
  67. package/dist/scaffold/ActionBar.d.ts +3 -3
  68. package/dist/scaffold/AppBar.d.ts +2 -2
  69. package/dist/scaffold/BaseContent.d.ts +3 -3
  70. package/dist/scaffold/Centre.d.ts +3 -3
  71. package/dist/scaffold/EmptyState.d.ts +2 -2
  72. package/dist/scaffold/FilterRow.d.ts +2 -2
  73. package/dist/scaffold/FloatBar.d.ts +105 -104
  74. package/dist/scaffold/PagerAt.d.ts +2 -2
  75. package/dist/scaffold/Screen.d.ts +100 -99
  76. package/dist/scaffold/TopBar.d.ts +2 -2
  77. package/dist/sheets/CardBack.d.ts +2 -2
  78. package/dist/sheets/Drawer.d.ts +5 -5
  79. package/dist/sheets/Sheet.d.ts +2 -2
  80. package/dist/sheets/SheetBody.d.ts +2 -2
  81. package/dist/sheets/SheetHead.d.ts +2 -2
  82. package/dist/sheets/SheetStack.d.ts +2 -2
  83. package/dist/sheets/SheetStage.d.ts +2 -2
  84. package/dist/sheets/Step.d.ts +2 -2
  85. package/dist/type/Icon.d.ts +22 -7
  86. package/dist/type/Icon.js +27 -4
  87. package/dist/type/Text.d.ts +7 -1
  88. package/dist/type/Text.js +2 -2
  89. package/package.json +3 -2
@@ -1,5 +1,5 @@
1
- import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
- export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
1
+ import { type ComponentProps, type ReactNode } from 'react';
2
+ export interface ChipProps extends ComponentProps<'span'> {
3
3
  /** filled accent: the selected / live state */
4
4
  on?: boolean;
5
5
  /** a leading signal dot: `a` (the accent signal) or `b` (the secondary) */
@@ -11,73 +11,118 @@ export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
11
11
  }
12
12
  /** Chip — a status or attribute tag (with an optional signal Dot), or a small tap target; `on` when it is the live one. For a choice use ChipPick (`sign` for the +/× interest picker). */
13
13
  export declare function Chip({ on, dot, as, href, className, children, ...rest }: ChipProps): import("react").DetailedReactHTMLElement<{
14
- slot?: string | undefined | undefined;
14
+ ref?: import("react").Ref<HTMLSpanElement> | undefined;
15
+ key?: import("react").Key | null | undefined;
16
+ defaultChecked?: boolean | undefined;
17
+ defaultValue?: string | number | readonly string[] | undefined;
18
+ suppressContentEditableWarning?: boolean | undefined;
19
+ suppressHydrationWarning?: boolean | undefined;
20
+ accessKey?: string | undefined;
21
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
22
+ autoFocus?: boolean | undefined;
23
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
24
+ contextMenu?: string | undefined;
25
+ dir?: string | undefined;
26
+ draggable?: (boolean | "true" | "false") | undefined;
27
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
28
+ hidden?: boolean | undefined;
29
+ id?: string | undefined;
30
+ lang?: string | undefined;
31
+ nonce?: string | undefined;
32
+ slot?: string | undefined;
33
+ spellCheck?: (boolean | "true" | "false") | undefined;
15
34
  style?: import("react").CSSProperties | undefined;
16
- title?: string | undefined | undefined;
17
- suppressHydrationWarning?: boolean | undefined | undefined;
18
- color?: string | undefined | undefined;
19
- id?: string | undefined | undefined;
20
- lang?: string | undefined | undefined;
21
- nonce?: string | undefined | undefined;
22
- part?: string | undefined | undefined;
35
+ tabIndex?: number | undefined;
36
+ title?: string | undefined;
37
+ translate?: "yes" | "no" | undefined;
38
+ radioGroup?: string | undefined;
23
39
  role?: import("react").AriaRole | undefined;
24
- tabIndex?: number | undefined | undefined;
25
- "aria-activedescendant"?: string | undefined | undefined;
40
+ about?: string | undefined;
41
+ content?: string | undefined;
42
+ datatype?: string | undefined;
43
+ inlist?: any;
44
+ prefix?: string | undefined;
45
+ property?: string | undefined;
46
+ rel?: string | undefined;
47
+ resource?: string | undefined;
48
+ rev?: string | undefined;
49
+ typeof?: string | undefined;
50
+ vocab?: string | undefined;
51
+ autoCorrect?: string | undefined;
52
+ autoSave?: string | undefined;
53
+ color?: string | undefined;
54
+ itemProp?: string | undefined;
55
+ itemScope?: boolean | undefined;
56
+ itemType?: string | undefined;
57
+ itemID?: string | undefined;
58
+ itemRef?: string | undefined;
59
+ results?: number | undefined;
60
+ security?: string | undefined;
61
+ unselectable?: "on" | "off" | undefined;
62
+ popover?: "" | "auto" | "manual" | "hint" | undefined;
63
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
64
+ popoverTarget?: string | undefined;
65
+ inert?: boolean | undefined;
66
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
67
+ is?: string | undefined;
68
+ exportparts?: string | undefined;
69
+ part?: string | undefined;
70
+ "aria-activedescendant"?: string | undefined;
26
71
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
27
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
28
- "aria-braillelabel"?: string | undefined | undefined;
29
- "aria-brailleroledescription"?: string | undefined | undefined;
72
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
73
+ "aria-braillelabel"?: string | undefined;
74
+ "aria-brailleroledescription"?: string | undefined;
30
75
  "aria-busy"?: (boolean | "true" | "false") | undefined;
31
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
32
- "aria-colcount"?: number | undefined | undefined;
33
- "aria-colindex"?: number | undefined | undefined;
34
- "aria-colindextext"?: string | undefined | undefined;
35
- "aria-colspan"?: number | undefined | undefined;
36
- "aria-controls"?: string | undefined | undefined;
37
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
38
- "aria-describedby"?: string | undefined | undefined;
39
- "aria-description"?: string | undefined | undefined;
40
- "aria-details"?: string | undefined | undefined;
76
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
77
+ "aria-colcount"?: number | undefined;
78
+ "aria-colindex"?: number | undefined;
79
+ "aria-colindextext"?: string | undefined;
80
+ "aria-colspan"?: number | undefined;
81
+ "aria-controls"?: string | undefined;
82
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
83
+ "aria-describedby"?: string | undefined;
84
+ "aria-description"?: string | undefined;
85
+ "aria-details"?: string | undefined;
41
86
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
42
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
43
- "aria-errormessage"?: string | undefined | undefined;
87
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
88
+ "aria-errormessage"?: string | undefined;
44
89
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
45
- "aria-flowto"?: string | undefined | undefined;
90
+ "aria-flowto"?: string | undefined;
46
91
  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
47
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
92
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
48
93
  "aria-hidden"?: (boolean | "true" | "false") | undefined;
49
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
50
- "aria-keyshortcuts"?: string | undefined | undefined;
51
- "aria-label"?: string | undefined | undefined;
52
- "aria-labelledby"?: string | undefined | undefined;
53
- "aria-level"?: number | undefined | undefined;
54
- "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
94
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
95
+ "aria-keyshortcuts"?: string | undefined;
96
+ "aria-label"?: string | undefined;
97
+ "aria-labelledby"?: string | undefined;
98
+ "aria-level"?: number | undefined;
99
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
55
100
  "aria-modal"?: (boolean | "true" | "false") | undefined;
56
101
  "aria-multiline"?: (boolean | "true" | "false") | undefined;
57
102
  "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
58
- "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
59
- "aria-owns"?: string | undefined | undefined;
60
- "aria-placeholder"?: string | undefined | undefined;
61
- "aria-posinset"?: number | undefined | undefined;
62
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
103
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
104
+ "aria-owns"?: string | undefined;
105
+ "aria-placeholder"?: string | undefined;
106
+ "aria-posinset"?: number | undefined;
107
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
63
108
  "aria-readonly"?: (boolean | "true" | "false") | undefined;
64
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
109
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
65
110
  "aria-required"?: (boolean | "true" | "false") | undefined;
66
- "aria-roledescription"?: string | undefined | undefined;
67
- "aria-rowcount"?: number | undefined | undefined;
68
- "aria-rowindex"?: number | undefined | undefined;
69
- "aria-rowindextext"?: string | undefined | undefined;
70
- "aria-rowspan"?: number | undefined | undefined;
111
+ "aria-roledescription"?: string | undefined;
112
+ "aria-rowcount"?: number | undefined;
113
+ "aria-rowindex"?: number | undefined;
114
+ "aria-rowindextext"?: string | undefined;
115
+ "aria-rowspan"?: number | undefined;
71
116
  "aria-selected"?: (boolean | "true" | "false") | undefined;
72
- "aria-setsize"?: number | undefined | undefined;
73
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
74
- "aria-valuemax"?: number | undefined | undefined;
75
- "aria-valuemin"?: number | undefined | undefined;
76
- "aria-valuenow"?: number | undefined | undefined;
77
- "aria-valuetext"?: string | undefined | undefined;
117
+ "aria-setsize"?: number | undefined;
118
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
119
+ "aria-valuemax"?: number | undefined;
120
+ "aria-valuemin"?: number | undefined;
121
+ "aria-valuenow"?: number | undefined;
122
+ "aria-valuetext"?: string | undefined;
78
123
  dangerouslySetInnerHTML?: {
79
124
  __html: string | TrustedHTML;
80
- } | undefined | undefined;
125
+ } | undefined;
81
126
  onCopy?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
82
127
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
83
128
  onCut?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
@@ -246,55 +291,11 @@ export declare function Chip({ on, dot, as, href, className, children, ...rest }
246
291
  onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
247
292
  onTransitionStart?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
248
293
  onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
249
- key?: import("react").Key | null | undefined;
250
- defaultChecked?: boolean | undefined | undefined;
251
- defaultValue?: string | number | readonly string[] | undefined;
252
- suppressContentEditableWarning?: boolean | undefined | undefined;
253
- accessKey?: string | undefined | undefined;
254
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
255
- autoFocus?: boolean | undefined | undefined;
256
- contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
257
- contextMenu?: string | undefined | undefined;
258
- dir?: string | undefined | undefined;
259
- draggable?: (boolean | "true" | "false") | undefined;
260
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
261
- hidden?: boolean | undefined | undefined;
262
- spellCheck?: (boolean | "true" | "false") | undefined;
263
- translate?: "yes" | "no" | undefined | undefined;
264
- radioGroup?: string | undefined | undefined;
265
- about?: string | undefined | undefined;
266
- content?: string | undefined | undefined;
267
- datatype?: string | undefined | undefined;
268
- inlist?: any;
269
- prefix?: string | undefined | undefined;
270
- property?: string | undefined | undefined;
271
- rel?: string | undefined | undefined;
272
- resource?: string | undefined | undefined;
273
- rev?: string | undefined | undefined;
274
- typeof?: string | undefined | undefined;
275
- vocab?: string | undefined | undefined;
276
- autoCorrect?: string | undefined | undefined;
277
- autoSave?: string | undefined | undefined;
278
- itemProp?: string | undefined | undefined;
279
- itemScope?: boolean | undefined | undefined;
280
- itemType?: string | undefined | undefined;
281
- itemID?: string | undefined | undefined;
282
- itemRef?: string | undefined | undefined;
283
- results?: number | undefined | undefined;
284
- security?: string | undefined | undefined;
285
- unselectable?: "on" | "off" | undefined | undefined;
286
- popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
287
- popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
288
- popoverTarget?: string | undefined | undefined;
289
- inert?: boolean | undefined | undefined;
290
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
291
- is?: string | undefined | undefined;
292
- exportparts?: string | undefined | undefined;
293
294
  href: string | undefined;
294
295
  type: string | undefined;
295
296
  className: string;
296
- }, HTMLElement>;
297
- export interface ChipPickProps extends Omit<ComponentPropsWithoutRef<'label'>, 'onChange'> {
297
+ }, HTMLSpanElement>;
298
+ export interface ChipPickProps extends Omit<ComponentProps<'label'>, 'onChange'> {
298
299
  /** radio for pick-one (a time slot), checkbox for pick-many (skills); `sign` defaults to checkbox */
299
300
  type?: 'radio' | 'checkbox';
300
301
  /** the +/× at the end: an interest / filter chip on a row, hugging its word (was ChipToggle) */
@@ -308,13 +309,13 @@ export interface ChipPickProps extends Omit<ComponentPropsWithoutRef<'label'>, '
308
309
  /** ChipPick — a chip that is a choice: full-width in a ChipGrid (9:00 · 9:30 · …), or `sign` on a ChipRow (+ off, × on — the
309
310
  * interest picker); the picked one fills with accent. A native radio/checkbox inside the label carries the state. */
310
311
  export declare function ChipPick({ type, sign, name, value, checked, defaultChecked, onChange, className, children, ...rest }: ChipPickProps): import("react").JSX.Element;
311
- export interface ChipRowProps extends ComponentPropsWithoutRef<'div'> {
312
+ export interface ChipRowProps extends ComponentProps<'div'> {
312
313
  /** run the row to the card's edges as a one-line scrolling strip (`.bleed`: nowrap, overflow, the hairline ink scrollbar) */
313
314
  bleed?: boolean;
314
315
  }
315
316
  /** ChipRow — chips on a wrapping line (or a bleeding strip). */
316
317
  export declare function ChipRow({ bleed, className, ...rest }: ChipRowProps): import("react").JSX.Element;
317
- export interface ChipGridProps extends ComponentPropsWithoutRef<'div'> {
318
+ export interface ChipGridProps extends ComponentProps<'div'> {
318
319
  }
319
320
  /** ChipGrid — equal-width ChipPicks in a grid (time slots, skills). */
320
321
  export declare function ChipGrid({ className, ...rest }: ChipGridProps): import("react").JSX.Element;
@@ -1,5 +1,5 @@
1
- import type { ComponentPropsWithoutRef } from 'react';
2
- export interface DotProps extends ComponentPropsWithoutRef<'span'> {
1
+ import type { ComponentProps } from 'react';
2
+ export interface DotProps extends ComponentProps<'span'> {
3
3
  /** the secondary signal colour */
4
4
  b?: boolean;
5
5
  }
@@ -1,6 +1,6 @@
1
- import type { ComponentPropsWithoutRef, ReactNode } from 'react';
1
+ import type { ComponentProps, ReactNode } from 'react';
2
2
  import { type IconName } from '../type/Icon.js';
3
- export interface DropdownProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
3
+ export interface DropdownProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
4
4
  /** unique id — the popover menu's id the trigger targets */
5
5
  id: string;
6
6
  /** CONTROLLED: the chosen MenuItem's `value`. The app owns it — pair it with `onChange`. */
@@ -23,7 +23,7 @@ export interface DropdownProps extends Omit<ComponentPropsWithoutRef<'div'>, 'on
23
23
  * In a FilterRow dropdowns share the width.
24
24
  */
25
25
  export declare function Dropdown({ id, value, defaultValue, onChange, label, end, className, children, ...rest }: DropdownProps): import("react").JSX.Element;
26
- export interface MenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'popover' | 'onChange' | 'defaultValue'> {
26
+ export interface MenuProps extends Omit<ComponentProps<'div'>, 'popover' | 'onChange' | 'defaultValue'> {
27
27
  /** render as a popover panel: give it an `id`, and ANY button opens it with the platform's own `popoverTarget={id}` — the Menu does
28
28
  * not know which. Omit for an inline menu card */
29
29
  popover?: boolean;
@@ -43,7 +43,7 @@ export interface MenuProps extends Omit<ComponentPropsWithoutRef<'div'>, 'popove
43
43
  * `onClick`s); otherwise it holds a value (`value` + `onChange`, or `defaultValue`). Its one behaviour: picking an item closes it.
44
44
  */
45
45
  export declare function Menu({ popover, actions, value, defaultValue, onChange, end, className, onClick, ...rest }: MenuProps): import("react").JSX.Element;
46
- export interface MenuItemProps extends ComponentPropsWithoutRef<'button'> {
46
+ export interface MenuItemProps extends ComponentProps<'button'> {
47
47
  /** in a value Menu / Dropdown: what picking this row reports */
48
48
  value?: string;
49
49
  /** mark it current yourself (default: it is, when its `value` is the menu's) */
@@ -1,6 +1,6 @@
1
- import type { ComponentPropsWithoutRef } from 'react';
1
+ import type { ComponentProps } from 'react';
2
2
  import { type IconName } from '../type/Icon.js';
3
- export interface FabProps extends ComponentPropsWithoutRef<'button'> {
3
+ export interface FabProps extends ComponentProps<'button'> {
4
4
  label: string;
5
5
  icon?: IconName;
6
6
  invert?: boolean;
@@ -1,6 +1,6 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import { type ComponentProps } from 'react';
2
2
  import { type IconName } from '../type/Icon.js';
3
- export interface IconBtnProps extends ComponentPropsWithoutRef<'button'> {
3
+ export interface IconBtnProps extends ComponentProps<'button'> {
4
4
  /** the accessible name — required, the button has no text */
5
5
  label: string;
6
6
  /** the icon to show (sized to the button); or pass an Icon as children */
@@ -16,75 +16,127 @@ export interface IconBtnProps extends ComponentPropsWithoutRef<'button'> {
16
16
  * It is a button and nothing more: to open a Menu, give it the platform's `popoverTarget={the Menu's id}` and render that `<Menu popover actions id>`
17
17
  * wherever you like — the panel anchors to the button that opened it. To open anything else, `onClick`. */
18
18
  export declare function IconBtn({ label, icon, sm, invert, href, className, type, children, ...rest }: IconBtnProps): import("react").DetailedReactHTMLElement<{
19
- form?: string | undefined | undefined;
20
- slot?: string | undefined | undefined;
19
+ ref?: import("react").Ref<HTMLButtonElement> | undefined;
20
+ key?: import("react").Key | null | undefined;
21
+ disabled?: boolean | undefined;
22
+ form?: string | undefined;
23
+ formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
24
+ formEncType?: string | undefined;
25
+ formMethod?: string | undefined;
26
+ formNoValidate?: boolean | undefined;
27
+ formTarget?: string | undefined;
28
+ name?: string | undefined;
29
+ value?: string | readonly string[] | number | undefined;
30
+ defaultChecked?: boolean | undefined;
31
+ defaultValue?: string | number | readonly string[] | undefined;
32
+ suppressContentEditableWarning?: boolean | undefined;
33
+ suppressHydrationWarning?: boolean | undefined;
34
+ accessKey?: string | undefined;
35
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
36
+ autoFocus?: boolean | undefined;
37
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
38
+ contextMenu?: string | undefined;
39
+ dir?: string | undefined;
40
+ draggable?: (boolean | "true" | "false") | undefined;
41
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
42
+ hidden?: boolean | undefined;
43
+ id?: string | undefined;
44
+ lang?: string | undefined;
45
+ nonce?: string | undefined;
46
+ slot?: string | undefined;
47
+ spellCheck?: (boolean | "true" | "false") | undefined;
21
48
  style?: import("react").CSSProperties | undefined;
22
- title?: string | undefined | undefined;
23
- suppressHydrationWarning?: boolean | undefined | undefined;
24
- color?: string | undefined | undefined;
25
- id?: string | undefined | undefined;
26
- lang?: string | undefined | undefined;
27
- name?: string | undefined | undefined;
28
- nonce?: string | undefined | undefined;
29
- part?: string | undefined | undefined;
49
+ tabIndex?: number | undefined;
50
+ title?: string | undefined;
51
+ translate?: "yes" | "no" | undefined;
52
+ radioGroup?: string | undefined;
30
53
  role?: import("react").AriaRole | undefined;
31
- tabIndex?: number | undefined | undefined;
32
- "aria-activedescendant"?: string | undefined | undefined;
54
+ about?: string | undefined;
55
+ content?: string | undefined;
56
+ datatype?: string | undefined;
57
+ inlist?: any;
58
+ prefix?: string | undefined;
59
+ property?: string | undefined;
60
+ rel?: string | undefined;
61
+ resource?: string | undefined;
62
+ rev?: string | undefined;
63
+ typeof?: string | undefined;
64
+ vocab?: string | undefined;
65
+ autoCorrect?: string | undefined;
66
+ autoSave?: string | undefined;
67
+ color?: string | undefined;
68
+ itemProp?: string | undefined;
69
+ itemScope?: boolean | undefined;
70
+ itemType?: string | undefined;
71
+ itemID?: string | undefined;
72
+ itemRef?: string | undefined;
73
+ results?: number | undefined;
74
+ security?: string | undefined;
75
+ unselectable?: "on" | "off" | undefined;
76
+ popover?: "" | "auto" | "manual" | "hint" | undefined;
77
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
78
+ popoverTarget?: string | undefined;
79
+ inert?: boolean | undefined;
80
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
81
+ is?: string | undefined;
82
+ exportparts?: string | undefined;
83
+ part?: string | undefined;
84
+ "aria-activedescendant"?: string | undefined;
33
85
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
34
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
35
- "aria-braillelabel"?: string | undefined | undefined;
36
- "aria-brailleroledescription"?: string | undefined | undefined;
86
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
87
+ "aria-braillelabel"?: string | undefined;
88
+ "aria-brailleroledescription"?: string | undefined;
37
89
  "aria-busy"?: (boolean | "true" | "false") | undefined;
38
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
39
- "aria-colcount"?: number | undefined | undefined;
40
- "aria-colindex"?: number | undefined | undefined;
41
- "aria-colindextext"?: string | undefined | undefined;
42
- "aria-colspan"?: number | undefined | undefined;
43
- "aria-controls"?: string | undefined | undefined;
44
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
45
- "aria-describedby"?: string | undefined | undefined;
46
- "aria-description"?: string | undefined | undefined;
47
- "aria-details"?: string | undefined | undefined;
90
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
91
+ "aria-colcount"?: number | undefined;
92
+ "aria-colindex"?: number | undefined;
93
+ "aria-colindextext"?: string | undefined;
94
+ "aria-colspan"?: number | undefined;
95
+ "aria-controls"?: string | undefined;
96
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
97
+ "aria-describedby"?: string | undefined;
98
+ "aria-description"?: string | undefined;
99
+ "aria-details"?: string | undefined;
48
100
  "aria-disabled"?: (boolean | "true" | "false") | undefined;
49
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
50
- "aria-errormessage"?: string | undefined | undefined;
101
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
102
+ "aria-errormessage"?: string | undefined;
51
103
  "aria-expanded"?: (boolean | "true" | "false") | undefined;
52
- "aria-flowto"?: string | undefined | undefined;
104
+ "aria-flowto"?: string | undefined;
53
105
  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
54
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
106
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
55
107
  "aria-hidden"?: (boolean | "true" | "false") | undefined;
56
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
57
- "aria-keyshortcuts"?: string | undefined | undefined;
108
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
109
+ "aria-keyshortcuts"?: string | undefined;
58
110
  "aria-label": string;
59
- "aria-labelledby"?: string | undefined | undefined;
60
- "aria-level"?: number | undefined | undefined;
61
- "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
111
+ "aria-labelledby"?: string | undefined;
112
+ "aria-level"?: number | undefined;
113
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
62
114
  "aria-modal"?: (boolean | "true" | "false") | undefined;
63
115
  "aria-multiline"?: (boolean | "true" | "false") | undefined;
64
116
  "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
65
- "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
66
- "aria-owns"?: string | undefined | undefined;
67
- "aria-placeholder"?: string | undefined | undefined;
68
- "aria-posinset"?: number | undefined | undefined;
69
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
117
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
118
+ "aria-owns"?: string | undefined;
119
+ "aria-placeholder"?: string | undefined;
120
+ "aria-posinset"?: number | undefined;
121
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
70
122
  "aria-readonly"?: (boolean | "true" | "false") | undefined;
71
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
123
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
72
124
  "aria-required"?: (boolean | "true" | "false") | undefined;
73
- "aria-roledescription"?: string | undefined | undefined;
74
- "aria-rowcount"?: number | undefined | undefined;
75
- "aria-rowindex"?: number | undefined | undefined;
76
- "aria-rowindextext"?: string | undefined | undefined;
77
- "aria-rowspan"?: number | undefined | undefined;
125
+ "aria-roledescription"?: string | undefined;
126
+ "aria-rowcount"?: number | undefined;
127
+ "aria-rowindex"?: number | undefined;
128
+ "aria-rowindextext"?: string | undefined;
129
+ "aria-rowspan"?: number | undefined;
78
130
  "aria-selected"?: (boolean | "true" | "false") | undefined;
79
- "aria-setsize"?: number | undefined | undefined;
80
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
81
- "aria-valuemax"?: number | undefined | undefined;
82
- "aria-valuemin"?: number | undefined | undefined;
83
- "aria-valuenow"?: number | undefined | undefined;
84
- "aria-valuetext"?: string | undefined | undefined;
131
+ "aria-setsize"?: number | undefined;
132
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
133
+ "aria-valuemax"?: number | undefined;
134
+ "aria-valuemin"?: number | undefined;
135
+ "aria-valuenow"?: number | undefined;
136
+ "aria-valuetext"?: string | undefined;
85
137
  dangerouslySetInnerHTML?: {
86
138
  __html: string | TrustedHTML;
87
- } | undefined | undefined;
139
+ } | undefined;
88
140
  onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
89
141
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
90
142
  onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
@@ -253,58 +305,7 @@ export declare function IconBtn({ label, icon, sm, invert, href, className, type
253
305
  onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
254
306
  onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
255
307
  onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
256
- key?: import("react").Key | null | undefined;
257
- defaultChecked?: boolean | undefined | undefined;
258
- defaultValue?: string | number | readonly string[] | undefined;
259
- suppressContentEditableWarning?: boolean | undefined | undefined;
260
- accessKey?: string | undefined | undefined;
261
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
262
- autoFocus?: boolean | undefined | undefined;
263
- contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
264
- contextMenu?: string | undefined | undefined;
265
- dir?: string | undefined | undefined;
266
- draggable?: (boolean | "true" | "false") | undefined;
267
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
268
- hidden?: boolean | undefined | undefined;
269
- spellCheck?: (boolean | "true" | "false") | undefined;
270
- translate?: "yes" | "no" | undefined | undefined;
271
- radioGroup?: string | undefined | undefined;
272
- about?: string | undefined | undefined;
273
- content?: string | undefined | undefined;
274
- datatype?: string | undefined | undefined;
275
- inlist?: any;
276
- prefix?: string | undefined | undefined;
277
- property?: string | undefined | undefined;
278
- rel?: string | undefined | undefined;
279
- resource?: string | undefined | undefined;
280
- rev?: string | undefined | undefined;
281
- typeof?: string | undefined | undefined;
282
- vocab?: string | undefined | undefined;
283
- autoCorrect?: string | undefined | undefined;
284
- autoSave?: string | undefined | undefined;
285
- itemProp?: string | undefined | undefined;
286
- itemScope?: boolean | undefined | undefined;
287
- itemType?: string | undefined | undefined;
288
- itemID?: string | undefined | undefined;
289
- itemRef?: string | undefined | undefined;
290
- results?: number | undefined | undefined;
291
- security?: string | undefined | undefined;
292
- unselectable?: "on" | "off" | undefined | undefined;
293
- popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
294
- popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
295
- popoverTarget?: string | undefined | undefined;
296
- inert?: boolean | undefined | undefined;
297
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
298
- is?: string | undefined | undefined;
299
- exportparts?: string | undefined | undefined;
300
- disabled?: boolean | undefined | undefined;
301
- formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
302
- formEncType?: string | undefined | undefined;
303
- formMethod?: string | undefined | undefined;
304
- formNoValidate?: boolean | undefined | undefined;
305
- formTarget?: string | undefined | undefined;
306
- value?: string | number | readonly string[] | undefined;
307
308
  href: string | undefined;
308
309
  type: "button" | "reset" | "submit" | undefined;
309
310
  className: string;
310
- }, HTMLElement>;
311
+ }, HTMLButtonElement>;