create-bestax 4.2.11 → 4.2.13

package/templates/skills/bestax-migrate/references/react-bulma-components/unmappables.md

@@ -59,12 +59,22 @@ const [choice, setChoice] = useState('a');
 </Dropdown>;
 ```
 
-## `Pagination` extras (`delta`, `next`/`previous`, `showFirstLast`, `showPrevNext`, `autoHide`)
-
-bestax `Pagination` renders from `total`/`current`/`onPageChange` with its own windowing.
-Drop `delta` (built-in), render conditionally instead of `autoHide`
-(`{total > 1 && <Pagination …/>}`), and compose `Pagination.Previous`/`Pagination.Next`
-manually if custom labels are essential.
+## `Pagination` extras (`showFirstLast`, `showPrevNext`, `autoHide`)
+
+bestax `Pagination` renders from `total`/`current`/`onPageChange` when it has no children:
+Previous, Next and the page links, with an ellipsis for each run it skips. The codemod writes
+`delta` as `siblingCount` (the pages on each side of the current one) and `next`/`previous` as
+`nextLabel`/`previousLabel`. It always shows Previous and Next, and the first and last pages
+(`boundaryCount` of each, 1 by default), so drop `showPrevNext` and `showFirstLast`, or compose
+the parts (`Pagination.Previous`, `Pagination.List`, `Pagination.Link`) by hand for a
+different layout. Render conditionally instead of `autoHide` (`{total > 1 && <Pagination …/>}`).
+
+Two of RBC's defaults differ, and a Pagination that doesn't write them gets no TODO: RBC hides
+itself at a `total` of 1 (`autoHide` is on by default), and shows no first and last pages unless
+`showFirstLast` is set. bestax renders a one-page Pagination with both ends disabled, and shows
+the first and last pages, so check pagination that relied on either. RBC's `delta={0}` renders
+no page links at all, while `siblingCount={0}` still shows the current, first and last pages, so
+that one value gets a `prop:delta` TODO rather than converting.
 
 ## `Modal` (`closeOnBlur`, `showClose`)
 
@@ -130,7 +140,7 @@ bestax `Button` colors are the semantic set + `text`/`ghost`. For shades use
 
 bestax components don't take `domRef`, but many forward a plain `ref` — the form controls,
 plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Link`,
-`LinkButton`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
+`LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`,
 `Navbar.Item`, `Navbar.Link`, `Sidebar` and `Toast`. On those, rename `domRef` to
 `ref` and it works; do not restructure the markup. "The form controls" means the inputs
 themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers
@@ -201,6 +211,23 @@ these either. `Level.Item` is not narrower: it declares the anchor's whole attri
 every `as` and forwards it only on the `<a>`, so all of these survive at `as="a"` and none of
 them reaches a `<p>` or a `<div>`.
 
+## `prop:type` — a `<button>` item that no longer submits its form
+
+`Navbar.Item`, `Navbar.Link`, `Menu.Item` and `Dropdown.Item` write `type="button"` on the
+`<button>` an `as` makes them render, whenever the element sets no `type` or one HTML doesn't
+define. A plain `<button>` with neither submits the form around it, so an item you rendered as a
+button with `renderAs="button"` stops submitting once migrated. The codemod can't tell whether one sits
+in a form, so each gets a TODO:
+
+```jsx
+<Navbar.Item renderAs="button">Search</Navbar.Item>
+<Navbar.Item as="button">Search</Navbar.Item>
+```
+
+Add `type="submit"` if it should still submit, or `type="button"` to say it shouldn't, then
+delete the comment. An item whose `type` is written out as `button`, `submit` or `reset`, or
+comes from a spread or an expression, gets no TODO.
+
 ## Helper props dropped from plain-element replacements
 
 Where the codemod produced a plain element (`Form.Label` → `<label>`, `Breadcrumb.Item` →

package/templates/skills/bestax-optimize/SKILL.md

@@ -64,14 +64,15 @@ helper props compile to — components still render, but the props silently do n
 recommending it, grep the app's source for helper props on bestax components:
 
 - spacing: `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`, `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`
+- gap: `gap`, `columnGap`, `rowGap`, `gapless`, on any component, `Grid` included: its gap props render the same helper classes
 - color: `color`, `backgroundColor` (+ `colorShade`/`backgroundColorShade`), `textColor`, `bgColor`
 - typography: `textSize`, `textAlign`, `textTransform`, `textWeight`, `fontFamily`
 - display/visibility: `display`, `visibility` (+ `displayMobile`…`visibilityFullhd` viewport variants)
 - flexbox: `flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`, `alignSelf`, `flexGrow`, `flexShrink`
-- misc: `float`, `overflow`, `overlay`, `interaction`, `cursor`, `radius`, `shadow`, `skeleton`, `clearfix`, `relative`, `fullHeight`
+- misc: `float`, `overflow`, `overflowX`, `overflowY`, `overlay`, `interaction`, `cursor`, `radius`, `shadow`, `skeleton`, `clearfix`, `pos`, `relative`, `fullHeight`, `aspectRatio`
 
 …and for raw Bulma helper classes in `className` strings (`is-*`, `has-*`, `m*-*`, `p*-*`,
-`is-size-*`, `is-hidden*`, `is-flex*`). **Any hit → do not use `no-helpers`**; fall back to
+`is-size-*`, `is-hidden*`, `is-flex*`, `is-gap-*`). **Any hit → do not use `no-helpers`**; fall back to
 `no-dark-mode` or Lever 2. The bestax extras helpers (`is-cursor-*`, sizing) are dropped too.
 
 ## Lever 2 — modular Sass build

package/templates/skills/bestax-optimize/references/modular-build.md

@@ -70,14 +70,15 @@ Every extras partial that exists (from the library's `src/scss/**/_index.scss`
 is **more complete** than the docs page's Option C example, which omits several):
 
 **Components** (`@allxsmith/bestax-bulma/scss/components/<name>`):
-`loading`, `collapse`, `tooltip`, `steps`, `sidebar`, `toast`, `dialog`, `carousel`, `tabs`,
-`reveal`, `avatar`, `avatars`, `badge`
+`loading`, `collapse`, `tooltip`, `popover`, `steps`, `sidebar`, `toast`, `dialog`, `carousel`,
+`tabs`, `reveal`, `avatar`, `avatars`, `badge`
 
 **Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
 `checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `taginput`,
-`picker-popover`, `dateinput`, `timeinput`, `datetimeinput`
+`picker-popover`, `dateinput`, `timeinput`, `datetimeinput`, `daterangeinput`
 
-**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `linkbutton`
+**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `linkbutton`, `loader`,
+`progress`, `skeleton`
 
 **Helpers** (`@allxsmith/bestax-bulma/scss/helpers/<name>`): `cursor`, `sizing`
 
@@ -88,6 +89,19 @@ Notes:
 - Extras `Tabs` **extends** stock Bulma tabs (vertical variant) — an app using `Tabs` needs
   both `bulma/sass/components/tabs` and `@allxsmith/bestax-bulma/scss/components/tabs`.
 - `DateInput`/`TimeInput`/`DateTimeInput` also need `picker-popover`.
+- `DateRangeInput` needs `daterangeinput` for its field and `dateinput` for its calendar, and
+  `picker-popover` too.
+- `Popover.Close` renders a Bulma button, so an app using it needs `bulma/sass/elements/button`
+  next to `scss/components/popover`.
+- `Loader` is stock Bulma styled by `bulma/sass/elements/loader`, and the `isLoading`
+  spinners on `Button`, `Control` and `Select` are Bulma's too. The `loader` extras partial
+  stops all of them under `prefers-reduced-motion: reduce`, so include it next to the Bulma
+  modules in any build that shows one. Its rules are `!important`, so the order of the two
+  `@use` lines does not matter.
+- `Progress` and the skeletons are stock Bulma too (`bulma/sass/elements/progress`,
+  `bulma/sass/base/skeleton`). The `progress` and `skeleton` extras partials stop the
+  indeterminate bar's sweep and the skeleton pulse (`Skeleton`, the `skeleton` prop,
+  `hasSkeleton`) under `prefers-reduced-motion: reduce`, the same way and in either order.
 - Stock-Bulma form controls still need their Bulma module (`bulma/sass/form/…`); the extras
   form partials above style only the bestax-specific behavior.
 - Bulma component modules pull their own internal sub-elements — e.g.
@@ -104,11 +118,17 @@ not `flexbox` — `flexbox` holds only the alignment props. Verified failure mod
 
 ```scss
 @use 'bulma/sass/helpers/spacing'; // m*/p* props
+@use 'bulma/sass/helpers/gap'; // gap/columnGap/rowGap/gapless props, Grid's gap props included
 @use 'bulma/sass/helpers/color'; // color/backgroundColor props, has-text-*/has-background-*
 @use 'bulma/sass/helpers/typography'; // textSize/textAlign/textTransform/textWeight/fontFamily
 @use 'bulma/sass/helpers/visibility'; // display/visibility props incl. display="flex" (is-flex/is-block/is-hidden*)
 @use 'bulma/sass/helpers/flexbox'; // flex* alignment props (justifyContent/alignItems/flexGrow…) — NOT display="flex"
-@use 'bulma/sass/helpers/other'; // overlay/interaction/radius/shadow/clearfix/relative…
+@use 'bulma/sass/helpers/float'; // float/clearfix props
+@use 'bulma/sass/helpers/overflow'; // overflow/overflowX/overflowY props
+@use 'bulma/sass/helpers/position'; // pos/relative/overlay props
+@use 'bulma/sass/helpers/border'; // radius sizes (small/normal/large/rounded)
+@use 'bulma/sass/helpers/aspect-ratio'; // aspectRatio prop
+@use 'bulma/sass/helpers/other'; // interaction, radius="radiusless", shadow="shadowless"
 ```
 
 ## Procedure

package/templates/skills/bestax-theming/SKILL.md

@@ -25,7 +25,8 @@ Choose an override path:
 - **Build-time Sass.** `@use 'bulma/sass' with ($primary: #1e6b99)` when compiling Bulma's Sass.
 
 For **dark mode**, pass `colorMode` to `Theme` (`'light' | 'dark' | 'system'`). It writes Bulma's
-`data-theme` attribute on `<html>`, flipping the light/dark scheme — global, even on a scoped
+`data-theme` attribute on `<html>` (plus `data-<prefix>theme` inside a `ConfigProvider` with a
+`classPrefix`, which the prefixed flavors read), flipping the light/dark scheme — global, even on a scoped
 `Theme`; `'system'` follows the OS `prefers-color-scheme`. Drive it from state on the app-root
 `Theme`: `<Theme isRoot colorMode={mode}>`.
 
@@ -109,13 +110,13 @@ Nest `Theme` and `ConfigProvider` together at the root (order doesn't matter).
 ## Examples
 
 - `examples/theme-config.tsx` — a custom brand theme at the app root, plus a scoped override.
-- `examples/dark-mode.tsx` — a light/dark toggle using Bulma's `data-theme`.
+- `examples/dark-mode.tsx` — a light/dark toggle using Bulma's `data-theme` (plus `data-<prefix>theme` inside a `ConfigProvider` with a `classPrefix`).
 
 ## Checklist
 
 - [ ] Recolor brand colors via the HSL trio (`*-h` / `*-s` / `*-l`), not by hard-coding hex on components.
 - [ ] Apply a global theme once with `<Theme isRoot>` (or `:root`); use scoped `<Theme>` for one-off sections.
 - [ ] Set non-color tokens (radius, fonts, sizes) through `bulmaVars` or `:root`; a custom `--bulma-family-*` needs its font actually loaded (`index.html` `<link>` or an `@fontsource` import).
-- [ ] Implement dark mode with `data-theme` on `<html>`; do not expect a shipped dark-mode component.
+- [ ] Implement dark mode with `data-theme` on `<html>` (plus `data-<prefix>theme` inside a `ConfigProvider` with a `classPrefix`, which the prefixed flavors read); do not expect a shipped dark-mode component.
 - [ ] Pass `color`/`textColor`/`bgColor` (not custom CSS) to color individual components.
 - [ ] Set the icon library once with `<ConfigProvider iconLibrary="…">` at the root, not `library` on every `<Icon>`.

package/templates/skills/bestax-theming/examples/dark-mode.tsx

@@ -1,9 +1,10 @@
 // Dark mode for an app built on @allxsmith/bestax-bulma.
 //
 // The Theme component drives the light/dark scheme: pass `colorMode` and it
-// writes Bulma's `data-theme` attribute on <html>. This is global (even on a
-// scoped Theme); `'system'` removes the attribute so Bulma follows the OS
-// `prefers-color-scheme`. Wrap the app once at the root.
+// writes Bulma's `data-theme` attribute on <html>, plus `data-<prefix>theme`
+// under a ConfigProvider `classPrefix`, which the prefixed flavors read. This
+// is global (even on a scoped Theme); `'system'` removes the attributes so
+// Bulma follows the OS `prefers-color-scheme`. Wrap the app once at the root.
 import React, { useState } from 'react';
 import {
   Theme,

package/templates/skills/bestax-theming/references/css-variables.md

@@ -145,10 +145,11 @@ lone class or the `style` prop cannot outrank:
   styles with a selector that matches or exceeds the compound:
   `.button.link-button { --bulma-link-button-ghost-color: … }`.
 - **Constituent elements** — Tooltip's variables (all but `--bulma-tooltip-dashed-color`)
-  are declared on `.tooltip-content`, and Sidebar's `--bulma-sidebar-overlay-background` on
-  `.sidebar-background`. Values set via `className` or `style` land on the component root and
-  are only inherited by the constituent, so they lose to its own declaration — target the
-  declaring element in your CSS: `.tooltip-content { --bulma-tooltip-background: … }`.
+  are declared on `.tooltip-content`, Popover's on its panel, `.popover-content`, and Sidebar's
+  `--bulma-sidebar-overlay-background` on `.sidebar-background`. Values set via `className` or
+  `style` land on the component root and are only inherited by the constituent, so they lose to
+  its own declaration — target the declaring element in your CSS:
+  `.tooltip-content { --bulma-tooltip-background: … }`.
 
 ### Avatar / Avatars / Badge
 
@@ -225,15 +226,33 @@ own-selector override rule applies.
 `--bulma-collapse-margin-bottom`, `--bulma-collapse-radius`,
 `--bulma-collapse-trigger-icon-margin`, `--bulma-collapse-trigger-icon-size`
 
+`--bulma-collapse-group-gap` is the exception to the own-selector rule above. It spaces the
+items of a `Collapses` group, which reads it with a 0.5rem fallback and declares no value itself,
+so set it on the group or on any ancestor, `:root` included. (`Theme`'s `bulmaVars` does not
+list it, so set it in your CSS or through a `style` prop.)
+
 ### DateInput
 
 `--bulma-dateinput-cell-color`, `--bulma-dateinput-cell-disabled-color`,
 `--bulma-dateinput-cell-hover-bg`, `--bulma-dateinput-cell-other-month-color`,
-`--bulma-dateinput-cell-radius`, `--bulma-dateinput-cell-selected-bg`,
+`--bulma-dateinput-cell-radius`, `--bulma-dateinput-cell-range-bg`,
+`--bulma-dateinput-cell-range-preview-bg`, `--bulma-dateinput-cell-selected-bg`,
 `--bulma-dateinput-cell-selected-color`, `--bulma-dateinput-cell-size`,
 `--bulma-dateinput-cell-today-color`, `--bulma-dateinput-day-name-color`,
-`--bulma-dateinput-day-name-size`, `--bulma-dateinput-header-padding`,
-`--bulma-dateinput-min-width`, `--bulma-dateinput-nav-button-size`
+`--bulma-dateinput-day-name-size`, `--bulma-dateinput-focus-ring-color`,
+`--bulma-dateinput-header-padding`, `--bulma-dateinput-min-width`,
+`--bulma-dateinput-nav-button-size`
+
+The two `range` variables paint a range calendar (`DateRangeInput`): the band between a range's
+ends, and the fainter band shown while the end is still being picked. Both are mixed from
+`--bulma-dateinput-cell-selected-bg`, so `color` and an override of the selected fill re-tint
+them too.
+
+### DateRangeInput
+
+The field around the two inputs. Its calendar is the `DateInput` one, with the variables above.
+
+`--bulma-daterangeinput-gap`, `--bulma-daterangeinput-separator-color`
 
 ### DateTimeInput
 
@@ -281,7 +300,7 @@ Declared on the compound `.button.link-button` — see the compound-selector exc
 `--bulma-numberinput-stepper-button-hover-bg`, `--bulma-numberinput-stepper-button-hover-color`,
 `--bulma-numberinput-stepper-width`
 
-### Picker popover (DateInput / TimeInput / DateTimeInput)
+### Picker popover (DateInput / TimeInput / DateTimeInput / DateRangeInput)
 
 `--bulma-picker-popover-animation-duration`, `--bulma-picker-popover-background`,
 `--bulma-picker-popover-border-color`, `--bulma-picker-popover-offset`,
@@ -290,6 +309,18 @@ Declared on the compound `.button.link-button` — see the compound-selector exc
 `--bulma-picker-trigger-color`, `--bulma-picker-trigger-hover-color`,
 `--bulma-picker-trigger-width`
 
+### Popover
+
+All are declared on the panel, `.popover-content`, so a panel rendered with `appendToBody` keeps
+them. See the constituent-element exception above.
+
+`--bulma-popover-animation-duration`, `--bulma-popover-background`,
+`--bulma-popover-body-padding`, `--bulma-popover-border-color`, `--bulma-popover-color`,
+`--bulma-popover-footer-gap`, `--bulma-popover-footer-padding`, `--bulma-popover-header-color`,
+`--bulma-popover-header-padding`, `--bulma-popover-header-weight`, `--bulma-popover-max-width`,
+`--bulma-popover-min-width`, `--bulma-popover-offset`, `--bulma-popover-radius`,
+`--bulma-popover-shadow`, `--bulma-popover-z-index`
+
 ### Radio
 
 `--bulma-radio-active-color`, `--bulma-radio-background`, `--bulma-radio-border-color`,
@@ -385,6 +416,9 @@ Declared on the compound `.button.link-button` — see the compound-selector exc
 `--bulma-timeinput-wheel-radius`, `--bulma-timeinput-wheel-selected-bg`,
 `--bulma-timeinput-wheel-selected-color`, `--bulma-timeinput-wheel-width`
 
+`--bulma-timeinput-wheel-item-height` is registered but has no effect: the component sets each
+wheel item's height inline.
+
 ### Toast
 
 `--bulma-toast-action-hover-opacity`, `--bulma-toast-action-radius`,
@@ -423,6 +457,13 @@ Under the hood this is Bulma 1.x's own mechanism — `[data-theme="dark"]` / `.t
 (plus the `prefers-color-scheme` media query). Setting the attribute by hand still works
 (`document.documentElement.setAttribute('data-theme', 'dark')`); `colorMode` just does it for you.
 
+A prefixed flavor names the attribute after its prefix: `bestax-prefixed.css` and
+`bestax-no-helpers-prefixed.css` read `data-bestax-theme` (and `.bestax-theme-dark`), never
+`data-theme`. Under `<ConfigProvider classPrefix="bestax-">`, `colorMode` writes both attributes,
+so it works with those flavors. Setting it by hand there means setting `data-bestax-theme`, and
+custom dark-mode CSS keyed off `[data-theme='dark']` still matches, because `colorMode` writes
+`data-theme` too.
+
 Under dark mode Bulma flips the scheme/text/border/background lightness variables (e.g.
 `--bulma-scheme-main-l` 100% → 9%, `--bulma-text-l` 29% → 71%). Your brand color overrides from
 `Theme isRoot` or `:root` still apply on top, because they set the hue/saturation/lightness

package/templates/skills/bestax-theming/references/themeable-components.md

@@ -61,10 +61,12 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Autocomplete`     | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | the 6 only                                                                                                                                          |
 | `Checkbox`         | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | the 6 only                                                                                                                                          |
 | `DateInput`        | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
+| `DateRangeInput`   | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`; `color` also fills the calendar range                                                                                             |
 | `DateTimeInput`    | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
 | `File`             | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isBoxed`, `isFullwidth`                                                                                                                       |
 | `Hero`             | every `validColors` member + `inherit`/`current` (the `-bis`/`-ter` shades, the greys, `inherit` and `current` deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large \| fullheight \| fullheight-with-navbar`        | section background                                                                                                                                  |
 | `LinkButton`       | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black`                                                                              | —                                                                         | button-styled link; emits `link-button-<color>` — **no `isLight`/`isOutlined`/`isInverted`**                                                        |
+| `Loader`           | — (no color props: the ring is drawn in `--bulma-border`)                                                                                                                 | — (the ring is `1em`; size it with `textSize`)                            | for a colored spinner over a region, use `Loading`                                                                                                  |
 | `Loading`          | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | spinner color; default light grey                                                                                                                   |
 | `Navbar`           | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | —                                                                                                                                                   |
 | `Numberinput`      | `primary \| link \| info \| success \| warning \| danger \| light \| dark`                                                                                                | `small \| medium \| large`                                                | also `inputColor` (the 6) for the inner input                                                                                                       |
@@ -79,7 +81,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Switch`           | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | also `isRounded`, `isThin`, `isOutlined`                                                                                                            |
 | `Tabs`             | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | **entire `color` prop deprecated** (no CSS ships; dev-warn; removal next major)                                                                     |
 | `Taginput`         | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `tagColor` (the 6 + `dark \| light`) for the tags                                                                                              |
-| `TextArea`         | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isRounded`, `isStatic`                                                                                                                        |
+| `TextArea`         | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | —                                                                                                                                                   |
 | `TimeInput`        | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | —                                                                                                                                                   |
 | `Tooltip`          | `primary \| link \| info \| success \| warning \| danger \| dark \| light`                                                                                                | `small \| medium \| large`                                                | —                                                                                                                                                   |
 | `Tr` / `Td` / `Th` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | cell background; cells take `textAlign`/`textWeight`/`textSize` directly                                                                            |
@@ -90,15 +92,15 @@ entries follow the scheme variables.
 
 ## Typography & misc helper props (on most components)
 
-| Prop                                         | Accepts                                                   | Class                  |
-| -------------------------------------------- | --------------------------------------------------------- | ---------------------- |
-| `textSize`                                   | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`                         | `is-size-<n>`          |
-| `textWeight`                                 | `light \| normal \| medium \| semibold \| bold`           | `has-text-weight-<w>`  |
-| `fontFamily`                                 | `sans-serif \| monospace \| primary \| secondary \| code` | `is-family-<f>`        |
-| `textAlign`                                  | `centered \| justified \| left \| right`                  | `has-text-<a>`         |
-| `radius`                                     | `radiusless`                                              | `is-radiusless`        |
-| `shadow`                                     | `shadowless`                                              | `is-shadowless`        |
-| `m` / `p` (+ `mt/mr/mb/ml/mx/my`, `pt/…/py`) | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| auto`                 | `m-<n>` / `p-<n>` etc. |
+| Prop                                         | Accepts                                                   | Class                             |
+| -------------------------------------------- | --------------------------------------------------------- | --------------------------------- |
+| `textSize`                                   | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7`                         | `is-size-<n>`                     |
+| `textWeight`                                 | `light \| normal \| medium \| semibold \| bold`           | `has-text-weight-<w>`             |
+| `fontFamily`                                 | `sans-serif \| monospace \| primary \| secondary \| code` | `is-family-<f>`                   |
+| `textAlign`                                  | `centered \| justified \| left \| right`                  | `has-text-<a>`                    |
+| `radius`                                     | `radiusless \| small \| normal \| large \| rounded`       | `is-radiusless`, `has-radius-<r>` |
+| `shadow`                                     | `shadowless`                                              | `is-shadowless`                   |
+| `m` / `p` (+ `mt/mr/mb/ml/mx/my`, `pt/…/py`) | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| auto`                 | `m-<n>` / `p-<n>` etc.            |
 
 These map to Bulma utility classes that read the same `--bulma-*` variables, so a custom theme
 flows through them automatically.