@alexandregme/zljs 1.19.0 → 2.0.0

package/CHANGELOG.md

@@ -8,6 +8,47 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [2.0.0] - 2026-11-03
+
+### Added
+
+- Auxiliary colors `orange`, `pink` and `purple`, with the `AuxiliaryColor` type and the `--color-zl-<color>` and `--color-zl-<color>-strong` theme values. They have no meaning of their own and only `Tag` takes them
+- `TagColor` type, and `Tag` takes `primary`, `success`, `danger`, `warning`, `info` and `muted`
+- `removeLabel` on `Tag`, to name the remove button when several tags show at once. It defaults to `Remover`
+
+### Changed
+
+- `Tag` follows the `--color-zl-*` theme values: its background is the color at 15% and its text is the `-strong` value. Its default color is `primary`, no longer `blue`
+- The remove button of `Tag` takes the text color of the `Tag`, for its icon and its focus outline
+
+### Removed
+
+- The `blue`, `green`, `red`, `yellow` and `gray` colors of `Tag`. `orange` stays. `StatsCard` and `DataColor` keep them
+
+#### Migration
+
+Search the app for `<Tag` and read its props, which can sit on the next lines (`grep -rn -A3 "<Tag"`). Replace `color`: `blue` → `primary`, `green` → `success`, `red` → `danger`, `yellow` → `warning`, `gray` → `muted`. A variable typed `DataColor` that reaches a `Tag` becomes `TagColor`. A test that asserts `bg-*-100` or `text-*-700` on a `Tag` moves to `bg-zl-<color>/15` and `text-zl-<color>-strong`. Don't change `StatsCard`.
+
+## [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
@@ -282,7 +323,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.19.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v2.0.0...HEAD
+[2.0.0]: https://github.com/alexandregme/zljs/compare/v1.19.1...v2.0.0
+[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

package/README.md

@@ -58,12 +58,14 @@ The components work with no setup, using the default colors. To use your own, re
 
 `primary`, `success`, `danger`, `warning`, `info` and `muted` each take one value (`--color-zl-<color>`), used for text and the focus outline. The others follow it, and you can redefine them too:
 
-| Value                       | Used for               | Default                                    |
-| --------------------------- | ---------------------- | ------------------------------------------ |
-| `--color-zl-<color>-strong` | Link hover             | 30% darker                                 |
-| `--color-zl-<color>-bg`     | Button background      | The color itself (`warning`: `yellow-500`) |
-| `--color-zl-<color>-hover`  | Button hover           | The background, 15% darker                 |
-| `--color-zl-<color>-on`     | Text on the background | White (`warning`: `gray-900`)              |
+| Value                       | Used for                | Default                                    |
+| --------------------------- | ----------------------- | ------------------------------------------ |
+| `--color-zl-<color>-strong` | Link hover and Tag text | 30% darker                                 |
+| `--color-zl-<color>-bg`     | Button background       | The color itself (`warning`: `yellow-500`) |
+| `--color-zl-<color>-hover`  | Button hover            | The background, 15% darker                 |
+| `--color-zl-<color>-on`     | Text on the background  | White (`warning`: `gray-900`)              |
+
+A `Tag` also takes the auxiliary colors `orange`, `pink` and `purple`, which have no meaning of their own: use them to tell categories apart. Each has only `--color-zl-<color>` and `--color-zl-<color>-strong`. The first, at 15%, is the `Tag` background, and the second is its text.
 
 Only the defaults are checked for contrast. Check your own choice: 4.5:1 for text, on `--color-zl-<color>` against the page and on `-on` against `-bg`, and 3:1 for the focus outline. A value set on a nested element doesn't reach the values derived from it, so set them in `@theme` or `:root`.
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ChangeEvent, FormEvent, HTMLInputAutoCompleteAttribute, FocusEvent, KeyboardEvent, Ref } from 'react';
-import { S as SemanticColor, D as DataColor, R as ReduxProviderProps } from './redux-provider.interface-BmROR8Ev.js';
+import { S as SemanticColor, D as DataColor, A as AuxiliaryColor, R as ReduxProviderProps } from './redux-provider.interface-DXOZKAMA.js';
 export { FormInput, FormInputProps, FormProvider, FormProviderProps } from './rhf/index.js';
 export { toast } from 'sonner';
 import * as zustand from 'zustand';
@@ -262,13 +262,15 @@ interface SidebarProps {
 
 declare const Sidebar: ({ sections, user, activeHref, defaultCollapsed, collapseLabel, homeHref, homeLabel, onLogout, }: SidebarProps) => react.JSX.Element;
 
+type TagColor = Exclude<SemanticColor, "none"> | AuxiliaryColor;
 interface TagProps {
     children: ReactNode;
-    color?: DataColor;
+    color?: TagColor;
     onRemove?: () => void;
+    removeLabel?: string;
 }
 
-declare const Tag: ({ children, color, onRemove }: TagProps) => react.JSX.Element;
+declare const Tag: ({ children, color, onRemove, removeLabel, }: TagProps) => react.JSX.Element;
 
 declare const Toaster: () => react.JSX.Element;
 
@@ -465,5 +467,5 @@ declare class HTTPClient {
     patch<T = unknown>(url: string, config?: HttpRequestConfig): Promise<T | undefined>;
 }
 
-export { Button, Checkbox, ConnectedModal, DataColor, DataGrid, Error, Form, HTTPClient, Heading, Icon, Input, Loader, Modal, Radio, ReduxProvider, ReduxProviderProps, Select, SemanticColor, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
-export type { AppState, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataGridColumn, DataGridProps, ErrorProps, FormProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, RadioProps, ReduxStore, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };
+export { AuxiliaryColor, Button, Checkbox, ConnectedModal, DataColor, DataGrid, Error, Form, HTTPClient, Heading, Icon, Input, Loader, Modal, Radio, ReduxProvider, ReduxProviderProps, Select, SemanticColor, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
+export type { AppState, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataGridColumn, DataGridProps, ErrorProps, FormProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, RadioProps, ReduxStore, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagColor, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };

package/dist/index.js

@@ -502,25 +502,42 @@ var tag = tv7({
   base: "inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium",
   variants: {
     color: {
-      blue: "bg-blue-100 text-blue-700",
-      green: "bg-green-100 text-green-700",
-      red: "bg-red-100 text-red-700",
-      yellow: "bg-yellow-100 text-yellow-700",
-      gray: "bg-slate-100 text-slate-700",
-      orange: "bg-orange-100 text-orange-700"
+      primary: "bg-zl-primary/15 text-zl-primary-strong",
+      success: "bg-zl-success/15 text-zl-success-strong",
+      danger: "bg-zl-danger/15 text-zl-danger-strong",
+      warning: "bg-zl-warning/15 text-zl-warning-strong",
+      info: "bg-zl-info/15 text-zl-info-strong",
+      muted: "bg-zl-muted/15 text-zl-muted-strong",
+      orange: "bg-zl-orange/15 text-zl-orange-strong",
+      pink: "bg-zl-pink/15 text-zl-pink-strong",
+      purple: "bg-zl-purple/15 text-zl-purple-strong"
     }
   },
   defaultVariants: {
-    color: "blue"
+    color: "primary"
   }
 });
 
 // core/tag/tag.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var Tag = ({ children, color = "blue", onRemove }) => {
+var Tag = ({
+  children,
+  color = "primary",
+  onRemove,
+  removeLabel = "Remover"
+}) => {
   return /* @__PURE__ */ jsxs7("span", { "data-testid": "tag", className: tag({ color }), children: [
     children,
-    onRemove && /* @__PURE__ */ jsx8(Button, { size: "sm", icon: "X", "aria-label": "Remover", onClick: onRemove })
+    onRemove && /* @__PURE__ */ jsx8(
+      Button,
+      {
+        color: "ghost",
+        size: "sm",
+        icon: "X",
+        "aria-label": removeLabel,
+        onClick: onRemove
+      }
+    )
   ] });
 };
 
@@ -564,7 +581,6 @@ var DataGridStatusBar = ({
         activeFilters.map((filter) => /* @__PURE__ */ jsxs8(
           Tag,
           {
-            color: "blue",
             onRemove: () => handleClearFilter(filter.column),
             children: [
               /* @__PURE__ */ jsxs8("span", { className: "font-medium", children: [
@@ -829,7 +845,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 +857,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 +923,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 +973,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/{redux-provider.interface-BmROR8Ev.d.ts → redux-provider.interface-DXOZKAMA.d.ts}

@@ -9,6 +9,10 @@ type SemanticColor = "primary" | "success" | "danger" | "warning" | "info" | "mu
  * Literal colors for data visualization components (StatsCard, etc.)
  */
 type DataColor = "blue" | "red" | "yellow" | "green" | "gray" | "orange";
+/**
+ * Extra colors with no meaning of their own, to tell categories apart (Tag)
+ */
+type AuxiliaryColor = "orange" | "pink" | "purple";
 
 interface ReduxProviderProps {
     children: ReactNode;
@@ -18,4 +22,4 @@ interface ReduxProviderProps {
     coreReducers?: Record<string, Reducer>;
 }
 
-export type { DataColor as D, ReduxProviderProps as R, SemanticColor as S };
+export type { AuxiliaryColor as A, DataColor as D, ReduxProviderProps as R, SemanticColor as S };

package/dist/styles/colors.css

@@ -3,12 +3,17 @@
    the styles. Only the defaults are checked for contrast.
 
    Each color has five values, and the others follow the first unless redefined:
-     --color-zl-<color>         text and focus outline
-     --color-zl-<color>-strong  link hover
+     --color-zl-<color>         text, focus outline and tag background, at 15%
+     --color-zl-<color>-strong  link hover and tag text
      --color-zl-<color>-bg      button background
      --color-zl-<color>-hover   button hover
      --color-zl-<color>-on      text on the background
 
+   The auxiliary colors (orange, pink, purple) have no meaning of their own. Tag
+   is their only user, so they have two values:
+     --color-zl-<color>         tag background, at 15%
+     --color-zl-<color>-strong  tag text
+
    Prettier is off for this block to keep one value per line. */
 
 /* prettier-ignore */
@@ -54,4 +59,16 @@
   --color-zl-muted-bg:     var(--color-zl-muted);
   --color-zl-muted-hover:  color-mix(in oklab, var(--color-zl-muted-bg), black 15%);
   --color-zl-muted-on:     var(--color-white);
+
+  /* Orange */
+  --color-zl-orange:        var(--color-orange-700);
+  --color-zl-orange-strong: color-mix(in oklab, var(--color-zl-orange), black 30%);
+
+  /* Pink */
+  --color-zl-pink:        var(--color-pink-700);
+  --color-zl-pink-strong: color-mix(in oklab, var(--color-zl-pink), black 30%);
+
+  /* Purple */
+  --color-zl-purple:        var(--color-purple-700);
+  --color-zl-purple-strong: color-mix(in oklab, var(--color-zl-purple), black 30%);
 }

package/package.json

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