@alexandregme/zljs 1.18.1 → 1.19.1

package/CHANGELOG.md

@@ -8,6 +8,45 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [1.19.1] - 2026-11-03
+
+### Changed
+
+- Collapsed `Sidebar` shows only the logout button in its footer. The avatar, name and email come back when it expands, and the footer and the collapse button keep their height in both states, at 64px and 56px
+- The collapse button of `Sidebar` is named by `collapseLabel` while expanded, no longer `Collapse sidebar`, and shows only its icon when collapsed
+- `Sidebar` links have fewer elements and look the same: the `Icon` is a direct child of the link, and the home link has no empty `span` when there is no `homeLabel`
+
+#### Migration
+
+Search the app's tests for `Collapse sidebar` and replace it with the value the app passes in `collapseLabel`. `Expand sidebar` stays.
+
+### Fixed
+
+- Collapsed `Sidebar` can log out with a mouse. The button sat outside the visible area, and focusing it with the keyboard scrolled the sidebar sideways, out of view
+- `Sidebar` links draw their own focus outline in the text color. They relied on the browser's default, which was 2.53:1 in Chromium
+- The active home link of `Sidebar` has `aria-current="page"`, its link is styled like the others, and the avatar initials are hidden from screen readers
+- A long email in `Sidebar` is cut with an ellipsis. It ran under the logout button
+- The icon of the `Sidebar` collapse button lines up with the link icons, so it is centered when collapsed and doesn't move on toggle. It sat 4px to the right
+
+## [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 +302,9 @@ 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.1...HEAD
+[1.19.1]: https://github.com/alexandregme/zljs/compare/v1.19.0...v1.19.1
+[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,
@@ -829,7 +829,7 @@ import Link from "next/link.js";
 // core/sidebar/sidebar.styles.ts
 import { tv as tv10 } from "tailwind-variants";
 var sidebar = tv10({
-  base: "h-screen bg-neutral-800 text-neutral-300 flex flex-col overflow-hidden transition-all duration-200",
+  base: "h-screen bg-neutral-800 text-neutral-300 flex flex-col overflow-hidden transition-all duration-200 divide-y divide-neutral-600/50",
   variants: {
     collapsed: {
       true: "w-14",
@@ -841,62 +841,52 @@ var sidebar = tv10({
   }
 });
 var nav = tv10({
-  base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
+  base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden divide-y divide-neutral-600/50"
 });
 var header2 = tv10({
-  base: "shrink-0 border-b border-neutral-600/50 grid p-2"
+  base: "shrink-0 p-2"
 });
 var section = tv10({
-  base: "border-b border-neutral-600/50 last:border-b-0 grid gap-1 p-2"
+  base: "grid gap-1 p-2"
 });
 var item = tv10({
-  base: "flex w-full items-center rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer p-1",
+  // [&>*+*] is the label: Text takes no className, and the icon comes first, so a link with no label has nothing to hide.
+  base: "flex items-center rounded-md transition-colors h-10 px-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current [&>*+*]:truncate [&>*+*]:transition-all [&>*+*]:duration-200",
   variants: {
     active: {
       true: "bg-neutral-700 text-white",
       false: "text-neutral-400 hover:bg-neutral-700/50 hover:text-white"
+    },
+    collapsed: {
+      true: "[&>*+*]:w-0 [&>*+*]:opacity-0",
+      false: "[&>*+*]:ml-2 [&>*+*]:opacity-100"
     }
   },
   defaultVariants: {
-    active: false
+    active: false,
+    collapsed: false
   }
 });
-var itemIcon = tv10({
-  base: "p-2"
-});
-var itemLabel = tv10({
-  base: "truncate transition-all duration-200",
+var footer = tv10({
+  base: "shrink-0 h-16 p-3 flex items-center gap-3",
   variants: {
     collapsed: {
-      true: "opacity-0 w-0",
-      false: "opacity-100"
+      true: "justify-center"
     }
-  },
-  defaultVariants: {
-    collapsed: false
   }
 });
-var footer = tv10({
-  base: "shrink-0 border-t border-neutral-600/50 p-3 flex items-center gap-3 whitespace-nowrap"
-});
 var avatar = tv10({
-  base: "shrink-0 w-8 h-8 rounded-full bg-neutral-600 text-white text-xs font-medium flex items-center justify-center"
+  base: "shrink-0 size-8 rounded-full bg-neutral-600 text-white text-xs font-medium flex items-center justify-center"
 });
 var userInfo = tv10({
-  base: "flex flex-col min-w-0"
-});
-var userName = tv10({
-  base: "text-sm text-white truncate"
-});
-var userEmail = tv10({
-  base: "text-xs text-neutral-400"
+  base: "flex flex-col min-w-0 text-white [&>*]:truncate [&>*:last-child]:text-xs [&>*:last-child]:text-neutral-400"
 });
 var toggleButton = tv10({
-  base: "shrink-0 border-t border-neutral-600/50 grid p-2 [&>button]:justify-start [&>button]:overflow-hidden [&>button]:whitespace-nowrap"
+  base: "shrink-0 h-14 grid p-2 [&>button]:justify-start [&>button]:px-3 [&>button]:overflow-hidden [&>button]:whitespace-nowrap"
 });
 
 // core/sidebar/sidebar.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var getInitials = (name) => {
   const parts = name.trim().split(/\s+/);
   if (parts.length >= 2) {
@@ -917,39 +907,42 @@ var Sidebar = ({
   const [collapsed, setCollapsed] = useState3(defaultCollapsed);
   const initials = getInitials(user.name);
   return /* @__PURE__ */ jsxs12("aside", { className: sidebar({ collapsed }), children: [
-    homeHref && /* @__PURE__ */ jsx14(
+    homeHref && /* @__PURE__ */ jsx14("div", { className: header2(), children: /* @__PURE__ */ jsxs12(
       Link,
       {
         href: homeHref,
-        className: header2(),
+        className: item({ active: homeHref === activeHref, collapsed }),
         "aria-label": homeLabel || "Home",
-        children: /* @__PURE__ */ jsxs12("span", { className: item({ active: homeHref === activeHref }), children: [
-          /* @__PURE__ */ jsx14("span", { className: itemIcon(), children: /* @__PURE__ */ jsx14(Icon, { name: "Home" }) }),
-          /* @__PURE__ */ jsx14("span", { className: itemLabel({ collapsed }), children: homeLabel })
-        ] })
+        ...homeHref === activeHref && { "aria-current": "page" },
+        children: [
+          /* @__PURE__ */ jsx14(Icon, { name: "Home" }),
+          homeLabel && /* @__PURE__ */ jsx14(Text, { as: "span", variant: "caption", children: homeLabel })
+        ]
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx14("nav", { "aria-label": "Main navigation", className: nav(), children: sections.map((sectionData, i) => /* @__PURE__ */ jsx14("div", { className: section(), children: sectionData.items.map((sidebarItem) => {
       const isActive = sidebarItem.href === activeHref;
       return /* @__PURE__ */ jsxs12(
         Link,
         {
           href: sidebarItem.href,
-          className: item({ active: isActive }),
+          className: item({ active: isActive, collapsed }),
           ...isActive && { "aria-current": "page" },
           children: [
-            /* @__PURE__ */ jsx14("span", { className: itemIcon(), children: /* @__PURE__ */ jsx14(Icon, { name: sidebarItem.icon }) }),
-            /* @__PURE__ */ jsx14("span", { className: itemLabel({ collapsed }), children: sidebarItem.label })
+            /* @__PURE__ */ jsx14(Icon, { name: sidebarItem.icon }),
+            /* @__PURE__ */ jsx14(Text, { as: "span", variant: "caption", children: sidebarItem.label })
           ]
         },
         sidebarItem.href
       );
     }) }, i)) }),
-    /* @__PURE__ */ jsxs12("div", { className: footer(), children: [
-      /* @__PURE__ */ jsx14("div", { className: avatar(), children: initials }),
-      /* @__PURE__ */ jsxs12("div", { className: userInfo(), children: [
-        /* @__PURE__ */ jsx14("span", { className: userName(), children: user.name }),
-        /* @__PURE__ */ jsx14("span", { className: userEmail(), children: user.email })
+    /* @__PURE__ */ jsxs12("div", { className: footer({ collapsed }), children: [
+      !collapsed && /* @__PURE__ */ jsxs12(Fragment3, { children: [
+        /* @__PURE__ */ jsx14("div", { "aria-hidden": "true", className: avatar(), children: initials }),
+        /* @__PURE__ */ jsxs12("div", { className: userInfo(), children: [
+          /* @__PURE__ */ jsx14(Text, { as: "span", variant: "caption", children: user.name }),
+          /* @__PURE__ */ jsx14(Text, { as: "span", variant: "caption", children: user.email })
+        ] })
       ] }),
       /* @__PURE__ */ jsx14(
         Button,
@@ -964,11 +957,12 @@ var Sidebar = ({
     /* @__PURE__ */ jsx14("div", { className: toggleButton(), children: /* @__PURE__ */ jsx14(
       Button,
       {
+        variant: "default",
         color: "ghost",
         icon: collapsed ? "ChevronRight" : "ChevronLeft",
-        "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+        "aria-label": collapsed ? "Expand sidebar" : void 0,
         onClick: () => setCollapsed(!collapsed),
-        children: collapseLabel
+        children: collapsed ? void 0 : collapseLabel
       }
     ) })
   ] });

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.1",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",