create-bestax 4.2.12 → 4.2.13

package/templates/skills/bestax-form/references/api.md

@@ -40,28 +40,29 @@ Wraps a single input; adds icons and loading.
 (`label`, `labelSize`, `labelProps`, `horizontal`), Control-level (`iconLeftName`,
 `iconRightName`, `iconLeftSize`, `iconRightSize`, `hasIconsLeft`, `hasIconsRight`, `isLoading`,
 `isExpanded`, `controlSize`), message (`message`, `messageColor`), and container class overrides
-(`fieldClassName`, `controlClassName`).
+(`fieldClassName`, `controlClassName`). Inside your own `Control` it renders no `Control` of its
+own, so the Control-level props and `controlClassName` do nothing there and warn in development;
+set them on that `Control` instead.
 
 `InputBase` props:
 
-| Prop                                  | Type                                                                  | Notes                          |
-| ------------------------------------- | --------------------------------------------------------------------- | ------------------------------ |
-| `color`                               | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | Visual state.                  |
-| `size`                                | `'small' \| 'medium' \| 'large'`                                      | Size.                          |
-| `isRounded`                           | `boolean`                                                             | Pill shape.                    |
-| `isStatic`                            | `boolean`                                                             | Static, read-only-styled text. |
-| `isLoading`                           | `boolean`                                                             | Loading state.                 |
-| `value` / `defaultValue` / `onChange` | —                                                                     | Standard React input.          |
-| `disabled` / `readOnly`               | `boolean`                                                             | Native states.                 |
+| Prop                                  | Type                                                                  | Notes                                              |
+| ------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------- |
+| `color`                               | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | Visual state.                                      |
+| `size`                                | `'small' \| 'medium' \| 'large'`                                      | Size.                                              |
+| `isRounded`                           | `boolean`                                                             | Pill shape.                                        |
+| `isStatic`                            | `boolean`                                                             | Static-text styling; add `readOnly` to stop edits. |
+| `isLoading`                           | `boolean`                                                             | No spinner here; set `isLoading` on the `Control`. |
+| `value` / `defaultValue` / `onChange` | —                                                                     | Standard React input.                              |
+| `disabled` / `readOnly`               | `boolean`                                                             | Native states.                                     |
 
 `messageColor` accepts `'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'`.
 
 ## Select / SelectBase, TextArea / TextAreaBase
 
-Same convenience/raw split as Input. `Select` supports `isLoading` (on the control), `color`,
-`size`, `isRounded`, `isFullwidth`, `multiple` +
-`multipleSize`, plus the Field/Control/message props. `TextArea` adds `rows` and
-`hasFixedSize`.
+Same convenience/raw split as Input. `Select` supports `isLoading` (a spinner in place of the
+chevron), `color`, `size`, `isRounded`, `isFullwidth`, `multiple` + `multipleSize`, plus the
+Field/Control/message props. `TextArea` adds `rows` and `hasFixedSize`.
 
 ## Checkbox / Checkboxes, Radio / Radios
 
@@ -81,18 +82,77 @@ File input with `label`, `message`, color/size, and icon support.
 
 ## Advanced inputs
 
-| Component      | Key props                                                                                                                                                               |
-| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Autocomplete` | `data` (`string[]` or item objects), `value`, `onInput(value)` for typing, `onSelect(item)` for picks, `clearable`, `openOnFocus`, `loading`.                           |
-| `Slider`       | `min`, `max`, `step`, single or dual thumb (`value` number or `[number, number]`), `tooltip` (`'auto' \| 'always' \| 'hidden'`), vertical orientation, `color`, `size`. |
-| `Numberinput`  | `value`/`onChange`, `min`, `max`, `step`, increment/decrement buttons, stepper variant, `color`, `size`.                                                                |
-| `Rate`         | `value`/`onChange`, `max`, `precision` (1 / 0.5 / 0.25), `customIcon` or `iconName`, `showScore`/`showText`/`texts`, `disabled`.                                        |
-| `Taginput`     | `value` (array)/`onChange`, autocomplete suggestions, configurable confirm keys, closable tags, `color`, `size`.                                                        |
+| Component      | Key props                                                                                                                                                                                                                                                 |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Autocomplete` | `data` (`string[]` or item objects), `value`, `onInput(value)` for typing, `onSelect(item)` for picks, `clearable` (the clear button hides while `loading`, or a loading `Control` around it, puts a spinner at the same edge), `openOnFocus`, `loading`. |
+| `Slider`       | `min`, `max`, `step`, single or dual thumb (`value` number or `[number, number]`), `tooltip` (`'auto' \| 'always' \| 'hidden'`), vertical orientation, `color`, `size`.                                                                                   |
+| `Numberinput`  | `value`/`onChange`, `min`, `max`, `step`, increment/decrement buttons, stepper variant, `color`, `size`, `isLoading` (set it here, not on a `Control` around it, whose spinner covers the right-hand button).                                             |
+| `Rate`         | `value`/`onChange`, `max`, `precision` (1 / 0.5 / 0.25), `customIcon` or `iconName`, `showScore`/`showText`/`texts`, `disabled`.                                                                                                                          |
+| `Taginput`     | `value` (array)/`onChange`, autocomplete suggestions, configurable confirm keys, closable tags, `color`, `size`.                                                                                                                                          |
 
 ## Date / time inputs
 
-`DateInput`, `TimeInput`, `DateTimeInput` (convenience) and their `*Base` variants. Field/Control
-composition like the other convenience inputs, with picker UIs (native with custom fallback).
+`DateInput`, `TimeInput`, `DateTimeInput`, `DateRangeInput` (convenience) and their `*Base`
+variants. Field/Control composition like the other convenience inputs, with picker UIs (native
+with custom fallback). An `inline` picker renders no `Control` anywhere, so leave its
+Control-level props out: they do nothing there and warn in development.
+
+Every one of them has a launcher button at the right edge (`triggerIcon`) that gives way to the loading
+spinner of the `Control` they sit in, which shares that edge. A convenience input sits in the
+`Control` it renders for its own `isLoading`, unless it is inside your own `Control`; a `*Base`
+variant only ever sits in yours. Inside your own `Control`, put `isLoading` on that `Control`: the
+convenience input renders no `Control` of its own there, so its own `isLoading` draws nothing and
+warns in development.
+Passing `triggerIcon` explicitly overrides this.
+
+```tsx
+<Field label="Date">
+  <Control isLoading>
+    <DateInput />
+  </Control>
+</Field>
+```
+
+For a value that is a month or a year (card expiry, billing period, graduation year), use
+`DateInput` with `granularity="month"` or `granularity="year"` rather than building a select or a
+separate picker. The value is still a `Date`: the first day of the month, or 1 January of the
+year. The default `format` becomes `'YYYY-MM'` or `'YYYY'`, and `min` / `max` /
+`shouldDisableDate` judge whole periods (a month is selectable while any day in it is).
+
+```tsx
+<DateInput
+  label="Card expiry"
+  granularity="month"
+  format="MM/YY"
+  min={new Date()}
+  value={expiry}
+  onChange={setExpiry}
+/>
+```
+
+For a start and an end (a stay, a report period, a leave request), use `DateRangeInput`
+rather than two `DateInput`s with hand-wired `min`/`max`. Its value is a `[start, end]` pair
+of `Date | null`, kept in order. The calendar picks the start, then the end, and reports
+only finished ranges; typing reports each end as it changes, so handle `[start, null]`.
+`min`, `max`, `shouldDisableDate` and `unselectableDates` apply to both ends, and a range
+can't include a disabled day unless you pass `allowDisabledInRange`. With a `name`, two
+hidden inputs submit `name[start]` and `name[end]` as `YYYY-MM-DD` (`startName` / `endName`
+rename them). `label` names the whole field as a group; the two inputs are named by
+`labels.rangeStart` / `labels.rangeEnd`.
+
+```tsx
+const [stay, setStay] = useState<DateRangeValue>([null, null]);
+
+<DateRangeInput
+  label="Stay"
+  name="stay"
+  min={new Date()}
+  value={stay}
+  onChange={setStay}
+  color={stay[0] && !stay[1] ? 'danger' : undefined}
+  message={stay[0] && !stay[1] ? 'Pick a check-out date.' : undefined}
+/>;
+```
 
 ## Validation-related props (no library)
 

package/templates/skills/bestax-form/references/patterns.md

@@ -149,6 +149,25 @@ Notes:
 </Field>
 ```
 
+Recipes built on addons, each written out in full in the docs:
+
+- **Password reveal** ([docs](https://bestax.io/docs/api/form/input#password-reveal)): the
+  toggle is a `Button` in its own addon `Control`, never `iconRight`. Bulma gives control icons
+  `pointer-events: none`, so a click on one lands on the input. The button takes
+  `type="button"`, a fixed `aria-label` ("Show password") and `aria-pressed`, and switches the
+  input's `type` between `password` and `text`.
+- **Copy button** ([docs](https://bestax.io/docs/api/form/input#copy-button)): a read-only input
+  and a `Button` calling `navigator.clipboard.writeText`. The clipboard is missing outside secure
+  contexts and the write can be refused, so catch the failure, select the text, and say so in a
+  `role="alert"` region. Confirm success in a `role="status"` region. Mount both regions empty,
+  before their text arrives.
+- **Split button** ([docs](https://bestax.io/docs/api/components/dropdown#split-button)): a
+  `Button` and a `Dropdown` in `Field hasAddons`, one `Control` each. `Buttons hasAddons` does
+  not join the Dropdown's trigger. Keep the default color, since the trigger takes no `color`.
+- To label an addon row, put the label on an outer `Field` with `labelProps={{ htmlFor }}` and a
+  matching `id` on the input. A label inside the `hasAddons` field sits in the row beside the
+  controls.
+
 ## Horizontal field with explicit label/body
 
 ```tsx

package/templates/skills/bestax-layout-scaffold/SKILL.md

@@ -46,10 +46,23 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
 - Rely on Bulma's responsive defaults: `Columns` sit side by side on tablet and up and stack on
   mobile. Add responsive `size*` props only to tune the breakpoints.
 - Interactive extras don't share a state API — never transfer one by analogy:
-  `Collapse trigger={node} open/defaultOpen onOpen/onClose`, `Tabs value={i}/onChange`
+  `Collapse trigger={node} open/defaultOpen onOpenChange` (`onOpenChange(open)` reports every
+  trigger; `onOpen/onClose` fire only when the Collapse holds its own state), an accordion is
+  `Collapses value/defaultValue/onChange` around plain `Collapse` children indexed from 0 by
+  position (`number | null`, or `number[]` with `multiple`; hide an item with
+  `visibility="hidden"`, never `{cond && …}`, or the open state shifts to its neighbour) rather
+  than hand-rolled open-index state,
+  `Tabs value={i}/onChange`
   (each `Tabs.Tab`/`Tabs.Content.Item` requires `index={i}`, and `Tabs.Content` must be a
   **child of `<Tabs>`** — the active-tab context lives on it; a sibling panel never
-  switches), `Dropdown active/onActiveChange`,
+  switches. The arrow keys, Home/End, Enter/Space, the single tab stop and the
+  `aria-controls`/`aria-labelledby` links come built in, so add no `onKeyDown` or ARIA
+  of your own; `onChange` fires when a tab is activated, never on
+  arrow-key focus), `Dropdown active/onActiveChange`,
+  `Popover trigger={<Button>…</Button>} open/defaultOpen onOpenChange` (`trigger` is one
+  element, not a node: Popover clones it to add the click and ARIA, so never wrap it in a
+  clickable of your own; build the panel from `Popover.Header`/`Body`/`Footer`/`Close`, and a
+  panel without a `Popover.Header` needs `ariaLabel`),
   `Steps value={i}/onStepClick items={[{label, icon?}]}` (child form is `Steps.Step`, not
   `Steps.Item`). `Reveal cascade` staggers only its **direct children** — to stagger a grid,
   put `<Reveal delay={i * 80}>` inside each `Cell`, not around the container.
@@ -121,7 +134,7 @@ every miss shipped the "not this" column instead.
 
 | You need                                                    | Use                                                                                                                                                             | Not this                                                                                                             |
 | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| A brief confirmation after an action, self-dismissing       | `Toast` — mount `<ToastContainer position="top-right" />` once at the app root, then `toast.success('Saved')` (also `.danger`/`.warning`/`.info`) from anywhere | `Notification`/`Message` — static page elements you have to place, position and dismiss yourself                     |
+| A brief confirmation after an action, self-dismissing       | `Toast` — mount `<ToastContainer position="top-right" />` once at the app root, then `toast.success('Saved')` (also `.danger`/`.warning`/`.info`) from anywhere | `Notification`/`Message`                                                                                             |
 | A confirm or alert the user must answer before anything     | `Dialog` — mount `<DialogContainer />` at the root, then `if (await dialog.confirm({ title, message })) …`                                                      | `Modal` — an empty shell; the title, message, button row and confirm/cancel wiring are all yours to rebuild          |
 | A control that reads as text or a link but _does_ something | `LinkButton` (`variant="text" \| "ghost" \| "underline"`, optional `color`)                                                                                     | `<a href="#">`/`<div onClick>` (no keyboard or screen-reader support) or `Button color="text"` (still button-shaped) |
 
@@ -153,7 +166,7 @@ background comes from the semantic `color` prop, not `bgColor`.
 | `display: 'flex'` + flex properties      | same-named props: `display="flex"`, `flexDirection`, `justifyContent`, `alignItems`, `flexWrap`                                                                |
 | `height: '100%'` on a flex child         | `flexGrow="1"`                                                                                                                                                 |
 | `display: 'none'`                        | `visibility="hidden"`, or responsive `display*` props (`displayMobile`, `displayTablet`, …)                                                                    |
-| `gap: …` in a flex layout                | no `gap` helper exists — space children with `m*` margins; `Grid` and `Columns` take a `gap` prop, so prefer those there                                       |
+| `gap: '1rem'` (flex or grid)             | `gap="2"`, or one axis: `columnGap`, `rowGap`; gap scale: `1`=0.5rem, `2`=1rem, `4`=2rem, half steps (`"1.5"`)                                                 |
 
 No helper matches (e.g. `maxWidth`, a one-off gradient)? Add a named class to the project
 stylesheet (`src/App.css` in a scaffolded app) and pass it via `className` — still never

package/templates/skills/bestax-layout-scaffold/references/layout-components.md

@@ -97,15 +97,15 @@ The responsive grid. `Columns` is the row; `Column` is a cell (also reachable as
 
 **Columns**
 
-| Prop                                                                             | Type                                                     |
-| -------------------------------------------------------------------------------- | -------------------------------------------------------- |
-| `isMultiline`                                                                    | `boolean` (wrap cells onto new rows)                     |
-| `isCentered`                                                                     | `boolean` (center the row)                               |
-| `isVCentered`                                                                    | `boolean` (vertical centering — capital V)               |
-| `isGapless`                                                                      | `boolean`                                                |
-| `isMobile`                                                                       | `boolean` (stay side-by-side on mobile)                  |
-| `isDesktop`                                                                      | `boolean`                                                |
-| `gap` / `gapMobile` / `gapTablet` / `gapDesktop` / `gapWidescreen` / `gapFullhd` | `0`–`8` (number or string, same scale as `Grid`'s `gap`) |
+| Prop                                                                             | Type                                                       |
+| -------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| `isMultiline`                                                                    | `boolean` (wrap cells onto new rows)                       |
+| `isCentered`                                                                     | `boolean` (center the row)                                 |
+| `isVCentered`                                                                    | `boolean` (vertical centering — capital V)                 |
+| `isGapless`                                                                      | `boolean`                                                  |
+| `isMobile`                                                                       | `boolean` (stay side-by-side on mobile)                    |
+| `isDesktop`                                                                      | `boolean`                                                  |
+| `gap` / `gapMobile` / `gapTablet` / `gapDesktop` / `gapWidescreen` / `gapFullhd` | `0`–`8` whole steps (number or string), the columns gutter |
 
 **Column**
 
@@ -182,12 +182,12 @@ per-breakpoint column _sizes_ (a 2/3 + 1/3 split, different counts per breakpoin
 
 **Grid**
 
-| Prop                                                                                                                   | Type                                                         |
-| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| `gap` / `columnGap` / `rowGap`                                                                                         | `0`–`8` (number or string, same scale as Columns' `gap`)     |
-| `minCol`                                                                                                               | `1`–`32` (smart grid: min column width step, `is-col-min-X`) |
-| `isFixed`                                                                                                              | `boolean` (fixed column count instead of auto-fill)          |
-| `fixedCols` (+ `fixedColsMobile` / `fixedColsTablet` / `fixedColsDesktop` / `fixedColsWidescreen` / `fixedColsFullhd`) | `0`–`12` or `'auto'` (fixed grid only)                       |
+| Prop                                                                                                                   | Type                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `gap` / `columnGap` / `rowGap`                                                                                         | `0`–`8` with half steps such as `1.5` (number or string), the same values as the `gap` helper props |
+| `minCol`                                                                                                               | `1`–`32` (smart grid: min column width step, `is-col-min-X`)                                        |
+| `isFixed`                                                                                                              | `boolean` (fixed column count instead of auto-fill)                                                 |
+| `fixedCols` (+ `fixedColsMobile` / `fixedColsTablet` / `fixedColsDesktop` / `fixedColsWidescreen` / `fixedColsFullhd`) | `0`–`12` or `'auto'` (fixed grid only)                                                              |
 
 **Cell**
 
@@ -282,3 +282,10 @@ subcomponents (`Card.Header` + `.Title`/`.Icon`, `Card.Image`, `Card.Content`, `
 | `footer`                        | `ReactNode \| ReactNode[]`    |
 | `hasShadow`                     | `boolean` (default `true`)    |
 | `headerCentered` / `headerIcon` | `boolean` / `ReactNode`       |
+
+`Card.Header.Title` and `Card.FooterItem` both take an `as` prop for Bulma's own card markup —
+`Card.Header.Title` renders `div` by default (`as="p"` or a heading `h2`-`h4` also work), and
+`Card.FooterItem` renders `span` by default (`as="a"` or `as="button"` also work). For a footer
+action, prefer `<Card.FooterItem as="a" href="...">Save</Card.FooterItem>` over nesting a link
+inside the default `span` — Bulma puts the padding and flex centering on `.card-footer-item`
+itself, so nesting a link only makes the text clickable instead of the whole cell.

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

@@ -73,9 +73,12 @@ Run these steps in order. Don't hand-convert what the codemod converts automatic
 
 4. **Resolve every TODO**: `grep -rn "TODO(bestax-migrate)" src/`. Each comment names the
    prop/component and a hint. Recipes for every recurring case are in
-   `references/<source>/unmappables.md`; the full tables are in
-   `references/<source>/component-map.md` and `references/<source>/prop-map.md`. Delete each
-   comment as you resolve it.
+   `references/<source>/unmappables.md`. Before writing a component by hand, look it up in
+   `references/<source>/component-map.md` and its classes in `references/<source>/prop-map.md`:
+   they name the component and the prop for each class, which the library's type declarations
+   only tell you slowly. For form markup (`.field`, `.control`, inputs, selects), load the
+   `bestax-form` skill too: it covers the label, `id` and help-text wiring. Delete each comment
+   as you resolve it.
 
 5. **Finish the stylesheet layer** — flagged Sass cases (computed variables,
    indented-syntax `.sass` files), CSS flavor choice, and Bulma 0.9→1 styling changes:
@@ -111,16 +114,18 @@ code per the references, or deliberately keep the old markup with `className` st
 - **bulma-classes**: there is no library to remove. An element converts only when the bestax
   component renders the same markup (tag, classes, attributes), so a converted page renders
   the same HTML; everything else stays as written, with a TODO when there is something to
-  decide. Only static class strings convert (`clsx(...)` and ternaries get
-  `dynamic-class:<Target>`, naming the component the element would become), files a Next.js
+  decide. Static class strings convert, and so does a `clsx` or `classnames` call of strings
+  and conditional classes, where a condition on a flag becomes its prop (`isLoading={busy}`);
+  any other computed className gets `dynamic-class:<Target>`, naming the component the element
+  would become. Files a Next.js
   App Router may render as server components are left alone (`rsc`), and the manifest gains
   `@allxsmith/bestax-bulma` while the app's Bulma and stylesheets stay (the default
   `--css keep`). Its rules are `kind:<name>` shaped; see
   `references/bulma-classes/unmappables.md`.
 - **bloomer**: every export is a flat name and most become dotted bestax compounds
   (`CardHeaderTitle` → `Card.Header.Title`). Most of its `is*` booleans already are bestax's
-  (`isActive` becomes `active` where bestax names it so; `isFullWidth` survives only on
-  Button, Select, Table and Tabs); the work is in `isSize`/`isColor`/`isAlign` (renamed per component), the `isDisplay`/`isHidden`
+  (`isActive` becomes `active` where bestax names it so; `isFullWidth` becomes `isFullwidth`
+  where bestax has the prop); the work is in `isSize`/`isColor`/`isAlign` (renamed per component), the `isDisplay`/`isHidden`
   helpers (flattened, arrays and objects included), `tag` (→ `as` where bestax has one) and
   `render` (always a TODO). Its icons are className-based and Font Awesome 4 — the biggest
   visual risk, see `references/bloomer/unmappables.md`. The app declared its own Bulma 0.6,

package/templates/skills/bestax-migrate/references/bloomer/prop-map.md

@@ -4,7 +4,7 @@ Most of bloomer's boolean modifiers are already bestax's names — `isLoading`,
 `isInverted`, `isStatic`, `isHovered`, `isFocused`, `isBordered`, `isStriped`, `isNarrow`,
 `isMultiline`, `isVCentered`, `isMobile`, … pass through untouched. The exceptions are in
 the tables below: `isActive` becomes `active` on the components whose bestax counterpart
-names it that way, `isFullWidth` survives only where bestax declares it, and a few
+names it that way, `isFullWidth` becomes `isFullwidth` where bestax declares it, and a few
 (`Input isActive`, `NavbarLink isActive`, `PageLink isActive`) have no counterpart and become
 the Bulma class in `className` instead (see the end of this page). What else changes is the value-carrying props, the helper props every component
 inherited from `withHelpersModifiers`, and the two props bestax spells differently on every
@@ -24,7 +24,7 @@ bloomer's `withHelpersModifiers` mixed these into every component.
 | `isUnselectable`            | `interaction="unselectable"`                                   |                                                                                                                                                                                                                                                                                                  |
 | `isMarginless`              | `m="0"`                                                        | bestax expresses the `is-*less` helpers as spacing                                                                                                                                                                                                                                               |
 | `isPaddingless`             | `p="0"`                                                        |                                                                                                                                                                                                                                                                                                  |
-| `isFullWidth`               | `isFullWidth`                                                  | on Button, Select, Table, Tabs; a TODO elsewhere                                                                                                                                                                                                                                                 |
+| `isFullWidth`               | `isFullwidth`                                                  | on Button, Select, Table, Tabs                                                                                                                                                                                                                                                                   |
 | `isDisplay`, `isHidden`     | `display*`, `visibility*`                                      | flattened — see below                                                                                                                                                                                                                                                                            |
 | `tag`                       | `as`                                                           | where bestax declares one — see below                                                                                                                                                                                                                                                            |
 | `render`                    | —                                                              | always a TODO                                                                                                                                                                                                                                                                                    |
@@ -151,8 +151,8 @@ A few bestax parts extend only React's HTML attributes and take no Bulma helper
 `Pagination.Previous`/`Next`/`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`,
 `Panel.Heading`/`Tabs`/`Block`, `Tabs.List`/`Item`, `Message.Header`/`Body` and the `Modal`
 parts. A bloomer helper on one of those becomes the Bulma class in `className` — except on
-`Navbar.Divider`, `Pagination.Ellipsis` and `Dropdown.Divider`, which write their own className
-last or take no props at all: there the helper is named in a TODO instead, and an element
+`Pagination.Ellipsis` and `Dropdown.Divider`, which write their own className last or take no
+props at all: there the helper is named in a TODO instead, and an element
 carrying a spread is left as bloomer's. Otherwise it is the Bulma class in `className` (`is-pulled-right`,
 `m-0`, `is-hidden-mobile`, …), since Bulma v1 still ships every one of them; only a dynamic
 value is flagged. The same conversion covers the modifiers bestax has no prop for anywhere —
@@ -162,11 +162,11 @@ value is flagged. The same conversion covers the modifiers bestax has no prop fo
 ## Refs
 
 bloomer forwarded no refs. bestax forwards a ref from the form controls, plus `Avatar`,
-`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Link`, `LinkButton`, `Menu.Item`,
-`Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `Sidebar`
-and `Toast` — pass `ref` directly on those. "The form controls" means the inputs
-themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers
-around them forward nothing.
+`Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Link`, `LinkButton`, `Loader`,
+`Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`,
+`Navbar.Link`, `Sidebar` and `Toast` — pass `ref` directly on those. "The form controls" means
+the inputs themselves: the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios`
+wrappers around them forward nothing.
 
 A `ref` on anything else is unsupported, and the two React majors fail differently: React 18
 drops it and logs "Function components cannot be given refs", while React 19 hands it to the

package/templates/skills/bestax-migrate/references/bloomer/unmappables.md

@@ -160,6 +160,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 `tag="button"` stops submitting once migrated. The codemod can't tell whether one sits
+in a form, so each gets a TODO:
+
+```jsx
+<NavbarItem tag="button">Search</NavbarItem>
+<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.
+
 ## `prop:render` — the render prop
 
 bloomer's `render` handed the computed props (`className` included) to your own renderer:
@@ -191,8 +208,8 @@ bloomer rendered, but Bulma v1 no longer ships styles for that class, so restyle
 ## `prop:isFullWidth` — not a universal helper in bestax
 
 bloomer accepted `isFullWidth` on everything; Bulma's `is-fullwidth` only means something on a
-few elements, and bestax declares `isFullWidth` on exactly those — `Button`, `Select`, `Table`,
-`Tabs` — where it passes through. Elsewhere, drop it, or add `className="is-fullwidth"` if your
+few elements. Where bestax has a prop for it (`Button`, `Select`, `Table`, `Tabs`), it becomes
+`isFullwidth`. Elsewhere, drop it, or add `className="is-fullwidth"` if your
 own CSS styled the class.
 
 ## Modifiers bestax has no prop for — converted to classes