create-bestax 4.2.10 → 4.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bestax",
-  "version": "4.2.10",
+  "version": "4.2.11",
   "description": "Create a new bestax-bulma project",
   "type": "module",
   "bin": {
@@ -39,7 +39,7 @@
     "figures": "^6.1.0",
     "fs-extra": "^11.4.0",
     "prompts": "^2.4.2",
-    "@allxsmith/bestax-bulma": "^5.16.7"
+    "@allxsmith/bestax-bulma": "^5.16.9"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",

package/templates/skills/bestax-custom-component/references/library-contributor.md

@@ -137,6 +137,21 @@ Rules that keep components consistent:
   `PolymorphicComponentWithoutRef` and forwards none. That is the exception, not
   a licence to skip refs; everything a consumer might focus or measure should
   forward one.
+- **An own prop the component FORWARDS has to say so.** Subtracting `Own` from the
+  target's props is what keeps a Bulma `color` from being shadowed by the DOM
+  attribute, but it also lets an OPTIONAL own prop hide a REQUIRED prop of the
+  target: `Avatar`'s `href?: string` hid `next/link`'s required one, so
+  `<Avatar as={NextLink} name="Ada" />` compiled and the target was handed
+  nothing (#665). Name those props in the third type parameter —
+  `PolymorphicComponent<FooOwnProps, 'tag', 'href' | 'target'>`, with the
+  matching `Exclude`/`Extract` pair written out in the alias the way `Avatar.tsx`
+  does — and the target's declaration wins, while the own one still covers a
+  target that has no such prop. It defaults to naming none, which is the right
+  answer for a prop the component CONSUMES. Withholding an undefined value at
+  runtime belongs with it: a key that merely exists reads as a value to a target
+  that tests for one, and travels on through its `{...rest}`. Not to a
+  destructuring default, which an explicit `undefined` triggers anyway.
+
 - **Element sizing uses an inline `'small' | 'medium' | 'large'` union**, mapped to `is-small` /
   `is-medium` / `is-large` (see `Tabs.tsx`, `Control.tsx`). Do **not** reach for the `validSizes`
   constant — that one is `'0'…'6' | 'auto'` and exists for **spacing** helpers, not element size.

package/templates/skills/bestax-layout-scaffold/examples/content-page.tsx

@@ -72,7 +72,11 @@ export default function ContentPage() {
                 <Card>
                   <Card.Content>
                     <IconText mb="3">
-                      <Icon name={f.icon} textColor="primary" />
+                      <Icon
+                        name={f.icon}
+                        textColor="primary"
+                        aria-hidden="true"
+                      />
                       <Title size="4" mb="2">
                         {f.name}
                       </Title>

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

@@ -161,6 +161,14 @@ 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 and from `Button`,
-`LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and `Navbar.Link`), `Dialog`,
-`Sidebar`, `Toast` and `Carousel` — pass `ref` directly on those.
+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.
+
+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
+component as an ordinary prop, where it settles wherever the rest props go. bestax supports
+both, so attach the ref to an element you control instead.

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

@@ -151,23 +151,34 @@ The third row is the `Navbar.Dropdown` collision, and it runs both ways. Your rb
 `Navbar.Dropdown` is the menu itself (`div.navbar-dropdown`), so it maps to bestax's
 `Navbar.DropdownMenu`, which forwards no ref — `innerRef` there is left alone. bestax reserves
 the name `Navbar.Dropdown` for the outer container, which is what `<Navbar.Item dropdown>`
-becomes, and that one does forward a ref. A plain `<Navbar.Item>` does not, so the rename is
-conditional on the `dropdown` prop.
+becomes. The rename stays conditional on the `dropdown` prop because only that branch knows
+which of the two targets was picked, not because the other branch lacks a ref: a plain
+`<Navbar.Item>` forwards one too since #661, so its `innerRef` is a rename the codemod leaves
+for you (see the gap below).
 
 An existing `ref` is passed through untouched — which is safe only where the bestax target
-forwards one. rbx forwards a ref on every component; bestax does so on the form controls plus
-`Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar`, `Navbar.Burger`, `Navbar.Link`,
-`Navbar.Dropdown`, `Dialog`, `Sidebar`, `Toast` and `Carousel`. Carry a `ref` onto anything
-else — `Card`, `Box`, `Section`, `Message`, `Tabs` and most of the catalogue — and it resolves
-to `null` at runtime, with React logging "Function components cannot be given refs" and
-continuing.
+forwards one. rbx forwards a ref on every component; bestax does so on 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`. "The form controls" there means the inputs themselves:
+the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers around them
+forward nothing, and `Field` is a target this codemod emits.
+
+Carry a `ref` onto anything else — `Card`, `Box`, `Section`, `Message`, `Tabs` and most of the
+catalogue — and it is unsupported, but the two React majors fail differently. React 18 drops
+it and logs "Function components cannot be given refs". React 19 hands `ref` to the component
+as an ordinary prop, so it lands wherever that component spreads its rest props, silently and
+with no guarantee it is the element you meant. bestax supports both majors, so neither
+outcome is one to build on: put the ref on an element you control.
 
 **The codemod does not flag this**, because neither the universal prop table nor any
 per-component table has a `ref` entry, so check every `ref` you carried over against the list
 above rather than assuming the silent pass-through means it works. The renames above are for
-`innerRef`, and apply only on those eight entries. Anywhere else it leaves `innerRef` alone — move the ref onto a wrapping
-element you control.
-
-Note the gap that leaves: other bestax components do forward a ref (the form controls,
-`LinkButton`, `Dialog`, `Sidebar`, `Toast`, `Carousel`), but their rbx `innerRef` is not mapped
-yet, so it passes through untouched rather than being renamed for you.
+`innerRef`, and apply only on those eight entries.
+
+Note the gap that leaves. An rbx `innerRef` can only land on a component rbx itself has, so of
+the ref-forwarding targets above the reachable ones are the form controls, `Menu.Item` and a
+plain `Navbar.Item`. There the codemod leaves `innerRef` in place and flags it rather than
+renaming it, so the rename is yours to make and the target will take it. Everywhere the eight
+renames above do not reach, `innerRef` is flagged the same way — but on a target that forwards
+nothing the answer is a wrapping element you control, not a rename.

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

@@ -128,11 +128,19 @@ bestax `Button` colors are the semantic set + `text`/`ghost`. For shades use
 
 ## `domRef`
 
-bestax components don't take `domRef`, but many forward a plain `ref` — the form controls
-and `Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and
-`Navbar.Link`), `Dialog`, `Sidebar`, `Toast` and `Carousel`. On those, rename `domRef` to
-`ref` and it works; do not restructure the markup. Everywhere else there is no ref to
-forward — attach the ref to a DOM element inside, or wrap the component in a `<div ref={…}>`.
+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`,
+`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
+around them forward nothing, and `Field` is a target this codemod emits.
+
+Everywhere else the rename is not enough, and the two React majors differ: React 18 drops the
+ref and logs "Function components cannot be given refs", while React 19 passes it through as
+an ordinary prop, so it settles wherever the component spreads its rest props with nothing
+logged. bestax supports both, so attach the ref to a DOM element inside, or wrap the component
+in a `<div ref={…}>`.
 
 The codemod does not do that rename for you: `domRef` is flagged on every component, so the
 TODO names both cases and you pick. `Navbar.Dropdown` is the trap, and it cuts both ways —

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

@@ -92,14 +92,14 @@ and numeric shades `--bulma-<c>-00` … `--bulma-<c>-95`.
 
 ## Radius, typography
 
-| Variable                                                                      | Default                           | `Theme` prop    |
-| ----------------------------------------------------------------------------- | --------------------------------- | --------------- |
-| `--bulma-radius-small` / `--bulma-radius` / `--bulma-radius-large`            | 0.25 / 0.375 / 0.75rem            | via `bulmaVars` |
-| `--bulma-radius-rounded`                                                      | 9999px                            | via `bulmaVars` |
-| `--bulma-family-primary` / `--bulma-family-secondary` / `--bulma-family-code` | sans / sans / mono                | via `bulmaVars` |
-| `--bulma-size-1` … `--bulma-size-7`                                           | 3rem … 0.75rem                    | via `bulmaVars` |
-| `--bulma-size-small` / `-normal` / `-medium` / `-large`                       | 0.75 / 1 / 1.25 / 1.5rem          | via `bulmaVars` |
-| `--bulma-weight-light/normal/medium/semibold/bold/extrabold`                  | 300 / 400 / 500 / 600 / 700 / 800 | via `bulmaVars` |
+| Variable                                                                      | Default                           | `Theme` prop                    |
+| ----------------------------------------------------------------------------- | --------------------------------- | ------------------------------- |
+| `--bulma-radius-small` / `--bulma-radius` / `--bulma-radius-large`            | 0.25 / 0.375 / 0.75rem            | via `bulmaVars`                 |
+| `--bulma-radius-rounded`                                                      | 9999px                            | via `bulmaVars`                 |
+| `--bulma-family-primary` / `--bulma-family-secondary` / `--bulma-family-code` | sans / sans / mono                | via `bulmaVars`                 |
+| `--bulma-size-1` … `--bulma-size-7`                                           | 3rem … 0.75rem                    | CSS only, not a `bulmaVars` key |
+| `--bulma-size-small` / `-normal` / `-medium` / `-large`                       | 0.75 / 1 / 1.25 / 1.5rem          | via `bulmaVars`                 |
+| `--bulma-weight-light/normal/medium/semibold/bold/extrabold`                  | 300 / 400 / 500 / 600 / 700 / 800 | via `bulmaVars`                 |
 
 ## Shadow — override the upstream token, not the derived one