create-bestax 4.2.17 → 4.2.18

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

@@ -74,7 +74,8 @@ is **more complete** than the docs page's Option C example, which omits several)
 
 **Components** (`@allxsmith/bestax-bulma/scss/components/<name>`):
 `loading`, `collapse`, `tooltip`, `popover`, `hovercard`, `contextmenu`, `steps`, `sidebar`,
-`toast`, `dialog`, `carousel`, `tabs`, `reveal`, `avatar`, `avatars`, `badge`, `emptystate`
+`toast`, `dialog`, `carousel`, `tabs`, `reveal`, `avatar`, `avatars`, `badge`, `emptystate`,
+`timeline`, `treeview`
 
 **Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
 `checkbox`, `radio`, `switch`, `slider`, `numberinput`, `rate`, `autocomplete`, `taginput`,
@@ -100,8 +101,9 @@ Notes:
   `bulma/sass/components/dropdown` next to `scss/components/contextmenu`.
 - `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
+  stops all of them under `prefers-reduced-motion: reduce` and keeps each ring open in forced
+  colors (Windows' contrast themes), 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

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

@@ -502,6 +502,28 @@ them. See the constituent-element exception above.
 `--bulma-timeinput-wheel-item-height` is registered but has no effect: the component sets each
 wheel item's height inline.
 
+### Timeline
+
+Declared on the root, `.timeline`. The states and the color classes set
+`--bulma-timeline-marker-color` for each marker, and the layouts set
+`--bulma-timeline-rail-center`, so retheme the markers through `--bulma-timeline-neutral-color`
+and `--bulma-timeline-active-color` rather than those two. `--bulma-timeline-marker-background`
+fills the upcoming rings and the pending loader, and a reached icon marker's tint is mixed into
+it. It's the page's color by default, so it hides the line behind them. A record's icon circles
+take `--bulma-timeline-marker-icon-background`, which the color classes set. Every size is in
+`em`, so `textSize` scales them all.
+
+`--bulma-timeline-active-color`, `--bulma-timeline-content-gap`, `--bulma-timeline-dot-size`,
+`--bulma-timeline-gap`, `--bulma-timeline-halo-offset`, `--bulma-timeline-line-color`,
+`--bulma-timeline-line-width`, `--bulma-timeline-marker-background`,
+`--bulma-timeline-marker-color`, `--bulma-timeline-marker-icon-background`,
+`--bulma-timeline-marker-icon-color`, `--bulma-timeline-marker-size`,
+`--bulma-timeline-neutral-color`, `--bulma-timeline-pending-duration`,
+`--bulma-timeline-pending-size`,
+`--bulma-timeline-rail-center`, `--bulma-timeline-rail-size`, `--bulma-timeline-rail-size-icon`,
+`--bulma-timeline-time-color`, `--bulma-timeline-time-size`, `--bulma-timeline-title-color`,
+`--bulma-timeline-title-weight`
+
 ### Toast
 
 `--bulma-toast-action-hover-opacity`, `--bulma-toast-action-radius`,
@@ -525,6 +547,27 @@ trigger and the tooltip past what the pointer can cross on its own, so give the
 `--bulma-tooltip-multiline-width`, `--bulma-tooltip-padding`, `--bulma-tooltip-radius`,
 `--bulma-tooltip-z-index`
 
+### TreeView
+
+Declared on the root, `.tree-view`. A tree looks like Bulma's menu, but the menu's variables
+don't reach it: `--bulma-menu-*` is registered on `.menu` alone, so retheme a tree through these.
+Each default is the base token the matching menu variable defaults to (`scheme-h`, `text-l`,
+`link-l`, `radius-small`, `border` and so on), so a theme's base tokens move the tree and the menu
+together. A selected row swaps in the `item-selected-*` values on its own row, and a row's hover
+and press tints change `--bulma-tree-view-item-background-l-delta` there. A checkbox tree's boxes
+are `Checkbox`'s, themed through `--bulma-checkbox-*`.
+
+`--bulma-tree-view-gap`, `--bulma-tree-view-group-border`, `--bulma-tree-view-group-margin`,
+`--bulma-tree-view-group-padding`, `--bulma-tree-view-item-active-background-l-delta`,
+`--bulma-tree-view-item-background-l`, `--bulma-tree-view-item-background-l-delta`,
+`--bulma-tree-view-item-color-l`, `--bulma-tree-view-item-disabled-color`,
+`--bulma-tree-view-item-h`, `--bulma-tree-view-item-hover-background-l-delta`,
+`--bulma-tree-view-item-padding`, `--bulma-tree-view-item-radius`, `--bulma-tree-view-item-s`,
+`--bulma-tree-view-item-selected-background-l`, `--bulma-tree-view-item-selected-color-l`,
+`--bulma-tree-view-item-selected-h`, `--bulma-tree-view-item-selected-s`,
+`--bulma-tree-view-line-height`, `--bulma-tree-view-toggle-color`,
+`--bulma-tree-view-toggle-duration`, `--bulma-tree-view-toggle-size`
+
 ## Dark mode (`Theme colorMode`)
 
 Drive the light/dark scheme with the `Theme` component's **`colorMode`** prop —

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

@@ -86,8 +86,10 @@ 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`                                                | —                                                                                                                                                   |
+| `Timeline`         | `primary \| link \| info \| success \| warning \| danger` (the markers and the progress, never the text)                                                                  | no `size` (sized in `em`; size it with `textSize`)                        | `Timeline.Item` takes `color` too, over the root's; neutral with no `color`, and progress in `link`; retheme through `--bulma-timeline-*`           |
 | `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`                                                | —                                                                                                                                                   |
+| `TreeView`         | only the text helper, which doesn't reach the rows: each row sets its own text color, so retheme them through `--bulma-tree-view-*`                                       | `small \| medium \| large`                                                | the menu's sizes; its variables copy the menu's defaults, and `--bulma-menu-*` doesn't reach it; the boxes are `Checkbox`'s                         |
 | `Tr` / `Td` / `Th` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`                                                                              | —                                                                         | cell background; cells take `textAlign`/`textWeight`/`textSize` directly                                                                            |
 
 The 6 brand colors (`primary, link, info, success, warning, danger`) are the ones a custom theme