@allxsmith/bestax-bulma 5.65.1 → 5.66.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 (106) hide show
  1. package/dist/bestax.css +1 -1
  2. package/dist/bestax.css.map +1 -1
  3. package/dist/esm/components/Card.js +6 -6
  4. package/dist/esm/components/Card.js.map +1 -1
  5. package/dist/esm/components/Carousel.js +19 -7
  6. package/dist/esm/components/Carousel.js.map +1 -1
  7. package/dist/esm/components/Message.js +1 -1
  8. package/dist/esm/components/Message.js.map +1 -1
  9. package/dist/esm/components/Modal.js +1 -1
  10. package/dist/esm/components/Modal.js.map +1 -1
  11. package/dist/esm/components/Popover.js +4 -1
  12. package/dist/esm/components/Popover.js.map +1 -1
  13. package/dist/esm/components/SegmentedControl.js +4 -4
  14. package/dist/esm/components/SegmentedControl.js.map +1 -1
  15. package/dist/esm/components/Sidebar.js +1 -1
  16. package/dist/esm/components/Sidebar.js.map +1 -1
  17. package/dist/esm/elements/Figure.js +1 -1
  18. package/dist/esm/elements/Figure.js.map +1 -1
  19. package/dist/esm/form/ColorInputBase.js +1 -1
  20. package/dist/esm/form/ColorInputBase.js.map +1 -1
  21. package/dist/esm/form/DateInput.js +4 -1
  22. package/dist/esm/form/DateInput.js.map +1 -1
  23. package/dist/esm/form/DateInputBase.js +1 -1
  24. package/dist/esm/form/DateInputBase.js.map +1 -1
  25. package/dist/esm/form/DateRangeInput.js +4 -1
  26. package/dist/esm/form/DateRangeInput.js.map +1 -1
  27. package/dist/esm/form/DateRangeInputBase.js +1 -1
  28. package/dist/esm/form/DateRangeInputBase.js.map +1 -1
  29. package/dist/esm/form/DateTimeInput.js +4 -1
  30. package/dist/esm/form/DateTimeInput.js.map +1 -1
  31. package/dist/esm/form/DateTimeInputBase.js +1 -1
  32. package/dist/esm/form/DateTimeInputBase.js.map +1 -1
  33. package/dist/esm/form/Slider.js +19 -9
  34. package/dist/esm/form/Slider.js.map +1 -1
  35. package/dist/esm/form/TimeInput.js +4 -1
  36. package/dist/esm/form/TimeInput.js.map +1 -1
  37. package/dist/esm/form/TimeInputBase.js +1 -1
  38. package/dist/esm/form/TimeInputBase.js.map +1 -1
  39. package/dist/esm/form/TreeSelect.js.map +1 -1
  40. package/dist/esm/form/_pickerInternals/PickerPopover.js +4 -1
  41. package/dist/esm/form/_pickerInternals/PickerPopover.js.map +1 -1
  42. package/dist/esm/form/_pickerInternals/TimeWheels.js +1 -1
  43. package/dist/esm/form/_pickerInternals/TimeWheels.js.map +1 -1
  44. package/dist/esm/form/_pickerInternals/useLocaleDefaults.js +15 -1
  45. package/dist/esm/form/_pickerInternals/useLocaleDefaults.js.map +1 -1
  46. package/dist/esm/form/_selectInternals/DialogSelect.js +1 -1
  47. package/dist/esm/form/_selectInternals/DialogSelect.js.map +1 -1
  48. package/dist/esm/helpers/useAnchoredPosition.js +11 -3
  49. package/dist/esm/helpers/useAnchoredPosition.js.map +1 -1
  50. package/dist/extras.css +1 -1
  51. package/dist/extras.css.map +1 -1
  52. package/dist/index.cjs +122 -40
  53. package/dist/index.cjs.map +1 -1
  54. package/dist/index.esm.js +6 -6
  55. package/dist/types/components/Card.d.ts +52 -0
  56. package/dist/types/components/Carousel.d.ts +12 -3
  57. package/dist/types/components/Message.d.ts +16 -0
  58. package/dist/types/components/Modal.d.ts +71 -0
  59. package/dist/types/components/Popover.d.ts +5 -1
  60. package/dist/types/components/SegmentedControl.d.ts +9 -0
  61. package/dist/types/components/Sidebar.d.ts +45 -5
  62. package/dist/types/elements/Figure.d.ts +11 -0
  63. package/dist/types/form/ColorInputBase.d.ts +7 -1
  64. package/dist/types/form/DateInputBase.d.ts +7 -1
  65. package/dist/types/form/DateRangeInputBase.d.ts +7 -1
  66. package/dist/types/form/DateTimeInputBase.d.ts +7 -1
  67. package/dist/types/form/TimeInputBase.d.ts +7 -1
  68. package/dist/types/form/TreeSelect.d.ts +4 -1
  69. package/dist/types/form/_pickerInternals/PickerPopover.d.ts +5 -0
  70. package/dist/types/form/_pickerInternals/useLocaleDefaults.d.ts +12 -0
  71. package/dist/types/form/_selectInternals/DialogSelect.d.ts +1 -0
  72. package/dist/types/helpers/useAnchoredPosition.d.ts +9 -2
  73. package/dist/types-cjs/components/Card.d.ts +52 -0
  74. package/dist/types-cjs/components/Carousel.d.ts +12 -3
  75. package/dist/types-cjs/components/Message.d.ts +16 -0
  76. package/dist/types-cjs/components/Modal.d.ts +71 -0
  77. package/dist/types-cjs/components/Popover.d.ts +5 -1
  78. package/dist/types-cjs/components/SegmentedControl.d.ts +9 -0
  79. package/dist/types-cjs/components/Sidebar.d.ts +45 -5
  80. package/dist/types-cjs/elements/Figure.d.ts +11 -0
  81. package/dist/types-cjs/form/ColorInputBase.d.ts +7 -1
  82. package/dist/types-cjs/form/DateInputBase.d.ts +7 -1
  83. package/dist/types-cjs/form/DateRangeInputBase.d.ts +7 -1
  84. package/dist/types-cjs/form/DateTimeInputBase.d.ts +7 -1
  85. package/dist/types-cjs/form/TimeInputBase.d.ts +7 -1
  86. package/dist/types-cjs/form/TreeSelect.d.ts +4 -1
  87. package/dist/types-cjs/form/_pickerInternals/PickerPopover.d.ts +5 -0
  88. package/dist/types-cjs/form/_pickerInternals/useLocaleDefaults.d.ts +12 -0
  89. package/dist/types-cjs/form/_selectInternals/DialogSelect.d.ts +1 -0
  90. package/dist/types-cjs/helpers/useAnchoredPosition.d.ts +9 -2
  91. package/dist/versions/bestax-no-dark-mode.css +1 -1
  92. package/dist/versions/bestax-no-dark-mode.css.map +1 -1
  93. package/dist/versions/bestax-no-helpers-prefixed.css +1 -1
  94. package/dist/versions/bestax-no-helpers-prefixed.css.map +1 -1
  95. package/dist/versions/bestax-no-helpers.css +1 -1
  96. package/dist/versions/bestax-no-helpers.css.map +1 -1
  97. package/dist/versions/bestax-prefixed.css +1 -1
  98. package/dist/versions/bestax-prefixed.css.map +1 -1
  99. package/package.json +1 -1
  100. package/src/scss/_input-trigger.scss +24 -5
  101. package/src/scss/components/_carousel.scss +22 -4
  102. package/src/scss/components/_popover.scss +11 -0
  103. package/src/scss/form/_dateinput.scss +6 -0
  104. package/src/scss/form/_passwordinput.scss +6 -5
  105. package/src/scss/form/_picker-popover.scss +45 -5
  106. package/src/scss/form/_slider.scss +39 -0
@@ -130,6 +130,77 @@ export interface ModalCloseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
130
130
  /** Button variant. 'delete' (default) for modal card headers, 'floating' for overlay close button. */
131
131
  variant?: 'delete' | 'floating';
132
132
  }
133
+ /**
134
+ * Modal.Background - Renders the modal background overlay. Pass it
135
+ * `onClick={onClose}` for a click on it to close the modal.
136
+ *
137
+ * @function
138
+ * @param {ModalBackgroundProps} props - Component props.
139
+ * @returns {JSX.Element} Modal background element.
140
+ */
141
+ export declare const ModalBackground: React.FC<ModalBackgroundProps>;
142
+ /**
143
+ * Modal.Content - Renders modal content wrapper for custom content.
144
+ *
145
+ * @function
146
+ * @param {ModalContentProps} props - Component props.
147
+ * @returns {JSX.Element} Modal content element.
148
+ */
149
+ export declare const ModalContent: React.FC<ModalContentProps>;
150
+ /**
151
+ * Modal.Card.Head - Renders modal card header section.
152
+ *
153
+ * @function
154
+ * @param {ModalCardHeadProps} props - Component props.
155
+ * @returns {JSX.Element} Modal card header element.
156
+ */
157
+ export declare const ModalCardHead: React.FC<ModalCardHeadProps>;
158
+ /**
159
+ * Modal.Card.Title - Renders modal card title.
160
+ *
161
+ * @function
162
+ * @param {ModalCardTitleProps} props - Component props.
163
+ * @returns {JSX.Element} Modal card title element.
164
+ */
165
+ export declare const ModalCardTitle: React.FC<ModalCardTitleProps>;
166
+ /**
167
+ * Modal.Card.Body - Renders modal card body section.
168
+ *
169
+ * @function
170
+ * @param {ModalCardBodyProps} props - Component props.
171
+ * @returns {JSX.Element} Modal card body element.
172
+ */
173
+ export declare const ModalCardBody: React.FC<ModalCardBodyProps>;
174
+ /**
175
+ * Modal.Card.Foot - Renders modal card footer section.
176
+ *
177
+ * @function
178
+ * @param {ModalCardFootProps} props - Component props.
179
+ * @returns {JSX.Element} Modal card footer element.
180
+ */
181
+ export declare const ModalCardFoot: React.FC<ModalCardFootProps>;
182
+ export declare const ModalCard: React.FC<ModalCardProps> & {
183
+ Head: React.FC<ModalCardHeadProps>;
184
+ Title: React.FC<ModalCardTitleProps>;
185
+ Body: React.FC<ModalCardBodyProps>;
186
+ Foot: React.FC<ModalCardFootProps>;
187
+ };
188
+ /**
189
+ * Modal.Close - Renders modal close button with two variant styles. It calls
190
+ * the modal's `onClose` unless given an `onClick` of its own.
191
+ *
192
+ * @function
193
+ * @param {ModalCloseProps} props - Component props.
194
+ * @returns {JSX.Element} Close button element.
195
+ *
196
+ * @remarks
197
+ * Supports two variants:
198
+ * - 'delete' (default): For use in modal card headers, renders with 'delete' class
199
+ * - 'floating': For floating overlay close button, renders with 'modal-close' class
200
+ *
201
+ * The size prop only applies to the 'floating' variant.
202
+ */
203
+ export declare const ModalClose: React.FC<ModalCloseProps>;
133
204
  export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> & {
134
205
  Background: React.FC<ModalBackgroundProps>;
135
206
  Content: React.FC<ModalContentProps>;
@@ -48,7 +48,11 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
48
48
  */
49
49
  onOpenChange?: (open: boolean) => void;
50
50
  /**
51
- * Where the panel opens against the trigger.
51
+ * Where the panel opens against the trigger. Left out, it opens below and
52
+ * lines up with the trigger's start edge, which is its right edge on a
53
+ * right-to-left page, so a trigger at the start of the line doesn't push
54
+ * the panel off the screen. A corner you pass stays physical, so
55
+ * `bottom-left` lines up the left edges on either page.
52
56
  * @defaultValue 'bottom-left'
53
57
  */
54
58
  position?: PopoverPosition;
@@ -110,6 +110,15 @@ export interface SegmentedControlSegmentProps extends Omit<ButtonOwnProps, 'colo
110
110
  */
111
111
  'aria-pressed'?: never;
112
112
  }
113
+ /**
114
+ * One option in the row: a `<button role="radio">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.
115
+ *
116
+ * @function
117
+ * @param {SegmentedControlSegmentProps} props - Props for the segment.
118
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
119
+ * @returns {JSX.Element} The rendered segment.
120
+ */
121
+ export declare const SegmentedControlSegment: React.ForwardRefExoticComponent<SegmentedControlSegmentProps & React.RefAttributes<HTMLButtonElement>>;
113
122
  export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>> & {
114
123
  Segment: React.ForwardRefExoticComponent<SegmentedControlSegmentProps & React.RefAttributes<HTMLButtonElement>>;
115
124
  };
@@ -66,38 +66,78 @@ export interface SidebarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'c
66
66
  /**
67
67
  * Props for the SidebarHeader component.
68
68
  */
69
- interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
69
+ export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
70
70
  /** Header content. */
71
71
  children?: React.ReactNode;
72
72
  }
73
+ /**
74
+ * Container for the sidebar header.
75
+ *
76
+ * @function
77
+ * @param {SidebarHeaderProps} props - Props for the SidebarHeader component.
78
+ * @returns {JSX.Element} The rendered sidebar header.
79
+ */
80
+ export declare const SidebarHeader: React.FC<SidebarHeaderProps>;
73
81
  /**
74
82
  * Props for the SidebarTitle component.
75
83
  */
76
- interface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
84
+ export interface SidebarTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
77
85
  /** Title content. */
78
86
  children?: React.ReactNode;
79
87
  }
88
+ /**
89
+ * Title text inside the header.
90
+ *
91
+ * @function
92
+ * @param {SidebarTitleProps} props - Props for the SidebarTitle component.
93
+ * @returns {JSX.Element} The rendered sidebar title.
94
+ */
95
+ export declare const SidebarTitle: React.FC<SidebarTitleProps>;
80
96
  /**
81
97
  * Props for the SidebarClose component.
82
98
  * Extends standard button attributes.
83
99
  * @extraProp {'button' | 'submit' | 'reset'} [type='button'] - Button type. Defaults to `'button'`, so a close button inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.
84
100
  * @extraProp {string} [aria-label='Close'] - Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.
85
101
  */
86
- type SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
102
+ export type SidebarCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
103
+ /**
104
+ * Close button for the sidebar.
105
+ *
106
+ * @function
107
+ * @param {SidebarCloseProps} props - Props for the SidebarClose component.
108
+ * @returns {JSX.Element} The rendered close button.
109
+ */
110
+ export declare const SidebarClose: React.FC<SidebarCloseProps>;
87
111
  /**
88
112
  * Props for the SidebarBody component.
89
113
  */
90
- interface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {
114
+ export interface SidebarBodyProps extends React.HTMLAttributes<HTMLDivElement> {
91
115
  /** Body content. */
92
116
  children?: React.ReactNode;
93
117
  }
118
+ /**
119
+ * Main content area of the sidebar.
120
+ *
121
+ * @function
122
+ * @param {SidebarBodyProps} props - Props for the SidebarBody component.
123
+ * @returns {JSX.Element} The rendered sidebar body.
124
+ */
125
+ export declare const SidebarBody: React.FC<SidebarBodyProps>;
94
126
  /**
95
127
  * Props for the SidebarFooter component.
96
128
  */
97
- interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
129
+ export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
98
130
  /** Footer content. */
99
131
  children?: React.ReactNode;
100
132
  }
133
+ /**
134
+ * Footer area of the sidebar.
135
+ *
136
+ * @function
137
+ * @param {SidebarFooterProps} props - Props for the SidebarFooter component.
138
+ * @returns {JSX.Element} The rendered sidebar footer.
139
+ */
140
+ export declare const SidebarFooter: React.FC<SidebarFooterProps>;
101
141
  export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>> & {
102
142
  Header: React.FC<SidebarHeaderProps>;
103
143
  Title: React.FC<SidebarTitleProps>;
@@ -13,6 +13,17 @@ export interface FigureCaptionProps extends React.HTMLAttributes<HTMLElement>, O
13
13
  /** Content to be rendered inside the figcaption. */
14
14
  children?: React.ReactNode;
15
15
  }
16
+ /**
17
+ * FigureCaption component for rendering a styled figcaption element.
18
+ *
19
+ * A FigureCaption wraps the HTML `<figcaption>` element with Bulma helper class integration.
20
+ * Use it inside Figure components to provide captions for images or other media.
21
+ *
22
+ * @function
23
+ * @param {FigureCaptionProps} props - Props for the FigureCaption component.
24
+ * @returns {JSX.Element} The rendered figcaption element.
25
+ */
26
+ export declare const FigureCaption: React.FC<FigureCaptionProps>;
16
27
  /**
17
28
  * Props for the Figure component.
18
29
  */
@@ -63,7 +63,13 @@ export interface ColorInputBaseProps extends Omit<React.InputHTMLAttributes<HTML
63
63
  openOnFocus?: boolean;
64
64
  /** Closes the panel once a swatch is chosen. */
65
65
  closeOnSwatchClick?: boolean;
66
- /** The panel's place relative to the field. */
66
+ /**
67
+ * Where the panel opens against the field. Left out, it opens below and
68
+ * lines up with the field's start edge, which is its right edge when the
69
+ * picker reads right to left. A corner you pass stays physical, so
70
+ * `bottom-left` lines up the left edges either way.
71
+ * @defaultValue 'bottom-left'
72
+ */
67
73
  position?: PickerPosition;
68
74
  /**
69
75
  * Renders the panel through a portal, into the `portalContainer` a
@@ -103,7 +103,13 @@ export interface DateInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
103
103
  openOnFocus?: boolean;
104
104
  /** Close the popover after a date is selected. */
105
105
  closeOnSelect?: boolean;
106
- /** Popover anchor position relative to the input. */
106
+ /**
107
+ * Where the popover opens against the field. Left out, it opens below and
108
+ * lines up with the field's start edge, which is its right edge when the
109
+ * picker reads right to left. A corner you pass stays physical, so
110
+ * `bottom-left` lines up the left edges either way.
111
+ * @defaultValue 'bottom-left'
112
+ */
107
113
  position?: PickerPosition;
108
114
  /**
109
115
  * Render the popover through a portal, into the `portalContainer` a
@@ -90,7 +90,13 @@ export interface DateRangeInputBaseProps extends Omit<React.HTMLAttributes<HTMLD
90
90
  * marks the start, never closes it.
91
91
  */
92
92
  closeOnSelect?: boolean;
93
- /** Popover anchor position relative to the field. */
93
+ /**
94
+ * Where the popover opens against the field. Left out, it opens below and
95
+ * lines up with the field's start edge, which is its right edge when the
96
+ * picker reads right to left. A corner you pass stays physical, so
97
+ * `bottom-left` lines up the left edges either way.
98
+ * @defaultValue 'bottom-left'
99
+ */
94
100
  position?: PickerPosition;
95
101
  /**
96
102
  * Render the popover through a portal, into the `portalContainer` a
@@ -76,7 +76,13 @@ export interface DateTimeInputBaseProps extends Omit<React.InputHTMLAttributes<H
76
76
  openOnFocus?: boolean;
77
77
  /** Off by default — users typically tweak both halves before committing. */
78
78
  closeOnSelect?: boolean;
79
- /** Popover anchor position. */
79
+ /**
80
+ * Where the popover opens against the field. Left out, it opens below and
81
+ * lines up with the field's start edge, which is its right edge when the
82
+ * picker reads right to left. A corner you pass stays physical, so
83
+ * `bottom-left` lines up the left edges either way.
84
+ * @defaultValue 'bottom-left'
85
+ */
80
86
  position?: PickerPosition;
81
87
  /**
82
88
  * Render the popover through a portal, into the `portalContainer` a
@@ -65,7 +65,13 @@ export interface TimeInputBaseProps extends Omit<React.InputHTMLAttributes<HTMLI
65
65
  openOnFocus?: boolean;
66
66
  /** Close the popover after a time is selected (off by default). */
67
67
  closeOnSelect?: boolean;
68
- /** Popover anchor position relative to the input. */
68
+ /**
69
+ * Where the popover opens against the field. Left out, it opens below and
70
+ * lines up with the field's start edge, which is its right edge when the
71
+ * picker reads right to left. A corner you pass stays physical, so
72
+ * `bottom-left` lines up the left edges either way.
73
+ * @defaultValue 'bottom-left'
74
+ */
69
75
  position?: PickerPosition;
70
76
  /**
71
77
  * Render the popover through a portal, into the `portalContainer` a
@@ -157,7 +157,10 @@ interface TreeSelectBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
157
157
  /** Rounds the field's corners (Bulma's `is-rounded`). */
158
158
  isRounded?: boolean;
159
159
  /**
160
- * Where the panel opens, relative to the field, as on the pickers.
160
+ * Where the panel opens against the field, as on the pickers. Left out, it
161
+ * opens below and lines up with the field's start edge, which is its right
162
+ * edge on a right-to-left page. A corner you pass stays physical, so
163
+ * `bottom-left` lines up the left edges either way.
161
164
  * @defaultValue 'bottom-left'
162
165
  */
163
166
  position?: PickerPosition;
@@ -6,6 +6,11 @@ export interface PickerPopoverProps {
6
6
  onClose: () => void;
7
7
  anchorRef: React.RefObject<HTMLElement | null>;
8
8
  children: React.ReactNode;
9
+ /**
10
+ * The corner it opens from. Left out, it's `bottom-left` lined up with the
11
+ * anchor's start edge: the stylesheet's `is-start-aligned` rule in place,
12
+ * and the anchor's direction when portaled.
13
+ */
9
14
  position?: PickerPosition;
10
15
  appendToBody?: boolean;
11
16
  className?: string;
@@ -28,6 +28,18 @@ export interface PickerLocaleScope {
28
28
  * picker's own formatting reports it.
29
29
  */
30
30
  export declare function usePickerLocaleScope(ownLocale: string | undefined, ownDir: string | undefined): PickerLocaleScope;
31
+ /**
32
+ * The `dir` a picker's root ends up with: the one passed to it, else its own
33
+ * locale's inside a `LocaleProvider`, else none, so it follows the page. A
34
+ * picker that renders its own `Control` puts it there too. Bulma places the
35
+ * Control's icon and loading spinner against the Control's direction, and
36
+ * the launcher sits inside the picker's root, so the two have to agree or a
37
+ * French picker in an Arabic section puts the icon on top of the launcher.
38
+ * Returned as attributes to spread, empty when there's no `dir` to set.
39
+ */
40
+ export declare function usePickerDirAttrs(ownLocale: string | undefined, ownDir: string | undefined): {
41
+ dir?: string;
42
+ };
31
43
  /**
32
44
  * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
33
45
  * does only for a full week of seven.
@@ -55,6 +55,7 @@ export interface DialogSelectProps extends Omit<React.HTMLAttributes<HTMLDivElem
55
55
  color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
56
56
  size?: 'small' | 'medium' | 'large';
57
57
  isRounded?: boolean;
58
+ /** Left out, the panel lines up with the field's start edge. */
58
59
  position?: PickerPosition;
59
60
  appendToBody?: boolean;
60
61
  /** Holds the field, which focus goes back to. */
@@ -22,8 +22,15 @@ export interface AnchoredPosition {
22
22
  export interface UseAnchoredPositionOptions {
23
23
  /** Whether the panel is on the page. Nothing is measured while it is not. */
24
24
  active: boolean;
25
- /** The corner asked for, or `auto` to pick one that keeps the panel in the viewport. */
26
- position: PickerPosition;
25
+ /**
26
+ * The corner asked for, or `auto` to pick one that keeps the panel in the
27
+ * viewport. A named corner is physical, whatever the page's direction.
28
+ * Left out, the corner is `bottom-left` lined up with the anchor's inline
29
+ * start, which is its right edge right to left. A panel in place gets that
30
+ * from its stylesheet, as Popover's and the pickers' do; a fixed panel's
31
+ * coordinates read the anchor's direction.
32
+ */
33
+ position?: PickerPosition;
27
34
  /**
28
35
  * Whether the panel is fixed to the viewport (it was portaled away from the
29
36
  * anchor), which needs coordinates. Otherwise the panel's CSS places it