@clicktap/ui 2.4.3 → 2.4.5

package/components/Accordion/Accordion.d.ts

@@ -1,19 +1,4 @@
 import { ComponentType, ReactNode } from 'react';
-/**
- * Native accordion on react-aria-components Disclosure (CTAP-1383).
- *
- * Previously a styled wrapper around @heroui/accordion — the ONLY
- * initially-rendered @heroui consumer (the PLP filter sidebar), which pulled
- * the whole @heroui system + theme (~25 KiB gz) into every page's initial JS.
- * react-aria-components is already this library's base, so the rewrite costs
- * nothing new. API-compatible with the call sites this repo uses:
- * selectionMode / defaultSelectedKeys ("all" included), per-item title,
- * subtitle, startContent, indicator (component, receives nothing, rotates on
- * open), classNames slots, showDivider (an <hr> between items — consumers
- * hide it with [&_hr]:hidden), onPress, and the `data-open` attribute on
- * heading/trigger/indicator that consumers style with data-[open=true]:.
- * Height animates with the CSS grid-rows trick — no animation runtime.
- */
 type ItemSlotClassNames = {
     base?: string;
     heading?: string;
@@ -38,6 +23,8 @@ export type AccordionItemProps = {
     hideIndicator?: boolean;
     disableIndicatorAnimation?: boolean;
     isDisabled?: boolean;
+    /** Overrides the Accordion's keepContentMounted for this item. */
+    keepContentMounted?: boolean;
     textValue?: string;
     'aria-label'?: string;
     classNames?: ItemSlotClassNames;
@@ -53,6 +40,10 @@ export type AccordionProps = {
     selectedKeys?: 'all' | Iterable<string>;
     onSelectionChange?: (keys: Set<string>) => void;
     disallowEmptySelection?: boolean;
+    /**
+     * Keep every collapsed item's content mounted (and server-rendered). Off by
+     * default: a collapsed item renders its content only while expanded.
+     */
     keepContentMounted?: boolean;
     /** Hide every item's indicator (heroui group-level prop). */
     hideIndicator?: boolean;
@@ -73,6 +64,6 @@ export type AccordionProps = {
  * did not change.
  */
 export declare function AccordionItem(_props: AccordionItemProps): null;
-export declare function Accordion({ children, selectionMode, defaultSelectedKeys, defaultExpandedKeys, selectedKeys, onSelectionChange, disallowEmptySelection, hideIndicator: groupHideIndicator, showDivider, dividerProps, variant, isCompact, className, itemClasses, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Accordion({ children, selectionMode, defaultSelectedKeys, defaultExpandedKeys, selectedKeys, onSelectionChange, disallowEmptySelection, keepContentMounted: groupKeepContentMounted, hideIndicator: groupHideIndicator, showDivider, dividerProps, variant, isCompact, className, itemClasses, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 export declare function AccordionItemArrow(): import("react/jsx-runtime").JSX.Element;

package/components/Accordion/Accordion.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as d,Fragment as O}from"react/jsx-runtime";import{Children as V,isValidElement as _,Fragment as q}from"react";import{DisclosureGroup as H,Disclosure as J,Button as L,DisclosurePanel as Q}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import{DownArrow as y}from"../Icon/DownArrow.js";function E(p){return null}function C({children:p,selectionMode:N="single",defaultSelectedKeys:w,defaultExpandedKeys:k,selectedKeys:A,onSelectionChange:I,disallowEmptySelection:v=!1,hideIndicator:D=!1,showDivider:S=!0,dividerProps:K,variant:i,isCompact:s,className:F,itemClasses:n}){const c=V.toArray(p).filter(_),b=(t,l)=>String(t.key??l).replace(/^\.\$/,"").replace(/=2/g,":").replace(/=0/g,"="),j=c.map(b),h=t=>t==="all"?j:t?[...t].map(String):void 0,P=h(w??k)??[],W=h(A);return e(H,{allowsMultipleExpanded:N==="multiple",defaultExpandedKeys:P,expandedKeys:W,onExpandedChange:t=>{const l=new Set([...t].map(String));v&&l.size===0||I?.(l)},className:r("px-0",i==="bordered"&&["px-4 py-4 rounded-xl border-2 border-border-subtle"],i==="shadow"&&["px-4 py-4 rounded-xl bg-surface-subtle border border-border-subtle"],F),children:c.map((t,l)=>{const f=b(t,l),{title:$,subtitle:m,startContent:g,indicator:u,hideIndicator:z,disableIndicatorAnimation:x,isDisabled:B,classNames:o,onPress:G,children:M}=t.props;return d(q,{children:[e(J,{id:f,isDisabled:B,className:r("w-full py-2","data-disabled:pointer-events-none data-disabled:opacity-50",i==="bordered"&&["rounded-xl py-0"],i==="splitted"&&["flex flex-col bg-surface-subtle rounded-xl border border-border-subtle"],s&&"py-0",n?.base,o?.base),children:({isExpanded:a})=>d(O,{children:[e("h2",{"data-open":a||void 0,className:r(n?.heading,o?.heading),children:d(L,{slot:"trigger","data-open":a||void 0,onPress:G,"aria-label":t.props["aria-label"],className:r("w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none","border-0 focus-visible:outline-2 focus-visible:outline focus-visible:outline-border-subtle","bg-transparent text-inherit",s&&["py-2"],n?.trigger,o?.trigger),children:[g!=null&&e("span",{className:r("shrink-0",n?.startContent,o?.startContent),children:g}),d("span",{className:r("flex-1 text-left",n?.titleWrapper,o?.titleWrapper),children:[e("span",{className:r("block text-xl font-semibold",s&&"text-base",n?.title,o?.title),children:$}),m!=null&&e("span",{className:r("block text-base",s&&"text-sm",n?.subtitle,o?.subtitle),children:m})]}),z||D?null:e("span",{"aria-hidden":"true","data-open":a||void 0,className:r("shrink-0",!x&&"transition-transform duration-200",!x&&a&&"-rotate-180",n?.indicator,o?.indicator),children:typeof u=="function"?e(u,{isOpen:a}):u??e(y,{className:"w-4 h-4"})})]})}),e("div",{className:r("grid transition-[grid-template-rows] duration-200 ease-in-out",a?"grid-rows-[1fr]":"grid-rows-[0fr]"),children:e("div",{className:"overflow-hidden min-h-0",children:e(Q,{className:r(s?"py-1":"py-2",n?.content,o?.content),children:M})})})]})}),S&&l<c.length-1&&e("hr",{className:r("border-solid border-b-0 border-x-0",K?.className??["my-2 border-border-subtle",i==="shadow"&&"border-border"])})]},f)})})}function ee(){return e(y,{className:"w-4 h-4"})}export{C as Accordion,E as AccordionItem,ee as AccordionItemArrow,C as default};
+"use client";import{jsx as e,jsxs as b,Fragment as G}from"react/jsx-runtime";import{Children as V,isValidElement as q,Fragment as H,useState as D,useEffect as J}from"react";import{DisclosureGroup as Q,Disclosure as R,Button as U,DisclosurePanel as X}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import{DownArrow as M}from"../Icon/DownArrow.js";const Y=200;function oe(n){return null}function le({children:n,selectionMode:f="single",defaultSelectedKeys:m,defaultExpandedKeys:h,selectedKeys:d,onSelectionChange:c,disallowEmptySelection:g=!1,keepContentMounted:y=!1,hideIndicator:s=!1,showDivider:K=!0,dividerProps:P,variant:u,isCompact:p,className:T,itemClasses:o}){const x=V.toArray(n).filter(q),w=(t,a)=>String(t.key??a).replace(/^\.\$/,"").replace(/=2/g,":").replace(/=0/g,"="),F=x.map(w),k=t=>t==="all"?F:t?[...t].map(String):void 0,W=k(m??h)??[],j=k(d);return e(Q,{allowsMultipleExpanded:f==="multiple",defaultExpandedKeys:W,expandedKeys:j,onExpandedChange:t=>{const a=new Set([...t].map(String));g&&a.size===0||c?.(a)},className:r("px-0",u==="bordered"&&["px-4 py-4 rounded-xl border-2 border-border-subtle"],u==="shadow"&&["px-4 py-4 rounded-xl bg-surface-subtle border border-border-subtle"],T),children:x.map((t,a)=>{const A=w(t,a),{title:L,subtitle:S,startContent:I,indicator:N,hideIndicator:O,disableIndicatorAnimation:v,isDisabled:_,keepContentMounted:$,classNames:l,onPress:z,children:B}=t.props;return b(H,{children:[e(R,{id:A,isDisabled:_,className:r("w-full py-2","data-disabled:pointer-events-none data-disabled:opacity-50",u==="bordered"&&["rounded-xl py-0"],u==="splitted"&&["flex flex-col bg-surface-subtle rounded-xl border border-border-subtle"],p&&"py-0",o?.base,l?.base),children:({isExpanded:i})=>b(G,{children:[e("h2",{"data-open":i||void 0,className:r(o?.heading,l?.heading),children:b(U,{slot:"trigger","data-open":i||void 0,onPress:z,"aria-label":t.props["aria-label"],className:r("w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none","border-0 focus-visible:outline-2 focus-visible:outline focus-visible:outline-border-subtle","bg-transparent text-inherit",p&&["py-2"],o?.trigger,l?.trigger),children:[I!=null&&e("span",{className:r("shrink-0",o?.startContent,l?.startContent),children:I}),b("span",{className:r("flex-1 text-left",o?.titleWrapper,l?.titleWrapper),children:[e("span",{className:r("block text-xl font-semibold",p&&"text-base",o?.title,l?.title),children:L}),S!=null&&e("span",{className:r("block text-base",p&&"text-sm",o?.subtitle,l?.subtitle),children:S})]}),O||s?null:e("span",{"aria-hidden":"true","data-open":i||void 0,className:r("shrink-0",!v&&"transition-transform duration-200",!v&&i&&"-rotate-180",o?.indicator,l?.indicator),children:typeof N=="function"?e(N,{isOpen:i}):N??e(M,{className:"w-4 h-4"})})]})}),e(Z,{isExpanded:i,keepContentMounted:$??y,className:r(p?"py-1":"py-2",o?.content,l?.content),children:B})]})}),K&&a<x.length-1&&e("hr",{className:r("border-solid border-b-0 border-x-0",P?.className??["my-2 border-border-subtle",u==="shadow"&&"border-border"])})]},A)})})}function Z({isExpanded:n,keepContentMounted:f,className:m,children:h}){const[d,c]=D(!1),[g,y]=D(n);return g!==n&&(y(n),c(!n)),J(()=>{if(!d)return;const s=setTimeout(()=>c(!1),Y+50);return()=>clearTimeout(s)},[d]),e("div",{className:r("grid transition-[grid-template-rows] duration-200 ease-in-out",n?"grid-rows-[1fr]":"grid-rows-[0fr]"),onTransitionEnd:s=>{s.target===s.currentTarget&&!n&&c(!1)},children:e("div",{className:"overflow-hidden min-h-0",children:e(X,{className:m,children:f||n||d?h:null})})})}function ae(){return e(M,{className:"w-4 h-4"})}export{le as Accordion,oe as AccordionItem,ae as AccordionItemArrow,le as default};

package/components/Icon/UserIcon.js

@@ -1 +1 @@
-"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{cn as n}from"../../utils/cn.js";function c({className:t,size:r=16}){return o("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n("text-ffl-gray-500 flex-shrink-0",t),stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),e("circle",{cx:"12",cy:"7",r:"4"})]})}export{c as UserIcon,c as default};
+"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cn as n}from"../../utils/cn.js";function c({className:o,size:r=16}){return t("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n("flex-shrink-0",o),stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),e("circle",{cx:"12",cy:"7",r:"4"})]})}export{c as UserIcon,c as default};

package/components/ModalOverlay/ModalOverlay.d.ts

@@ -13,7 +13,7 @@ import { ModalOverlayProps } from './ModalOverlay.types';
  * @clicktap/ui copies installed (ordinary pnpm version skew) the trigger wrote `visible` into one
  * copy while the overlay read the other's `unmounted` default — `animate="unmounted"` names no
  * variant, framer-motion holds `initial: "hidden"`, and every trigger-driven modal sat mounted at
- * `opacity: 0` with zero errors (CTAP-1210, noco). react-aria's context is the safe dependency:
+ * `opacity: 0` with zero errors (CTAP-1210, found by a consumer). react-aria's context is the safe dependency:
  * if react-aria-components itself is duplicated, everything breaks loudly.
  *
  * Exported for unit tests only.

package/docs/migrations/2026/06/ui-2026-06-17-select-standardization.md

@@ -2,7 +2,7 @@
 
 **Date:** 2026-06-17
 **Package:** `@clicktap/ui`
-**Affects:** Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (Crispi, FFL, and any fork that renders pickers, sort controls, country/region selects, or configurable-product options).
+**Affects:** Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (downstream projects and any fork that renders pickers, sort controls, country/region selects, or configurable-product options).
 **Classification:** FEATURE + BREAKING
 **Breaking:** Yes — (1) `DropdownSelect` removed, (2) the bare `<Select>` is now a **button picker**, not a combobox, (3) `DropdownSelect`'s `classNames.trigger` is now `classNames.input`, (4) the root is `w-full` by default, (5) `<Option>` is react-stately's `Item` — keyed by `key` (no `id`) and **cannot be wrapped**.
 **Formerly named:** `2026-06-17-select-standardization.md` — renamed 2026-08-10 (CTAP-1214) for global filename uniqueness; library guides carry their package slug so they can never collide with an app-level guide in a consumer's aggregated working set. **If you carry a `-applied` sibling under the old name, rename it to match — do NOT re-apply.**

package/docs/migrations/2026/07/ui-2026-07-31-ui-exports-bundler-resolution.md

@@ -1,7 +1,7 @@
 # `@clicktap/ui` resolves its deep subpaths under `moduleResolution: bundler` (CTAP-1060)
 
 **Date:** 2026-07-31
-**Revised:** 2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See "Test runners (Jest)" below; reported by noco.
+**Revised:** 2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See "Test runners (Jest)" below; reported by a consumer.
 **Package:** `@clicktap/ui`
 **Breaking:** No — additive to the `exports` map. Existing `moduleResolution: node` / `node10`
 consumers are unaffected (that resolver ignores `exports`); this only *adds* working resolution under
@@ -50,7 +50,7 @@ emits only `.d.ts` for it).
 The original map declared only `types` + `import` conditions. That covers bundlers — but **Node CJS
 resolution** (what Jest uses without ESM flags) matches neither, so it fell through to the `.d.ts`
 and died on `export interface`. Any consumer whose Jest suite touches `useCooldown` (i.e. anyone
-adopting the CTAP-1114 `useResendCode` pattern *with* its tests) hit this; noco worked around it with
+adopting the CTAP-1114 `useResendCode` pattern *with* its tests) hit this; one consumer worked around it with
 a `moduleNameMapper` straight to the `.js` files.
 
 Since this revision every runtime subpath entry carries a **`default` condition (last)** pointing at

package/docs/migrations/2026/08/ui-2026-08-07-ui-peer-contract-form-graphql-optional-peers.md

@@ -12,7 +12,7 @@
 CTAP-1158 validated every publishable lib manifest against its real imports. For `@clicktap/ui`
 that audit changed the peer contract and corrected a wrong dependency pin, but no guide shipped
 with it — consumers would meet the changes as unexplained manifest churn on the next release
-(reported by family-rpg, 2026-08-07). This is that guide.
+(reported by a consumer, 2026-08-07). This is that guide.
 
 ## What changed
 

package/docs/migrations/2026/08/ui-2026-08-11-password-reveal-toggle.md

@@ -2,7 +2,7 @@
 
 **Date:** 2026-08-11
 **Revised:** 2026-08-11 — consumer action now says to rename a component named for the press-and-hold
-gesture (family-rpg's `HoldToRevealButton`), not only to swap its handlers.
+gesture (for example a `HoldToRevealButton`), not only to swap its handlers.
 **Package:** `@clicktap/ui`
 **Affects:** `@clicktap/ui` — `Input` with `type="password"`.
 **Classification:** IMPROVEMENT (UX / accessibility)
@@ -69,7 +69,7 @@ Shipped in `@clicktap/ui` **0.43.6**.
   and add `aria-pressed` + the state-dependent `aria-label` while you are in there. The reference
   frontend also updated its one bespoke reveal (`UpdateEmailForm`) to match.
   - **Rename the component if its name describes the gesture.** If you named it for press-and-hold
-    when you applied CTAP-1128 — family-rpg had `HoldToRevealButton` (2026-08-11) — the name now
+    when you applied CTAP-1128 — one consumer had `HoldToRevealButton` (2026-08-11) — the name now
     documents behaviour the code no longer implements, in the one place nobody re-reads. Rename it
     (`PasswordRevealButton`, `ShowPasswordToggle`) in the same change as the handler swap, and grep
     for the old name in tests and stories.

package/docs/migrations/2026/08/ui-2026-08-11-peer-ranges-capped.md

@@ -57,7 +57,7 @@ rather than as an error.
 ### When the duplicate is transitive — nothing of yours to pin
 
 The paragraph above assumes the second copy comes from a declaration you own. Often it does not:
-crispi resolves `react-stately` 3.49.0 cleanly across every workspace member and still carries a
+one consumer resolves `react-stately` 3.49.0 cleanly across every workspace member and still carries a
 second copy at 3.46.0, arriving via `@adobe/react-spectrum` → `react-aria-components`. No manifest of
 theirs names it, so there is no pin to correct.
 

package/docs/migrations/2026/08/ui-2026-08-24-accordion-author-key-space.md

@@ -4,7 +4,7 @@
 **Package:** `@clicktap/ui`
 **Affects:** every controlled or default-expanded `Accordion` — checkout payment method selection, checkout's `defaultExpandedKeys={['cart']}`, totals/discount panel, PDP mobile overview, filter groups.
 **Classification:** BUGFIX
-**Breaking:** No — unless you shipped a workaround that pre-prefixes keys (see crispi note).
+**Breaking:** No — unless you shipped a workaround that pre-prefixes keys (see the shim note below).
 **Ticket:** CTAP-1404
 
 ## The defect (2.0.x regression from the CTAP-1383 react-aria rewrite)
@@ -17,11 +17,11 @@ were only `String()`ed, so:
 1. `selectedKeys` / `defaultSelectedKeys` / `defaultExpandedKeys` never matched
    any item — nothing opened, nothing highlighted. The checkout payment step's
    method selection "not working" was this.
-2. `onSelectionChange` handed the PREFIXED id back out — crispi's checkout
+2. `onSelectionChange` handed the PREFIXED id back out — a consumer's checkout
    dispatched `".$CYBERSOURCE"` as a payment method code to the backend.
 
 The heroui accordion this replaced handled keys correctly. Diagnosed by the
-crispi session against the installed 2.0.6 bundle.
+consumer's session against the installed 2.0.6 bundle.
 
 ## The fix
 
@@ -36,13 +36,13 @@ round-trips with no output translation. `"all"` and unkeyed children (positional
 
 1. Take the release; no call-site changes needed — controlled accordions start
    working as written.
-2. **Delete compensating shims.** crispi: `libs/crispi-ui/.../Accordion.tsx`
-   wrapper (crispi-monorepo `7a44704f0`) must be REMOVED when taking this
+2. **Delete compensating shims.** A consumer-side `.../Accordion.tsx`
+   wrapper that pre-prefixes keys must be REMOVED when taking this
    release — it translates keys into the prefixed space, which no longer
    exists, so keeping it reintroduces the bug in the other direction. Check the
    shim's own escape handling is not needed elsewhere (this fix also covers
    escaped keys, which a bare `.$`-strip shim does not).
-3. If any code path stored or transmitted a prefixed id (`.$…`) — crispi saw
+3. If any code path stored or transmitted a prefixed id (`.$…`) — one consumer saw
    them reach the backend as payment codes — check persisted data for the
    `.$` prefix.
 

package/docs/migrations/2026/09/ui-2026-09-16-modal-overlay-detached-motion-element.md

@@ -28,7 +28,7 @@ observed:
    keyframe resolvers synchronously on the detached element.
 
 🚨 Thrown inside framer-motion's frame loop, so nothing reaches server logs and no React error
-boundary catches it. noco hit it in the warranty admin: a controlled drawer (route 1) containing a
+boundary catches it. A consumer hit it in its warranty admin: a controlled drawer (route 1) containing a
 never-opened trigger-driven Page Builder overlay threw **13 errors on every close**, and in
 production that broke the frame loop — the close animation and the success toast were both lost.
 Every other trigger-driven overlay in that app (delete confirms, edit modals) carried the same
@@ -49,8 +49,8 @@ already gets from `AnimatePresence` is now the same on both paths:
 
 ## Consumer impact
 
-- **Nothing to change.** Take the release. If you gated the overlay yourself in a wrapper (noco
-  tried it in `@noco/ui`), **remove that gate**: mounting only once already open, with the hook
+- **Nothing to change.** Take the release. If you gated the overlay yourself in a wrapper (one
+  consumer tried it in its own UI library), **remove that gate**: mounting only once already open, with the hook
   initialized to `visible`, gives framer-motion no transition to play and leaves the backdrop stuck
   at `opacity: 0`. The fix has to live where the animation state is derived.
 - ⚠️ Do not read the mount as a signal. Nothing should depend on a closed trigger-driven overlay

package/docs/migrations/2026/09/ui-2026-09-18-pin-input-autofill-and-controlled-value.md

@@ -5,11 +5,11 @@
 **Affects:** `src/components/PinInput/PinInput.tsx`, `PinInput.types.ts`. Every consumer of `<PinInput>` (signup, forgot-password and email/password-change verification on the storefront).
 **Classification:** BUGFIX (three) + IMPROVEMENT (`value`/`name` honored)
 **Breaking:** No API change. **Behavioral:** passing `value` now controls the boxes (it was silently ignored); `maxLength` is no longer rendered; `autoComplete="one-time-code"` is on the first box only.
-**Ticket:** CTAP-1749 (from NOCOE-2944)
+**Ticket:** CTAP-1749
 
 ## What was wrong
 
-Four things, all in this component (a consumer wrapper such as noco's `libs/noco-ui` only restyles it):
+Four things, all in this component (a consumer wrapper in a consumer's UI library only restyles it):
 
 1. **Android autofill and Gboard's clipboard chip lost five of six digits.** The paste handler split
    digits across the boxes correctly, but autofill and the keyboard chip insert text as an *input*

package/docs/migrations/2026/10/ui-2026-10-02-user-icon-drops-project-color-class.md

@@ -0,0 +1,25 @@
+# `UserIcon` no longer carries a project's color class
+
+**Date:** 2026-10-02
+**Package:** `@clicktap/ui`
+**Affects:** `components/Icon/UserIcon`
+**Classification:** IMPROVEMENT
+**Breaking:** No for any app that does not define the removed color token. One that does loses that color on the icon until it passes the class itself.
+**Ticket:** CTAP-2094
+
+## What changed
+
+`UserIcon` hard-coded a `text-*-gray-500` class for a color token one consuming project defines in its
+own theme. The platform defines no such token, so the class did nothing here, and it named a project in
+the shared library. The icon now carries only `flex-shrink-0` and inherits its color like the other
+icons, so a consumer sets the color it wants through `className`.
+
+## Migrate
+
+If your theme defined that token (or any color you relied on for this icon), pass it:
+
+```tsx
+<UserIcon className="text-brand-gray-500" />
+```
+
+Nothing else.

package/docs/migrations/2026/10/ui-2026-10-06-accordion-mounts-collapsed-content-on-expand.md

@@ -0,0 +1,93 @@
+# `Accordion` mounts a collapsed item's content only when it expands
+
+**Date:** 2026-10-06
+**Package:** `@clicktap/ui`
+**Affects:** `components/Accordion` (`Accordion`, `AccordionItem`)
+**Classification:** BUGFIX
+**Breaking:** No API change. ⚠️ Behavior change for any consumer that relies on collapsed content being in the server-rendered HTML, findable with the browser's find-in-page, or keeping its state across a collapse. Pass `keepContentMounted` there.
+**Ticket:** CTAP-2217
+
+## Dependencies
+
+*None*
+
+## Summary
+
+The react-aria `Accordion` that replaced heroui's in `@clicktap/ui` 2.0 rendered every item's content,
+expanded or not, and hid collapsed items with CSS only. Collapsed content mounted, ran its effects and
+queries, and filled the DOM. One consumer's page, with a data-fetching panel per group and nested
+accordions, sent 520 GraphQL requests and rendered about 72,000 hidden DOM nodes on load. heroui never
+mounted a collapsed item unless `keepContentMounted` was set, and `AccordionProps` kept declaring that
+prop, but the component ignored it.
+
+The default is now heroui's: a collapsed item's content is not rendered. It mounts when the item expands,
+stays mounted while the collapse transition runs, then unmounts. `keepContentMounted` works again.
+
+## Changes
+
+| | Before | After |
+| --- | --- | --- |
+| Collapsed item, default | Content mounted, hidden by CSS | Content not rendered |
+| Expanding | Already mounted | Content mounts |
+| Collapsing | Stays mounted | Unmounts once the height transition ends (or after 250 ms) |
+| `keepContentMounted` on `Accordion` | Accepted, ignored | Every item's content always mounted, as before this fix |
+| `keepContentMounted` on `AccordionItem` | Not a prop | Overrides the `Accordion`'s value for that item, in either direction |
+
+The panel element itself (`DisclosurePanel`, the target of the trigger's `aria-controls`) is still always
+rendered; only its children are conditional.
+
+**Source**: `libs/frontend-modules/ui/src/components/Accordion/Accordion.tsx` (`AccordionPanel`)
+
+## Migrate
+
+Most accordions need nothing: menus, filters, cookie categories and checkout sections are interactive
+content that nobody needs before it is opened. Pass `keepContentMounted` where one of these holds.
+
+1. **The content must be in the initial HTML**, typically for search engines: FAQ answers, product
+   details, specifications.
+
+   ```tsx
+   <Accordion keepContentMounted>
+     {faqs.map((faq) => (
+       <AccordionItem key={faq.id} title={faq.question}>
+         {faq.answer}
+       </AccordionItem>
+     ))}
+   </Accordion>
+   ```
+
+   The platform's reference storefront does this in `apps/frontend/components/FAQ/FAQ.tsx`.
+
+2. **State inside the panel must survive a collapse**: a half-filled form, a payment widget that
+   initializes once, a nested accordion's open item. Set it on the whole accordion or on just that
+   item:
+
+   ```tsx
+   <Accordion>
+     <AccordionItem key="card" title="Card" keepContentMounted>
+       <CardForm />
+     </AccordionItem>
+     <AccordionItem key="paypal" title="PayPal">
+       <PayPalButton />
+     </AccordionItem>
+   </Accordion>
+   ```
+
+   An item can also opt out of a group-level `keepContentMounted` with `keepContentMounted={false}`.
+
+3. **Code that reads collapsed content from the DOM** (a test that queries a collapsed item's text, a
+   script that measures it) must expand the item first, or the accordion must keep its content mounted.
+
+Find your call sites:
+
+```bash
+grep -rn '<Accordion\b' apps/ libs/ --include=*.tsx
+```
+
+## Verify
+
+- With the default, open a page with an accordion and search the page source (view-source, not the
+  inspector) for text from a collapsed item: it is absent. Expanding the item renders it.
+- With `keepContentMounted`, the same text is present in the page source.
+- On a page whose panels fetch data, the network panel shows no requests for collapsed items until they
+  are opened.

package/docs/migrations/index.json

@@ -1,4 +1,24 @@
 [
+  {
+    "path": "2026/10/ui-2026-10-06-accordion-mounts-collapsed-content-on-expand.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-10-06",
+    "title": "`Accordion` mounts a collapsed item's content only when it expands",
+    "classification": "BUGFIX",
+    "breaking": "No API change. ⚠️ Behavior change for any consumer that relies on collapsed content being in the server-rendered HTML, findable with the browser's find-in-page, or keeping its state across a collapse. Pass `keepContentMounted` there.",
+    "affects": "`components/Accordion` (`Accordion`, `AccordionItem`)"
+  },
+  {
+    "path": "2026/10/ui-2026-10-02-user-icon-drops-project-color-class.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-10-02",
+    "title": "`UserIcon` no longer carries a project's color class",
+    "classification": "IMPROVEMENT",
+    "breaking": "No for any app that does not define the removed color token. One that does loses that color on the icon until it passes the class itself.",
+    "affects": "`components/Icon/UserIcon`"
+  },
   {
     "path": "2026/09/ui-2026-09-30-modal-fade-no-final-frame-blink.md",
     "module": "libs/frontend-modules/ui",
@@ -156,7 +176,7 @@
     "date": "2026-08-24",
     "title": "Accordion controlled selection matches authored keys again",
     "classification": "BUGFIX",
-    "breaking": "No — unless you shipped a workaround that pre-prefixes keys (see crispi note).",
+    "breaking": "No — unless you shipped a workaround that pre-prefixes keys (see the shim note below).",
     "affects": "every controlled or default-expanded `Accordion` — checkout payment method selection, checkout's `defaultExpandedKeys={['cart']}`, totals/discount panel, PDP mobile overview, filter groups."
   },
   {
@@ -393,7 +413,7 @@
     "breaking": "No — additive to the `exports` map. Existing `moduleResolution: node` / `node10`",
     "affects": "",
     "revised": "2026-08-08",
-    "revised_note": "2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See \"Test runners (Jest)\" below; reported by noco."
+    "revised_note": "2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See \"Test runners (Jest)\" below; reported by a consumer."
   },
   {
     "path": "2026/06/ui-2026-06-18-select-hiddenselect-setvalue-crash.md",
@@ -413,7 +433,7 @@
     "title": "Select standardization — one `<Select searchable>`, `DropdownSelect` removed",
     "classification": "FEATURE + BREAKING",
     "breaking": "Yes — (1) `DropdownSelect` removed, (2) the bare `<Select>` is now a **button picker**, not a combobox, (3) `DropdownSelect`'s `classNames.trigger` is now `classNames.input`, (4) the root is `w-full` by default, (5) `<Option>` is react-stately's `Item` — keyed by `key` (no `id`) and **cannot be wrapped**.",
-    "affects": "Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (Crispi, FFL, and any fork that renders pickers, sort controls, country/region selects, or configurable-product options)."
+    "affects": "Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (downstream projects and any fork that renders pickers, sort controls, country/region selects, or configurable-product options)."
   },
   {
     "path": "2026/05/ui-2026-05-29-password-check-requirements-variant.md",

package/package.json

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