@allxsmith/bestax-bulma 5.57.0 → 5.57.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.57.0",
+  "version": "5.57.2",
   "description": "Component library based on React, Bulma, with Agent Skills and MCP",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -26,42 +26,42 @@
     "@mdi/font": "^7.4.47",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.0",
-    "@storybook/addon-docs": "^10.6.2",
-    "@storybook/addon-onboarding": "^10.6.2",
-    "@storybook/react-vite": "^10.6.2",
-    "@storybook/test-runner": "^0.26.0",
+    "@rollup/plugin-typescript": "^12.3.1",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/addon-onboarding": "^10.6.5",
+    "@storybook/addon-vitest": "^10.6.5",
+    "@storybook/react-vite": "^10.6.5",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.8",
-    "@types/jest": "^30.0.0",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.71.2",
-    "@typescript-eslint/parser": "^8.71.2",
+    "@typescript-eslint/eslint-plugin": "^8.72.1",
+    "@typescript-eslint/parser": "^8.72.1",
+    "@vitest/browser-playwright": "^5.0.5",
+    "@vitest/coverage-istanbul": "^5.0.5",
     "eslint": "^10.13.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.7",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.6.2",
+    "eslint-plugin-storybook": "^10.6.5",
     "ionicons": "^8.1.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^30.1.3",
     "material-icons": "^1.13.14",
-    "material-symbols": "^0.47.6",
+    "material-symbols": "^0.48.2",
     "playwright": "^1.64.1",
-    "prettier": "^3.9.9",
+    "prettier": "^3.9.10",
     "rimraf": "^6.0.1",
-    "rollup": "^4.64.10",
+    "rollup": "^4.66.0",
     "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-visualizer": "^7.1.1",
-    "sass": "^1.105.2",
-    "sass-embedded": "^1.105.2",
-    "storybook": "^10.6.2",
-    "ts-jest": "^29.4.15",
+    "sass": "^1.107.0",
+    "sass-embedded": "^1.107.0",
+    "storybook": "^10.6.5",
     "tslib": "^2.8.0",
     "typescript": "^6.0.3",
-    "vite": "^8.3.4"
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
   },
   "dependencies": {
     "bulma": "^1.0.4"
@@ -71,7 +71,7 @@
     "@mdi/font": "^7.4.47",
     "ionicons": "^8.0.0",
     "material-icons": "^1.13.10",
-    "material-symbols": "^0.34.1 || ^0.45.0 || ^0.46.0 || ^0.47.0",
+    "material-symbols": "^0.34.1 || ^0.45.0 || ^0.46.0 || ^0.47.0 || ^0.48.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -210,11 +210,11 @@
     "build": "rollup -c",
     "dev": "rollup -c --watch",
     "watch": "rollup -c --watch",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "bundle:stats": "rollup -c --configPlugin visualizer",
-    "lint": "eslint src",
+    "lint": "eslint src .storybook vitest.config.ts vitest.storybook.config.ts",
     "typecheck": "tsc --noEmit",
     "typecheck:tests": "tsc -p tsconfig.test.json --noEmit",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
@@ -224,9 +224,9 @@
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "release": "npx semantic-release",
-    "test-storybook": "test-storybook",
-    "test-storybook:dark": "STORYBOOK_THEME=dark test-storybook",
+    "test-storybook": "vitest run --config vitest.storybook.config.ts",
+    "test-storybook:dark": "STORYBOOK_THEME=dark vitest run --config vitest.storybook.config.ts",
     "test-storybook:ci": "node scripts/test-storybook-ci.mjs"
   },
-  "readme": "# @allxsmith/bestax-bulma\n\n[![npm version](https://img.shields.io/npm/v/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![npm downloads](https://img.shields.io/npm/dm/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue.svg)](https://www.typescriptlang.org/)\n[![Coverage](https://img.shields.io/badge/coverage-99%25-brightgreen.svg)](https://github.com/allxsmith/bestax/blob/main/bulma-ui/jest.config.js)\n[![Bulma](https://img.shields.io/badge/Bulma-v1.0+-00d1b2.svg)](https://bulma.io)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Socket Badge](https://badge.socket.dev/npm/package/@allxsmith/bestax-bulma/latest)](https://socket.dev/npm/package/@allxsmith/bestax-bulma/overview)\n[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/allxsmith/bestax/badge)](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361/badge)](https://www.bestpractices.dev/projects/14361)\n[![npm provenance](https://img.shields.io/badge/npm-provenance-3fb950.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance)\n[![Security policy](https://img.shields.io/badge/security-policy-blue.svg)](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)\n\nTypeScript-first React component library for the **Bulma v1** CSS framework — 80+ fully typed, tree-shakeable components, including extras like Carousel, Dialog, Sidebar, Steps, and date/time pickers.\n\n**Requires React `^18 || ^19`.** Bulma v1 is the only runtime dependency and installs automatically.\n\nPart of the [bestax monorepo](https://github.com/allxsmith/bestax) — see also [`create-bestax`](https://www.npmjs.com/package/create-bestax) for scaffolding new projects.\n\n---\n\n## 📚 Comprehensive Documentation\n\n**Looking for full documentation, guides, API references, and best practices?**  \n👉 **Visit our official docs at [https://bestax.io](https://bestax.io)**\n\n> The documentation site is the best place to learn about all bestax-bulma features, usage patterns, and updates. We strongly recommend using the docs as your primary resource!\n\n---\n\n## 🚀 Getting Started\n\nStarting fresh? Scaffold a ready-to-go app instead: `npm create bestax@latest my-app`.\n\n### 1. Install the package\n\n```bash\nnpm install @allxsmith/bestax-bulma\n# or\npnpm add @allxsmith/bestax-bulma\n```\n\n### 2. Import the CSS\n\nThe library bundles its own CSS (Bulma v1 + the bestax extras). Import it once in your main JS/TS file:\n\n```js\nimport '@allxsmith/bestax-bulma/bestax.css';\n```\n\nPrefer stock Bulma? That works too — add `extras.css` for the bestax-only components' styles:\n\n```js\nimport 'bulma/css/bulma.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';\n```\n\nMore flavors are shipped as subpath exports — prefixed classes (`versions/bestax-prefixed.css` + `<ConfigProvider classPrefix=\"bestax-\">`), no-helpers, no-dark-mode, and raw SCSS at `@allxsmith/bestax-bulma/scss/*`. See the [installation guide](https://bestax.io/docs/guides/getting-started/installation).\n\n### 3. (Optional) Add an Icon Library\n\nFive icon libraries are supported as optional peer dependencies: [Font Awesome](https://fontawesome.com/) (`@fortawesome/fontawesome-free`), Material Design Icons (`@mdi/font`), `ionicons`, `material-icons`, and `material-symbols`.\n\n```bash\nnpm install @fortawesome/fontawesome-free\n```\n\nSet the default for your whole app with [`ConfigProvider`](https://bestax.io/docs/api/helpers/config), e.g. `<ConfigProvider iconLibrary=\"fa\">`.\n\n### 4. Quick Example\n\n```tsx\nimport '@allxsmith/bestax-bulma/bestax.css';\nimport { Button } from '@allxsmith/bestax-bulma';\n\nfunction App() {\n  return (\n    <Button color=\"primary\" onClick={() => alert('Clicked!')}>\n      Click Me\n    </Button>\n  );\n}\n\nexport default App;\n```\n\n### 5. Theming and Dark Mode\n\nWrap your app in [`Theme`](https://bestax.io/docs/api/helpers/theme) to override Bulma's `--bulma-*` CSS variables and control the color scheme:\n\n```tsx\nimport { Theme } from '@allxsmith/bestax-bulma';\n\n<Theme isRoot colorMode=\"system\">\n  {/* colorMode: 'light' | 'dark' | 'system' */}\n  <App />\n</Theme>;\n```\n\n---\n\n## ⭐ Why Choose bestax-bulma?\n\n- **Supports the latest Bulma v1.x**\n  Other React Bulma libraries are stuck on Bulma 0.9.4 — bestax-bulma is built for the future.\n- **80+ components**\n  All of Bulma v1, plus extras: Carousel, Dialog, Sidebar, Steps, Autocomplete, Taginput, DateInput/TimeInput/DateTimeInput pickers, and more. (Migrating from v2? Snackbar merged into [Toast](https://bestax.io/docs/api/components/toast).)\n- **Dark mode & theming built in**\n  `Theme colorMode`, `--bulma-*` variable overrides, and prefixed-class builds via `ConfigProvider`.\n- **Just one dependency: Bulma**\n  Every Bulma library depends on it — we ship it automatically. Clean install, fewer security concerns.\n- **Tree-shakeable ESM**\n  Import only what you use; your bundler drops the rest. A CJS build is there for `require`.\n- **99% unit test coverage**\n  Enforced in CI by the [jest config](https://github.com/allxsmith/bestax/blob/main/bulma-ui/jest.config.js) — not just claimed.\n- **100% TypeScript**\n  Full type safety for you and your team.\n- **Active developer support**\n  Issues? Questions? PRs? Get fast responses and real improvements.\n\n---\n\n## 📦 NPM Package\n\nView the package on npmjs:  \n👉 [https://www.npmjs.com/package/@allxsmith/bestax-bulma](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n\n---\n\n## 🔒 Hardened by default\n\nThis package is one runtime dependency deep (Bulma) and is published under a deliberately strict pipeline:\n\n- **Signed provenance** — every release carries a sigstore attestation linking the tarball to the exact commit and CI run that built it. Verify it in the **Provenance** section of the [npm page](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance), or run `npm audit signatures` in your project.\n- **npm OIDC trusted publishing** — short-lived, per-run credentials; no long-lived `NPM_TOKEN` exists to be stolen. Release commits and tags are GPG-signed.\n- **Socket.dev scans every PR** for malware, install scripts, obfuscated code, and privilege escalation before it can reach `main`.\n- **Dependencies are a deliberate act** — install scripts are blocked unless individually allow-listed, freshly published versions are refused for 3 days, and CI installs only what the reviewed lockfile resolves.\n- **Every GitHub Action is pinned to a full commit SHA**, so a compromised action release can't roll silently into a build of this package.\n- **CodeQL, Dependency Review, and Dependabot** run continuously, alongside a high-severity `pnpm audit` gate.\n- **Layered AI review before merge** — [CodeRabbit](https://coderabbit.ai) plus an independent adversarial Claude review (a different model from the one writing AI-authored changes), on top of required green CI, an approving review, and a human merge.\n\nFull detail: [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) · [Security guide](https://bestax.io/docs/guides/security)\n\n---\n\n## 📚 Documentation\n\n**For full documentation, guides, and best practices, please use our official docs site:**\n\n👉 [https://bestax.io](https://bestax.io)\n\n> **Always refer to the [documentation site](https://bestax.io) first:**  \n> It's the most complete and up-to-date source for everything bestax-bulma!\n\n---\n\n## 📖 Storybook\n\nExplore live, interactive component examples in our Storybook:\n\n👉 [https://bestax.io/storybook](https://bestax.io/storybook)\n\n---\n\n## 🤖 For AI Tools\n\nBuilding with an AI agent (Claude Code, Cursor, Copilot)? bestax-bulma ships LLM-optimized docs:\n\n- 📘 **[LLMs guide](https://bestax.io/docs/guides/llms)** — how to use the library with AI tools\n- 📄 **[llms.txt](https://bestax.io/llms.txt)** — curated index · **[llms-full.txt](https://bestax.io/llms-full.txt)** — the full docs in one file · every docs page is also served as raw markdown\n- 📦 **In the npm package** — the tarball ships `llms.txt`, `AGENTS.md`, and `CLAUDE.md` pointer files, so agents exploring `node_modules` land on these resources by filename\n- 🧩 **[Agent Skills](https://bestax.io/docs/skills/intro)** — teach your agent the bestax way:\n\n  | Skill                     | Use it when…                                                                     |\n  | ------------------------- | -------------------------------------------------------------------------------- |\n  | `bestax-layout-scaffold`  | Turning a high-level request (dashboard, landing page, …) into a responsive page |\n  | `bestax-form`             | Building forms — Field/Control composition and the full input inventory          |\n  | `bestax-theming`          | Customizing colors, fonts, dark mode via `Theme` and `--bulma-*` variables       |\n  | `bestax-custom-component` | Building a new custom component beyond stock Bulma, the bestax way               |\n  | `bestax-icons`            | Adding icons — Icon/IconText and the five supported icon libraries               |\n  | `bestax-optimize`         | Shrinking the built CSS — flavor builds, modular Sass, import hygiene            |\n  | `bestax-migrate`          | Moving an app off react-bulma-components (v4) onto bestax-bulma                  |\n\n  ```bash\n  npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold\n  ```\n\n  New projects get the skills automatically with `npm create bestax@latest my-app --skills` (plus a generated `CLAUDE.md`).\n\n---\n\n## 🙏 Attribution\n\nbestax-bulma is built on top of the incredible [Bulma](https://bulma.io) CSS framework,\n© [Jeremy Thomas](https://github.com/jgthms) and licensed under the\n[MIT License](https://github.com/jgthms/bulma/blob/main/LICENSE), whose notice ships with the\npackage in [THIRD-PARTY-NOTICES.md](THIRD-PARTY-NOTICES.md). Some example content and documentation is\nadapted from the Bulma website\n([CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)), © Jeremy Thomas.\n\nIf you find Bulma useful, please consider\n[sponsoring Jeremy Thomas](https://github.com/sponsors/jgthms) to support its continued\ndevelopment.\n\n_We are not affiliated with Bulma or Jeremy Thomas in any way — we're just big fans of the\nBulma framework!_\n\n## License\n\nSource code licensed MIT\n"
+  "readme": "# @allxsmith/bestax-bulma\n\n[![npm version](https://img.shields.io/npm/v/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![npm downloads](https://img.shields.io/npm/dm/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n[![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue.svg)](https://www.typescriptlang.org/)\n[![Coverage](https://img.shields.io/badge/coverage-99%25-brightgreen.svg)](https://github.com/allxsmith/bestax/blob/main/bulma-ui/vitest.config.ts)\n[![Bulma](https://img.shields.io/badge/Bulma-v1.0+-00d1b2.svg)](https://bulma.io)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Socket Badge](https://badge.socket.dev/npm/package/@allxsmith/bestax-bulma/latest)](https://socket.dev/npm/package/@allxsmith/bestax-bulma/overview)\n[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/allxsmith/bestax/badge)](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361/badge)](https://www.bestpractices.dev/projects/14361)\n[![npm provenance](https://img.shields.io/badge/npm-provenance-3fb950.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance)\n[![Security policy](https://img.shields.io/badge/security-policy-blue.svg)](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)\n\nTypeScript-first React component library for the **Bulma v1** CSS framework — 80+ fully typed, tree-shakeable components, including extras like Carousel, Dialog, Sidebar, Steps, and date/time pickers.\n\n**Requires React `^18 || ^19`.** Bulma v1 is the only runtime dependency and installs automatically.\n\nPart of the [bestax monorepo](https://github.com/allxsmith/bestax) — see also [`create-bestax`](https://www.npmjs.com/package/create-bestax) for scaffolding new projects.\n\n---\n\n## 📚 Comprehensive Documentation\n\n**Looking for full documentation, guides, API references, and best practices?**  \n👉 **Visit our official docs at [https://bestax.io](https://bestax.io)**\n\n> The documentation site is the best place to learn about all bestax-bulma features, usage patterns, and updates. We strongly recommend using the docs as your primary resource!\n\n---\n\n## 🚀 Getting Started\n\nStarting fresh? Scaffold a ready-to-go app instead: `npm create bestax@latest my-app`.\n\n### 1. Install the package\n\n```bash\nnpm install @allxsmith/bestax-bulma\n# or\npnpm add @allxsmith/bestax-bulma\n```\n\n### 2. Import the CSS\n\nThe library bundles its own CSS (Bulma v1 + the bestax extras). Import it once in your main JS/TS file:\n\n```js\nimport '@allxsmith/bestax-bulma/bestax.css';\n```\n\nPrefer stock Bulma? That works too — add `extras.css` for the bestax-only components' styles:\n\n```js\nimport 'bulma/css/bulma.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';\n```\n\nMore flavors are shipped as subpath exports — prefixed classes (`versions/bestax-prefixed.css` + `<ConfigProvider classPrefix=\"bestax-\">`), no-helpers, no-dark-mode, and raw SCSS at `@allxsmith/bestax-bulma/scss/*`. See the [installation guide](https://bestax.io/docs/guides/getting-started/installation).\n\n### 3. (Optional) Add an Icon Library\n\nFive icon libraries are supported as optional peer dependencies: [Font Awesome](https://fontawesome.com/) (`@fortawesome/fontawesome-free`), Material Design Icons (`@mdi/font`), `ionicons`, `material-icons`, and `material-symbols`.\n\n```bash\nnpm install @fortawesome/fontawesome-free\n```\n\nSet the default for your whole app with [`ConfigProvider`](https://bestax.io/docs/api/helpers/config), e.g. `<ConfigProvider iconLibrary=\"fa\">`.\n\n### 4. Quick Example\n\n```tsx\nimport '@allxsmith/bestax-bulma/bestax.css';\nimport { Button } from '@allxsmith/bestax-bulma';\n\nfunction App() {\n  return (\n    <Button color=\"primary\" onClick={() => alert('Clicked!')}>\n      Click Me\n    </Button>\n  );\n}\n\nexport default App;\n```\n\n### 5. Theming and Dark Mode\n\nWrap your app in [`Theme`](https://bestax.io/docs/api/helpers/theme) to override Bulma's `--bulma-*` CSS variables and control the color scheme:\n\n```tsx\nimport { Theme } from '@allxsmith/bestax-bulma';\n\n<Theme isRoot colorMode=\"system\">\n  {/* colorMode: 'light' | 'dark' | 'system' */}\n  <App />\n</Theme>;\n```\n\n---\n\n## ⭐ Why Choose bestax-bulma?\n\n- **Supports the latest Bulma v1.x**\n  Other React Bulma libraries are stuck on Bulma 0.9.4 — bestax-bulma is built for the future.\n- **80+ components**\n  All of Bulma v1, plus extras: Carousel, Dialog, Sidebar, Steps, Autocomplete, Taginput, DateInput/TimeInput/DateTimeInput pickers, and more. (Migrating from v2? Snackbar merged into [Toast](https://bestax.io/docs/api/components/toast).)\n- **Dark mode & theming built in**\n  `Theme colorMode`, `--bulma-*` variable overrides, and prefixed-class builds via `ConfigProvider`.\n- **Just one dependency: Bulma**\n  Every Bulma library depends on it — we ship it automatically. Clean install, fewer security concerns.\n- **Tree-shakeable ESM**\n  Import only what you use; your bundler drops the rest. A CJS build is there for `require`.\n- **99% unit test coverage**\n  Enforced in CI by the [Vitest config](https://github.com/allxsmith/bestax/blob/main/bulma-ui/vitest.config.ts) — not just claimed.\n- **100% TypeScript**\n  Full type safety for you and your team.\n- **Active developer support**\n  Issues? Questions? PRs? Get fast responses and real improvements.\n\n---\n\n## 📦 NPM Package\n\nView the package on npmjs:  \n👉 [https://www.npmjs.com/package/@allxsmith/bestax-bulma](https://www.npmjs.com/package/@allxsmith/bestax-bulma)\n\n---\n\n## 🔒 Hardened by default\n\nThis package is one runtime dependency deep (Bulma) and is published under a deliberately strict pipeline:\n\n- **Signed provenance** — every release carries a sigstore attestation linking the tarball to the exact commit and CI run that built it. Verify it in the **Provenance** section of the [npm page](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance), or run `npm audit signatures` in your project.\n- **npm OIDC trusted publishing** — short-lived, per-run credentials; no long-lived `NPM_TOKEN` exists to be stolen. Release commits and tags are GPG-signed.\n- **Socket.dev scans every PR** for malware, install scripts, obfuscated code, and privilege escalation before it can reach `main`.\n- **Dependencies are a deliberate act** — install scripts are blocked unless individually allow-listed, freshly published versions are refused for 3 days, and CI installs only what the reviewed lockfile resolves.\n- **Every GitHub Action is pinned to a full commit SHA**, so a compromised action release can't roll silently into a build of this package.\n- **CodeQL, Dependency Review, and Dependabot** run continuously, alongside a high-severity `pnpm audit` gate.\n- **Layered AI review before merge** — [CodeRabbit](https://coderabbit.ai) plus an independent adversarial Claude review (a different model from the one writing AI-authored changes), on top of required green CI, an approving review, and a human merge.\n\nFull detail: [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) · [Security guide](https://bestax.io/docs/guides/security)\n\n---\n\n## 📚 Documentation\n\n**For full documentation, guides, and best practices, please use our official docs site:**\n\n👉 [https://bestax.io](https://bestax.io)\n\n> **Always refer to the [documentation site](https://bestax.io) first:**  \n> It's the most complete and up-to-date source for everything bestax-bulma!\n\n---\n\n## 📖 Storybook\n\nExplore live, interactive component examples in our Storybook:\n\n👉 [https://bestax.io/storybook](https://bestax.io/storybook)\n\n---\n\n## 🤖 For AI Tools\n\nBuilding with an AI agent (Claude Code, Cursor, Copilot)? bestax-bulma ships LLM-optimized docs:\n\n- 📘 **[LLMs guide](https://bestax.io/docs/guides/llms)** — how to use the library with AI tools\n- 📄 **[llms.txt](https://bestax.io/llms.txt)** — curated index · **[llms-full.txt](https://bestax.io/llms-full.txt)** — the full docs in one file · every docs page is also served as raw markdown\n- 📦 **In the npm package** — the tarball ships `llms.txt`, `AGENTS.md`, and `CLAUDE.md` pointer files, so agents exploring `node_modules` land on these resources by filename\n- 🧩 **[Agent Skills](https://bestax.io/docs/skills/intro)** — teach your agent the bestax way:\n\n  | Skill                     | Use it when…                                                                     |\n  | ------------------------- | -------------------------------------------------------------------------------- |\n  | `bestax-layout-scaffold`  | Turning a high-level request (dashboard, landing page, …) into a responsive page |\n  | `bestax-form`             | Building forms — Field/Control composition and the full input inventory          |\n  | `bestax-theming`          | Customizing colors, fonts, dark mode via `Theme` and `--bulma-*` variables       |\n  | `bestax-custom-component` | Building a new custom component beyond stock Bulma, the bestax way               |\n  | `bestax-icons`            | Adding icons — Icon/IconText and the five supported icon libraries               |\n  | `bestax-optimize`         | Shrinking the built CSS — flavor builds, modular Sass, import hygiene            |\n  | `bestax-migrate`          | Moving an app off react-bulma-components (v4) onto bestax-bulma                  |\n\n  ```bash\n  npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold\n  ```\n\n  New projects get the skills automatically with `npm create bestax@latest my-app --skills` (plus a generated `CLAUDE.md`).\n\n---\n\n## 🙏 Attribution\n\nbestax-bulma is built on top of the incredible [Bulma](https://bulma.io) CSS framework,\n© [Jeremy Thomas](https://github.com/jgthms) and licensed under the\n[MIT License](https://github.com/jgthms/bulma/blob/main/LICENSE), whose notice ships with the\npackage in [THIRD-PARTY-NOTICES.md](THIRD-PARTY-NOTICES.md). Some example content and documentation is\nadapted from the Bulma website\n([CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)), © Jeremy Thomas.\n\nIf you find Bulma useful, please consider\n[sponsoring Jeremy Thomas](https://github.com/sponsors/jgthms) to support its continued\ndevelopment.\n\n_We are not affiliated with Bulma or Jeremy Thomas in any way — we're just big fans of the\nBulma framework!_\n\n## License\n\nSource code licensed MIT\n"
 }

package/src/scss/CLAUDE.md

@@ -12,7 +12,10 @@ of their own — Bulma provides it. A partial exists only for components that ex
 - `components/`, `form/`, `elements/`, `layout/`, `helpers/` — one `_foo.scss` partial per extra,
   **registered in that folder's `_index.scss`** (an unregistered partial silently ships nothing)
 - `_variables.scss` — `$extras-*` tokens derived from Bulma's HSL channel vars (`--bulma-primary-h/s/l`)
-- `_mixins.scss` — shared mixins: `extras-transition`, `extras-focus-outline` (a11y), `extras-sr-only`
+- `_mixins.scss` — shared mixins: `extras-transition`, `extras-focus-outline` (a11y), `extras-sr-only`.
+  It loads no Bulma module, since tests compile it with only this folder on the load path
+- `_selected-row.scss` — `extras-selected-table-cell`, the cells Checkbox's and Radio's
+  selected-row rules share; it reads Bulma's `$colors`, which is why it isn't in `_mixins.scss`
 - `versions/` — the flavor builds: `bestax-prefixed`, `bestax-no-helpers`, `bestax-no-dark-mode`,
   `bestax-no-helpers-prefixed`. A new partial is included by all of them automatically (they reuse
   the same `_index` imports), but must **work** under each — especially the prefixed build.

package/src/scss/_selected-row.scss

@@ -0,0 +1,43 @@
+// Bestax Extras - the cells of a selected table row
+// A mixin Checkbox and Radio share, so the cells their selected-row rules
+// name can't drift apart. It reads Bulma's `$colors`, so it lives here rather
+// than in `_mixins.scss`, which compiles with no Bulma to load.
+
+@use 'sass:list';
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/derived-variables' as dv;
+
+// The cells of a table that sit on Bulma's selected-row fill (`Tr
+// isSelected`, or a cell with `is-selected`), for a control drawn in the
+// primary color, which the fill is too. Name the step from the cell down to
+// the control in the content with a child combinator (`> .styled-checkbox`):
+// one inside a menu, a card or a table nested in the cell sits on that
+// surface's own background instead.
+//
+// A cell with a color of its own (`Td color="white"`) paints its own
+// background over the row's, and so does every cell of a row with a color
+// (`Tr color="white" isSelected`), which hands its color to its cells. Both
+// are left out. Bulma colors those cells with custom properties alone, which
+// a selector can't read, so the cells are named by class, one for each color
+// Bulma makes them from: its `$colors` map, which its table's `$table-colors`
+// is built from, custom colors included. A selected cell is the row's fill
+// whatever its color, as Bulma paints it.
+@mixin extras-selected-table-cell {
+  $colored: ();
+  @each $name, $color in dv.$colors {
+    $colored: list.append(
+      $colored,
+      '.#{iv.$class-prefix}is-#{$name}',
+      $separator: comma
+    );
+  }
+
+  .#{iv.$class-prefix}table {
+    tr.#{iv.$class-prefix}is-selected:not(#{$colored}) > td:not(#{$colored}),
+    tr.#{iv.$class-prefix}is-selected:not(#{$colored}) > th:not(#{$colored}),
+    td.#{iv.$class-prefix}is-selected,
+    th.#{iv.$class-prefix}is-selected {
+      @content;
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -25,3 +25,4 @@
 @use 'scrollarea';
 @use 'command';
 @use 'datatable';
+@use 'pagination';

package/src/scss/components/_pagination.scss

@@ -0,0 +1,25 @@
+// Bestax Extras - Pagination Styles
+// Bulma marks the current page link with a fill, a border color and a text
+// color, and nothing else, and forced colors (Windows' contrast themes)
+// replaces all three with the system's, so the current page looks like every
+// other page there. This draws it in Highlight and HighlightText, the pair the
+// system keeps for a selection, the way the themed Checkbox marks a checked
+// box. `forced-color-adjust: none` keeps them. Outside forced colors it
+// changes nothing.
+//
+// It reads the classes Bulma highlights, `is-current` and its other name
+// `is-selected`, so a hand-written current link gets it too, and so does
+// `DataTable`'s pager, which is a `Pagination`. Two classes outrank Bulma's
+// colors for a link, wherever the two stylesheets load.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}pagination-link.#{iv.$class-prefix}is-current,
+  .#{iv.$class-prefix}pagination-link.#{iv.$class-prefix}is-selected {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+}

package/src/scss/components/_toast.scss

@@ -76,7 +76,8 @@ $toast-action-hover-opacity: 0.1 !default;
     align-items: center;
   }
 
-  // Bottom positions — column-reverse so newer toasts appear nearest the edge
+  // Bottom positions: column-reverse, so a stack grows up from the bottom
+  // edge as a top one grows down from the top, the first toast nearest it
   &.#{iv.$class-prefix}is-bottom-right {
     bottom: 0;
     right: 0;

package/src/scss/form/_checkbox.scss

@@ -2,11 +2,10 @@
 // Custom-styled checkbox with colors, sizes, and visual states
 // Follows Bulma v1 CSS variable convention (see _dialog.scss)
 
-@use "sass:list";
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
-@use "bulma/sass/utilities/derived-variables" as dv;
 @use "bulma/sass/utilities/mixins" as mx;
+@use "../selected-row" as *;
 
 // Bulma's horizontal field: `.field-label` takes one part of the row and
 // `.field-body` five, after the label's `margin-inline-end`. Private, since
@@ -165,9 +164,11 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     }
   }
 
-  // Label text
+  // Label text. The gap is on the text's inline start, the side the box is
+  // on: the row mirrors on a right-to-left page, and a physical
+  // `margin-left` would stay on the far side and leave the text on the box.
   .#{iv.$class-prefix}control-label {
-    margin-left: cv.getVar("checkbox-label-gap");
+    margin-inline-start: cv.getVar("checkbox-label-gap");
     line-height: 1.5;
   }
 }
@@ -194,44 +195,19 @@ $-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
 // read.
 //
 // Only a Checkbox placed straight in one of those cells sits on the row's
-// fill, so the rule names each step down to it rather than any checkbox
-// below the row. One inside a menu, a card or a table nested in the cell sits
-// on that surface's own background, and keeps its own colors there.
-//
-// A cell with a color of its own (`Td color="white"`) paints its own
-// background over the row's, and so does every cell of a row with a color
-// (`Tr color="white" isSelected`), which hands its color to its cells. Both
-// are left out, and a box there keeps its usual look. Bulma colors those cells with custom properties alone, which a
-// selector can't read, so the cells are named by class, one for each color
-// Bulma makes them from: its `$colors` map, which its table's
-// `$table-colors` is built from, custom colors included. A selected cell is
-// the row's fill whatever its color, as Bulma paints it.
-$-colored-cells: ();
-@each $name, $color in dv.$colors {
-  $-colored-cells: list.append(
-    $-colored-cells,
-    ".#{iv.$class-prefix}is-#{$name}",
-    $separator: comma
-  );
-}
-
-.#{iv.$class-prefix}table {
-  tr.#{iv.$class-prefix}is-selected:not(#{$-colored-cells})
-    > td:not(#{$-colored-cells}),
-  tr.#{iv.$class-prefix}is-selected:not(#{$-colored-cells})
-    > th:not(#{$-colored-cells}),
-  td.#{iv.$class-prefix}is-selected,
-  th.#{iv.$class-prefix}is-selected {
-    > .#{iv.$class-prefix}styled-checkbox {
-      @include cv.register-vars(
-        (
-          "checkbox-border-color": #{cv.getVar("table-row-active-color")},
-          "checkbox-active-color": #{cv.getVar("table-row-active-color")},
-          "checkbox-indeterminate-color": #{cv.getVar("table-row-active-color")},
-          "checkbox-check-color": #{cv.getVar("table-row-active-background-color")},
-        )
-      );
-    }
+// fill, and cells with a color of their own are left out, so a box in a
+// menu, a nested table or a colored cell keeps its usual look. The mixin
+// names the cells, and Radio's rule reads the same list.
+@include extras-selected-table-cell {
+  > .#{iv.$class-prefix}styled-checkbox {
+    @include cv.register-vars(
+      (
+        "checkbox-border-color": #{cv.getVar("table-row-active-color")},
+        "checkbox-active-color": #{cv.getVar("table-row-active-color")},
+        "checkbox-indeterminate-color": #{cv.getVar("table-row-active-color")},
+        "checkbox-check-color": #{cv.getVar("table-row-active-background-color")},
+      )
+    );
   }
 }
 

package/src/scss/form/_combobox.scss

@@ -284,11 +284,22 @@ $combobox-sizes: (
   }
 }
 
+// A line between a group and whatever comes before it, and between a group
+// and items with no group after it, which would otherwise read as the group's
+// last items. It's a border, which forced colors keeps.
 .#{iv.$class-prefix}combobox-group:not(:first-child) {
   border-top: 1px solid cv.getVar('combobox-divider-color');
   margin-top: cv.getVar('combobox-item-padding-y');
 }
 
+.#{iv.$class-prefix}combobox-group:has(
+    + :not(.#{iv.$class-prefix}combobox-group)
+  ) {
+  border-bottom: 1px solid cv.getVar('combobox-divider-color');
+  margin-bottom: cv.getVar('combobox-item-padding-y');
+  padding-bottom: cv.getVar('combobox-item-padding-y');
+}
+
 .#{iv.$class-prefix}combobox-group-label {
   padding: cv.getVar('combobox-item-padding-y')
     cv.getVar('combobox-item-padding-x') 0.125rem;

package/src/scss/form/_radio.scss

@@ -5,6 +5,7 @@
 @use "bulma/sass/utilities/initial-variables" as iv;
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/mixins" as mx;
+@use "../selected-row" as *;
 
 // Bulma's horizontal field: `.field-label` takes one part of the row and
 // `.field-body` five, after the label's `margin-inline-end`. Private, since
@@ -124,9 +125,12 @@ $radio-transition-duration: cv.getVar("duration") !default;
     }
   }
 
-  // Label text
+  // Label text. The gap is on the text's inline start, the side the circle
+  // is on: the row mirrors on a right-to-left page, and a physical
+  // `margin-left` would stay on the far side and leave the text on the
+  // circle.
   .#{iv.$class-prefix}control-label {
-    margin-left: cv.getVar("radio-label-gap");
+    margin-inline-start: cv.getVar("radio-label-gap");
     line-height: 1.5;
   }
 }
@@ -142,6 +146,28 @@ $radio-transition-duration: cv.getVar("duration") !default;
   }
 }
 
+// On Bulma's selected table row (`Tr isSelected`, or a cell with
+// `is-selected`), the row's fill is the same color a checked radio draws its
+// ring and its dot in, so the radio would vanish into it. There the ring and
+// the dot take the row's text color, as Checkbox's box does, and so does an
+// unchecked ring. This outranks the color variants on purpose: the row's own
+// pair is the one Bulma made to read on that fill.
+//
+// Only a Radio placed straight in one of those cells sits on the row's fill,
+// and cells with a color of their own are left out, so a radio in a menu, a
+// nested table or a colored cell keeps its usual look. The mixin names the
+// cells, and Checkbox's rule reads the same list.
+@include extras-selected-table-cell {
+  > .#{iv.$class-prefix}styled-radio {
+    @include cv.register-vars(
+      (
+        "radio-border-color": #{cv.getVar("table-row-active-color")},
+        "radio-active-color": #{cv.getVar("table-row-active-color")},
+      )
+    );
+  }
+}
+
 // Size variants
 .#{iv.$class-prefix}styled-radio.#{iv.$class-prefix}is-small {
   font-size: cv.getVar("size-small");

package/src/scss/form/_switch.scss

@@ -131,19 +131,23 @@ $switch-thin-circle-size: 1.25em !default;
     }
   }
 
-  // Label text
+  // Label text. The gap is on the text's inline start, the side the track
+  // is on: the row mirrors on a right-to-left page, and a physical
+  // `margin-left` would stay on the far side and leave the text on the
+  // track.
   .#{iv.$class-prefix}control-label {
-    margin-left: cv.getVar("switch-label-gap");
+    margin-inline-start: cv.getVar("switch-label-gap");
     line-height: cv.getVar("switch-height");
   }
 
-  // RTL support
+  // Label first: the reversed row puts the track on the text's inline end,
+  // in either page direction, so the gap moves there.
   &.#{iv.$class-prefix}is-rtl {
     flex-direction: row-reverse;
 
     .#{iv.$class-prefix}control-label {
-      margin-left: 0;
-      margin-right: cv.getVar("switch-label-gap");
+      margin-inline-start: 0;
+      margin-inline-end: cv.getVar("switch-label-gap");
     }
   }
 }

package/src/scss/form/_taginput.scss

@@ -128,9 +128,13 @@ $taginput-transition-duration: cv.getVar("duration") !default;
       align-items: center;
       gap: cv.getVar("taginput-tag-gap");
 
+      // The remove button comes after the text, so its gap is on its inline
+      // start and it reaches into the tag's padding on its inline end, as
+      // Bulma's own tag does it. Physical margins put the gap on the far
+      // side on a right-to-left page, and the button on the text.
       .#{iv.$class-prefix}delete {
-        margin-left: 0.25rem;
-        margin-right: -0.25rem;
+        margin-inline-start: 0.25rem;
+        margin-inline-end: -0.25rem;
       }
     }
   }