@allxsmith/bestax-bulma 5.45.1 → 5.46.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 (34) hide show
  1. package/dist/esm/form/Checkbox.js.map +1 -1
  2. package/dist/esm/form/File.js.map +1 -1
  3. package/dist/esm/form/Numberinput.js.map +1 -1
  4. package/dist/esm/form/PinInput.js.map +1 -1
  5. package/dist/esm/form/Radio.js.map +1 -1
  6. package/dist/esm/form/SelectBase.js.map +1 -1
  7. package/dist/esm/form/Slider.js.map +1 -1
  8. package/dist/esm/form/Switch.js.map +1 -1
  9. package/dist/esm/helpers/Theme.js +191 -49
  10. package/dist/esm/helpers/Theme.js.map +1 -1
  11. package/dist/esm/helpers/useVisibilityClasses.js.map +1 -1
  12. package/dist/index.cjs +190 -49
  13. package/dist/index.cjs.map +1 -1
  14. package/dist/types/form/Checkbox.d.ts +3 -0
  15. package/dist/types/form/File.d.ts +3 -0
  16. package/dist/types/form/Numberinput.d.ts +2 -0
  17. package/dist/types/form/PinInput.d.ts +3 -0
  18. package/dist/types/form/Radio.d.ts +3 -0
  19. package/dist/types/form/SelectBase.d.ts +3 -0
  20. package/dist/types/form/Slider.d.ts +3 -0
  21. package/dist/types/form/Switch.d.ts +2 -0
  22. package/dist/types/helpers/Theme.d.ts +37 -10
  23. package/dist/types/helpers/useVisibilityClasses.d.ts +5 -1
  24. package/dist/types-cjs/form/Checkbox.d.ts +3 -0
  25. package/dist/types-cjs/form/File.d.ts +3 -0
  26. package/dist/types-cjs/form/Numberinput.d.ts +2 -0
  27. package/dist/types-cjs/form/PinInput.d.ts +3 -0
  28. package/dist/types-cjs/form/Radio.d.ts +3 -0
  29. package/dist/types-cjs/form/SelectBase.d.ts +3 -0
  30. package/dist/types-cjs/form/Slider.d.ts +3 -0
  31. package/dist/types-cjs/form/Switch.d.ts +2 -0
  32. package/dist/types-cjs/helpers/Theme.d.ts +37 -10
  33. package/dist/types-cjs/helpers/useVisibilityClasses.d.ts +5 -1
  34. package/package.json +1 -1
package/dist/types/form/Checkbox.d.ts CHANGED
@@ -34,6 +34,9 @@ export declare const checkboxColors: readonly ["primary", "link", "info", "succe
34
34
  export declare const checkboxSizes: readonly ["small", "normal", "medium", "large"];
35
35
  /**
36
36
  * Props for the Checkbox component.
37
+ *
38
+ * @helperProps Helper props go on the outer `<label>`, with `className`. The
39
+ * other attributes go on the `<input>`.
37
40
  */
38
41
  export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
39
42
  /** Color of the checkbox. */
package/dist/types/form/File.d.ts CHANGED
@@ -9,6 +9,9 @@ import { FormFieldProps } from './fieldProps.js';
9
9
  * for them, nested in the `.control`, and warns in development. Wrap the
10
10
  * `Control` in a `Field` instead, and set the `label`, `horizontal` and class
11
11
  * name on that `Field`.
12
+ *
13
+ * @helperProps Helper props go on the `.file` wrapper `<div>`, with
14
+ * `className`. The other attributes go on the `<input>`.
12
15
  */
13
16
  export interface FileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
14
17
  /** Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */
package/dist/types/form/Numberinput.d.ts CHANGED
@@ -13,6 +13,8 @@ export type NumberinputControlsPosition = 'left' | 'right' | 'both';
13
13
  export type NumberinputVariant = 'plusminus' | 'stepper';
14
14
  /**
15
15
  * Props for the Numberinput component.
16
+ * @helperProps Helper props go on the outer `.numberinput` `<div>`, with
17
+ * `className`. The other attributes go on the `<input>`.
16
18
  * @extraProp {string} [className] - Additional CSS classes.
17
19
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
18
20
  */
package/dist/types/form/PinInput.d.ts CHANGED
@@ -19,6 +19,9 @@ export type PinInputType = 'number' | 'alphanumeric';
19
19
  * `Field`.
20
20
  * Every other prop goes to the `<input>` that holds the code, except
21
21
  * `className` and the helper props, which go to the row of boxes.
22
+ * @helperProps Helper props go on the `.pin-input` `<div>`, the row of boxes,
23
+ * with `className`. The other attributes go on the `<input>` that holds the
24
+ * code.
22
25
  * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.
23
26
  * @extraProp {string} [autoComplete="one-time-code"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.
24
27
  * @extraProp {string} [inputMode] - The keyboard a phone shows: `"numeric"` with `type="number"`, `"text"` with `type="alphanumeric"`.
package/dist/types/form/Radio.d.ts CHANGED
@@ -36,6 +36,9 @@ export declare const radioColors: readonly ["primary", "link", "info", "success"
36
36
  export declare const radioSizes: readonly ["small", "normal", "medium", "large"];
37
37
  /**
38
38
  * Props for the Radio component.
39
+ *
40
+ * @helperProps Helper props go on the outer `<label>`, with `className`. The
41
+ * other attributes go on the `<input>`.
39
42
  */
40
43
  export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
41
44
  /** Color of the radio button. */
package/dist/types/form/SelectBase.d.ts CHANGED
@@ -2,6 +2,9 @@ import React from 'react';
2
2
  import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
3
3
  /**
4
4
  * Props for the Select component.
5
+ *
6
+ * @helperProps Helper props go on the `.select` wrapper `<div>`, with
7
+ * `className`. The other attributes go on the `<select>`.
5
8
  */
6
9
  export interface SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
7
10
  /** Bulma color modifier for the select. */
package/dist/types/form/Slider.d.ts CHANGED
@@ -124,6 +124,9 @@ export interface SliderRangeProps extends SliderBaseProps {
124
124
  * nested in the `.control`, and warns in development. Wrap the `Control` in a
125
125
  * `Field` instead, and set the `label`, `horizontal` and class name on that
126
126
  * `Field`.
127
+ * @helperProps Helper props go on the `.slider` wrapper `<div>`, with
128
+ * `className`. The other attributes go on the `<input>`, the low thumb's in
129
+ * range mode.
127
130
  * @extraProp {boolean} [disabled=false] - Whether the slider is disabled.
128
131
  * @extraProp {string} [className] - Additional CSS classes.
129
132
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
package/dist/types/form/Switch.d.ts CHANGED
@@ -34,6 +34,8 @@ export declare const switchColors: readonly ["primary", "link", "info", "success
34
34
  export declare const switchSizes: readonly ["small", "normal", "medium", "large"];
35
35
  /**
36
36
  * Props for the Switch component.
37
+ * @helperProps Helper props go on the outer `<label>`, with `className`. The
38
+ * other attributes go on the `<input>`.
37
39
  * @extraProp {boolean} [checked] - Controlled checked state.
38
40
  * @extraProp {boolean} [defaultChecked=false] - Default checked state for uncontrolled usage.
39
41
  * @extraProp {boolean} [disabled=false] - Whether the switch is disabled.
package/dist/types/helpers/Theme.d.ts CHANGED
@@ -2,11 +2,30 @@ import React, { ReactNode } from 'react';
2
2
  import { BulmaClassesProps } from './useBulmaClasses.js';
3
3
  import { validRadii, type BulmaGapStep } from './bulmaClassHelpers.js';
4
4
  /** Every Bulma CSS variable Theme accepts: the two lists above. */
5
- declare const bulmaCssVars: readonly ["--bulma-scheme-h", "--bulma-scheme-s", "--bulma-scheme-main", "--bulma-scheme-main-bis", "--bulma-scheme-main-ter", "--bulma-scheme-invert", "--bulma-scheme-invert-bis", "--bulma-scheme-invert-ter", "--bulma-light-l", "--bulma-light-invert-l", "--bulma-dark-l", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-column-gap", "--bulma-grid-cell-column-start", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
5
+ declare const bulmaCssVars: readonly ["--bulma-scheme-h", "--bulma-scheme-s", "--bulma-scheme-main", "--bulma-scheme-main-bis", "--bulma-scheme-main-ter", "--bulma-scheme-invert", "--bulma-scheme-invert-bis", "--bulma-scheme-invert-ter", "--bulma-light-l", "--bulma-light-invert-l", "--bulma-dark-l", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-primary-invert-l", "--bulma-primary-on-scheme-l", "--bulma-link-invert-l", "--bulma-link-on-scheme-l", "--bulma-info-invert-l", "--bulma-info-on-scheme-l", "--bulma-success-invert-l", "--bulma-success-on-scheme-l", "--bulma-warning-invert-l", "--bulma-warning-on-scheme-l", "--bulma-danger-invert-l", "--bulma-danger-on-scheme-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-column-gap", "--bulma-grid-cell-column-start", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
6
6
  /** A single Bulma CSS variable key from the `bulmaCssVars` tuple. */
7
7
  type BulmaVarKey = (typeof bulmaCssVars)[number];
8
- /** A partial record mapping Bulma CSS variable keys to string values. */
9
- type BulmaVars = Partial<Record<BulmaVarKey, string>>;
8
+ /**
9
+ * The keys Bulma gives a value of its own in each scheme: the lightness of a
10
+ * color's text on the page, which has to read on a light page and on a dark
11
+ * one.
12
+ */
13
+ type BulmaOnSchemeKey = Extract<BulmaVarKey, `--bulma-${string}-on-scheme-l`>;
14
+ /**
15
+ * One value for Bulma's light scheme and one for its dark scheme. A scheme
16
+ * left out keeps the stylesheet's own value.
17
+ */
18
+ interface BulmaSchemeValues {
19
+ /** The value in the light scheme. */
20
+ light?: string;
21
+ /** The value in the dark scheme. */
22
+ dark?: string;
23
+ }
24
+ /**
25
+ * A partial record mapping Bulma CSS variable keys to string values. The
26
+ * on-scheme keys also take one value per scheme.
27
+ */
28
+ type BulmaVars = Partial<Record<Exclude<BulmaVarKey, BulmaOnSchemeKey>, string>> & Partial<Record<BulmaOnSchemeKey, string | BulmaSchemeValues>>;
10
29
  /**
11
30
  * Props for the Theme component.
12
31
  */
@@ -30,8 +49,11 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
30
49
  * Several root Themes can be mounted at once, and each contributes its own
31
50
  * variables. Where two set the same one, the inner or later-mounted Theme
32
51
  * wins, as with nested scoped Themes, and unmounting a Theme removes only
33
- * what it contributed. The variables are written from an effect, so a
34
- * server render does not include them.
52
+ * what it contributed.
53
+ *
54
+ * The variables are written before the browser paints. A server render
55
+ * has none of them, so put what a server-rendered page needs at first
56
+ * paint in CSS.
35
57
  */
36
58
  isRoot?: boolean;
37
59
  /**
@@ -47,11 +69,10 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
47
69
  * If the prefix cannot form an attribute name, `'light'` and `'dark'`
48
70
  * write only `data-theme` and warn in development.
49
71
  *
50
- * The attribute is written from an effect, so a page rendered in the
51
- * browser paints its first frame with whatever `<html>` already has, the
52
- * visitor's OS scheme when that is nothing. Put a scheme that never changes
53
- * on `<html>` in `index.html` instead, and write a saved choice from an
54
- * inline `<head>` script, starting `colorMode` from what it wrote.
72
+ * It is written before the browser paints, but the page can paint before
73
+ * the app's script runs, in the scheme `<html>` already has. Put a fixed
74
+ * scheme on `<html>` in `index.html`, and write a saved choice from an
75
+ * inline `<head>` script, starting `colorMode` from it.
55
76
  */
56
77
  colorMode?: 'light' | 'dark' | 'system';
57
78
  /**
@@ -73,6 +94,12 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
73
94
  * Some global variables Bulma also declares again on one component, which
74
95
  * keeps its own value while everything else takes the Theme's. Those do not
75
96
  * warn, because the value still reaches the rest of the page.
97
+ *
98
+ * A color's trio leaves its label (`--bulma-<color>-invert-l`) and text
99
+ * (`--bulma-<color>-on-scheme-l`) lightnesses where the stylesheet's build
100
+ * put them, so a new color sets them too. On an `isRoot` Theme the
101
+ * on-scheme keys also take `{ light, dark }`, one value per scheme, which a
102
+ * scoped Theme skips with a warning in development.
76
103
  */
77
104
  bulmaVars?: BulmaVars;
78
105
  /**
package/dist/types/helpers/useVisibilityClasses.d.ts CHANGED
@@ -3,7 +3,11 @@ import { validVisibilities, BulmaViewportProps, BulmaDisplayProps } from './bulm
3
3
  * Props for applying Bulma visibility and display helper classes.
4
4
  */
5
5
  export interface BulmaVisibilityProps extends BulmaViewportProps, BulmaDisplayProps {
6
- /** Visibility (e.g., 'hidden', 'sr-only'). */
6
+ /**
7
+ * Hides the element. `'hidden'` takes it off the page, `'invisible'` hides
8
+ * it and keeps its space, and `'sr-only'` (screen reader only) hides it
9
+ * visually while screen readers still read it.
10
+ */
7
11
  visibility?: (typeof validVisibilities)[number];
8
12
  /** Visibility for mobile viewport (up to 768px). */
9
13
  visibilityMobile?: (typeof validVisibilities)[number];
package/dist/types-cjs/form/Checkbox.d.ts CHANGED
@@ -34,6 +34,9 @@ export declare const checkboxColors: readonly ["primary", "link", "info", "succe
34
34
  export declare const checkboxSizes: readonly ["small", "normal", "medium", "large"];
35
35
  /**
36
36
  * Props for the Checkbox component.
37
+ *
38
+ * @helperProps Helper props go on the outer `<label>`, with `className`. The
39
+ * other attributes go on the `<input>`.
37
40
  */
38
41
  export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
39
42
  /** Color of the checkbox. */
package/dist/types-cjs/form/File.d.ts CHANGED
@@ -9,6 +9,9 @@ import { FormFieldProps } from './fieldProps.js';
9
9
  * for them, nested in the `.control`, and warns in development. Wrap the
10
10
  * `Control` in a `Field` instead, and set the `label`, `horizontal` and class
11
11
  * name on that `Field`.
12
+ *
13
+ * @helperProps Helper props go on the `.file` wrapper `<div>`, with
14
+ * `className`. The other attributes go on the `<input>`.
12
15
  */
13
16
  export interface FileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | 'type'>, Omit<BulmaClassesProps, 'color'>, FormFieldProps {
14
17
  /** Field label. Automatically associated with the file input via `htmlFor` — uses your `id` when provided, otherwise a generated one. The input then has two labels (this one plus the wrapping `file-label`); assistive tech reads both. Dropped inside an outer `Field`, whose own label associates instead when that `Field` generates a target id (not `grouped`/`hasAddons`, no explicit `labelProps.htmlFor`) and you set no `id` here. */
package/dist/types-cjs/form/Numberinput.d.ts CHANGED
@@ -13,6 +13,8 @@ export type NumberinputControlsPosition = 'left' | 'right' | 'both';
13
13
  export type NumberinputVariant = 'plusminus' | 'stepper';
14
14
  /**
15
15
  * Props for the Numberinput component.
16
+ * @helperProps Helper props go on the outer `.numberinput` `<div>`, with
17
+ * `className`. The other attributes go on the `<input>`.
16
18
  * @extraProp {string} [className] - Additional CSS classes.
17
19
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
18
20
  */
package/dist/types-cjs/form/PinInput.d.ts CHANGED
@@ -19,6 +19,9 @@ export type PinInputType = 'number' | 'alphanumeric';
19
19
  * `Field`.
20
20
  * Every other prop goes to the `<input>` that holds the code, except
21
21
  * `className` and the helper props, which go to the row of boxes.
22
+ * @helperProps Helper props go on the `.pin-input` `<div>`, the row of boxes,
23
+ * with `className`. The other attributes go on the `<input>` that holds the
24
+ * code.
22
25
  * @extraProp {string} [name] - Form field name, on the input, so a form submits the code under it.
23
26
  * @extraProp {string} [autoComplete="one-time-code"] - Lets the browser offer a code it received by text message, and tells a password manager this is a one-time code.
24
27
  * @extraProp {string} [inputMode] - The keyboard a phone shows: `"numeric"` with `type="number"`, `"text"` with `type="alphanumeric"`.
package/dist/types-cjs/form/Radio.d.ts CHANGED
@@ -36,6 +36,9 @@ export declare const radioColors: readonly ["primary", "link", "info", "success"
36
36
  export declare const radioSizes: readonly ["small", "normal", "medium", "large"];
37
37
  /**
38
38
  * Props for the Radio component.
39
+ *
40
+ * @helperProps Helper props go on the outer `<label>`, with `className`. The
41
+ * other attributes go on the `<input>`.
39
42
  */
40
43
  export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'color'>, Omit<BulmaClassesProps, 'color' | 'backgroundColor' | 'size'> {
41
44
  /** Color of the radio button. */
package/dist/types-cjs/form/SelectBase.d.ts CHANGED
@@ -2,6 +2,9 @@ import React from 'react';
2
2
  import { BulmaClassesProps } from '../helpers/useBulmaClasses.js';
3
3
  /**
4
4
  * Props for the Select component.
5
+ *
6
+ * @helperProps Helper props go on the `.select` wrapper `<div>`, with
7
+ * `className`. The other attributes go on the `<select>`.
5
8
  */
6
9
  export interface SelectBaseProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, Omit<BulmaClassesProps, 'color'> {
7
10
  /** Bulma color modifier for the select. */
package/dist/types-cjs/form/Slider.d.ts CHANGED
@@ -124,6 +124,9 @@ export interface SliderRangeProps extends SliderBaseProps {
124
124
  * nested in the `.control`, and warns in development. Wrap the `Control` in a
125
125
  * `Field` instead, and set the `label`, `horizontal` and class name on that
126
126
  * `Field`.
127
+ * @helperProps Helper props go on the `.slider` wrapper `<div>`, with
128
+ * `className`. The other attributes go on the `<input>`, the low thumb's in
129
+ * range mode.
127
130
  * @extraProp {boolean} [disabled=false] - Whether the slider is disabled.
128
131
  * @extraProp {string} [className] - Additional CSS classes.
129
132
  * @extraProp {React.Ref<HTMLElement>} [ref] - Ref forwarded to the input element.
package/dist/types-cjs/form/Switch.d.ts CHANGED
@@ -34,6 +34,8 @@ export declare const switchColors: readonly ["primary", "link", "info", "success
34
34
  export declare const switchSizes: readonly ["small", "normal", "medium", "large"];
35
35
  /**
36
36
  * Props for the Switch component.
37
+ * @helperProps Helper props go on the outer `<label>`, with `className`. The
38
+ * other attributes go on the `<input>`.
37
39
  * @extraProp {boolean} [checked] - Controlled checked state.
38
40
  * @extraProp {boolean} [defaultChecked=false] - Default checked state for uncontrolled usage.
39
41
  * @extraProp {boolean} [disabled=false] - Whether the switch is disabled.
package/dist/types-cjs/helpers/Theme.d.ts CHANGED
@@ -2,11 +2,30 @@ import React, { ReactNode } from 'react';
2
2
  import { BulmaClassesProps } from './useBulmaClasses.js';
3
3
  import { validRadii, type BulmaGapStep } from './bulmaClassHelpers.js';
4
4
  /** Every Bulma CSS variable Theme accepts: the two lists above. */
5
- declare const bulmaCssVars: readonly ["--bulma-scheme-h", "--bulma-scheme-s", "--bulma-scheme-main", "--bulma-scheme-main-bis", "--bulma-scheme-main-ter", "--bulma-scheme-invert", "--bulma-scheme-invert-bis", "--bulma-scheme-invert-ter", "--bulma-light-l", "--bulma-light-invert-l", "--bulma-dark-l", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-column-gap", "--bulma-grid-cell-column-start", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
5
+ declare const bulmaCssVars: readonly ["--bulma-scheme-h", "--bulma-scheme-s", "--bulma-scheme-main", "--bulma-scheme-main-bis", "--bulma-scheme-main-ter", "--bulma-scheme-invert", "--bulma-scheme-invert-bis", "--bulma-scheme-invert-ter", "--bulma-light-l", "--bulma-light-invert-l", "--bulma-dark-l", "--bulma-dark-invert-l", "--bulma-soft-l", "--bulma-bold-l", "--bulma-soft-invert-l", "--bulma-bold-invert-l", "--bulma-hover-background-l-delta", "--bulma-active-background-l-delta", "--bulma-hover-border-l-delta", "--bulma-active-border-l-delta", "--bulma-hover-color-l-delta", "--bulma-active-color-l-delta", "--bulma-hover-shadow-a-delta", "--bulma-active-shadow-a-delta", "--bulma-primary-h", "--bulma-primary-s", "--bulma-primary-l", "--bulma-link-h", "--bulma-link-s", "--bulma-link-l", "--bulma-info-h", "--bulma-info-s", "--bulma-info-l", "--bulma-success-h", "--bulma-success-s", "--bulma-success-l", "--bulma-warning-h", "--bulma-warning-s", "--bulma-warning-l", "--bulma-danger-h", "--bulma-danger-s", "--bulma-danger-l", "--bulma-primary-invert-l", "--bulma-primary-on-scheme-l", "--bulma-link-invert-l", "--bulma-link-on-scheme-l", "--bulma-info-invert-l", "--bulma-info-on-scheme-l", "--bulma-success-invert-l", "--bulma-success-on-scheme-l", "--bulma-warning-invert-l", "--bulma-warning-on-scheme-l", "--bulma-danger-invert-l", "--bulma-danger-on-scheme-l", "--bulma-shadow-h", "--bulma-shadow-s", "--bulma-shadow-l", "--bulma-shadow", "--bulma-family-primary", "--bulma-family-secondary", "--bulma-family-code", "--bulma-size-small", "--bulma-size-normal", "--bulma-size-medium", "--bulma-size-large", "--bulma-weight-light", "--bulma-weight-normal", "--bulma-weight-medium", "--bulma-weight-semibold", "--bulma-weight-bold", "--bulma-weight-extrabold", "--bulma-block-spacing", "--bulma-duration", "--bulma-easing", "--bulma-radius-small", "--bulma-radius", "--bulma-radius-medium", "--bulma-radius-large", "--bulma-radius-rounded", "--bulma-speed", "--bulma-arrow-color", "--bulma-loading-color", "--bulma-burger-h", "--bulma-burger-s", "--bulma-burger-l", "--bulma-burger-border-radius", "--bulma-burger-gap", "--bulma-burger-item-height", "--bulma-burger-item-width", "--bulma-body-background-color", "--bulma-body-size", "--bulma-body-min-width", "--bulma-body-rendering", "--bulma-body-family", "--bulma-body-overflow-x", "--bulma-body-overflow-y", "--bulma-body-color", "--bulma-body-font-size", "--bulma-body-weight", "--bulma-body-line-height", "--bulma-code-family", "--bulma-code-padding", "--bulma-code-weight", "--bulma-code-size", "--bulma-small-font-size", "--bulma-hr-background-color", "--bulma-hr-height", "--bulma-hr-margin", "--bulma-strong-color", "--bulma-strong-weight", "--bulma-pre-font-size", "--bulma-pre-padding", "--bulma-pre-code-font-size", "--bulma-skeleton-background", "--bulma-skeleton-radius", "--bulma-skeleton-block-min-height", "--bulma-skeleton-lines-gap", "--bulma-skeleton-line-height", "--bulma-control-radius", "--bulma-control-radius-small", "--bulma-control-border-width", "--bulma-control-height", "--bulma-control-line-height", "--bulma-control-padding-vertical", "--bulma-control-padding-horizontal", "--bulma-control-size", "--bulma-control-focus-shadow-l", "--bulma-column-gap", "--bulma-grid-cell-column-start", "--bulma-breadcrumb-item-color", "--bulma-breadcrumb-item-hover-color", "--bulma-breadcrumb-item-active-color", "--bulma-breadcrumb-item-padding-vertical", "--bulma-breadcrumb-item-padding-horizontal", "--bulma-breadcrumb-item-separator-color", "--bulma-card-color", "--bulma-card-background-color", "--bulma-card-shadow", "--bulma-card-radius", "--bulma-card-header-background-color", "--bulma-card-header-color", "--bulma-card-header-padding", "--bulma-card-header-shadow", "--bulma-card-header-weight", "--bulma-card-content-background-color", "--bulma-card-content-padding", "--bulma-card-footer-background-color", "--bulma-card-footer-border-top", "--bulma-card-footer-padding", "--bulma-card-media-margin", "--bulma-dropdown-menu-min-width", "--bulma-dropdown-content-background-color", "--bulma-dropdown-content-offset", "--bulma-dropdown-content-padding-bottom", "--bulma-dropdown-content-padding-top", "--bulma-dropdown-content-radius", "--bulma-dropdown-content-shadow", "--bulma-dropdown-content-z", "--bulma-dropdown-item-h", "--bulma-dropdown-item-s", "--bulma-dropdown-item-l", "--bulma-dropdown-item-background-l", "--bulma-dropdown-item-background-l-delta", "--bulma-dropdown-item-hover-background-l-delta", "--bulma-dropdown-item-active-background-l-delta", "--bulma-dropdown-item-color-l", "--bulma-dropdown-item-selected-h", "--bulma-dropdown-item-selected-s", "--bulma-dropdown-item-selected-l", "--bulma-dropdown-item-selected-background-l", "--bulma-dropdown-item-selected-color-l", "--bulma-dropdown-divider-background-color", "--bulma-menu-item-h", "--bulma-menu-item-s", "--bulma-menu-item-l", "--bulma-menu-item-background-l", "--bulma-menu-item-background-l-delta", "--bulma-menu-item-hover-background-l-delta", "--bulma-menu-item-active-background-l-delta", "--bulma-menu-item-color-l", "--bulma-menu-item-radius", "--bulma-menu-item-selected-h", "--bulma-menu-item-selected-s", "--bulma-menu-item-selected-l", "--bulma-menu-item-selected-background-l", "--bulma-menu-item-selected-color-l", "--bulma-menu-list-border-left", "--bulma-menu-list-line-height", "--bulma-menu-list-link-padding", "--bulma-menu-nested-list-margin", "--bulma-menu-nested-list-padding-left", "--bulma-menu-label-color", "--bulma-menu-label-font-size", "--bulma-menu-label-letter-spacing", "--bulma-menu-label-spacing", "--bulma-message-h", "--bulma-message-s", "--bulma-message-background-l", "--bulma-message-border-l", "--bulma-message-border-l-delta", "--bulma-message-border-style", "--bulma-message-border-width", "--bulma-message-color-l", "--bulma-message-radius", "--bulma-message-header-weight", "--bulma-message-header-padding", "--bulma-message-header-radius", "--bulma-message-header-body-border-width", "--bulma-message-header-background-l", "--bulma-message-header-color-l", "--bulma-message-body-border-width", "--bulma-message-body-color", "--bulma-message-body-padding", "--bulma-message-body-radius", "--bulma-message-body-pre-code-background-color", "--bulma-modal-z", "--bulma-modal-background-background-color", "--bulma-modal-content-width", "--bulma-modal-content-margin-mobile", "--bulma-modal-content-spacing-mobile", "--bulma-modal-content-spacing-tablet", "--bulma-modal-close-dimensions", "--bulma-modal-close-right", "--bulma-modal-close-top", "--bulma-modal-card-spacing", "--bulma-modal-card-head-background-color", "--bulma-modal-card-head-padding", "--bulma-modal-card-head-radius", "--bulma-modal-card-title-color", "--bulma-modal-card-title-line-height", "--bulma-modal-card-title-size", "--bulma-modal-card-foot-background-color", "--bulma-modal-card-foot-radius", "--bulma-modal-card-body-background-color", "--bulma-modal-card-body-padding", "--bulma-navbar-h", "--bulma-navbar-s", "--bulma-navbar-l", "--bulma-navbar-background-color", "--bulma-navbar-box-shadow-size", "--bulma-navbar-box-shadow-color", "--bulma-navbar-padding-vertical", "--bulma-navbar-padding-horizontal", "--bulma-navbar-z", "--bulma-navbar-fixed-z", "--bulma-navbar-item-background-a", "--bulma-navbar-item-background-l", "--bulma-navbar-item-background-l-delta", "--bulma-navbar-item-hover-background-l-delta", "--bulma-navbar-item-active-background-l-delta", "--bulma-navbar-item-color-l", "--bulma-navbar-item-selected-h", "--bulma-navbar-item-selected-s", "--bulma-navbar-item-selected-l", "--bulma-navbar-item-selected-background-l", "--bulma-navbar-item-selected-color-l", "--bulma-navbar-item-img-max-height", "--bulma-navbar-burger-color", "--bulma-navbar-tab-hover-background-color", "--bulma-navbar-tab-hover-border-bottom-color", "--bulma-navbar-tab-active-color", "--bulma-navbar-tab-active-background-color", "--bulma-navbar-tab-active-border-bottom-color", "--bulma-navbar-tab-active-border-bottom-style", "--bulma-navbar-tab-active-border-bottom-width", "--bulma-navbar-dropdown-background-color", "--bulma-navbar-dropdown-border-l", "--bulma-navbar-dropdown-border-color", "--bulma-navbar-dropdown-border-style", "--bulma-navbar-dropdown-border-width", "--bulma-navbar-dropdown-offset", "--bulma-navbar-dropdown-arrow", "--bulma-navbar-dropdown-radius", "--bulma-navbar-dropdown-z", "--bulma-navbar-dropdown-boxed-radius", "--bulma-navbar-dropdown-boxed-shadow", "--bulma-navbar-dropdown-item-h", "--bulma-navbar-dropdown-item-s", "--bulma-navbar-dropdown-item-l", "--bulma-navbar-dropdown-item-background-l", "--bulma-navbar-dropdown-item-color-l", "--bulma-navbar-divider-background-l", "--bulma-navbar-divider-height", "--bulma-navbar-bottom-box-shadow-size", "--bulma-pagination-margin", "--bulma-pagination-min-width", "--bulma-pagination-item-h", "--bulma-pagination-item-s", "--bulma-pagination-item-l", "--bulma-pagination-item-background-l-delta", "--bulma-pagination-item-hover-background-l-delta", "--bulma-pagination-item-active-background-l-delta", "--bulma-pagination-item-border-style", "--bulma-pagination-item-border-width", "--bulma-pagination-item-border-l", "--bulma-pagination-item-border-l-delta", "--bulma-pagination-item-hover-border-l-delta", "--bulma-pagination-item-active-border-l-delta", "--bulma-pagination-item-focus-border-l-delta", "--bulma-pagination-item-color-l", "--bulma-pagination-item-font-size", "--bulma-pagination-item-margin", "--bulma-pagination-item-padding-left", "--bulma-pagination-item-padding-right", "--bulma-pagination-item-outer-shadow-h", "--bulma-pagination-item-outer-shadow-s", "--bulma-pagination-item-outer-shadow-l", "--bulma-pagination-item-outer-shadow-a", "--bulma-pagination-nav-padding-left", "--bulma-pagination-nav-padding-right", "--bulma-pagination-disabled-color", "--bulma-pagination-disabled-background-color", "--bulma-pagination-disabled-border-color", "--bulma-pagination-current-color", "--bulma-pagination-current-background-color", "--bulma-pagination-current-border-color", "--bulma-pagination-ellipsis-color", "--bulma-pagination-shadow-inset", "--bulma-pagination-selected-item-h", "--bulma-pagination-selected-item-s", "--bulma-pagination-selected-item-l", "--bulma-pagination-selected-item-background-l", "--bulma-pagination-selected-item-border-l", "--bulma-pagination-selected-item-color-l", "--bulma-panel-margin", "--bulma-panel-item-border", "--bulma-panel-radius", "--bulma-panel-shadow", "--bulma-panel-heading-line-height", "--bulma-panel-heading-padding", "--bulma-panel-heading-radius", "--bulma-panel-heading-size", "--bulma-panel-heading-weight", "--bulma-panel-tabs-font-size", "--bulma-panel-tab-border-bottom-color", "--bulma-panel-tab-border-bottom-style", "--bulma-panel-tab-border-bottom-width", "--bulma-panel-tab-active-color", "--bulma-panel-list-item-color", "--bulma-panel-list-item-hover-color", "--bulma-panel-block-color", "--bulma-panel-block-hover-background-color", "--bulma-panel-block-active-border-left-color", "--bulma-panel-block-active-color", "--bulma-panel-block-active-icon-color", "--bulma-panel-icon-color", "--bulma-tabs-border-bottom-color", "--bulma-tabs-border-bottom-style", "--bulma-tabs-border-bottom-width", "--bulma-tabs-link-color", "--bulma-tabs-link-hover-border-bottom-color", "--bulma-tabs-link-hover-color", "--bulma-tabs-link-active-border-bottom-color", "--bulma-tabs-link-active-color", "--bulma-tabs-link-padding", "--bulma-tabs-boxed-link-radius", "--bulma-tabs-boxed-link-hover-background-color", "--bulma-tabs-boxed-link-hover-border-bottom-color", "--bulma-tabs-boxed-link-active-background-color", "--bulma-tabs-boxed-link-active-border-color", "--bulma-tabs-boxed-link-active-border-bottom-color", "--bulma-tabs-toggle-link-border-color", "--bulma-tabs-toggle-link-border-style", "--bulma-tabs-toggle-link-border-width", "--bulma-tabs-toggle-link-hover-background-color", "--bulma-tabs-toggle-link-hover-border-color", "--bulma-tabs-toggle-link-radius", "--bulma-tabs-toggle-link-active-background-color", "--bulma-tabs-toggle-link-active-border-color", "--bulma-tabs-toggle-link-active-color", "--bulma-box-background-color", "--bulma-box-color", "--bulma-box-radius", "--bulma-box-shadow", "--bulma-box-padding", "--bulma-box-link-hover-shadow", "--bulma-box-link-active-shadow", "--bulma-content-heading-color", "--bulma-content-heading-weight", "--bulma-content-heading-line-height", "--bulma-content-block-margin-bottom", "--bulma-content-blockquote-background-color", "--bulma-content-blockquote-border-left", "--bulma-content-blockquote-padding", "--bulma-content-pre-padding", "--bulma-content-table-cell-border", "--bulma-content-table-cell-border-width", "--bulma-content-table-cell-padding", "--bulma-content-table-cell-heading-color", "--bulma-content-table-head-cell-border-width", "--bulma-content-table-head-cell-color", "--bulma-content-table-body-last-row-cell-border-bottom-width", "--bulma-content-table-foot-cell-border-width", "--bulma-content-table-foot-cell-color", "--bulma-delete-dimensions", "--bulma-delete-background-l", "--bulma-delete-background-alpha", "--bulma-delete-color", "--bulma-icon-dimensions", "--bulma-icon-dimensions-small", "--bulma-icon-dimensions-medium", "--bulma-icon-dimensions-large", "--bulma-icon-text-spacing", "--bulma-notification-h", "--bulma-notification-s", "--bulma-notification-background-l", "--bulma-notification-color-l", "--bulma-notification-code-background-color", "--bulma-notification-radius", "--bulma-notification-padding", "--bulma-progress-border-radius", "--bulma-progress-bar-background-color", "--bulma-progress-value-background-color", "--bulma-progress-indeterminate-duration", "--bulma-table-color", "--bulma-table-background-color", "--bulma-table-cell-border-color", "--bulma-table-cell-border-style", "--bulma-table-cell-border-width", "--bulma-table-cell-padding", "--bulma-table-cell-heading-color", "--bulma-table-cell-text-align", "--bulma-table-head-cell-border-width", "--bulma-table-head-cell-color", "--bulma-table-foot-cell-border-width", "--bulma-table-foot-cell-color", "--bulma-table-head-background-color", "--bulma-table-body-background-color", "--bulma-table-foot-background-color", "--bulma-table-row-hover-background-color", "--bulma-table-row-active-background-color", "--bulma-table-row-active-color", "--bulma-table-striped-row-even-background-color", "--bulma-table-striped-row-even-hover-background-color", "--bulma-tag-h", "--bulma-tag-s", "--bulma-tag-background-l", "--bulma-tag-background-l-delta", "--bulma-tag-hover-background-l-delta", "--bulma-tag-active-background-l-delta", "--bulma-tag-color-l", "--bulma-tag-radius", "--bulma-tag-delete-margin", "--bulma-title-color", "--bulma-title-family", "--bulma-title-size", "--bulma-title-weight", "--bulma-title-line-height", "--bulma-title-strong-color", "--bulma-title-strong-weight", "--bulma-title-sub-size", "--bulma-title-sup-size", "--bulma-subtitle-color", "--bulma-subtitle-family", "--bulma-subtitle-size", "--bulma-subtitle-weight", "--bulma-subtitle-line-height", "--bulma-subtitle-strong-color", "--bulma-subtitle-strong-weight", "--bulma-file-radius", "--bulma-file-name-border-color", "--bulma-file-name-border-style", "--bulma-file-name-border-width", "--bulma-file-name-max-width", "--bulma-file-h", "--bulma-file-s", "--bulma-file-background-l", "--bulma-file-background-l-delta", "--bulma-file-hover-background-l-delta", "--bulma-file-active-background-l-delta", "--bulma-file-border-l", "--bulma-file-border-l-delta", "--bulma-file-hover-border-l-delta", "--bulma-file-active-border-l-delta", "--bulma-file-cta-color-l", "--bulma-file-name-color-l", "--bulma-file-color-l-delta", "--bulma-file-hover-color-l-delta", "--bulma-file-active-color-l-delta", "--bulma-input-h", "--bulma-input-s", "--bulma-input-l", "--bulma-input-border-style", "--bulma-input-border-l", "--bulma-input-border-l-delta", "--bulma-input-hover-border-l-delta", "--bulma-input-active-border-l-delta", "--bulma-input-focus-h", "--bulma-input-focus-s", "--bulma-input-focus-l", "--bulma-input-focus-shadow-size", "--bulma-input-focus-shadow-alpha", "--bulma-input-color-l", "--bulma-input-background-l", "--bulma-input-background-l-delta", "--bulma-input-height", "--bulma-input-shadow", "--bulma-input-placeholder-color", "--bulma-input-disabled-color", "--bulma-input-disabled-background-color", "--bulma-input-disabled-border-color", "--bulma-input-disabled-placeholder-color", "--bulma-input-arrow", "--bulma-input-icon-color", "--bulma-input-icon-hover-color", "--bulma-input-icon-focus-color", "--bulma-input-radius", "--bulma-grid-gap", "--bulma-grid-column-count", "--bulma-grid-column-min", "--bulma-grid-cell-column-span", "--bulma-footer-background-color", "--bulma-footer-color", "--bulma-footer-padding", "--bulma-hero-body-padding", "--bulma-hero-body-padding-tablet", "--bulma-hero-body-padding-small", "--bulma-hero-body-padding-medium", "--bulma-hero-body-padding-large", "--bulma-media-border-color", "--bulma-media-border-size", "--bulma-media-spacing", "--bulma-media-spacing-large", "--bulma-media-content-spacing", "--bulma-media-level-1-spacing", "--bulma-media-level-1-content-spacing", "--bulma-media-level-2-spacing", "--bulma-section-padding", "--bulma-section-padding-desktop", "--bulma-section-padding-medium", "--bulma-section-padding-large"];
6
6
  /** A single Bulma CSS variable key from the `bulmaCssVars` tuple. */
7
7
  type BulmaVarKey = (typeof bulmaCssVars)[number];
8
- /** A partial record mapping Bulma CSS variable keys to string values. */
9
- type BulmaVars = Partial<Record<BulmaVarKey, string>>;
8
+ /**
9
+ * The keys Bulma gives a value of its own in each scheme: the lightness of a
10
+ * color's text on the page, which has to read on a light page and on a dark
11
+ * one.
12
+ */
13
+ type BulmaOnSchemeKey = Extract<BulmaVarKey, `--bulma-${string}-on-scheme-l`>;
14
+ /**
15
+ * One value for Bulma's light scheme and one for its dark scheme. A scheme
16
+ * left out keeps the stylesheet's own value.
17
+ */
18
+ interface BulmaSchemeValues {
19
+ /** The value in the light scheme. */
20
+ light?: string;
21
+ /** The value in the dark scheme. */
22
+ dark?: string;
23
+ }
24
+ /**
25
+ * A partial record mapping Bulma CSS variable keys to string values. The
26
+ * on-scheme keys also take one value per scheme.
27
+ */
28
+ type BulmaVars = Partial<Record<Exclude<BulmaVarKey, BulmaOnSchemeKey>, string>> & Partial<Record<BulmaOnSchemeKey, string | BulmaSchemeValues>>;
10
29
  /**
11
30
  * Props for the Theme component.
12
31
  */
@@ -30,8 +49,11 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
30
49
  * Several root Themes can be mounted at once, and each contributes its own
31
50
  * variables. Where two set the same one, the inner or later-mounted Theme
32
51
  * wins, as with nested scoped Themes, and unmounting a Theme removes only
33
- * what it contributed. The variables are written from an effect, so a
34
- * server render does not include them.
52
+ * what it contributed.
53
+ *
54
+ * The variables are written before the browser paints. A server render
55
+ * has none of them, so put what a server-rendered page needs at first
56
+ * paint in CSS.
35
57
  */
36
58
  isRoot?: boolean;
37
59
  /**
@@ -47,11 +69,10 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
47
69
  * If the prefix cannot form an attribute name, `'light'` and `'dark'`
48
70
  * write only `data-theme` and warn in development.
49
71
  *
50
- * The attribute is written from an effect, so a page rendered in the
51
- * browser paints its first frame with whatever `<html>` already has, the
52
- * visitor's OS scheme when that is nothing. Put a scheme that never changes
53
- * on `<html>` in `index.html` instead, and write a saved choice from an
54
- * inline `<head>` script, starting `colorMode` from what it wrote.
72
+ * It is written before the browser paints, but the page can paint before
73
+ * the app's script runs, in the scheme `<html>` already has. Put a fixed
74
+ * scheme on `<html>` in `index.html`, and write a saved choice from an
75
+ * inline `<head>` script, starting `colorMode` from it.
55
76
  */
56
77
  colorMode?: 'light' | 'dark' | 'system';
57
78
  /**
@@ -73,6 +94,12 @@ export interface ThemeProps extends Omit<BulmaClassesProps, 'color' | 'backgroun
73
94
  * Some global variables Bulma also declares again on one component, which
74
95
  * keeps its own value while everything else takes the Theme's. Those do not
75
96
  * warn, because the value still reaches the rest of the page.
97
+ *
98
+ * A color's trio leaves its label (`--bulma-<color>-invert-l`) and text
99
+ * (`--bulma-<color>-on-scheme-l`) lightnesses where the stylesheet's build
100
+ * put them, so a new color sets them too. On an `isRoot` Theme the
101
+ * on-scheme keys also take `{ light, dark }`, one value per scheme, which a
102
+ * scoped Theme skips with a warning in development.
76
103
  */
77
104
  bulmaVars?: BulmaVars;
78
105
  /**
package/dist/types-cjs/helpers/useVisibilityClasses.d.ts CHANGED
@@ -3,7 +3,11 @@ import { validVisibilities, BulmaViewportProps, BulmaDisplayProps } from './bulm
3
3
  * Props for applying Bulma visibility and display helper classes.
4
4
  */
5
5
  export interface BulmaVisibilityProps extends BulmaViewportProps, BulmaDisplayProps {
6
- /** Visibility (e.g., 'hidden', 'sr-only'). */
6
+ /**
7
+ * Hides the element. `'hidden'` takes it off the page, `'invisible'` hides
8
+ * it and keeps its space, and `'sr-only'` (screen reader only) hides it
9
+ * visually while screen readers still read it.
10
+ */
7
11
  visibility?: (typeof validVisibilities)[number];
8
12
  /** Visibility for mobile viewport (up to 768px). */
9
13
  visibilityMobile?: (typeof validVisibilities)[number];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@allxsmith/bestax-bulma",
3
- "version": "5.45.1",
3
+ "version": "5.46.0",
4
4
  "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.esm.js",