@allxsmith/bestax-bulma 5.67.3 → 5.67.5

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 (72) hide show
  1. package/dist/bestax.css +1 -1
  2. package/dist/bestax.css.map +1 -1
  3. package/dist/esm/components/Dropdown.js +24 -5
  4. package/dist/esm/components/Dropdown.js.map +1 -1
  5. package/dist/esm/components/HoverCard.js +4 -1
  6. package/dist/esm/components/HoverCard.js.map +1 -1
  7. package/dist/esm/components/Tabs.js.map +1 -1
  8. package/dist/esm/elements/Notification.js.map +1 -1
  9. package/dist/esm/form/Combobox.js +7 -2
  10. package/dist/esm/form/Combobox.js.map +1 -1
  11. package/dist/esm/form/Control.js.map +1 -1
  12. package/dist/esm/form/DateInputBase.js.map +1 -1
  13. package/dist/esm/form/DateRangeInputBase.js.map +1 -1
  14. package/dist/esm/form/DateTimeInputBase.js +23 -3
  15. package/dist/esm/form/DateTimeInputBase.js.map +1 -1
  16. package/dist/esm/form/TimeInputBase.js +6 -2
  17. package/dist/esm/form/TimeInputBase.js.map +1 -1
  18. package/dist/esm/form/_pickerInternals/Calendar.js +19 -12
  19. package/dist/esm/form/_pickerInternals/Calendar.js.map +1 -1
  20. package/dist/esm/form/_pickerInternals/TimeWheels.js +19 -16
  21. package/dist/esm/form/_pickerInternals/TimeWheels.js.map +1 -1
  22. package/dist/esm/helpers/useFocusTrap.js +84 -10
  23. package/dist/esm/helpers/useFocusTrap.js.map +1 -1
  24. package/dist/esm/helpers/useOtherClasses.js.map +1 -1
  25. package/dist/extras.css +1 -1
  26. package/dist/extras.css.map +1 -1
  27. package/dist/index.cjs +2783 -2649
  28. package/dist/index.cjs.map +1 -1
  29. package/dist/types/components/HoverCard.d.ts +5 -1
  30. package/dist/types/components/Tabs.d.ts +5 -1
  31. package/dist/types/elements/Notification.d.ts +18 -2
  32. package/dist/types/form/Combobox.d.ts +4 -1
  33. package/dist/types/form/Control.d.ts +18 -4
  34. package/dist/types/form/DateInputBase.d.ts +4 -1
  35. package/dist/types/form/DateRangeInputBase.d.ts +4 -1
  36. package/dist/types/form/DateTimeInputBase.d.ts +7 -1
  37. package/dist/types/form/TimeInputBase.d.ts +5 -1
  38. package/dist/types/form/_pickerInternals/TimeWheels.d.ts +6 -0
  39. package/dist/types/helpers/useFocusTrap.d.ts +14 -4
  40. package/dist/types/helpers/useOtherClasses.d.ts +6 -1
  41. package/dist/types-cjs/components/HoverCard.d.ts +5 -1
  42. package/dist/types-cjs/components/Tabs.d.ts +5 -1
  43. package/dist/types-cjs/elements/Notification.d.ts +18 -2
  44. package/dist/types-cjs/form/Combobox.d.ts +4 -1
  45. package/dist/types-cjs/form/Control.d.ts +18 -4
  46. package/dist/types-cjs/form/DateInputBase.d.ts +4 -1
  47. package/dist/types-cjs/form/DateRangeInputBase.d.ts +4 -1
  48. package/dist/types-cjs/form/DateTimeInputBase.d.ts +7 -1
  49. package/dist/types-cjs/form/TimeInputBase.d.ts +5 -1
  50. package/dist/types-cjs/form/_pickerInternals/TimeWheels.d.ts +6 -0
  51. package/dist/types-cjs/helpers/useFocusTrap.d.ts +14 -4
  52. package/dist/types-cjs/helpers/useOtherClasses.d.ts +6 -1
  53. package/dist/versions/bestax-no-dark-mode.css +1 -1
  54. package/dist/versions/bestax-no-dark-mode.css.map +1 -1
  55. package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
  56. package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
  57. package/dist/versions/bestax-no-helpers.css +1 -1
  58. package/dist/versions/bestax-no-helpers.css.map +1 -1
  59. package/dist/versions/bestax-prefixed.css +1 -1
  60. package/dist/versions/bestax-prefixed.css.map +1 -1
  61. package/package.json +1 -1
  62. package/src/scss/CLAUDE.md +4 -1
  63. package/src/scss/_color-classes.scss +27 -0
  64. package/src/scss/_selected-row.scss +2 -10
  65. package/src/scss/components/_hovercard.scss +11 -0
  66. package/src/scss/components/_sidebar.scss +8 -5
  67. package/src/scss/components/_tabs.scss +16 -17
  68. package/src/scss/elements/_notification.scss +30 -1
  69. package/src/scss/form/_combobox.scss +12 -0
  70. package/src/scss/form/_dateinput.scss +1 -1
  71. package/src/scss/form/_slider.scss +18 -0
  72. package/src/scss/form/_timeinput.scss +7 -0
@@ -75,7 +75,11 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
75
75
  */
76
76
  closeDelay?: number;
77
77
  /**
78
- * Where the card opens against the trigger.
78
+ * Where the card opens against the trigger. Left out, it opens below and
79
+ * lines up with the trigger's start edge, which is its right edge on a
80
+ * right-to-left page, so a trigger at the start of the line doesn't push
81
+ * the card off the screen. A corner you pass stays physical, so
82
+ * `bottom-left` lines up the left edges on either page.
79
83
  * @defaultValue 'bottom-left'
80
84
  */
81
85
  position?: HoverCardPosition;
@@ -48,7 +48,11 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
48
48
  * horizontally on mobile).
49
49
  */
50
50
  vertical?: boolean;
51
- /** Side placement when `vertical` is true. */
51
+ /**
52
+ * Side placement when `vertical` is true. The row follows the page's
53
+ * direction, so on a right-to-left page `left` puts the tabs at the right,
54
+ * where the line starts, and `right` puts them at the left.
55
+ */
52
56
  side?: 'left' | 'right';
53
57
  /** Makes tabs take up the full width equally. */
54
58
  expanded?: boolean;
@@ -14,11 +14,19 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
14
14
  * other value the union accepts emits a class no CSS rule matches, so the
15
15
  * notification renders unstyled; those log a console warning in development
16
16
  * and will be removed from this union in the next major version.
17
+ *
18
+ * `dark` takes the dark color's own text and background from bestax's
19
+ * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
20
+ * notification's text inherits the color around it, which on a light page
21
+ * is one shade off its background.
17
22
  */
18
23
  color?: (typeof validColors)[number];
19
24
  /** Text color helper. */
20
25
  textColor?: (typeof validColors)[number] | 'inherit' | 'current';
21
- /** Use the light color variant. */
26
+ /**
27
+ * Use the light color variant. The dark color has none, so `color="dark"`
28
+ * with `isLight` looks the same as without it, as a dark `Button` does.
29
+ */
22
30
  isLight?: boolean;
23
31
  /**
24
32
  * Shows a close (delete) button in the notification. It renders
@@ -71,9 +79,17 @@ export interface NotificationOptions {
71
79
  * other value the union accepts emits a class no CSS rule matches, so the
72
80
  * notification renders unstyled; those log a console warning in development
73
81
  * and will be removed from this union in the next major version.
82
+ *
83
+ * `dark` takes the dark color's own text and background from bestax's
84
+ * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
85
+ * notification's text inherits the color around it, which on a light page
86
+ * is one shade off its background.
74
87
  */
75
88
  color?: (typeof validColors)[number];
76
- /** Use the light color variant. */
89
+ /**
90
+ * Use the light color variant. The dark color has none, so `color="dark"`
91
+ * with `isLight` looks the same as without it, as a dark `Button` does.
92
+ */
77
93
  isLight?: boolean;
78
94
  /** Duration in ms before auto-close. Default 3000. */
79
95
  duration?: number;
@@ -88,7 +88,10 @@ interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
88
88
  * Where the menu opens against the field: below (`bottom-*`) or above
89
89
  * (`top-*`), lined up with its left or right edge. `auto` picks the one
90
90
  * that keeps the list in the viewport, preferring below. The same union
91
- * Popover takes.
91
+ * Popover takes. Left out, it opens below and lines up with the field's
92
+ * start edge, which is its right edge on a right-to-left page, so a menu
93
+ * wider than the field doesn't hang off the screen. A corner you pass
94
+ * stays physical, so `bottom-left` lines up the left edges on either page.
92
95
  * @defaultValue 'bottom-left'
93
96
  */
94
97
  position?: PopoverPosition;
@@ -5,9 +5,15 @@ import { IconProps } from '../elements/Icon.js';
5
5
  * Props for the Control component.
6
6
  */
7
7
  export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
8
- /** Adds left icon container. */
8
+ /**
9
+ * Adds left icon container.
10
+ * Over a `TextArea` the icon covers the text.
11
+ */
9
12
  hasIconsLeft?: boolean;
10
- /** Adds right icon container. */
13
+ /**
14
+ * Adds right icon container.
15
+ * Over a `TextArea` the icon covers the text.
16
+ */
11
17
  hasIconsRight?: boolean;
12
18
  /**
13
19
  * Shows a loading spinner inside the control.
@@ -29,6 +35,7 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
29
35
  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
30
36
  /**
31
37
  * Icon props for left icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
38
+ * Over a `TextArea` the icon covers the text.
32
39
  * Bulma gives control icons `pointer-events: none`, so a click lands on
33
40
  * the input and a clickable node placed here never receives one. Put a button beside the input
34
41
  * in its own addon `Control` instead.
@@ -36,16 +43,23 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
36
43
  iconLeft?: IconProps | React.ReactNode;
37
44
  /**
38
45
  * Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
46
+ * Over a `TextArea` the icon covers the text.
39
47
  * Bulma gives control icons `pointer-events: none`, so a click lands on
40
48
  * the input and a clickable node placed here never receives one. Put a button beside the input
41
49
  * in its own addon `Control` instead.
42
50
  */
43
51
  iconRight?: IconProps | React.ReactNode;
44
- /** Shortcut for left icon name. */
52
+ /**
53
+ * Shortcut for left icon name.
54
+ * Over a `TextArea` the icon covers the text.
55
+ */
45
56
  iconLeftName?: string;
46
57
  /** Shortcut for left icon size. */
47
58
  iconLeftSize?: 'small' | 'medium' | 'large';
48
- /** Shortcut for right icon name. */
59
+ /**
60
+ * Shortcut for right icon name.
61
+ * Over a `TextArea` the icon covers the text.
62
+ */
49
63
  iconRightName?: string;
50
64
  /** Shortcut for right icon size. */
51
65
  iconRightSize?: 'small' | 'medium' | 'large';
@@ -164,7 +164,10 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
164
164
  * on the day the week does. With them, an unset `firstDayOfWeek` stays
165
165
  * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
166
166
  * matching their columns; to start on the locale's day, set
167
- * `firstDayOfWeek` too and list the names from that day.
167
+ * `firstDayOfWeek` too and list the names from that day. They also name
168
+ * the columns for assistive technology. Without them each column is named
169
+ * by its full weekday in the picker's locale, which a server-rendered
170
+ * calendar adds once the page hydrates.
168
171
  */
169
172
  dayNames?: string[];
170
173
  /** Override the 12 month-name labels. */
@@ -158,7 +158,10 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
158
158
  * on the day the week does. With them, an unset `firstDayOfWeek` stays
159
159
  * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
160
160
  * matching their columns; to start on the locale's day, set
161
- * `firstDayOfWeek` too and list the names from that day.
161
+ * `firstDayOfWeek` too and list the names from that day. They also name
162
+ * the columns for assistive technology. Without them each column is named
163
+ * by its full weekday in the picker's locale, which a server-rendered
164
+ * calendar adds once the page hydrates.
162
165
  */
163
166
  dayNames?: string[];
164
167
  /** Override the 12 month-name labels. */
@@ -74,6 +74,9 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
74
74
  * `defaultValue` it opens on the month the clock reads, and around the end
75
75
  * of a month the server's clock and the browser's can read different
76
76
  * months, so give it a date both render the same.
77
+ * Reset in its footer goes back to the value it mounted with, or, when
78
+ * controlled, to the latest `value` the parent set other than an echo of
79
+ * `onChange`. The ✓ beside it has no popover to close.
77
80
  */
78
81
  inline?: boolean;
79
82
  /** Use `<input type="datetime-local">` on coarse-pointer devices. */
@@ -141,7 +144,10 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
141
144
  * on the day the week does. With them, an unset `firstDayOfWeek` stays
142
145
  * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
143
146
  * matching their columns; to start on the locale's day, set
144
- * `firstDayOfWeek` too and list the names from that day.
147
+ * `firstDayOfWeek` too and list the names from that day. They also name
148
+ * the columns for assistive technology. Without them each column is named
149
+ * by its full weekday in the picker's locale, which a server-rendered
150
+ * calendar adds once the page hydrates.
145
151
  */
146
152
  dayNames?: string[];
147
153
  /** Override the 12 month-name labels. */
@@ -27,7 +27,11 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
27
27
  max?: Date;
28
28
  /** Disable the input. */
29
29
  disabled?: boolean;
30
- /** Make the input read-only. */
30
+ /**
31
+ * Make the input read-only. An `inline` picker's wheels keep their tab
32
+ * stops and carry `aria-readonly`, but no key, scroll, drag or click turns
33
+ * them, so the time can't change.
34
+ */
31
35
  readOnly?: boolean;
32
36
  /** Placeholder text for the input. */
33
37
  placeholder?: string;
@@ -18,6 +18,12 @@ export interface TimeWheelsProps {
18
18
  size?: 'small' | 'medium' | 'large';
19
19
  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
20
20
  disabled?: boolean;
21
+ /**
22
+ * Show the value and take no input that changes it. Each wheel keeps its
23
+ * tab stop and carries `aria-readonly`, and the arrow keys between columns
24
+ * still move focus, but no key, scroll, drag or click turns a wheel.
25
+ */
26
+ readOnly?: boolean;
21
27
  className?: string;
22
28
  id?: string;
23
29
  labels?: PickerLabels;
@@ -17,12 +17,22 @@ export declare function isTabbableKind(el: Element): boolean;
17
17
  * A stop that doesn't take focus is passed over for the next one in. An
18
18
  * `<object>` or `<embed>` with nothing to show is one: it counts as a stop by
19
19
  * its kind, but browsers refuse to focus it, and which ones they refuse
20
- * depends on the browser and on what has loaded, so only trying tells. A
21
- * stop took focus when focus moved, wherever it went (a stop can hand focus
22
- * on), or when focus was on it already. `src/index.ts` names its exports from
23
- * this module, so this one stays internal.
20
+ * depends on the browser and on what has loaded, so only trying tells.
21
+ * `src/index.ts` names its exports from this module, so this one stays
22
+ * internal.
24
23
  */
25
24
  export declare function focusTabStop(container: HTMLElement, fromLast?: boolean): void;
25
+ /**
26
+ * Moves focus where Tab goes from `element` when nothing inside it can take
27
+ * focus: to the first tab stop after it and outside it. Inside a trap that
28
+ * holds Tab, or a modal dialog, it looks no further than that container, and
29
+ * with nothing after `element` there, focus wraps to the container's first
30
+ * stop, as the trap's own Tab does. Returns whether it moved focus, which it
31
+ * doesn't at the end of the page, where the browser takes the key. It's for
32
+ * a popup that hides as a Tab inside it arrives, before the browser moves
33
+ * focus. Internal like `focusTabStop`.
34
+ */
35
+ export declare function focusTabStopAfter(element: HTMLElement): boolean;
26
36
  /**
27
37
  * Holds Tab inside the element `container` returns until the returned
28
38
  * function is called. Tab and Shift+Tab heard on `keyTarget` wrap at the
@@ -37,7 +37,12 @@ export interface BulmaOtherProps {
37
37
  * container.
38
38
  */
39
39
  overlay?: boolean;
40
- /** Interaction behavior (e.g., 'unselectable', 'clickable'). */
40
+ /**
41
+ * Interaction behavior: `unselectable` stops text selection
42
+ * (`is-unselectable`), and `clickable` shows the pointer cursor
43
+ * (`is-clickable`). It adds no role, no tab stop and no keyboard handling,
44
+ * so an element people click should be a `<button>` or a link.
45
+ */
41
46
  interaction?: (typeof validInteractions)[number];
42
47
  /** Cursor style (e.g., 'pointer', 'help'). */
43
48
  cursor?: (typeof validCursors)[number];
@@ -75,7 +75,11 @@ export interface HoverCardProps extends Omit<React.HTMLAttributes<HTMLSpanElemen
75
75
  */
76
76
  closeDelay?: number;
77
77
  /**
78
- * Where the card opens against the trigger.
78
+ * Where the card opens against the trigger. Left out, it opens below and
79
+ * lines up with the trigger's start edge, which is its right edge on a
80
+ * right-to-left page, so a trigger at the start of the line doesn't push
81
+ * the card off the screen. A corner you pass stays physical, so
82
+ * `bottom-left` lines up the left edges on either page.
79
83
  * @defaultValue 'bottom-left'
80
84
  */
81
85
  position?: HoverCardPosition;
@@ -48,7 +48,11 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
48
48
  * horizontally on mobile).
49
49
  */
50
50
  vertical?: boolean;
51
- /** Side placement when `vertical` is true. */
51
+ /**
52
+ * Side placement when `vertical` is true. The row follows the page's
53
+ * direction, so on a right-to-left page `left` puts the tabs at the right,
54
+ * where the line starts, and `right` puts them at the left.
55
+ */
52
56
  side?: 'left' | 'right';
53
57
  /** Makes tabs take up the full width equally. */
54
58
  expanded?: boolean;
@@ -14,11 +14,19 @@ export interface NotificationProps extends React.HTMLAttributes<HTMLDivElement>,
14
14
  * other value the union accepts emits a class no CSS rule matches, so the
15
15
  * notification renders unstyled; those log a console warning in development
16
16
  * and will be removed from this union in the next major version.
17
+ *
18
+ * `dark` takes the dark color's own text and background from bestax's
19
+ * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
20
+ * notification's text inherits the color around it, which on a light page
21
+ * is one shade off its background.
17
22
  */
18
23
  color?: (typeof validColors)[number];
19
24
  /** Text color helper. */
20
25
  textColor?: (typeof validColors)[number] | 'inherit' | 'current';
21
- /** Use the light color variant. */
26
+ /**
27
+ * Use the light color variant. The dark color has none, so `color="dark"`
28
+ * with `isLight` looks the same as without it, as a dark `Button` does.
29
+ */
22
30
  isLight?: boolean;
23
31
  /**
24
32
  * Shows a close (delete) button in the notification. It renders
@@ -71,9 +79,17 @@ export interface NotificationOptions {
71
79
  * other value the union accepts emits a class no CSS rule matches, so the
72
80
  * notification renders unstyled; those log a console warning in development
73
81
  * and will be removed from this union in the next major version.
82
+ *
83
+ * `dark` takes the dark color's own text and background from bestax's
84
+ * stylesheets, as a dark `Button` has. With Bulma's CSS alone, a dark
85
+ * notification's text inherits the color around it, which on a light page
86
+ * is one shade off its background.
74
87
  */
75
88
  color?: (typeof validColors)[number];
76
- /** Use the light color variant. */
89
+ /**
90
+ * Use the light color variant. The dark color has none, so `color="dark"`
91
+ * with `isLight` looks the same as without it, as a dark `Button` does.
92
+ */
77
93
  isLight?: boolean;
78
94
  /** Duration in ms before auto-close. Default 3000. */
79
95
  duration?: number;
@@ -88,7 +88,10 @@ interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
88
88
  * Where the menu opens against the field: below (`bottom-*`) or above
89
89
  * (`top-*`), lined up with its left or right edge. `auto` picks the one
90
90
  * that keeps the list in the viewport, preferring below. The same union
91
- * Popover takes.
91
+ * Popover takes. Left out, it opens below and lines up with the field's
92
+ * start edge, which is its right edge on a right-to-left page, so a menu
93
+ * wider than the field doesn't hang off the screen. A corner you pass
94
+ * stays physical, so `bottom-left` lines up the left edges on either page.
92
95
  * @defaultValue 'bottom-left'
93
96
  */
94
97
  position?: PopoverPosition;
@@ -5,9 +5,15 @@ import { IconProps } from '../elements/Icon.js';
5
5
  * Props for the Control component.
6
6
  */
7
7
  export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>, Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
8
- /** Adds left icon container. */
8
+ /**
9
+ * Adds left icon container.
10
+ * Over a `TextArea` the icon covers the text.
11
+ */
9
12
  hasIconsLeft?: boolean;
10
- /** Adds right icon container. */
13
+ /**
14
+ * Adds right icon container.
15
+ * Over a `TextArea` the icon covers the text.
16
+ */
11
17
  hasIconsRight?: boolean;
12
18
  /**
13
19
  * Shows a loading spinner inside the control.
@@ -29,6 +35,7 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
29
35
  bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
30
36
  /**
31
37
  * Icon props for left icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
38
+ * Over a `TextArea` the icon covers the text.
32
39
  * Bulma gives control icons `pointer-events: none`, so a click lands on
33
40
  * the input and a clickable node placed here never receives one. Put a button beside the input
34
41
  * in its own addon `Control` instead.
@@ -36,16 +43,23 @@ export interface ControlBaseProps extends React.HTMLAttributes<HTMLDivElement>,
36
43
  iconLeft?: IconProps | React.ReactNode;
37
44
  /**
38
45
  * Icon props for right icon, or a custom node (an inline SVG, a `react-icons` component, …) rendered in place of a class-based glyph.
46
+ * Over a `TextArea` the icon covers the text.
39
47
  * Bulma gives control icons `pointer-events: none`, so a click lands on
40
48
  * the input and a clickable node placed here never receives one. Put a button beside the input
41
49
  * in its own addon `Control` instead.
42
50
  */
43
51
  iconRight?: IconProps | React.ReactNode;
44
- /** Shortcut for left icon name. */
52
+ /**
53
+ * Shortcut for left icon name.
54
+ * Over a `TextArea` the icon covers the text.
55
+ */
45
56
  iconLeftName?: string;
46
57
  /** Shortcut for left icon size. */
47
58
  iconLeftSize?: 'small' | 'medium' | 'large';
48
- /** Shortcut for right icon name. */
59
+ /**
60
+ * Shortcut for right icon name.
61
+ * Over a `TextArea` the icon covers the text.
62
+ */
49
63
  iconRightName?: string;
50
64
  /** Shortcut for right icon size. */
51
65
  iconRightSize?: 'small' | 'medium' | 'large';
@@ -164,7 +164,10 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
164
164
  * on the day the week does. With them, an unset `firstDayOfWeek` stays
165
165
  * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
166
166
  * matching their columns; to start on the locale's day, set
167
- * `firstDayOfWeek` too and list the names from that day.
167
+ * `firstDayOfWeek` too and list the names from that day. They also name
168
+ * the columns for assistive technology. Without them each column is named
169
+ * by its full weekday in the picker's locale, which a server-rendered
170
+ * calendar adds once the page hydrates.
168
171
  */
169
172
  dayNames?: string[];
170
173
  /** Override the 12 month-name labels. */
@@ -158,7 +158,10 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
158
158
  * on the day the week does. With them, an unset `firstDayOfWeek` stays
159
159
  * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
160
160
  * matching their columns; to start on the locale's day, set
161
- * `firstDayOfWeek` too and list the names from that day.
161
+ * `firstDayOfWeek` too and list the names from that day. They also name
162
+ * the columns for assistive technology. Without them each column is named
163
+ * by its full weekday in the picker's locale, which a server-rendered
164
+ * calendar adds once the page hydrates.
162
165
  */
163
166
  dayNames?: string[];
164
167
  /** Override the 12 month-name labels. */
@@ -74,6 +74,9 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
74
74
  * `defaultValue` it opens on the month the clock reads, and around the end
75
75
  * of a month the server's clock and the browser's can read different
76
76
  * months, so give it a date both render the same.
77
+ * Reset in its footer goes back to the value it mounted with, or, when
78
+ * controlled, to the latest `value` the parent set other than an echo of
79
+ * `onChange`. The ✓ beside it has no popover to close.
77
80
  */
78
81
  inline?: boolean;
79
82
  /** Use `<input type="datetime-local">` on coarse-pointer devices. */
@@ -141,7 +144,10 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
141
144
  * on the day the week does. With them, an unset `firstDayOfWeek` stays
142
145
  * Sunday even inside a `LocaleProvider`, so names written Sunday first keep
143
146
  * matching their columns; to start on the locale's day, set
144
- * `firstDayOfWeek` too and list the names from that day.
147
+ * `firstDayOfWeek` too and list the names from that day. They also name
148
+ * the columns for assistive technology. Without them each column is named
149
+ * by its full weekday in the picker's locale, which a server-rendered
150
+ * calendar adds once the page hydrates.
145
151
  */
146
152
  dayNames?: string[];
147
153
  /** Override the 12 month-name labels. */
@@ -27,7 +27,11 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
27
27
  max?: Date;
28
28
  /** Disable the input. */
29
29
  disabled?: boolean;
30
- /** Make the input read-only. */
30
+ /**
31
+ * Make the input read-only. An `inline` picker's wheels keep their tab
32
+ * stops and carry `aria-readonly`, but no key, scroll, drag or click turns
33
+ * them, so the time can't change.
34
+ */
31
35
  readOnly?: boolean;
32
36
  /** Placeholder text for the input. */
33
37
  placeholder?: string;
@@ -18,6 +18,12 @@ export interface TimeWheelsProps {
18
18
  size?: 'small' | 'medium' | 'large';
19
19
  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
20
20
  disabled?: boolean;
21
+ /**
22
+ * Show the value and take no input that changes it. Each wheel keeps its
23
+ * tab stop and carries `aria-readonly`, and the arrow keys between columns
24
+ * still move focus, but no key, scroll, drag or click turns a wheel.
25
+ */
26
+ readOnly?: boolean;
21
27
  className?: string;
22
28
  id?: string;
23
29
  labels?: PickerLabels;
@@ -17,12 +17,22 @@ export declare function isTabbableKind(el: Element): boolean;
17
17
  * A stop that doesn't take focus is passed over for the next one in. An
18
18
  * `<object>` or `<embed>` with nothing to show is one: it counts as a stop by
19
19
  * its kind, but browsers refuse to focus it, and which ones they refuse
20
- * depends on the browser and on what has loaded, so only trying tells. A
21
- * stop took focus when focus moved, wherever it went (a stop can hand focus
22
- * on), or when focus was on it already. `src/index.ts` names its exports from
23
- * this module, so this one stays internal.
20
+ * depends on the browser and on what has loaded, so only trying tells.
21
+ * `src/index.ts` names its exports from this module, so this one stays
22
+ * internal.
24
23
  */
25
24
  export declare function focusTabStop(container: HTMLElement, fromLast?: boolean): void;
25
+ /**
26
+ * Moves focus where Tab goes from `element` when nothing inside it can take
27
+ * focus: to the first tab stop after it and outside it. Inside a trap that
28
+ * holds Tab, or a modal dialog, it looks no further than that container, and
29
+ * with nothing after `element` there, focus wraps to the container's first
30
+ * stop, as the trap's own Tab does. Returns whether it moved focus, which it
31
+ * doesn't at the end of the page, where the browser takes the key. It's for
32
+ * a popup that hides as a Tab inside it arrives, before the browser moves
33
+ * focus. Internal like `focusTabStop`.
34
+ */
35
+ export declare function focusTabStopAfter(element: HTMLElement): boolean;
26
36
  /**
27
37
  * Holds Tab inside the element `container` returns until the returned
28
38
  * function is called. Tab and Shift+Tab heard on `keyTarget` wrap at the
@@ -37,7 +37,12 @@ export interface BulmaOtherProps {
37
37
  * container.
38
38
  */
39
39
  overlay?: boolean;
40
- /** Interaction behavior (e.g., 'unselectable', 'clickable'). */
40
+ /**
41
+ * Interaction behavior: `unselectable` stops text selection
42
+ * (`is-unselectable`), and `clickable` shows the pointer cursor
43
+ * (`is-clickable`). It adds no role, no tab stop and no keyboard handling,
44
+ * so an element people click should be a `<button>` or a link.
45
+ */
41
46
  interaction?: (typeof validInteractions)[number];
42
47
  /** Cursor style (e.g., 'pointer', 'help'). */
43
48
  cursor?: (typeof validCursors)[number];