@allxsmith/bestax-bulma 5.67.8 → 5.67.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.67.8",
+  "version": "5.67.10",
   "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/components/_datatable.scss

@@ -1,8 +1,9 @@
 // Bestax Extras - DataTable Styles
 // DataTable renders Bulma's own table, checkboxes and pager, which Bulma and
 // the Checkbox partial style. This adds what Bulma has no class for: the
-// toolbar above the table, the button a sortable header holds, and the
-// indicator that shows which way it sorts.
+// toolbar above the table, the button a sortable header holds, the
+// indicator that shows which way it sorts, and the height of a loading
+// row's skeleton lines.
 //
 // The sort button is styled on its own class rather than inside
 // `.data-table`, so a table built from `useDataTable`'s props, with no
@@ -119,6 +120,17 @@ $-descending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
   }
 }
 
+// While `loading`, each cell holds one skeleton line. Bulma draws a skeleton
+// line half a line of text tall, which left a loading row shorter than the
+// row that replaces it, so the table jumped when the data came. This one is
+// a line of the cell's text tall, as Stat's loading Skeleton is a line of its
+// figure. The extra class outranks Bulma's rule whichever sheet loads first,
+// and a browser without `lh` keeps Bulma's height.
+.#{iv.$class-prefix}data-table-skeleton.#{iv.$class-prefix}skeleton-lines
+  > div {
+  height: 1lh;
+}
+
 // The sorted header says which way in `aria-sort`, so the indicator reads it
 // from there, and markup built from `useDataTable`'s props shows it too.
 th[aria-sort='ascending'] > .#{iv.$class-prefix}data-table-sort::after {

package/src/scss/components/_index.scss

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

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