create-bestax 4.2.14 → 4.2.16

package/templates/skills/bestax-icons/references/icon-libraries.md

@@ -67,8 +67,11 @@ Set it once on `ConfigProvider` and omit `library` everywhere else.
 
 ## Google Material Icons — `'material-icons'`
 
-- **Setup:** `npm install material-icons` and `import 'material-icons';`.
-- **Scaffold flag:** `--icon material-icons`.
+- **Setup:** `npm install material-icons` and `import 'material-icons/iconfont/filled.css';`, the
+  style `Icon` renders by default. Add `outlined.css`, `round.css`, `sharp.css` or `two-tone.css`
+  from `material-icons/iconfont/` for those variants; the bare `import 'material-icons';` loads
+  all five fonts.
+- **Scaffold flag:** `--icon material-icons` (imports `filled.css` only).
 - **Names:** snake_case ligature text: `home`, `rocket_launch`, `shopping_cart`. A kebab-case
   name will not match a ligature and renders as raw text.
 - **Variants:** `filled` (default) / `outlined` / `round` / `sharp` — note **`round`**, not
@@ -77,8 +80,10 @@ Set it once on `ConfigProvider` and omit `library` everywhere else.
 
 ## Material Symbols — `'material-symbols'`
 
-- **Setup:** `npm install material-symbols` and `import 'material-symbols';`.
-- **Scaffold flag:** `--icon material-symbols`.
+- **Setup:** `npm install material-symbols` and `import 'material-symbols/outlined.css';`, the
+  style `Icon` renders by default. Add `rounded.css` or `sharp.css` for those variants; the bare
+  `import 'material-symbols';` loads all three fonts.
+- **Scaffold flag:** `--icon material-symbols` (imports `outlined.css` only).
 - **Names:** snake_case ligature text, same as Material Icons: `rocket_launch`.
 - **Variants:** `outlined` (default) / `rounded` / `sharp` — note **`rounded`** here vs
   Material Icons' `round`.

package/templates/skills/bestax-migrate/references/bulma-classes/component-map.md

@@ -321,6 +321,14 @@ renders `has-text-<color>` too, and so does `is-centered`, which `isCentered` re
 beside `isRight`. Anything else keeps it as markup with a `children:File`, `context:File` or
 `attr` TODO.
 
+A `has-name` `.file` with no `.file-name` converts only with Bulma's `is-empty` written on it as a
+static class, since `File` renders `is-empty` there itself whatever a condition says, so a
+condition on it can't stand in. The class then goes with the rest of the tree. The `File` gets
+`fileName=""`, which pins its name empty the way a `.file-name`'s text pins it to that text. With
+no `fileName`, `File` would show the name of the file a user picks and drop `is-empty`, which the
+markup never does. Without a static `is-empty` the `.file` stays markup with a `defaults:File` TODO
+that names the class to write.
+
 ## Families this source leaves as markup
 
 Their markup doesn't map element by element (the bestax component renders parts of its own, or

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

@@ -88,6 +88,11 @@ element the attribute it's missing.
 sets none, and `Card.Header.Icon` renders `aria-label="more options"` too. One whose `type` isn't
 `button`, `submit` or `reset` gets an `attr:type` TODO instead, since bestax writes `button` in its
 place. Write the type you mean, then re-run.
+`File` renders a class rather than an attribute: Bulma's `is-empty`, on a `has-name` `.file` with
+no `.file-name`, whatever a condition says. Write `is-empty` on the `.file` as a static class, then
+re-run: a condition on `is-empty` can't stand in, so one already there still gets this TODO. The
+`File` it becomes gets `fileName=""`, so a file the user picks leaves it as the markup was: no name
+area, and `is-empty` still on.
 
 ### `drops:<Target>`
 

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

@@ -153,11 +153,13 @@ not `flexbox` — `flexbox` holds only the alignment props. Verified failure mod
 ## Worked example — the create-bestax starter app
 
 The `npm create bestax` starter renders `Container`, `Section`, `Columns`/`Column`, `Image`,
-`Title`/`SubTitle`, `Box`, `Card`, `Buttons`/`Button`, and `Notification` — all stock Bulma,
-no bestax extras. Its helper props are `display`/`justifyContent` (visibility + flexbox),
-`textAlign` (typography), and `textColor` (color); it uses no spacing props. That inventory
-compiles to the following — verified pixel-equivalent to the prebuilt `complete` flavor in
-headless Chromium (light and dark), at 453 KB raw / 40 KB gzip vs 813 KB / 83 KB:
+`Title`/`SubTitle`, `Box`, `Card`, `Buttons`/`Button`, and `Notification` with its close
+button: all stock Bulma, no bestax extras. Its helper props are `display` (visibility),
+`flexGrow` (flexbox), and `textAlign` (typography); it uses no spacing or color props. That
+inventory compiles to the following, verified pixel-equivalent to the prebuilt `complete`
+flavor in headless Chromium (light and dark, phone and desktop width, notification open), at
+274 KB raw / 30 KB gzip vs 819 KB / 84 KB. Scaffolded with an icon library, the starter also
+needs `bulma/sass/elements/icon` for its `IconText` card titles:
 
 ```scss
 // src/styles.scss
@@ -170,6 +172,7 @@ headless Chromium (light and dark), at 453 KB raw / 40 KB gzip vs 813 KB / 83 KB
 
 @use 'bulma/sass/elements/box';
 @use 'bulma/sass/elements/button'; // Button + Buttons
+@use 'bulma/sass/elements/delete'; // Notification's close button
 @use 'bulma/sass/elements/image';
 @use 'bulma/sass/elements/notification';
 @use 'bulma/sass/elements/title'; // Title + SubTitle
@@ -179,9 +182,8 @@ headless Chromium (light and dark), at 453 KB raw / 40 KB gzip vs 813 KB / 83 KB
 @use 'bulma/sass/layout/section';
 
 @use 'bulma/sass/helpers/visibility'; // display="flex"
-@use 'bulma/sass/helpers/flexbox'; // justifyContent/flexGrow/flexShrink
+@use 'bulma/sass/helpers/flexbox'; // flexGrow
 @use 'bulma/sass/helpers/typography'; // textAlign
-@use 'bulma/sass/helpers/color'; // textColor
 ```
 
 ```tsx

package/templates/vite/README.md

@@ -6,15 +6,15 @@ This template provides a minimal setup to get React working in Vite with HMR and
 
 ```bash
 pnpm install
-pnpm dev
+pnpm run dev
 ```
 
 ## Available Scripts
 
-- `pnpm dev` - Start development server
-- `pnpm build` - Build for production
-- `pnpm preview` - Preview production build
-- `pnpm lint` - Run ESLint
+- `pnpm run dev` - Start development server
+- `pnpm run build` - Build for production
+- `pnpm run preview` - Preview production build
+- `pnpm run lint` - Run ESLint
 
 ## Features
 
@@ -22,7 +22,6 @@ pnpm dev
 - 🎨 Bulma CSS framework
 - 📦 bestax-bulma component library
 - 🔧 ESLint pre-configured
-- 🎯 Font Awesome icons included
 
 ## Learn More
 

package/templates/vite/src/App.css

@@ -1 +1,14 @@
-/* App-specific styles - keep minimal, let Bulma handle the styling */
+/* App-specific styles - keep minimal, let Bulma handle the styling */
+
+/* A link inside running text needs more than its color to stand out
+   (WCAG 1.4.1), and no helper prop sets an underline. */
+.text-link {
+  text-decoration: underline;
+}
+
+/* Bulma spaces a notification from whatever follows it in the same parent,
+   and each notification here is alone in its status region, so the space
+   between two showing at once goes between their regions instead. */
+.status-region:not(:empty) + .status-region:not(:empty) {
+  margin-top: var(--bulma-block-spacing);
+}

package/templates/vite/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import {
   Box,
   Button,
@@ -18,127 +18,155 @@ import './App.css';
 function App() {
   const [showNotification, setShowNotification] = useState(false);
   const [count, setCount] = useState(0);
+  // Where focus goes when the button holding it goes away (the notification's
+  // close button) or disables itself (Reset, at zero), so a keyboard user is
+  // not dropped at the top of the page.
+  const toggleRef = useRef(null);
+  const countRef = useRef(null);
 
   return (
-    <>
-      <Container breakpoint="desktop" isMax>
-        <Section>
-          <Columns isCentered>
-            <Column isNarrow display="flex" justifyContent="center">
+    <main>
+      <Section>
+        <Container breakpoint="desktop" isMax>
+          <Columns isCentered isMobile isMultiline>
+            <Column isNarrow>
               <Image src="/bestax.svg" alt="Bestax" size="128x128" />
             </Column>
-            <Column isNarrow display="flex" justifyContent="center">
+            <Column isNarrow>
               <Image src="/vite.svg" alt="Vite" size="128x128" />
             </Column>
-            <Column isNarrow display="flex" justifyContent="center">
+            <Column isNarrow>
               <Image src="/react.svg" alt="React" size="128x128" />
             </Column>
           </Columns>
           <Title size="1" textAlign="centered">
             Bestax + Vite + React
           </Title>
-        </Section>
 
-        <Box>
-          <Title size="3">Get Started</Title>
-          <SubTitle size="5" textColor="grey">
-            This template includes everything you need to build with
-            bestax-bulma
-          </SubTitle>
-        </Box>
+          <Box>
+            <Title as="h2">Get Started</Title>
+            <SubTitle as="p" size="5">
+              This template includes everything you need to build with
+              bestax-bulma
+            </SubTitle>
+          </Box>
 
-        <Columns>
-          <Column display="flex">
-            <Card flexGrow="1" flexShrink="1">
-              <Card.Header>
-                <Card.Header.Title>Quick Start</Card.Header.Title>
-              </Card.Header>
-              <Card.Content>
-                Edit src/App.jsx and save to test HMR updates.
-              </Card.Content>
-            </Card>
-          </Column>
+          <Columns>
+            <Column display="flex">
+              <Card flexGrow="1">
+                <Card.Header>
+                  <Card.Header.Title as="h3">Quick Start</Card.Header.Title>
+                </Card.Header>
+                <Card.Content>
+                  Edit src/App.jsx and save to test HMR updates.
+                </Card.Content>
+              </Card>
+            </Column>
 
-          <Column display="flex">
-            <Card flexGrow="1" flexShrink="1">
-              <Card.Header>
-                <Card.Header.Title>Documentation</Card.Header.Title>
-              </Card.Header>
-              <Card.Content>
-                Visit{' '}
-                <a
-                  href="https://bestax.io"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  bestax.io
-                </a>{' '}
-                for component docs.
-              </Card.Content>
-            </Card>
-          </Column>
+            <Column display="flex">
+              <Card flexGrow="1">
+                <Card.Header>
+                  <Card.Header.Title as="h3">Documentation</Card.Header.Title>
+                </Card.Header>
+                <Card.Content>
+                  Visit{' '}
+                  <a
+                    className="text-link"
+                    href="https://bestax.io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    bestax.io
+                  </a>{' '}
+                  for component docs.
+                </Card.Content>
+              </Card>
+            </Column>
 
-          <Column display="flex">
-            <Card flexGrow="1" flexShrink="1">
-              <Card.Header>
-                <Card.Header.Title>Examples</Card.Header.Title>
-              </Card.Header>
-              <Card.Content>
-                Check the examples below to see components in action.
-              </Card.Content>
-            </Card>
-          </Column>
-        </Columns>
+            <Column display="flex">
+              <Card flexGrow="1">
+                <Card.Header>
+                  <Card.Header.Title as="h3">Examples</Card.Header.Title>
+                </Card.Header>
+                <Card.Content>
+                  Check the examples below to see components in action.
+                </Card.Content>
+              </Card>
+            </Column>
+          </Columns>
 
-        <Box>
-          <Title size="4">Interactive Example</Title>
+          <Box>
+            <Title as="h2">Interactive Example</Title>
 
-          <Columns isVCentered>
-            <Column size="half">
-              <Buttons>
-                <Button
-                  color="primary"
-                  onClick={() => setShowNotification(!showNotification)}
-                >
-                  Toggle Notification
-                </Button>
+            <Columns isVCentered>
+              <Column size="half">
+                <Buttons>
+                  <Button
+                    ref={toggleRef}
+                    color="primary"
+                    onClick={() => setShowNotification(!showNotification)}
+                  >
+                    Toggle Notification
+                  </Button>
 
-                <Button color="info" onClick={() => setCount(count + 1)}>
-                  Count: {count}
-                </Button>
+                  <Button
+                    ref={countRef}
+                    color="info"
+                    onClick={() => setCount(count + 1)}
+                  >
+                    Count: {count}
+                  </Button>
 
-                <Button
-                  color="warning"
-                  onClick={() => setCount(0)}
-                  disabled={count === 0}
-                >
-                  Reset
-                </Button>
-              </Buttons>
-            </Column>
+                  <Button
+                    color="warning"
+                    onClick={() => {
+                      setCount(0);
+                      countRef.current?.focus();
+                    }}
+                    disabled={count === 0}
+                  >
+                    Reset
+                  </Button>
+                </Buttons>
+              </Column>
 
-            <Column size="half">
-              {showNotification && (
-                <Notification
-                  color="success"
-                  isLight
-                  onDelete={() => setShowNotification(false)}
-                >
-                  <strong>Success!</strong> Your Vite + Bestax setup is working
-                  perfectly!
-                </Notification>
-              )}
+              {/* A status region reads out all it holds whenever any of it
+                  changes, so each notification has a region of its own: a
+                  screen reader hears the one that appeared or changed, and
+                  not the other with it. The regions stay mounted while their
+                  content changes: one added along with its content may not
+                  be announced. */}
+              <Column size="half">
+                <div role="status" className="status-region">
+                  {showNotification && (
+                    <Notification
+                      color="success"
+                      isLight
+                      hasDelete
+                      onDelete={() => {
+                        setShowNotification(false);
+                        toggleRef.current?.focus();
+                      }}
+                    >
+                      <strong>Success!</strong> Your Vite + Bestax setup is
+                      working perfectly!
+                    </Notification>
+                  )}
+                </div>
 
-              {count > 10 && (
-                <Notification color="info" isLight>
-                  You&apos;ve clicked the button {count} times!
-                </Notification>
-              )}
-            </Column>
-          </Columns>
-        </Box>
-      </Container>
-    </>
+                <div role="status" className="status-region">
+                  {count > 10 && (
+                    <Notification color="info" isLight>
+                      You&apos;ve clicked the button {count} times!
+                    </Notification>
+                  )}
+                </div>
+              </Column>
+            </Columns>
+          </Box>
+        </Container>
+      </Section>
+    </main>
   );
 }
 

package/templates/vite/src/main.jsx

@@ -1,10 +1,11 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App.jsx';
 
-// Import Bestax CSS (Bulma + extras)
+// Bestax's stylesheet loads before the app's own CSS, so a named class in
+// src/App.css wins over a Bulma rule of the same weight.
 import '@allxsmith/bestax-bulma/bestax.css';
 import './index.css';
+import App from './App.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>

package/templates/vite-ts/README.md

@@ -6,15 +6,15 @@ This template provides a minimal setup to get React working in Vite with TypeScr
 
 ```bash
 pnpm install
-pnpm dev
+pnpm run dev
 ```
 
 ## Available Scripts
 
-- `pnpm dev` - Start development server
-- `pnpm build` - Build for production
-- `pnpm preview` - Preview production build
-- `pnpm lint` - Run ESLint
+- `pnpm run dev` - Start development server
+- `pnpm run build` - Build for production
+- `pnpm run preview` - Preview production build
+- `pnpm run lint` - Run ESLint
 
 ## Features
 
@@ -23,7 +23,6 @@ pnpm dev
 - 📦 bestax-bulma component library
 - 📘 TypeScript for type safety
 - 🔧 ESLint pre-configured
-- 🎯 Font Awesome icons included
 
 ## Learn More
 

package/templates/vite-ts/src/App.css

@@ -1 +1,14 @@
-/* App-specific styles - keep minimal, let Bulma handle the styling */
+/* App-specific styles - keep minimal, let Bulma handle the styling */
+
+/* A link inside running text needs more than its color to stand out
+   (WCAG 1.4.1), and no helper prop sets an underline. */
+.text-link {
+  text-decoration: underline;
+}
+
+/* Bulma spaces a notification from whatever follows it in the same parent,
+   and each notification here is alone in its status region, so the space
+   between two showing at once goes between their regions instead. */
+.status-region:not(:empty) + .status-region:not(:empty) {
+  margin-top: var(--bulma-block-spacing);
+}