create-bestax 4.2.15 → 4.2.17

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

@@ -13,7 +13,9 @@ theming means overriding the right `--bulma-*` values.
 - `isRoot` → injects the variables globally at `:root` (use once, at the app root).
 - without `isRoot` → wraps children in a `<div>` and scopes the variables to that subtree.
 - Named props set the color/scheme HSL channels and common values (see "Theme props" below).
-- `bulmaVars` sets any other variable, keyed by its real `--bulma-*` name:
+- `bulmaVars` sets any other variable, keyed by its real `--bulma-*` name. It only changes
+  variables the component inherits, though: see "Component variables" below for the ones Bulma
+  declares on the component itself.
 
 ```tsx
 <Theme
@@ -101,6 +103,29 @@ and numeric shades `--bulma-<c>-00` … `--bulma-<c>-95`.
 | `--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`                 |
 
+## Component variables: set them on the component, not on `Theme`
+
+A custom property set on an ancestor only reaches an element that declares no value of its own.
+Bulma declares the scheme, color, typography, radius and spacing tokens on `:root`, so `Theme`
+(scoped or `isRoot`) and plain `:root` CSS both work for them. Some of those Bulma also declares
+again on one component, which keeps its own value while everything else takes yours; that
+component's API page lists the variable as declared on it, and `Theme` doesn't warn about these.
+To change that one component too, set the variable on it as described below.
+
+Bulma's per-component variables (`--bulma-card-radius`, `--bulma-tag-h`,
+`--bulma-delete-dimensions`, …) are declared on the component's own element instead (`.card`,
+`.tag`, `.delete`), so a value set on any ancestor, including `Theme`'s `bulmaVars`, always loses
+and nothing changes. `bulmaVars` still accepts those keys, and `Theme` logs a development warning
+naming them.
+
+Set a component variable on the component itself: in your CSS on its own class, loaded after
+the library styles (mind the class prefix), e.g. `.card { --bulma-card-radius: 1.5rem; }`, on a
+class you pass through `className`, or with the component's `style` prop. A size or color
+modifier can declare the variable again on a more specific selector (`.delete.is-small`), which a
+lone class loses to and `style` does not. Each component's API page lists its variables under
+**CSS & Sass Variables** and says where Bulma declares them; the extras below follow the same
+rule.
+
 ## Shadow — override the upstream token, not the derived one
 
 `--bulma-shadow` (plus its `--bulma-shadow-h`/`-s`/`-l` channels) is a real Bulma variable that
@@ -145,7 +170,9 @@ 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`, Popover's on its panel, `.popover-content`, and Sidebar's
+  are declared on `.tooltip-content`, Popover's on its panel, `.popover-content`, HoverCard's
+  on its card, `.hover-card-content`, ContextMenu's on the box its menu hangs from,
+  `.context-menu-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:
@@ -231,6 +258,18 @@ items of a `Collapses` group, which reads it with a 0.5rem fallback and declares
 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.)
 
+### ContextMenu
+
+Both are declared on the box the menu hangs from, `.context-menu-content`, which is portaled away
+from the trigger. See the constituent-element exception above.
+
+`--bulma-context-menu-max-height`, `--bulma-context-menu-z-index`
+
+The menu inside that box is Bulma's dropdown markup, and the box is a `.dropdown` too, so the
+`--bulma-dropdown-*` variables theme it. Bulma declares them on `.dropdown`, so a context menu
+takes a value set on the box: `.dropdown.context-menu-content { --bulma-dropdown-content-radius: … }`
+changes context menus and leaves `Dropdown` alone.
+
 ### DateInput
 
 `--bulma-dateinput-cell-color`, `--bulma-dateinput-cell-disabled-color`,
@@ -272,6 +311,40 @@ The field around the two inputs. Its calendar is the `DateInput` one, with the v
 `--bulma-dialog-radius`, `--bulma-dialog-shadow`, `--bulma-dialog-title-color`,
 `--bulma-dialog-title-size`, `--bulma-dialog-title-weight`, `--bulma-dialog-width`
 
+### EmptyState
+
+Declared on the root, `.empty-state`. Each size class (`.is-small`, `.is-medium`, `.is-large`)
+sets its own gap, padding, indicator and icon sizes, and title and description sizes, so retune a
+size on that class. The color classes and `.is-filled` set the indicator's background and color
+from Bulma's scheme tokens, so the circle follows dark mode with no override. The description is
+`currentColor`, so it reads on whatever surface holds it.
+
+`--bulma-empty-state-description-color`, `--bulma-empty-state-description-max-width`,
+`--bulma-empty-state-description-size`, `--bulma-empty-state-gap`, `--bulma-empty-state-icon-size`,
+`--bulma-empty-state-indicator-background`, `--bulma-empty-state-indicator-color`,
+`--bulma-empty-state-indicator-radius`, `--bulma-empty-state-indicator-size`,
+`--bulma-empty-state-padding`, `--bulma-empty-state-title-size`
+
+### HoverCard
+
+All are declared on the card, `.hover-card-content`, so a card rendered with `appendToBody` keeps
+them. See the constituent-element exception above.
+
+`--bulma-hover-card-animation-duration`, `--bulma-hover-card-background`,
+`--bulma-hover-card-border-color`, `--bulma-hover-card-color`, `--bulma-hover-card-max-width`,
+`--bulma-hover-card-min-width`, `--bulma-hover-card-offset`, `--bulma-hover-card-padding`,
+`--bulma-hover-card-radius`, `--bulma-hover-card-shadow`, `--bulma-hover-card-z-index`
+
+### Kbd
+
+Declared on each key, `.kbd`. The border color and the fill default to `color-mix()` of
+`currentColor` with `transparent`, so a key follows its text in dark mode, in a filled button and
+in a tooltip without an override of its own. The sizes are in `em`, so `textSize` scales them.
+
+`--bulma-kbd-background`, `--bulma-kbd-border-bottom-width`, `--bulma-kbd-border-color`,
+`--bulma-kbd-border-width`, `--bulma-kbd-color`, `--bulma-kbd-family`, `--bulma-kbd-padding`,
+`--bulma-kbd-radius`, `--bulma-kbd-size`, `--bulma-kbd-weight`
+
 ### LinkButton
 
 Declared on the compound `.button.link-button` — see the compound-selector exception above.
@@ -295,6 +368,14 @@ Declared on the compound `.button.link-button` — see the compound-selector exc
 `--bulma-loading-overlay-opacity-opaque`, `--bulma-loading-text-color`,
 `--bulma-loading-text-size`
 
+### Notification
+
+`--bulma-notification-delete-padding-inline-end` is the end padding of a notification with a close
+button, which keeps the text clear of the button. It applies with `hasDelete`, and to a `Delete`
+passed as a direct child in browsers that support `:has()`. It is the padding for a default-size
+button: a `Delete` passed in with a `size` gets it plus or minus the difference between the two
+sizes. Bulma's own `--bulma-notification-*` variables set the rest.
+
 ### Numberinput
 
 `--bulma-numberinput-disabled-opacity`, `--bulma-numberinput-rounded-button-size`,
@@ -434,6 +515,10 @@ wheel item's height inline.
 All but `--bulma-tooltip-dashed-color` are declared on `.tooltip-content` — see the
 constituent-element exception above.
 
+Raising `--bulma-tooltip-arrow-size` or `--bulma-tooltip-arrow-margin` widens the gap between the
+trigger and the tooltip past what the pointer can cross on its own, so give the tooltip a
+`closeDelay` long enough to cross it.
+
 `--bulma-tooltip-arrow-margin`, `--bulma-tooltip-arrow-size`, `--bulma-tooltip-background`,
 `--bulma-tooltip-color`, `--bulma-tooltip-dashed-color`, `--bulma-tooltip-font-size`,
 `--bulma-tooltip-font-weight`, `--bulma-tooltip-line-height`, `--bulma-tooltip-max-width`,

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

@@ -56,15 +56,17 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Input`            | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isRounded`, `isStatic`                                                                                                                        |
 | `Avatar`           | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `16x16 \| 24x24 \| 32x32 \| 48x48 \| 64x64 \| 96x96 \| 128x128 \| number` | initials/icon background (auto-derived from `name` when unset); also `shape`                                                                        |
 | `Badge`            | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | pill background; default `danger`                                                                                                                   |
-| `Title`            | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | also `isSpaced`                                                                                                                                     |
-| `SubTitle`         | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | —                                                                                                                                                   |
+| `Title`            | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | also `isSpaced`; `size` also sets the heading level unless `as="p"`: pair `as` with `textSize` instead                                              |
+| `SubTitle`         | — (no `color`; use `textColor`)                                                                                                                                           | `1`–`6` (string or number)                                                | `size` also sets the heading level unless `as="p"` (an `<h1>` with neither): pair `as` with `textSize` instead                                      |
 | `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`                                                                                                                                    |
+| `EmptyState`       | `primary \| link \| info \| success \| warning \| danger` (the indicator circle and its icon only, never the text)                                                        | `small \| normal \| medium \| large`                                      | also `variant`: `light` (default) \| `filled`; neutral with no `color`; tint text with `textColor`; `--bulma-empty-state-*`                         |
 | `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                                                                                                                                  |
+| `Kbd`              | — (no `color`: the edge and fill are mixed from the text color, so `textColor` tints them; `bgColor` replaces the fill, so pair it with a `textColor`)                    | — (sized in `em` from the text around it; size it with `textSize`)        | one keycap look, no `variant`; `Kbd.Group` takes `textColor` too; retheme through `--bulma-kbd-*`                                                   |
 | `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                                                                                                                   |
@@ -75,6 +77,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `Progress`         | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️)                                             | `small \| medium \| large`                                                | —                                                                                                                                                   |
 | `Radio`            | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | the 6 only                                                                                                                                          |
 | `Rate`             | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | the 6 only                                                                                                                                          |
+| `SegmentedControl` | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | fills only the checked segment (default `link`); `size` is the row's `are-<size>`; segments take no `color` or `size`                               |
 | `Select`           | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | `small \| medium \| large`                                                | also `isRounded`                                                                                                                                    |
 | `Slider`           | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | also `isRounded`, `isCircle`                                                                                                                        |
 | `Steps`            | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | the 6 only                                                                                                                                          |
@@ -83,6 +86,7 @@ Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, lig
 | `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`                                                | —                                                                                                                                                   |
 | `TimeInput`        | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| medium \| large`                                                | —                                                                                                                                                   |
+| `ToggleButton`     | `primary \| link \| info \| success \| warning \| danger`                                                                                                                 | `small \| normal \| medium \| large`                                      | fills only while pressed (default `link`); **no `isLight`/`isOutlined`/`isInverted`/`textColor`/`bgColor`**                                         |
 | `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                                                                            |
 

package/templates/vite-ts/package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",

package/templates/vite-ts/tsconfig.app.json

@@ -1,25 +1,26 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
 
     /* Linting */
-    "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
-}
+}

package/templates/vite-ts/tsconfig.node.json

@@ -1,13 +1,23 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
     "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
     "noEmit": true,
-    "strict": true,
-    "types": ["vite/client"]
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["vite.config.ts"]
 }

package/templates/vite-ts/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />