@clicktap/ui 2.3.3 → 2.4.0

package/components/PasswordCheck/PasswordCheck.d.ts

@@ -1,3 +1,3 @@
 import { PasswordCheckProps } from './PasswordCheck.types';
-export declare function PasswordCheck({ value, variant, requirements, }: PasswordCheckProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PasswordCheck({ value, variant, requirements, schema, }: PasswordCheckProps): import("react/jsx-runtime").JSX.Element | null;
 export default PasswordCheck;

package/components/PasswordCheck/PasswordCheck.js

@@ -1 +1 @@
-"use client";import{jsxs as n,jsx as t}from"react/jsx-runtime";import{cn as a}from"../../utils/cn.js";import{checkStrength as d,getProgressText as c}from"./PasswordCheck.utils.js";const g=[{label:"At least 8 characters",test:s=>s.length>=8},{label:"At least one uppercase letter",test:s=>/[A-Z]/.test(s)},{label:"At least one digit",test:s=>/\d/.test(s)},{label:"At least one special character",test:s=>/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(s)}];function h({value:s,variant:i="default",requirements:o=g}){const e=d(s);return i==="requirements"?s?n("div",{className:"mt-4 flex flex-col gap-2",children:[t("ul",{className:"flex flex-col gap-1 text-xs text-left",children:o.map(r=>{const l=r.test(s);return n("li",{className:"flex items-center gap-1.5",children:[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:a("shrink-0 transition-colors",l?"text-success":"text-fg-subtle"),children:l?t("path",{d:"M20 6 9 17l-5-5"}):t("circle",{cx:"12",cy:"12",r:"4"})}),t("span",{className:a("transition-colors",l?"text-success":"text-fg-muted"),children:r.label})]},r.label)})}),n("div",{className:"flex flex-col",children:[t("div",{className:"w-full flex gap-x-2",children:Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r))}),n("div",{className:a("inline-flex gap-x-1 text-xs text-fg-strong transition-opacity mt-1",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:c(e)})]})]})]}):null:t("div",{children:n("div",{className:a("relative w-full flex gap-x-2",i==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r)),i==="default"&&n("div",{className:a("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-fg-strong",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:c(e)})]})]})})}export{h as PasswordCheck,h as default};
+"use client";import{jsxs as n,jsx as t}from"react/jsx-runtime";import{cn as a}from"../../utils/cn.js";import{trimEdgeWhitespace as h,checkStrength as p,requirementsFromSchema as b,getProgressText as m}from"./PasswordCheck.utils.js";const w=[{label:"At least 8 characters",test:s=>s.length>=8},{label:"At least one uppercase letter",test:s=>/[A-Z]/.test(s)},{label:"At least one lowercase letter",test:s=>/[a-z]/.test(s)},{label:"At least one digit",test:s=>/\d/.test(s)},{label:"At least one special character",test:s=>/[^A-Za-z0-9]/.test(s)}];function k({value:s,variant:c="default",requirements:x,schema:f}){const o=h(s),e=p(o),d=b(f),u=x??(d.length>0?d:w);return c==="requirements"?s?n("div",{className:"mt-4 flex flex-col gap-2",children:[t("ul",{className:"flex flex-col gap-1 text-xs text-left",children:u.map(r=>{const l=r.test,g=l!==void 0,i=l?l(o):!1;return n("li",{className:"flex items-center gap-1.5",children:[n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:a("shrink-0 transition-colors",i?"text-success":"text-fg-subtle"),children:[i&&t("path",{d:"M20 6 9 17l-5-5"}),!i&&g&&t("circle",{cx:"12",cy:"12",r:"4"}),!g&&t("circle",{cx:"12",cy:"12",r:"2.5",fill:"currentColor"})]}),t("span",{className:a("transition-colors",i?"text-success":"text-fg-muted"),children:r.label})]},r.label)})}),n("div",{className:"flex flex-col",children:[t("div",{className:"w-full flex gap-x-2",children:Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r))}),n("div",{className:a("inline-flex gap-x-1 text-xs text-fg-strong transition-opacity mt-1",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:m(e)})]})]})]}):null:t("div",{children:n("div",{className:a("relative w-full flex gap-x-2",c==="default"&&"mb-8 -mt-1"),children:[Array.from({length:5},(r,l)=>l).map((r,l)=>t("div",{className:a("grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-border-subtle",e<=l&&"bg-fg-muted",(e===1||e===2)&&"bg-danger",e===3&&"bg-warning",e===4&&"bg-success",e===5&&"bg-info")},r)),c==="default"&&n("div",{className:a("inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-fg-strong",e?"opacity-100":"opacity-0"),children:[t("span",{children:"Password Strength:"}),t("span",{className:a((e===1||e===2)&&"text-danger",e===3&&"text-warning",e===4&&"text-success",e===5&&"text-info"),children:m(e)})]})]})})}export{k as PasswordCheck,k as default};

package/components/PasswordCheck/PasswordCheck.types.d.ts

@@ -1,9 +1,53 @@
 export type PasswordRequirement = {
     label: string;
-    test: (value: string) => boolean;
+    /**
+     * Whether the value satisfies this rule.
+     *
+     * Optional since CTAP-1908. A rule derived from the backend schema may be one this component
+     * cannot evaluate in the browser — an arbitrary regular expression, a rule a module added after
+     * this file was written. Such a rule renders as a neutral bullet rather than being dropped:
+     * a rule that is enforced but not displayed refuses the user with no explanation, which is the
+     * whole defect this work exists to end.
+     */
+    test?: (value: string) => boolean;
+};
+/**
+ * One thing a backend schema says about a value — CTAP-1908.
+ *
+ * Declared structurally rather than imported from an app's generated types, in keeping with the
+ * rest of this library: a codegen `SchemaDescriptionClause` is assignable to it without `ui`
+ * depending on any app.
+ */
+export type SchemaDescriptionClause = {
+    /**
+     * A stable machine code (`min_length`, `at_least_one_lowercase`, …). An OPEN vocabulary — a module
+     * that owns a constraint coins its own, so never assume this component knows them all.
+     */
+    code: string;
+    /** `rule` — a condition the value must satisfy. `note` — information about it, not a check. */
+    kind: string;
+    /** The rule in English, ready to render. */
+    text: string;
+    /** The rule's arguments, e.g. `{ min: 8 }`. Read these; never parse `text`. */
+    parameters?: Record<string, unknown> | null;
+};
+/** A validation schema described in English, as served by `passwordSchemaDescription`. */
+export type SchemaDescription = {
+    clauses?: readonly (SchemaDescriptionClause | null)[] | null;
 };
 export type PasswordCheckProps = {
     value: string;
     variant?: 'default' | 'short' | 'requirements';
+    /**
+     * The rules to show. Overrides everything — a consumer with its own policy keeps full control.
+     */
     requirements?: PasswordRequirement[];
+    /**
+     * The password policy as the backend describes it (`passwordSchemaDescription`) — CTAP-1908.
+     *
+     * Pass it and the rule list is derived from the schema that actually enforces the password, so
+     * the two cannot drift. Without it the component falls back to {@link defaultRequirements}, which
+     * is a static copy and has been wrong before.
+     */
+    schema?: SchemaDescription | null;
 };

package/components/PasswordCheck/PasswordCheck.utils.d.ts

@@ -1,3 +1,19 @@
+import { PasswordRequirement, SchemaDescription } from './PasswordCheck.types';
+/**
+ * Strip edge whitespace the way the backend does before it validates a password.
+ *
+ * The policy lives in PHP — `PasswordService::getPasswordSchema()` in
+ * `libs/mezzio-modules/user/src/Service/PasswordService.php` — and the schema opens with
+ * `->trim()`, which is `Rmg\Validator\EdgeWhitespace`, not PHP's `trim()`. Every rule after it,
+ * `min(8)` included, sees the trimmed value. Measuring the raw one here told a visitor that
+ * `"  abcdef1A!  "` was 13 characters long while the server counted 9.
+ *
+ * The character class mirrors that PHP constant: JavaScript's `\s` already covers NBSP, the whole
+ * `Zs` category and U+FEFF, so only NUL and U+200B ZERO WIDTH SPACE have to be named (U+FEFF is
+ * listed anyway, to keep the two classes readable side by side). Interior whitespace is part of
+ * the value and is left alone, on both sides.
+ */
+export declare const trimEdgeWhitespace: (value: string) => string;
 /** @todo these functions should probably be passed as props to be able to extend */
 export declare const checkStrength: (value: string) => number;
 export declare const getProgressText: (strength: number) => "" | "Very Strong" | "Strong" | "Good" | "Weak" | "Very Weak";
@@ -7,3 +23,24 @@ export declare const getPasswordRequirements: (value?: string) => {
     upLowCaseLetters: boolean;
     oneNumber: boolean;
 };
+/**
+ * The rules a described backend schema states, as things this component can render — CTAP-1908.
+ *
+ * ## Why this exists
+ *
+ * `PasswordService::getPasswordSchema()` enforces a minimum length plus uppercase, **lowercase**,
+ * number and special-character rules. The hand-written list in this file showed four of them and
+ * omitted lowercase, so a user could watch every tick turn green and still be refused, with no
+ * explanation, because the rule that rejected them was never displayed. Deriving the list from the
+ * schema that enforces it is what stops that happening again.
+ *
+ * ## Two rules about unrecognised clauses
+ *
+ * 1. **An unrecognised `code` is still rendered.** It comes back with no `test`, so it shows as a
+ *    neutral bullet rather than a tick that can never turn green. Dropping it would recreate the
+ *    exact bug.
+ * 2. **A `note` is not rendered.** "Leading and trailing whitespace is removed" is true and worth
+ *    saying on a configuration screen; under a password field it is noise. The backend marks the
+ *    difference so this does not have to guess.
+ */
+export declare const requirementsFromSchema: (schema: SchemaDescription | null | undefined) => PasswordRequirement[];

package/components/PasswordCheck/PasswordCheck.utils.js

@@ -1 +1 @@
-const s=t=>{const r=t.length>=8;let e=0;return/^(?=.*[a-z])(?=.*[A-Z])/.test(t)&&r&&(e+=1),/\d/.test(t)&&r&&(e+=1),t.length>=8&&(e+=1),t.length>=11&&(e+=1),/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(t)&&r&&(e+=1),e},n=t=>{switch(t){case 5:return"Very Strong";case 4:return"Strong";case 3:return"Good";case 2:return"Weak";case 1:return"Very Weak";default:return""}},c=(t="")=>({eightСharacters:t.length>=8,upLowCaseLetters:/^(?=.*[a-z])(?=.*[A-Z])/.test(t),oneNumber:/\d/.test(t)});export{s as checkStrength,c as getPasswordRequirements,n as getProgressText};
+const a=t=>t.replace(/^[\s\u0000\u200B\uFEFF]+|[\s\u0000\u200B\uFEFF]+$/g,""),o=t=>{const e=t.length>=8;let r=0;return/^(?=.*[a-z])(?=.*[A-Z])/.test(t)&&e&&(r+=1),/\d/.test(t)&&e&&(r+=1),t.length>=8&&(r+=1),t.length>=11&&(r+=1),/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(t)&&e&&(r+=1),r},c=t=>{switch(t){case 5:return"Very Strong";case 4:return"Strong";case 3:return"Good";case 2:return"Weak";case 1:return"Very Weak";default:return""}},i=(t="")=>({eightСharacters:t.length>=8,upLowCaseLetters:/^(?=.*[a-z])(?=.*[A-Z])/.test(t),oneNumber:/\d/.test(t)}),u=t=>t?.clauses?t.clauses.filter(e=>!!e&&e.kind==="rule").map(e=>({label:e.text,test:s(e)})):[],n=(t,e)=>{const r=t.parameters?.[e];return typeof r=="number"?r:void 0},s=t=>{switch(t.code){case"min_length":{const e=n(t,"min");return e===void 0?void 0:r=>r.length>=e}case"max_length":{const e=n(t,"max");return e===void 0?void 0:r=>r.length<=e}case"exact_length":{const e=n(t,"length");return e===void 0?void 0:r=>r.length===e}case"at_least_one_lowercase":return e=>/[a-z]/.test(e);case"at_least_one_uppercase":return e=>/[A-Z]/.test(e);case"at_least_one_number":return e=>/\d/.test(e);case"at_least_one_special_character":return e=>/[\W_]/.test(e);case"not_blank":return e=>e.trim().length>0;default:return}};export{o as checkStrength,i as getPasswordRequirements,c as getProgressText,u as requirementsFromSchema,a as trimEdgeWhitespace};

package/components/PasswordCheck/index.d.ts

@@ -1 +1,3 @@
 export { PasswordCheck } from './PasswordCheck';
+export { requirementsFromSchema } from './PasswordCheck.utils';
+export type { PasswordCheckProps, PasswordRequirement, SchemaDescription, SchemaDescriptionClause, } from './PasswordCheck.types';

package/components/PasswordCheck/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{PasswordCheck as i}from"./PasswordCheck.js";import"react/jsx-runtime";import"../../utils/cn.js";import"./PasswordCheck.utils.js";export{i as PasswordCheck};
+import{PasswordCheck as t}from"./PasswordCheck.js";import{requirementsFromSchema as i}from"./PasswordCheck.utils.js";import"react/jsx-runtime";import"../../utils/cn.js";export{t as PasswordCheck,i as requirementsFromSchema};

package/docs/migrations/2026/09/ui-2026-09-24-password-check-lowercase-and-trim.md

@@ -0,0 +1,81 @@
+# BUGFIX: `PasswordCheck` states the password policy the backend actually enforces
+
+**Date:** 2026-09-24
+**Package:** `@clicktap/ui`
+**Affects:** `src/components/PasswordCheck/PasswordCheck.tsx`, `PasswordCheck.utils.ts` — every `<PasswordCheck variant="requirements">` that relies on the default `requirements`.
+**Classification:** BUGFIX
+**Breaking:** No. No API change: `requirements`, `value` and `variant` are untouched, and a consumer passing its own `requirements` is unaffected. **Displayed:** the default list grows from four rules to five, and all five are now evaluated against the edge-trimmed value.
+**Ticket:** CTAP-1906
+
+## Problem
+
+`PasswordCheck` restated the password policy in its own words, and the words were wrong.
+
+The policy lives in PHP — `PasswordService::getPasswordSchema()`,
+`libs/mezzio-modules/user/src/Service/PasswordService.php`:
+
+```php
+$sb->string()->trim()->min(8)
+   ->withValidator(new AtLeastOneUppercaseValidator())          // /[A-Z]/
+   ->withValidator(new AtLeastOneLowercaseValidator())          // /[a-z]/
+   ->withValidator(new AtLeastOneNumberValidator())             // /\d/
+   ->withValidator(new AtLeastOneSpecialCharacterValidator());  // /[\W_]/
+```
+
+Five rules. The component displayed four — the lowercase rule was missing. So `PASSWORD1!` turned
+**every displayed tick green** and the server refused the save, and because the rule that rejected
+the visitor was never on screen, the form could not tell them what to change.
+
+Two narrower mismatches came with it:
+
+- **Length was measured on the raw value** while the schema measures the trimmed one. `"  abcdef1A!  "`
+  showed as 13 characters and was validated as 9. The schema's `->trim()` is
+  `Rmg\Validator\EdgeWhitespace`, which is wider than PHP's `trim()`: NUL, U+200B and U+FEFF too.
+- **The special-character rule was narrower than the validator.** The component tested a fixed
+  punctuation list; `AtLeastOneSpecialCharacterValidator` is `/[\W_]/` — anything outside
+  `[A-Za-z0-9]`. A password whose only special character was `£`, a non-ASCII letter or an interior
+  space was refused a tick the server would have granted.
+
+## What changed
+
+`defaultRequirements` is now the five rules above, in schema order, each one carrying a comment
+naming the validator it mirrors:
+
+| # | Displayed rule | Backend rule | Before |
+| --- | --- | --- | --- |
+| 1 | At least 8 characters | `->min(8)` (post-trim) | measured untrimmed |
+| 2 | At least one uppercase letter | `AtLeastOneUppercaseValidator` | unchanged |
+| 3 | At least one lowercase letter | `AtLeastOneLowercaseValidator` | **missing** |
+| 4 | At least one digit | `AtLeastOneNumberValidator` | unchanged |
+| 5 | At least one special character | `AtLeastOneSpecialCharacterValidator` (`/[\W_]/`) | fixed punctuation list |
+
+The component trims once and hands the trimmed value to every rule and to `checkStrength`, because
+the schema's `->trim()` runs before `->min(8)` and before every validator. The new
+`trimEdgeWhitespace` export in `PasswordCheck.utils.ts` mirrors `Rmg\Validator\EdgeWhitespace`:
+JavaScript's `\s` (which already covers NBSP, the `Zs` category and U+FEFF) plus NUL and U+200B.
+Interior whitespace is untouched, on both sides.
+
+`PasswordCheck.requirements.test.tsx` pins the rendered rule set and names
+`PasswordService::getPasswordSchema()` as the source of truth, so the next change to the policy on
+either side lands as a failing test pointing at the other half.
+
+This is the hand-mirroring fix. Generating the list from the serialized schema, so the two cannot
+drift again, is **CTAP-1908**.
+
+## Consumer Impact
+
+**No action needed.** No prop, export or type changed, and the extra rule appears on its own.
+
+**A consumer that passes its own `requirements` keeps exactly what it passes** — the prop still
+overrides the default outright. But that list has the same hole this fix closed, so check it against
+the table above. One such copy existed in the storefront and was fixed in the same change:
+`apps/frontend/components/Account/Auth/Authenticate/constanst.ts` (`passwordValidation`, the zod gate
+behind signup, reset-password and update-password) was missing the lowercase rule and carried the
+same narrow special-character list.
+
+**Rules now receive the trimmed value.** If you pass custom `requirements`, your `test` callbacks
+are called with the edge-trimmed string, not the raw one. A rule that deliberately inspected
+leading/trailing whitespace would stop seeing it — nothing in this repo did.
+
+**Visually, the block is one line taller** in the `requirements` variant. Nothing else about its
+layout, the strength meter or the hide-until-typed behavior moved.

package/docs/migrations/2026/09/ui-2026-09-24-password-check-renders-from-the-schema.md

@@ -0,0 +1,109 @@
+# `PasswordCheck` renders the rules the server actually enforces
+
+**Date:** 2026-09-24
+**Package:** `@clicktap/ui`
+**Affects:** `libs/frontend-modules/ui/src/components/PasswordCheck/*` — new `schema` prop, new `requirementsFromSchema` export, `PasswordRequirement.test` is now optional
+**Requires:** a middleware serving `passwordSchemaDescription` (CTAP-1908) to use the new prop; without one nothing changes
+**Classification:** IMPROVEMENT
+**Breaking:** No. Every existing call site keeps working, and a consumer passing `requirements` still overrides everything.
+**Ticket:** CTAP-1908
+
+## Problem
+
+`PasswordCheck`'s rule list was a hard-coded array in the component:
+
+```tsx
+const defaultRequirements = [
+  { label: 'At least 8 characters', ... },
+  { label: 'At least one uppercase letter', ... },
+  { label: 'At least one digit', ... },
+  { label: 'At least one special character', ... },
+];
+```
+
+The middleware enforces those four **and a lowercase rule**. So a visitor could type `PASSW0RD!`,
+watch all four ticks turn green, submit, and be refused — by a rule that was never on the screen.
+Four hand-written lines against five enforced rules, with nothing to keep them equal.
+
+## Fix
+
+```tsx
+const passwordSchema = usePasswordSchemaDescription();   // passwordSchemaDescription query
+
+<PasswordCheck value={value} variant="requirements" schema={passwordSchema} />
+```
+
+The list is now derived from the schema that enforces the password. Five rules where there were
+four, and a sixth rule added on the backend appears with no frontend change.
+
+## Precedence
+
+| Given | Rules shown |
+|---|---|
+| `requirements` prop | exactly that list — a consumer with its own policy keeps full control |
+| `schema` with at least one `rule` clause | derived from the schema |
+| neither, or a schema stating no rules | `defaultRequirements`, the static list |
+
+The static list stays as the fallback because the component cannot tell "this policy has no rules"
+from "the query has not resolved yet", and a password field showing nothing is worse than one
+showing a stale list. It is a floor, not a claim of completeness — it has been wrong before, which
+is the whole reason `schema` exists.
+
+## Two rules the component follows, and yours should too
+
+**An unrecognised clause is rendered, not dropped.** Clause codes are an open vocabulary: a module
+that owns a constraint coins its own. `requirementsFromSchema` returns a rule with no `test` for a
+code it cannot evaluate, and the component shows it with a small filled dot instead of a tick —
+present, never claimed satisfied, never claimed failed. Dropping it would recreate the original bug
+exactly.
+
+**Notes are not rules.** The backend marks `kind: 'note'` for things like "Leading and trailing
+whitespace is removed" — true, worth showing on an admin screen, noise under a password field. The
+component skips them without needing to know what they say.
+
+## API
+
+```ts
+type PasswordRequirement = {
+  label: string;
+  test?: (value: string) => boolean;   // OPTIONAL since this change
+};
+
+requirementsFromSchema(schema): PasswordRequirement[]
+```
+
+`test` became optional so an unevaluable rule can still be listed. Every existing consumer supplies
+it, so this is a widening.
+
+`PasswordCheckProps`, `PasswordRequirement`, `SchemaDescription` and `SchemaDescriptionClause` are
+now exported from `@clicktap/ui/components/PasswordCheck` — they were not, so a consumer building a
+rule list from server data could not type it.
+
+`SchemaDescription` is declared structurally in this library, mirroring the GraphQL shape, so a
+codegen type is assignable to it without `ui` depending on any app.
+
+## ⚠️ The strength meter still measures the old policy
+
+`checkStrength()` is independent of `requirements` and always was: it hard-codes 8/11 characters,
+mixed case, digit and special. Override the rule list or pass a schema and the five-bar meter keeps
+scoring the built-in policy. That was true before this change and is unchanged by it —
+deriving the meter from the schema needs its own ticket.
+
+## Consumer checklist
+
+- **Nothing to do** if you are happy with the static list.
+- **To adopt:** take a middleware serving `passwordSchemaDescription`, add the query, and pass the
+  result as `schema` at every `PasswordCheck` call site. In this monorepo that is three components,
+  four call sites: `Signup`, `ResetPassword` and `UpdatePasswordForm` (twice).
+- **If your `*-ui` fork copied `defaultRequirements`,** it is almost certainly missing the lowercase
+  rule too. Copy `PasswordCheck.utils.ts`'s `requirementsFromSchema` and the `schema` prop rather
+  than adding the one missing line.
+
+## Verification
+
+`libs/frontend-modules/ui/src/components/PasswordCheck/PasswordCheck.spec.tsx` — 9 tests. The
+load-bearing two assert five rules from the real `passwordSchemaDescription` payload and the
+presence of the lowercase rule by name. Others pin that only satisfied rules tick, that `min` is
+read from the clause parameters rather than assumed to be 8, that an unrecognised code is rendered
+but never ticked, that notes are not rendered, that `requirements` still overrides, and both
+fallback paths.

package/docs/migrations/index.json

@@ -9,6 +9,26 @@
     "breaking": "No API change, and no prop, export or class-name contract moves. **Visual:** 76 of the 118 swaps resolve to the exact same light-theme value and render identically. The other 42 do not — they are listed component by component under \"Rendering changes\" and are all one step along a neutral ramp, except `UploadImage`, whose hover background **appears for the first time** because the class it had was a typo.",
     "affects": "54 files under `src/components/**` — every component listed in \"What changed\" below — plus the new root-level `eslint.rules.no-literal-palette-color.mjs` and the two eslint configs that reference it."
   },
+  {
+    "path": "2026/09/ui-2026-09-24-password-check-renders-from-the-schema.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-24",
+    "title": "`PasswordCheck` renders the rules the server actually enforces",
+    "classification": "IMPROVEMENT",
+    "breaking": "No. Every existing call site keeps working, and a consumer passing `requirements` still overrides everything.",
+    "affects": "`libs/frontend-modules/ui/src/components/PasswordCheck/*` — new `schema` prop, new `requirementsFromSchema` export, `PasswordRequirement.test` is now optional"
+  },
+  {
+    "path": "2026/09/ui-2026-09-24-password-check-lowercase-and-trim.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-24",
+    "title": "BUGFIX: `PasswordCheck` states the password policy the backend actually enforces",
+    "classification": "BUGFIX",
+    "breaking": "No. No API change: `requirements`, `value` and `variant` are untouched, and a consumer passing its own `requirements` is unaffected. **Displayed:** the default list grows from four rules to five, and all five are now evaluated against the edge-trimmed value.",
+    "affects": "`src/components/PasswordCheck/PasswordCheck.tsx`, `PasswordCheck.utils.ts` — every `<PasswordCheck variant=\"requirements\">` that relies on the default `requirements`."
+  },
   {
     "path": "2026/09/ui-2026-09-24-dialog-semantic-surface-tokens.md",
     "module": "libs/frontend-modules/ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",