@alexandregme/zljs 1.18.1 → 1.19.0

package/CHANGELOG.md

@@ -8,6 +8,25 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [1.19.0] - 2026-11-02
+
+### Added
+
+- `label` on `Spinner`: the name screen readers announce, `Loading` by default
+
+### Changed
+
+- `Spinner` is a status with a name (`role="status"`) and has no color of its own. It was always white, and now inherits the color from around it
+- `Loader` draws its spinner in the `primary` color, which holds 3:1 over the overlay on a white page. It was white, at 1.6:1. The `status` role moved from the overlay to the spinner, which takes the `label`
+
+#### Migration
+
+Search the app for `<Spinner`. On a dark surface, set a light text color around it, such as `text-white`. Remove a `role="status"` the app put around a `Spinner`, so there aren't two. `Loader` needs no change.
+
+### Fixed
+
+- `Loader` covers the whole page. It had no position of its own, so it started where it was rendered, below anything before it
+
 ## [1.18.1] - 2026-11-02
 
 ### Removed
@@ -263,7 +282,8 @@ Replace the shade with the class of the `color` being tested, for example `/(^|\
 
 The message of `Error` is `text-zl-danger`. `none` and `ghost` didn't change.
 
-[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.18.1...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.19.0...HEAD
+[1.19.0]: https://github.com/alexandregme/zljs/compare/v1.18.1...v1.19.0
 [1.18.1]: https://github.com/alexandregme/zljs/compare/v1.18.0...v1.18.1
 [1.18.0]: https://github.com/alexandregme/zljs/compare/v1.17.0...v1.18.0
 [1.17.0]: https://github.com/alexandregme/zljs/compare/v1.16.0...v1.17.0

package/dist/{chunk-KPSFYQYV.js → chunk-O6UAZGBC.js}

@@ -352,17 +352,30 @@ var spinnerIcons = {
 // core/spinner/spinner.styles.ts
 import { tv as tv4 } from "tailwind-variants";
 var spinner = tv4({
-  base: "inline-flex animate-spin text-white"
+  base: "inline-flex animate-spin"
 });
 
 // core/spinner/spinner.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Spinner = ({ variant = "circle", size = "md" }) => /* @__PURE__ */ jsx6("span", { "data-testid": "spinner", className: spinner(), children: /* @__PURE__ */ jsx6(Icon, { name: spinnerIcons[variant], size }) });
+var Spinner = ({
+  variant = "circle",
+  size = "md",
+  label = "Loading"
+}) => /* @__PURE__ */ jsx6(
+  "span",
+  {
+    "data-testid": "spinner",
+    role: "status",
+    "aria-label": label,
+    className: spinner(),
+    children: /* @__PURE__ */ jsx6(Icon, { name: spinnerIcons[variant], size })
+  }
+);
 
 // core/loader/loader.styles.ts
 import { tv as tv5 } from "tailwind-variants";
-var overlay = tv5({
-  base: "flex fixed justify-center items-center w-full h-full bg-black/20 z-50"
+var loader = tv5({
+  base: "flex fixed inset-0 justify-center items-center bg-black/20 text-zl-primary z-50"
 });
 
 // core/loader/loader.tsx
@@ -370,7 +383,7 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 var Loader = ({ label = "Loading" }) => {
   const fetching = useAppStore((s) => s.fetching);
   if (!fetching) return null;
-  return /* @__PURE__ */ jsx7("div", { role: "status", "aria-label": label, className: overlay(), children: /* @__PURE__ */ jsx7(Spinner, { size: "lg" }) });
+  return /* @__PURE__ */ jsx7("div", { className: loader(), children: /* @__PURE__ */ jsx7(Spinner, { size: "lg", label }) });
 };
 
 export {

package/dist/index.d.ts

@@ -431,9 +431,10 @@ type SpinnerVariant = "circle" | "dots" | "refresh";
 interface SpinnerProps {
     variant?: SpinnerVariant;
     size?: Size;
+    label?: string;
 }
 
-declare const Spinner: ({ variant, size }: SpinnerProps) => react.JSX.Element;
+declare const Spinner: ({ variant, size, label, }: SpinnerProps) => react.JSX.Element;
 
 interface LoaderProps {
     label?: string;

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   usePageStore,
   useRouterStore,
   useToastStore
-} from "./chunk-KPSFYQYV.js";
+} from "./chunk-O6UAZGBC.js";
 import {
   Error,
   FormInput,

package/dist/next/index.js

@@ -7,7 +7,7 @@ import {
   Toaster,
   usePageStore,
   useRouterStore
-} from "../chunk-KPSFYQYV.js";
+} from "../chunk-O6UAZGBC.js";
 
 // core/next/root-layout/root-layout.styles.ts
 import { tv } from "tailwind-variants";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",