create-bestax 4.2.14 → 4.2.15

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);
+}