@allxsmith/bestax-bulma 5.67.9 → 5.67.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.67.9",
+  "version": "5.67.11",
   "description": "Component library based on React, Bulma, with Agent Skills and MCP",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -228,5 +228,5 @@
     "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/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"
+  "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 — 110+ 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- **110+ 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. Modular Sass does the same for CSS, and 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

@@ -69,6 +69,11 @@ Rules the pattern encodes:
   dark-mode bug.
 - **Reuse `extras-*` mixins** for transitions, focus outlines, and screen-reader-only content
   instead of re-rolling them (focus style consistency is an a11y requirement).
+- **A part fixed to an edge of the window adds the scroll lock's room on that side**
+  (`$extras-scroll-lock-offset-left` or `-right`, from `_variables.scss`) to its offset there, as
+  `_affix.scss` and `_toast.scss` do. While an overlay locks the page, the window grows by the
+  room the page's scrollbar had and the lock pads `<html>` by it, which a fixed box doesn't see,
+  so without it the part moves by the scrollbar's width.
 - New CSS variables should be documented in
   `skills/bestax-theming/references/css-variables.md`, and the component's rows added to
   `skills/bestax-theming/references/themeable-components.md`, in the same PR.

package/src/scss/_variables.scss

@@ -61,6 +61,12 @@ $extras-size-large: var(--bulma-size-large, 1.5rem);
 // Spacing
 $extras-block-spacing: var(--bulma-block-spacing, 1.5rem);
 
+// The room the page's scrollbar gave back on each side while an overlay locks
+// the page's scrolling, which the lock sets on `<html>`, and 0 otherwise. A
+// part fixed to that edge of the window adds it to its offset there.
+$extras-scroll-lock-offset-left: var(--bulma-scroll-lock-offset-left, 0px);
+$extras-scroll-lock-offset-right: var(--bulma-scroll-lock-offset-right, 0px);
+
 // Borders and radius
 $extras-radius-small: var(--bulma-radius-small, 2px);
 $extras-radius: var(--bulma-radius, 4px);

package/src/scss/components/_affix.scss

@@ -33,15 +33,18 @@ $affix-z-index: $extras-z-index-dropdown - 1 !default;
 // stays on the right in right-to-left text. Each side adds the device's
 // safe-area inset for that edge, which is 0 unless the page sets
 // `viewport-fit=cover`. A margin from the spacing helpers adds to the
-// distance, since a fixed box's margin pushes it off its inset.
+// distance, since a fixed box's margin pushes it off its inset. The sides
+// also add the room the page's scrollbar gave back there while an overlay
+// locks the page, so the Affix stays put as the scrollbar goes.
 .#{iv.$class-prefix}affix {
   position: fixed;
   z-index: cv.getVar('affix-z-index');
   // As wide as its content, and never wider than the viewport less the
-  // offset and the safe area on both sides.
+  // offset, the safe area and the scrollbar's room on both sides.
   max-width: calc(
     100% - 2 * #{cv.getVar('affix-offset-horizontal')} -
-      env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
+      env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) -
+      #{$extras-scroll-lock-offset-left} - #{$extras-scroll-lock-offset-right}
   );
 
   &.#{iv.$class-prefix}is-top-right,
@@ -61,14 +64,16 @@ $affix-z-index: $extras-z-index-dropdown - 1 !default;
   &.#{iv.$class-prefix}is-top-right,
   &.#{iv.$class-prefix}is-bottom-right {
     right: calc(
-      #{cv.getVar('affix-offset-horizontal')} + env(safe-area-inset-right, 0px)
+      #{cv.getVar('affix-offset-horizontal')} + env(safe-area-inset-right, 0px) +
+        #{$extras-scroll-lock-offset-right}
     );
   }
 
   &.#{iv.$class-prefix}is-top-left,
   &.#{iv.$class-prefix}is-bottom-left {
     left: calc(
-      #{cv.getVar('affix-offset-horizontal')} + env(safe-area-inset-left, 0px)
+      #{cv.getVar('affix-offset-horizontal')} + env(safe-area-inset-left, 0px) +
+        #{$extras-scroll-lock-offset-left}
     );
   }
 }

package/src/scss/components/_index.scss

@@ -30,3 +30,4 @@
 @use 'pagination';
 @use 'affix';
 @use 'navbar';
+@use 'panel';

package/src/scss/components/_navbar.scss

@@ -3,13 +3,23 @@
 // on a button with no background. Forced colors (Windows' contrast themes)
 // replaces background colors, and Chromium paints the bars in the page's
 // Canvas color, so the burger vanishes while it still works. This keeps
-// the bars in ButtonText. Outside forced colors it changes nothing.
+// the bars in ButtonText.
 //
 // Bulma's CSS can land on either side of this partial, as it can for
 // `_delete.scss`, so the selector names its class twice to outrank Bulma's
 // `.navbar-burger span`, wherever the two load.
+//
+// A navbar fixed to the top or the bottom of the window (`Navbar fixed`)
+// spans it. While an overlay locks the page, the window takes back the room
+// the page's scrollbar had, and the lock pads the page by it, so a margin of
+// that room on each side keeps the navbar over the page as the scrollbar
+// goes. Outside a lock the margins are 0. A margin adds to the insets that
+// place the navbar, Bulma's or an app's, and Bulma sets none on a navbar, so
+// this needs no weight over Bulma's rules. `:where()` keeps it at none, so a
+// margin an app gives its navbar still wins.
 
 @use 'bulma/sass/utilities/initial-variables' as iv;
+@use '../variables' as *;
 
 @media (forced-colors: active) {
   .#{iv.$class-prefix}navbar-burger.#{iv.$class-prefix}navbar-burger span {
@@ -18,3 +28,11 @@
     background-color: ButtonText;
   }
 }
+
+:where(
+    .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-fixed-top,
+    .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-fixed-bottom
+  ) {
+  margin-left: $extras-scroll-lock-offset-left;
+  margin-right: $extras-scroll-lock-offset-right;
+}

package/src/scss/components/_panel.scss

@@ -0,0 +1,31 @@
+// Bestax Extras - Panel Styles
+// Bulma paints a panel's heading in the text color and writes its title in
+// `text-invert`, unless the panel has a color of its own. The dark scheme
+// lightens the text color but leaves `text-invert` near white, so on that
+// scheme a panel with no color has white text on a light gray heading.
+//
+// Text is chosen to read on the page background, so the page background
+// reads on text too. This gives the panel the scheme's own background
+// lightness as its `text-invert`, near white on the light scheme as before
+// and near black on the dark one. The heading is the only part of Bulma's
+// panel that reads `text-invert`. A colored panel takes the heading's text
+// from its own color's invert, so this leaves it as it is.
+//
+// Bulma declares `--bulma-text-invert-l` on the root and the panel's heading
+// variables on the panel, which resolve `var()` against the panel's own value,
+// so this reaches the heading whichever order Bulma's CSS and this partial
+// load in. Something inside a panel that reads `text-invert` itself, such as
+// the `has-text-text-invert` helper, gets the same value.
+
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+$panel-text-invert-l: cv.getVar('scheme-main-l') !default;
+
+.#{iv.$class-prefix}panel {
+  @include cv.register-vars(
+    (
+      'text-invert-l': #{$panel-text-invert-l},
+    )
+  );
+}

package/src/scss/components/_toast.scss

@@ -46,6 +46,14 @@ $toast-action-hover-opacity: 0.1 !default;
 // Toast container — positions toasts on screen and stacks multiples vertically.
 // Uses SCSS variables directly since the container is a parent of .toast
 // (CSS vars registered on .toast don't cascade up).
+//
+// While an overlay locks the page, the window's edges take back the room the
+// page's scrollbar had, so each side adds that room and a centered stack
+// moves by half of the difference: the toasts stay put as the scrollbar goes.
+$-centered-left: calc(
+  50% + (#{$extras-scroll-lock-offset-left} - #{$extras-scroll-lock-offset-right}) / 2
+);
+
 .#{iv.$class-prefix}toast-container {
   position: fixed;
   z-index: #{$toast-container-z-index};
@@ -54,24 +62,27 @@ $toast-action-hover-opacity: 0.1 !default;
   gap: #{$toast-container-gap};
   padding: #{$toast-container-padding};
   pointer-events: none;
-  max-width: 100%;
+  max-width: calc(
+    100% - #{$extras-scroll-lock-offset-left} -
+      #{$extras-scroll-lock-offset-right}
+  );
 
   // Top positions
   &.#{iv.$class-prefix}is-top-right {
     top: 0;
-    right: 0;
+    right: $extras-scroll-lock-offset-right;
     align-items: flex-end;
   }
 
   &.#{iv.$class-prefix}is-top-left {
     top: 0;
-    left: 0;
+    left: $extras-scroll-lock-offset-left;
     align-items: flex-start;
   }
 
   &.#{iv.$class-prefix}is-top-center {
     top: 0;
-    left: 50%;
+    left: $-centered-left;
     transform: translateX(-50%);
     align-items: center;
   }
@@ -80,21 +91,21 @@ $toast-action-hover-opacity: 0.1 !default;
   // 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;
+    right: $extras-scroll-lock-offset-right;
     align-items: flex-end;
     flex-direction: column-reverse;
   }
 
   &.#{iv.$class-prefix}is-bottom-left {
     bottom: 0;
-    left: 0;
+    left: $extras-scroll-lock-offset-left;
     align-items: flex-start;
     flex-direction: column-reverse;
   }
 
   &.#{iv.$class-prefix}is-bottom-center {
     bottom: 0;
-    left: 50%;
+    left: $-centered-left;
     transform: translateX(-50%);
     align-items: center;
     flex-direction: column-reverse;