@alexandregme/zljs 1.8.0 → 1.10.0

package/CHANGELOG.md

@@ -0,0 +1,83 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+A change that needs action in an app has a **Migration** note. When updating, read every version newer than the one the app has, oldest first. This file ships with the package, in `node_modules/@alexandregme/zljs/CHANGELOG.md`. Versions before 1.8.0 are in the [GitHub Releases](https://github.com/alexandregme/zljs/releases).
+
+## [Unreleased]
+
+## [1.10.0] - 2026-11-02
+
+### Added
+
+- `Input` takes `autoComplete` and `required`
+
+### Changed
+
+- `Input` requires `label` or `aria-label` in its type, so a field can't be left without a name
+- `Input` draws a real `focus-visible` outline in the theme's `primary` color instead of a `focus:ring`, so focus stays visible in forced colors mode, and an app's own color reaches it
+- `Input` border is now `gray-500` instead of `gray-300`, for 3:1 contrast, and its placeholder is `gray-500`, for 4.5:1
+
+### Fixed
+
+- `Input` with `error` sets `aria-invalid` and points `aria-describedby` to the message, so a screen reader announces both
+
+#### Migration
+
+Only an `Input` with neither `label` nor `aria-label`, code that extends `InputProps`, and tests that assert its old classes need a change. To find them, run the commands below from the app's root. The first also finds other components named `Input`, and those stay as they are:
+
+```sh
+grep -rnE "<Input([[:space:]/>]|$)|\bInputProps\b" . --include='*.ts' --include='*.tsx' --exclude-dir=node_modules --exclude-dir=.next
+grep -rnE "border-gray-300|focus:ring-blue-500|focus:border-transparent" . --include='*.test.*' --exclude-dir=node_modules --exclude-dir=.next
+```
+
+Give each field a `label`, or an `aria-label` when the context already says what it is. Replace `interface X extends InputProps` with `type X = InputProps & { ... }`, because `InputProps` is now a union. In tests, replace those classes with `focus-visible:outline-zl-primary` and `border-gray-500`.
+
+`FormInput` already requires `label`, so it doesn't change.
+
+## [1.9.0] - 2026-11-02
+
+### Added
+
+- `CHANGELOG.md` now ships with the package, and has a `Foundations/Changelog` page in Storybook
+
+## [1.8.0] - 2026-11-01
+
+### Added
+
+- Theme values for the semantic colors. Apps work with no setup, and can use their own colors by redefining `--color-zl-<color>` after importing the styles. See `Colors` in the README. Only the defaults are checked for contrast
+- `Foundations/Colors` page in Storybook
+
+### Changed
+
+- `Button`, `Heading`, `Text`, `Error` and the `Checkbox` card use theme classes such as `text-zl-success` instead of Tailwind shades such as `text-green-700`
+- `info` on `Heading` and `Text` is now `cyan-700` instead of `sky-700`
+- `Button` and link hovers are now derived from their color, so they are slightly different
+
+#### Migration
+
+Only tests that assert a shade on a zljs component need a change. To find them, run the command below. It also finds classes the app sets itself, and those stay as they are:
+
+```sh
+grep -rnE "(hover:)?(text|bg)-(blue|green|red|yellow|sky|cyan|gray)-(\\\\d|[0-9])" src --include='*.test.*'
+```
+
+Replace the shade with the class of the `color` being tested, for example `/(^|\s)text-green-\d+/` with `/(^|\s)text-zl-success(\s|$)/`. Then run the app's tests.
+
+| `color`   | `Text`, `Heading`, `link` | Link hover                     | `Button` background | `Button` hover              |
+| --------- | ------------------------- | ------------------------------ | ------------------- | --------------------------- |
+| `primary` | `text-zl-primary`         | `hover:text-zl-primary-strong` | `bg-zl-primary-bg`  | `hover:bg-zl-primary-hover` |
+| `success` | `text-zl-success`         | `hover:text-zl-success-strong` | `bg-zl-success-bg`  | `hover:bg-zl-success-hover` |
+| `danger`  | `text-zl-danger`          | `hover:text-zl-danger-strong`  | `bg-zl-danger-bg`   | `hover:bg-zl-danger-hover`  |
+| `warning` | `text-zl-warning`         | `hover:text-zl-warning-strong` | `bg-zl-warning-bg`  | `hover:bg-zl-warning-hover` |
+| `info`    | `text-zl-info`            | `hover:text-zl-info-strong`    | `bg-zl-info-bg`     | `hover:bg-zl-info-hover`    |
+| `muted`   | `text-zl-muted`           | `hover:text-zl-muted-strong`   | `bg-zl-muted-bg`    | `hover:bg-zl-muted-hover`   |
+
+The message of `Error` is `text-zl-danger`. `none` and `ghost` didn't change.
+
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.10.0...HEAD
+[1.10.0]: https://github.com/alexandregme/zljs/compare/v1.9.0...v1.10.0
+[1.9.0]: https://github.com/alexandregme/zljs/compare/v1.8.0...v1.9.0
+[1.8.0]: https://github.com/alexandregme/zljs/compare/v1.7.0...v1.8.0

package/README.md

@@ -67,6 +67,10 @@ The components work with no setup, using the default colors. To use your own, re
 
 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`.
 
+## Updating
+
+See [`CHANGELOG.md`](./CHANGELOG.md), in the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) format. A change that needs action in an app has a **Migration** note, written so an agent can follow it. The file ships with the package, in `node_modules/@alexandregme/zljs/CHANGELOG.md`.
+
 ## Getting Started
 
 ```bash

package/dist/{chunk-WZNUKE6S.js → chunk-2RTPRD3E.js}

@@ -49,7 +49,7 @@ var label = tv2({
   base: "text-sm font-medium text-gray-700"
 });
 var input = tv2({
-  base: "px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+  base: "px-3 py-2 border border-gray-500 rounded-md text-sm placeholder:text-gray-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zl-primary disabled:bg-gray-100 disabled:cursor-not-allowed"
 });
 
 // core/forms/input/input.tsx
@@ -61,14 +61,17 @@ var Input = forwardRef(
     name,
     type = "text",
     placeholder,
+    autoComplete,
     value,
     error: error2,
     disabled,
+    required,
     onChange,
     onBlur,
     onKeyDown
   }, ref) => {
     const id = useId();
+    const errorId = `${id}-error`;
     return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
       labelText && /* @__PURE__ */ jsx3("label", { htmlFor: id, className: label(), children: labelText }),
       /* @__PURE__ */ jsx3(
@@ -79,16 +82,20 @@ var Input = forwardRef(
           name,
           type,
           placeholder,
+          autoComplete,
           value,
           disabled,
+          required,
           onChange,
           onBlur,
           onKeyDown,
           "aria-label": ariaLabel,
+          "aria-invalid": error2 ? true : void 0,
+          "aria-describedby": error2 ? errorId : void 0,
           className: input()
         }
       ),
-      error2 && /* @__PURE__ */ jsx3(Error, { message: error2 })
+      error2 && /* @__PURE__ */ jsx3(Error, { id: errorId, message: error2 })
     ] });
   }
 );

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ChangeEvent, FormEvent, FocusEvent, KeyboardEvent } from 'react';
+import { ReactNode, ChangeEvent, FormEvent, HTMLInputAutoCompleteAttribute, FocusEvent, KeyboardEvent } from 'react';
 export { FormInput, FormInputProps, FormProvider, FormProviderProps } from './rhf/index.js';
 export { toast } from 'sonner';
 import * as zustand from 'zustand';
@@ -98,19 +98,26 @@ interface FormProps {
 
 declare const Form: ({ children, onSubmit, disabled }: FormProps) => react.JSX.Element;
 
-interface InputProps {
-    label?: string;
+type InputName = {
+    label: string;
     "aria-label"?: string;
+} | {
+    label?: undefined;
+    "aria-label": string;
+};
+type InputProps = InputName & {
     name?: string;
     type?: "text" | "password" | "email";
     placeholder?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
     value?: string;
     error?: string;
     disabled?: boolean;
+    required?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
-}
+};
 
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   FormInput,
   FormProvider,
   Input
-} from "./chunk-WZNUKE6S.js";
+} from "./chunk-2RTPRD3E.js";
 
 // core/icon/icon.tsx
 import * as LucideIcons from "lucide-react";
@@ -679,7 +679,7 @@ var DataGrid = ({
 // core/text/text.styles.ts
 import { tv as tv8 } from "tailwind-variants";
 
-// core/types/colors.const.ts
+// core/types/colors/colors.const.ts
 var semanticTextColors = {
   primary: "text-zl-primary",
   success: "text-zl-success",

package/dist/rhf/index.js

@@ -2,7 +2,7 @@
 import {
   FormInput,
   FormProvider
-} from "../chunk-WZNUKE6S.js";
+} from "../chunk-2RTPRD3E.js";
 export {
   FormInput,
   FormProvider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",
@@ -42,7 +42,8 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "CHANGELOG.md"
   ],
   "sideEffects": [
     "*.css"
@@ -60,6 +61,7 @@
     "test:coverage": "vitest run --project unit --coverage",
     "test:storybook": "vitest run --project storybook",
     "test:visual": "chromatic",
+    "version": "node scripts/stamp-changelog.mjs && git add CHANGELOG.md",
     "eslint": "eslint ./ --color --fix",
     "prettier": "prettier --write .",
     "stylelint": "stylelint '**/*.{css,scss}' --allow-empty-input",