@exromany/lido-app-ui 0.0.1-pre.3 → 0.0.1-pre.4

package/README.md

@@ -28,13 +28,21 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define. `ThemeSwitcher` needs `CookieThemeProvider`; the static `ThemeProvider` has no toggle, so the switcher renders but clicking does nothing. In SSR apps pass the request cookie as `initialThemeName` so the label is right on first paint (the icon already follows `data-lido-theme` in CSS).
 
 ## Router links
 
-Link components (`TextLink`, `SmallCard`) render a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. Hash links, `download` links and links with a non-`_self` `target` always stay a plain `<a>`.
+Every app-ui link (`TextLink`, `NavLink`, `Button` and `IconButton` with `href`, `SmallCard`, `Tag` with `href`, `Breadcrumbs` items with `href`, `Logo` with `href`) renders a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. In-app hash links, `download` links and links with a non-`_self` `target` stay a plain `<a>`; absolute URLs always go to `externalComponent` when one is set. Absolute `http(s)` URLs open in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) unless `target` is passed. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
 
-Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level:
+Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass it directly:
+
+```tsx
+import NextLink from 'next/link'
+import { LinkProvider } from '@lidofinance/lido-app-ui'
+;<LinkProvider component={NextLink}>{children}</LinkProvider>
+```
+
+Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level. Router-only props set per link with `linkProps` are split out so they don't land on the `<a>`; this requires the `LinkRouterProps` augmentation shown below:
 
 ```tsx
 import { forwardRef } from 'react'
@@ -43,8 +51,8 @@ import NextLink from 'next/link'
 import { LinkProvider, type LinkComponentProps } from '@lidofinance/lido-app-ui'
 
 const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
-  ({ href, ...rest }, ref) => (
-    <NextLink href={href}>
+  ({ href, prefetch, replace, scroll, ...rest }, ref) => (
+    <NextLink href={href} prefetch={prefetch} replace={replace} scroll={scroll}>
       <a ref={ref} {...rest} />
     </NextLink>
   ),
@@ -59,42 +67,119 @@ export default function App({ Component, pageProps }: AppProps) {
 }
 ```
 
+react-router — it takes `to` instead of `href`:
+
+```tsx
+import { forwardRef } from 'react'
+import { Link } from 'react-router-dom'
+import type { LinkComponentProps } from '@lidofinance/lido-app-ui'
+
+const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
+  ({ href, ...rest }, ref) => <Link ref={ref} to={href} {...rest} />,
+)
+```
+
+Router-only options such as `prefetch` are typed by augmenting `LinkRouterProps` once, then set per link with `linkProps`. They reach only the `LinkProvider` components, never a plain `<a>`:
+
+```tsx
+declare module '@lidofinance/lido-app-ui' {
+  interface LinkRouterProps {
+    prefetch?: boolean
+    replace?: boolean
+    scroll?: boolean
+  }
+}
+
+;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
+```
+
+## Typography
+
+`Typography` renders the type scale; it sets no color unless asked.
+
+- `variant`: `h1`, `h2`, `h3`, `amount`, `bodyLarge`, `body` (default), `description`, `caption`. Also decides the tag; override with `as`.
+- `weight`: `thin` | `regular` | `medium` | `semibold` | `bold`; overrides the variant's weight on any variant. `thin` is Manrope ExtraLight (200).
+- `color`: `default`, `secondary`, `tertiary`, `neutral`, `active`, `success`, `warning`, `error`, `info`, `inverse`, `disabled`. Omit to inherit.
+- Shortcuts: `H1`, `H2`, `H3`, `BodyLarge`, `Body`, `Description`, `Caption`.
+
+app-ui sets no default text color, so set it once in the app:
+
+```css
+body {
+  color: var(--lido-app-ui-color-text-default);
+}
+```
+
+PostCSS mixins: `font-amount`, `font-caption` (plus `font-h1`, `font-body`, ...). `font-rich-input` and `font-group-name` are deprecated.
+
+Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amount`) and `groupName` (use `caption`).
+
 ## Customization
 
-Override any token after importing the stylesheet:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-default` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
 
 ```css
 :root {
-  --lido-app-ui-color-border-active: #0085ff;
   --lido-app-ui-border-radius-card: 20px;
 }
+
+:root,
+[data-lido-theme='light'] {
+  --lido-app-ui-color-border-active: #0085ff;
+}
+
+[data-lido-theme='dark'] {
+  --lido-app-ui-color-border-active: #339dff;
+}
 ```
 
 The typography mixins and breakpoint definitions are published too, for products running `postcss-mixins` / `postcss-custom-media`:
 
 ```js
-// postcss.config.js
-import path from 'path'
+// postcss.config.mjs
+import { createRequire } from 'node:module'
+import path from 'node:path'
+
+const require = createRequire(import.meta.url)
+const stylesDir = path.dirname(
+  require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
+)
 
 export default {
   plugins: {
     '@csstools/postcss-global-data': {
-      files: [
-        require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
-      ],
-    },
-    'postcss-mixins': {
-      mixinsDir: path.dirname(
-        require.resolve(
-          '@lidofinance/lido-app-ui/styles/typography-mixins.css',
-        ),
-      ),
+      files: [path.join(stylesDir, 'breakpoints.css')],
     },
+    'postcss-mixins': { mixinsDir: stylesDir },
     'postcss-custom-media': { preserve: false },
   },
 }
 ```
 
+## Layout
+
+Breakpoints are desktop-first: `-down` is `(width <= N)`, `-up` is `(width > N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
+
+| Name | N      |
+| ---- | ------ |
+| `xl` | 1280px |
+| `lg` | 1024px |
+| `md` | 900px  |
+| `sm` | 600px  |
+| `xs` | 400px  |
+
+The Sidebar drawer and Logo `auto` switch at `lg`. In JS, `downQuery('md')` / `upQuery('md')` build the matching `matchMedia` strings.
+
+In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies at that width and below:
+
+```tsx
+<Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>
+```
+
+Page shells align to the page gutter, which shrinks on narrow screens: `padding-inline: var(--lido-app-ui-page-gutter)`.
+
+Popovers, tooltips and modals with `withOverlay` portal to `<body>` and stack by `--lido-app-ui-z-index-*`: header 250, popover and modal 1000, toast 1050, tooltip 1100. Keep your own app chrome below 1000. `Modal` `inertOthers` makes the rest of `<body>` inert; mark body-level toast or live-region roots with `data-lido-overlay-keep` to keep them live.
+
 ## More
 
 This package is part of the [`lidofinance/ui`](https://github.com/lidofinance/ui) monorepo — see the [repo README](https://github.com/lidofinance/ui#readme) for the full package overview, theming, CSS variable customization, and contribution guide.

package/dist/README.md

@@ -28,13 +28,21 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define. `ThemeSwitcher` needs `CookieThemeProvider`; the static `ThemeProvider` has no toggle, so the switcher renders but clicking does nothing. In SSR apps pass the request cookie as `initialThemeName` so the label is right on first paint (the icon already follows `data-lido-theme` in CSS).
 
 ## Router links
 
-Link components (`TextLink`, `SmallCard`) render a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. Hash links, `download` links and links with a non-`_self` `target` always stay a plain `<a>`.
+Every app-ui link (`TextLink`, `NavLink`, `Button` and `IconButton` with `href`, `SmallCard`, `Tag` with `href`, `Breadcrumbs` items with `href`, `Logo` with `href`) renders a plain `<a>` by default. Wrap the app in `LinkProvider` to route in-app hrefs through your router's link component; `externalComponent` does the same for absolute URLs. In-app hash links, `download` links and links with a non-`_self` `target` stay a plain `<a>`; absolute URLs always go to `externalComponent` when one is set. Absolute `http(s)` URLs open in a new tab (`target="_blank"`, `rel="noopener noreferrer"`) unless `target` is passed. Adapters must be `forwardRef` components: under React 18 `ref` is never passed as a prop.
 
-Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level:
+Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass it directly:
+
+```tsx
+import NextLink from 'next/link'
+import { LinkProvider } from '@lidofinance/lido-app-ui'
+;<LinkProvider component={NextLink}>{children}</LinkProvider>
+```
+
+Next.js 12 — `next/link` needs an `<a>` child, so wrap it once at module level. Router-only props set per link with `linkProps` are split out so they don't land on the `<a>`; this requires the `LinkRouterProps` augmentation shown below:
 
 ```tsx
 import { forwardRef } from 'react'
@@ -43,8 +51,8 @@ import NextLink from 'next/link'
 import { LinkProvider, type LinkComponentProps } from '@lidofinance/lido-app-ui'
 
 const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
-  ({ href, ...rest }, ref) => (
-    <NextLink href={href}>
+  ({ href, prefetch, replace, scroll, ...rest }, ref) => (
+    <NextLink href={href} prefetch={prefetch} replace={replace} scroll={scroll}>
       <a ref={ref} {...rest} />
     </NextLink>
   ),
@@ -59,42 +67,119 @@ export default function App({ Component, pageProps }: AppProps) {
 }
 ```
 
+react-router — it takes `to` instead of `href`:
+
+```tsx
+import { forwardRef } from 'react'
+import { Link } from 'react-router-dom'
+import type { LinkComponentProps } from '@lidofinance/lido-app-ui'
+
+const AppLink = forwardRef<HTMLAnchorElement, LinkComponentProps>(
+  ({ href, ...rest }, ref) => <Link ref={ref} to={href} {...rest} />,
+)
+```
+
+Router-only options such as `prefetch` are typed by augmenting `LinkRouterProps` once, then set per link with `linkProps`. They reach only the `LinkProvider` components, never a plain `<a>`:
+
+```tsx
+declare module '@lidofinance/lido-app-ui' {
+  interface LinkRouterProps {
+    prefetch?: boolean
+    replace?: boolean
+    scroll?: boolean
+  }
+}
+
+;<SmallCard href='/keys' title='Keys' linkProps={{ prefetch: false }} />
+```
+
+## Typography
+
+`Typography` renders the type scale; it sets no color unless asked.
+
+- `variant`: `h1`, `h2`, `h3`, `amount`, `bodyLarge`, `body` (default), `description`, `caption`. Also decides the tag; override with `as`.
+- `weight`: `thin` | `regular` | `medium` | `semibold` | `bold`; overrides the variant's weight on any variant. `thin` is Manrope ExtraLight (200).
+- `color`: `default`, `secondary`, `tertiary`, `neutral`, `active`, `success`, `warning`, `error`, `info`, `inverse`, `disabled`. Omit to inherit.
+- Shortcuts: `H1`, `H2`, `H3`, `BodyLarge`, `Body`, `Description`, `Caption`.
+
+app-ui sets no default text color, so set it once in the app:
+
+```css
+body {
+  color: var(--lido-app-ui-color-text-default);
+}
+```
+
+PostCSS mixins: `font-amount`, `font-caption` (plus `font-h1`, `font-body`, ...). `font-rich-input` and `font-group-name` are deprecated.
+
+Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amount`) and `groupName` (use `caption`).
+
 ## Customization
 
-Override any token after importing the stylesheet:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-default` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
 
 ```css
 :root {
-  --lido-app-ui-color-border-active: #0085ff;
   --lido-app-ui-border-radius-card: 20px;
 }
+
+:root,
+[data-lido-theme='light'] {
+  --lido-app-ui-color-border-active: #0085ff;
+}
+
+[data-lido-theme='dark'] {
+  --lido-app-ui-color-border-active: #339dff;
+}
 ```
 
 The typography mixins and breakpoint definitions are published too, for products running `postcss-mixins` / `postcss-custom-media`:
 
 ```js
-// postcss.config.js
-import path from 'path'
+// postcss.config.mjs
+import { createRequire } from 'node:module'
+import path from 'node:path'
+
+const require = createRequire(import.meta.url)
+const stylesDir = path.dirname(
+  require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
+)
 
 export default {
   plugins: {
     '@csstools/postcss-global-data': {
-      files: [
-        require.resolve('@lidofinance/lido-app-ui/styles/breakpoints.css'),
-      ],
-    },
-    'postcss-mixins': {
-      mixinsDir: path.dirname(
-        require.resolve(
-          '@lidofinance/lido-app-ui/styles/typography-mixins.css',
-        ),
-      ),
+      files: [path.join(stylesDir, 'breakpoints.css')],
     },
+    'postcss-mixins': { mixinsDir: stylesDir },
     'postcss-custom-media': { preserve: false },
   },
 }
 ```
 
+## Layout
+
+Breakpoints are desktop-first: `-down` is `(width <= N)`, `-up` is `(width > N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
+
+| Name | N      |
+| ---- | ------ |
+| `xl` | 1280px |
+| `lg` | 1024px |
+| `md` | 900px  |
+| `sm` | 600px  |
+| `xs` | 400px  |
+
+The Sidebar drawer and Logo `auto` switch at `lg`. In JS, `downQuery('md')` / `upQuery('md')` build the matching `matchMedia` strings.
+
+In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies at that width and below:
+
+```tsx
+<Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>
+```
+
+Page shells align to the page gutter, which shrinks on narrow screens: `padding-inline: var(--lido-app-ui-page-gutter)`.
+
+Popovers, tooltips and modals with `withOverlay` portal to `<body>` and stack by `--lido-app-ui-z-index-*`: header 250, popover and modal 1000, toast 1050, tooltip 1100. Keep your own app chrome below 1000. `Modal` `inertOthers` makes the rest of `<body>` inert; mark body-level toast or live-region roots with `data-lido-overlay-keep` to keep them live.
+
 ## More
 
 This package is part of the [`lidofinance/ui`](https://github.com/lidofinance/ui) monorepo — see the [repo README](https://github.com/lidofinance/ui#readme) for the full package overview, theming, CSS variable customization, and contribution guide.

package/dist/cjs/accordion/Accordion.cjs

@@ -9,6 +9,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const IconChevronUp = require('../icons/components/base/IconChevronUp.cjs');
 const IconChevronDown = require('../icons/components/base/IconChevronDown.cjs');
 
+/** Collapsible section, uncontrolled by default; pass `expanded` + `onExpandedChange` to drive it from your own state. */
 const Accordion = _ref => {
   let {
     title,

package/dist/cjs/accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n  useId,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\n\nimport { IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Accordion.module.css'\n\nexport type AccordionDataTestId = {\n  root?: string\n  header?: string\n  title?: string\n  content?: string\n}\n\nexport type AccordionProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n  title: ReactNode\n  border?: boolean\n  defaultExpanded?: boolean\n  expanded?: boolean\n  onExpandedChange?: (expanded: boolean) => void\n  dataTestId?: AccordionDataTestId\n}\n\nexport const Accordion = ({\n  title,\n  border = true,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  className,\n  dataTestId,\n  ...rest\n}: AccordionProps) => {\n  const [uncontrolledExpanded, setUncontrolledExpanded] =\n    useState(defaultExpanded)\n  const isExpanded = expanded ?? uncontrolledExpanded\n  const contentId = useId()\n\n  const handleToggle = () => {\n    const next = !isExpanded\n    if (expanded == null) setUncontrolledExpanded(next)\n    onExpandedChange?.(next)\n  }\n\n  return (\n    <div\n      className={cn(styles.accordion, className, {\n        [styles.borderless]: !border,\n      })}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <button\n        type='button'\n        className={styles.header}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleToggle}\n        data-testid={dataTestId?.header}\n      >\n        <span className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </span>\n        <span className={styles.chevron} aria-hidden='true'>\n          {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n        </span>\n      </button>\n      <div\n        id={contentId}\n        className={cn(styles.contentWrapper, {\n          [styles.expanded]: isExpanded,\n        })}\n      >\n        <div className={styles.content}>\n          <div\n            className={styles.contentInner}\n            data-testid={dataTestId?.content}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","_ref","title","border","defaultExpanded","expanded","onExpandedChange","children","className","dataTestId","rest","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpanded","contentId","useId","handleToggle","next","_jsxs","cn","styles","accordion","borderless","root","type","header","onClick","_jsx","chevron","IconChevronUp","IconChevronDown","id","contentWrapper","content","contentInner","displayName"],"mappings":";;;;;;;;;;;AA4BaA,MAAAA,SAAS,GAAGC,IAAA,IAUH;EAAA,IAVI;IACxBC,KAAK;AACLC,IAAAA,MAAM,GAAG,IAAI;AACbC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;IACRC,gBAAgB;IAChBC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;EACf,MAAM,CAACU,oBAAoB,EAAEC,uBAAuB,CAAC,GACnDC,cAAQ,CAACT,eAAe,CAAC,CAAA;AAC3B,EAAA,MAAMU,UAAU,GAAGT,QAAQ,IAAIM,oBAAoB,CAAA;AACnD,EAAA,MAAMI,SAAS,GAAGC,WAAK,EAAE,CAAA;EAEzB,MAAMC,YAAY,GAAGA,MAAM;IACzB,MAAMC,IAAI,GAAG,CAACJ,UAAU,CAAA;AACxB,IAAA,IAAIT,QAAQ,IAAI,IAAI,EAAEO,uBAAuB,CAACM,IAAI,CAAC,CAAA;IACnDZ,gBAAgB,GAAGY,IAAI,CAAC,CAAA;GACzB,CAAA;AAED,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IACEX,SAAS,EAAEY,EAAE,CAACC,gBAAM,CAACC,SAAS,EAAEd,SAAS,EAAE;AACzC,MAAA,CAACa,gBAAM,CAACE,UAAU,GAAG,CAACpB,MAAAA;AACxB,KAAC,CAAE;IACH,aAAaM,EAAAA,UAAU,EAAEe,IAAK;AAAA,IAAA,GAC1Bd,IAAI;AAAAH,IAAAA,QAAA,gBAERY,eAAA,CAAA,QAAA,EAAA;AACEM,MAAAA,IAAI,EAAC,QAAQ;MACbjB,SAAS,EAAEa,gBAAM,CAACK,MAAO;AACzB,MAAA,eAAA,EAAeZ,UAAW;AAC1B,MAAA,eAAA,EAAeC,SAAU;AACzBY,MAAAA,OAAO,EAAEV,YAAa;MACtB,aAAaR,EAAAA,UAAU,EAAEiB,MAAO;AAAAnB,MAAAA,QAAA,gBAEhCqB,cAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,gBAAM,CAACnB,KAAM;QAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAK,QAAAA,QAAA,EAC3DL,KAAAA;OACG,CAAC,eACP0B,cAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,gBAAM,CAACQ,OAAQ;AAAC,QAAA,aAAA,EAAY,MAAM;AAAAtB,QAAAA,QAAA,EAChDO,UAAU,gBAAGc,cAAA,CAACE,2BAAa,EAAE,EAAA,CAAC,gBAAGF,cAAA,CAACG,+BAAe,EAAE,EAAA,CAAA;AAAC,OACjD,CAAC,CAAA;KACD,CAAC,eACTH,cAAA,CAAA,KAAA,EAAA;AACEI,MAAAA,EAAE,EAAEjB,SAAU;AACdP,MAAAA,SAAS,EAAEY,EAAE,CAACC,gBAAM,CAACY,cAAc,EAAE;QACnC,CAACZ,gBAAM,CAAChB,QAAQ,GAAGS,UAAAA;AACrB,OAAC,CAAE;AAAAP,MAAAA,QAAA,eAEHqB,cAAA,CAAA,KAAA,EAAA;QAAKpB,SAAS,EAAEa,gBAAM,CAACa,OAAQ;AAAA3B,QAAAA,QAAA,eAC7BqB,cAAA,CAAA,KAAA,EAAA;UACEpB,SAAS,EAAEa,gBAAM,CAACc,YAAa;UAC/B,aAAa1B,EAAAA,UAAU,EAAEyB,OAAQ;AAAA3B,UAAAA,QAAA,EAEhCA,QAAAA;SACE,CAAA;OACF,CAAA;AAAC,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV,EAAC;AAEDP,SAAS,CAACoC,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n  useId,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from 'react'\n\nimport { IconChevronDown, IconChevronUp } from '../icons'\nimport cn from 'classnames'\n\nimport styles from './Accordion.module.css'\n\nexport type AccordionDataTestId = {\n  root?: string\n  header?: string\n  title?: string\n  content?: string\n}\n\nexport type AccordionProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n  title: ReactNode\n  /** Bottom divider; turn it off on the last item of a list. */\n  border?: boolean\n  defaultExpanded?: boolean\n  /** Controlled mode, pair with `onExpandedChange`. */\n  expanded?: boolean\n  onExpandedChange?: (expanded: boolean) => void\n  dataTestId?: AccordionDataTestId\n}\n\n/** Collapsible section, uncontrolled by default; pass `expanded` + `onExpandedChange` to drive it from your own state. */\nexport const Accordion = ({\n  title,\n  border = true,\n  defaultExpanded = false,\n  expanded,\n  onExpandedChange,\n  children,\n  className,\n  dataTestId,\n  ...rest\n}: AccordionProps) => {\n  const [uncontrolledExpanded, setUncontrolledExpanded] =\n    useState(defaultExpanded)\n  const isExpanded = expanded ?? uncontrolledExpanded\n  const contentId = useId()\n\n  const handleToggle = () => {\n    const next = !isExpanded\n    if (expanded == null) setUncontrolledExpanded(next)\n    onExpandedChange?.(next)\n  }\n\n  return (\n    <div\n      className={cn(styles.accordion, className, {\n        [styles.borderless]: !border,\n      })}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <button\n        type='button'\n        className={styles.header}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        onClick={handleToggle}\n        data-testid={dataTestId?.header}\n      >\n        <span className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </span>\n        <span className={styles.chevron} aria-hidden='true'>\n          {isExpanded ? <IconChevronUp /> : <IconChevronDown />}\n        </span>\n      </button>\n      <div\n        id={contentId}\n        className={cn(styles.contentWrapper, {\n          [styles.expanded]: isExpanded,\n        })}\n      >\n        <div className={styles.content}>\n          <div\n            className={styles.contentInner}\n            data-testid={dataTestId?.content}\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","_ref","title","border","defaultExpanded","expanded","onExpandedChange","children","className","dataTestId","rest","uncontrolledExpanded","setUncontrolledExpanded","useState","isExpanded","contentId","useId","handleToggle","next","_jsxs","cn","styles","accordion","borderless","root","type","header","onClick","_jsx","chevron","IconChevronUp","IconChevronDown","id","contentWrapper","content","contentInner","displayName"],"mappings":";;;;;;;;;;;AA8BA;AACaA,MAAAA,SAAS,GAAGC,IAAA,IAUH;EAAA,IAVI;IACxBC,KAAK;AACLC,IAAAA,MAAM,GAAG,IAAI;AACbC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;IACRC,gBAAgB;IAChBC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;EACf,MAAM,CAACU,oBAAoB,EAAEC,uBAAuB,CAAC,GACnDC,cAAQ,CAACT,eAAe,CAAC,CAAA;AAC3B,EAAA,MAAMU,UAAU,GAAGT,QAAQ,IAAIM,oBAAoB,CAAA;AACnD,EAAA,MAAMI,SAAS,GAAGC,WAAK,EAAE,CAAA;EAEzB,MAAMC,YAAY,GAAGA,MAAM;IACzB,MAAMC,IAAI,GAAG,CAACJ,UAAU,CAAA;AACxB,IAAA,IAAIT,QAAQ,IAAI,IAAI,EAAEO,uBAAuB,CAACM,IAAI,CAAC,CAAA;IACnDZ,gBAAgB,GAAGY,IAAI,CAAC,CAAA;GACzB,CAAA;AAED,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IACEX,SAAS,EAAEY,EAAE,CAACC,gBAAM,CAACC,SAAS,EAAEd,SAAS,EAAE;AACzC,MAAA,CAACa,gBAAM,CAACE,UAAU,GAAG,CAACpB,MAAAA;AACxB,KAAC,CAAE;IACH,aAAaM,EAAAA,UAAU,EAAEe,IAAK;AAAA,IAAA,GAC1Bd,IAAI;AAAAH,IAAAA,QAAA,gBAERY,eAAA,CAAA,QAAA,EAAA;AACEM,MAAAA,IAAI,EAAC,QAAQ;MACbjB,SAAS,EAAEa,gBAAM,CAACK,MAAO;AACzB,MAAA,eAAA,EAAeZ,UAAW;AAC1B,MAAA,eAAA,EAAeC,SAAU;AACzBY,MAAAA,OAAO,EAAEV,YAAa;MACtB,aAAaR,EAAAA,UAAU,EAAEiB,MAAO;AAAAnB,MAAAA,QAAA,gBAEhCqB,cAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,gBAAM,CAACnB,KAAM;QAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAK,QAAAA,QAAA,EAC3DL,KAAAA;OACG,CAAC,eACP0B,cAAA,CAAA,MAAA,EAAA;QAAMpB,SAAS,EAAEa,gBAAM,CAACQ,OAAQ;AAAC,QAAA,aAAA,EAAY,MAAM;AAAAtB,QAAAA,QAAA,EAChDO,UAAU,gBAAGc,cAAA,CAACE,2BAAa,EAAE,EAAA,CAAC,gBAAGF,cAAA,CAACG,+BAAe,EAAE,EAAA,CAAA;AAAC,OACjD,CAAC,CAAA;KACD,CAAC,eACTH,cAAA,CAAA,KAAA,EAAA;AACEI,MAAAA,EAAE,EAAEjB,SAAU;AACdP,MAAAA,SAAS,EAAEY,EAAE,CAACC,gBAAM,CAACY,cAAc,EAAE;QACnC,CAACZ,gBAAM,CAAChB,QAAQ,GAAGS,UAAAA;AACrB,OAAC,CAAE;AAAAP,MAAAA,QAAA,eAEHqB,cAAA,CAAA,KAAA,EAAA;QAAKpB,SAAS,EAAEa,gBAAM,CAACa,OAAQ;AAAA3B,QAAAA,QAAA,eAC7BqB,cAAA,CAAA,KAAA,EAAA;UACEpB,SAAS,EAAEa,gBAAM,CAACc,YAAa;UAC/B,aAAa1B,EAAAA,UAAU,EAAEyB,OAAQ;AAAA3B,UAAAA,QAAA,EAEhCA,QAAAA;SACE,CAAA;OACF,CAAA;AAAC,KACH,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV,EAAC;AAEDP,SAAS,CAACoC,WAAW,GAAG,WAAW;;;;"}

package/dist/cjs/badge/Badge.cjs

@@ -6,6 +6,7 @@ const cn = require('classnames');
 const Badge_module = require('./Badge.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
+/** Bordered pill for a single trust/verification marker (audited, verified). */
 const Badge = _ref => {
   let {
     icon,

package/dist/cjs/badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../src/badge/Badge.tsx"],"sourcesContent":["import cn from 'classnames'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport styles from './Badge.module.css'\n\nexport type BadgeDataTestId = {\n  root?: string\n  icon?: string\n}\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n  /** Optional glyph before the label. Omitted entirely when not passed. */\n  icon?: ReactNode\n  dataTestId?: BadgeDataTestId\n}\n\nexport const Badge = ({\n  icon,\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: BadgeProps) => (\n  <span\n    className={cn(styles.badge, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {icon && (\n      <span\n        className={styles.icon}\n        aria-hidden='true'\n        data-testid={dataTestId?.icon}\n      >\n        {icon}\n      </span>\n    )}\n    {children}\n  </span>\n)\n"],"names":["Badge","_ref","icon","className","children","dataTestId","rest","_jsxs","cn","styles","badge","root","_jsx"],"mappings":";;;;;;;;AAeO,MAAMA,KAAK,GAAGC,IAAA,IAAA;EAAA,IAAC;IACpBC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACO,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACXM,eAAA,CAAA,MAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,YAAM,CAACC,KAAK,EAAEP,SAAS,CAAE;IACvC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;IAAAF,QAAA,EAAA,CAEPF,IAAI,iBACHU,cAAA,CAAA,MAAA,EAAA;MACET,SAAS,EAAEM,YAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaG,EAAAA,UAAU,EAAEH,IAAK;AAAAE,MAAAA,QAAA,EAE7BF,IAAAA;KACG,CACP,EACAE,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"Badge.cjs","sources":["../../../src/badge/Badge.tsx"],"sourcesContent":["import cn from 'classnames'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport styles from './Badge.module.css'\n\nexport type BadgeDataTestId = {\n  root?: string\n  icon?: string\n}\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> & {\n  /** Optional glyph before the label. Omitted entirely when not passed. */\n  icon?: ReactNode\n  dataTestId?: BadgeDataTestId\n}\n\n/** Bordered pill for a single trust/verification marker (audited, verified). */\nexport const Badge = ({\n  icon,\n  className,\n  children,\n  dataTestId,\n  ...rest\n}: BadgeProps) => (\n  <span\n    className={cn(styles.badge, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    {icon && (\n      <span\n        className={styles.icon}\n        aria-hidden='true'\n        data-testid={dataTestId?.icon}\n      >\n        {icon}\n      </span>\n    )}\n    {children}\n  </span>\n)\n"],"names":["Badge","_ref","icon","className","children","dataTestId","rest","_jsxs","cn","styles","badge","root","_jsx"],"mappings":";;;;;;;;AAeA;AACO,MAAMA,KAAK,GAAGC,IAAA,IAAA;EAAA,IAAC;IACpBC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACV,GAAGC,IAAAA;AACO,GAAC,GAAAL,IAAA,CAAA;AAAA,EAAA,oBACXM,eAAA,CAAA,MAAA,EAAA;IACEJ,SAAS,EAAEK,EAAE,CAACC,YAAM,CAACC,KAAK,EAAEP,SAAS,CAAE;IACvC,aAAaE,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;IAAAF,QAAA,EAAA,CAEPF,IAAI,iBACHU,cAAA,CAAA,MAAA,EAAA;MACET,SAAS,EAAEM,YAAM,CAACP,IAAK;AACvB,MAAA,aAAA,EAAY,MAAM;MAClB,aAAaG,EAAAA,UAAU,EAAEH,IAAK;AAAAE,MAAAA,QAAA,EAE7BF,IAAAA;KACG,CACP,EACAE,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}

package/dist/cjs/banner/Banner.cjs

@@ -6,6 +6,7 @@ const cn = require('classnames');
 const Banner_module = require('./Banner.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 
+/** Compact card row: icon, title and description, with an optional `action` slot on the right (usually a `Button`). */
 const Banner = _ref => {
   let {
     icon,

package/dist/cjs/banner/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs","sources":["../../../src/banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Banner.module.css'\n\nexport type BannerDataTestId = {\n  root?: string\n  icon?: string\n  title?: string\n  description?: string\n  action?: string\n}\n\nexport type BannerProps = ComponentPropsWithoutRef<'div'> & {\n  icon?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  action?: ReactNode\n  dataTestId?: BannerDataTestId\n}\n\nexport const Banner = ({\n  icon,\n  title,\n  description,\n  action,\n  className,\n  dataTestId,\n  ...rest\n}: BannerProps) => (\n  <div\n    className={cn(styles.banner, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.content}>\n      {icon ? (\n        <span className={styles.icon} data-testid={dataTestId?.icon}>\n          {icon}\n        </span>\n      ) : null}\n      <div className={styles.text}>\n        <p className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </p>\n        {description ? (\n          <p\n            className={styles.description}\n            data-testid={dataTestId?.description}\n          >\n            {description}\n          </p>\n        ) : null}\n      </div>\n    </div>\n    {action ? (\n      <div className={styles.action} data-testid={dataTestId?.action}>\n        {action}\n      </div>\n    ) : null}\n  </div>\n)\n\nBanner.displayName = 'Banner'\n"],"names":["Banner","_ref","icon","title","description","action","className","dataTestId","rest","_jsxs","cn","styles","banner","root","children","content","_jsx","text","displayName"],"mappings":";;;;;;;;AAsBO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACQ,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBACZQ,eAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEN,SAAS,CAAE;IACxC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,gBAERL,eAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,aAAM,CAACI,OAAQ;MAAAD,QAAA,EAAA,CAC5BZ,IAAI,gBACHc,cAAA,CAAA,MAAA,EAAA;QAAMV,SAAS,EAAEK,aAAM,CAACT,IAAK;QAAC,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAY,QAAAA,QAAA,EACzDZ,IAAAA;AAAI,OACD,CAAC,GACL,IAAI,eACRO,eAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,aAAM,CAACM,IAAK;AAAAH,QAAAA,QAAA,gBAC1BE,cAAA,CAAA,GAAA,EAAA;UAAGV,SAAS,EAAEK,aAAM,CAACR,KAAM;UAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAW,UAAAA,QAAA,EACxDX,KAAAA;AAAK,SACL,CAAC,EACHC,WAAW,gBACVY,cAAA,CAAA,GAAA,EAAA;UACEV,SAAS,EAAEK,aAAM,CAACP,WAAY;UAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,UAAAA,QAAA,EAEpCV,WAAAA;SACA,CAAC,GACF,IAAI,CAAA;AAAA,OACL,CAAC,CAAA;AAAA,KACH,CAAC,EACLC,MAAM,gBACLW,cAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,aAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAS,MAAAA,QAAA,EAC5DT,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA,EACP;AAEDL,MAAM,CAACkB,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Banner.cjs","sources":["../../../src/banner/Banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Banner.module.css'\n\nexport type BannerDataTestId = {\n  root?: string\n  icon?: string\n  title?: string\n  description?: string\n  action?: string\n}\n\nexport type BannerProps = ComponentPropsWithoutRef<'div'> & {\n  icon?: ReactNode\n  title: ReactNode\n  description?: ReactNode\n  action?: ReactNode\n  dataTestId?: BannerDataTestId\n}\n\n/** Compact card row: icon, title and description, with an optional `action` slot on the right (usually a `Button`). */\nexport const Banner = ({\n  icon,\n  title,\n  description,\n  action,\n  className,\n  dataTestId,\n  ...rest\n}: BannerProps) => (\n  <div\n    className={cn(styles.banner, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <div className={styles.content}>\n      {icon ? (\n        <span className={styles.icon} data-testid={dataTestId?.icon}>\n          {icon}\n        </span>\n      ) : null}\n      <div className={styles.text}>\n        <p className={styles.title} data-testid={dataTestId?.title}>\n          {title}\n        </p>\n        {description ? (\n          <p\n            className={styles.description}\n            data-testid={dataTestId?.description}\n          >\n            {description}\n          </p>\n        ) : null}\n      </div>\n    </div>\n    {action ? (\n      <div className={styles.action} data-testid={dataTestId?.action}>\n        {action}\n      </div>\n    ) : null}\n  </div>\n)\n\nBanner.displayName = 'Banner'\n"],"names":["Banner","_ref","icon","title","description","action","className","dataTestId","rest","_jsxs","cn","styles","banner","root","children","content","_jsx","text","displayName"],"mappings":";;;;;;;;AAsBA;AACO,MAAMA,MAAM,GAAGC,IAAA,IAAA;EAAA,IAAC;IACrBC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACQ,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,oBACZQ,eAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,aAAM,CAACC,MAAM,EAAEN,SAAS,CAAE;IACxC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,gBAERL,eAAA,CAAA,KAAA,EAAA;MAAKH,SAAS,EAAEK,aAAM,CAACI,OAAQ;MAAAD,QAAA,EAAA,CAC5BZ,IAAI,gBACHc,cAAA,CAAA,MAAA,EAAA;QAAMV,SAAS,EAAEK,aAAM,CAACT,IAAK;QAAC,aAAaK,EAAAA,UAAU,EAAEL,IAAK;AAAAY,QAAAA,QAAA,EACzDZ,IAAAA;AAAI,OACD,CAAC,GACL,IAAI,eACRO,eAAA,CAAA,KAAA,EAAA;QAAKH,SAAS,EAAEK,aAAM,CAACM,IAAK;AAAAH,QAAAA,QAAA,gBAC1BE,cAAA,CAAA,GAAA,EAAA;UAAGV,SAAS,EAAEK,aAAM,CAACR,KAAM;UAAC,aAAaI,EAAAA,UAAU,EAAEJ,KAAM;AAAAW,UAAAA,QAAA,EACxDX,KAAAA;AAAK,SACL,CAAC,EACHC,WAAW,gBACVY,cAAA,CAAA,GAAA,EAAA;UACEV,SAAS,EAAEK,aAAM,CAACP,WAAY;UAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,UAAAA,QAAA,EAEpCV,WAAAA;SACA,CAAC,GACF,IAAI,CAAA;AAAA,OACL,CAAC,CAAA;AAAA,KACH,CAAC,EACLC,MAAM,gBACLW,cAAA,CAAA,KAAA,EAAA;MAAKV,SAAS,EAAEK,aAAM,CAACN,MAAO;MAAC,aAAaE,EAAAA,UAAU,EAAEF,MAAO;AAAAS,MAAAA,QAAA,EAC5DT,MAAAA;KACE,CAAC,GACJ,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA,EACP;AAEDL,MAAM,CAACkB,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs

@@ -6,31 +6,49 @@ const react = require('react');
 const cn = require('classnames');
 const Breadcrumbs_module = require('./Breadcrumbs.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
+const useEdgeFade = require('../hooks/useEdgeFade.cjs');
+const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.cjs');
 const ActionElement = require('../utils/ActionElement.cjs');
 const IconChevronRight = require('../icons/components/base/IconChevronRight.cjs');
 
-const syncFade = list => {
-  list.toggleAttribute('data-fade-start', list.scrollLeft > 0);
-  list.toggleAttribute('data-fade-end', list.scrollLeft < list.scrollWidth - list.clientWidth - 1);
+const ANCHOR_ONLY = ['href', 'onClick', 'disabled', 'external', 'linkProps', 'type', 'target', 'rel', 'download'];
+const spanAttrs = props => {
+  const attrs = {
+    ...props
+  };
+  for (const key of ANCHOR_ONLY) delete attrs[key];
+  return attrs;
 };
 const syncTitle = e => {
   const el = e.target.closest('[data-label]');
   if (!el) return;
   if (el.scrollWidth > el.clientWidth) el.setAttribute('title', el.textContent ?? '');else el.removeAttribute('title');
 };
-const Breadcrumbs = _ref => {
+const BreadcrumbsTrail = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
     items,
     className,
+    dataTestId,
     ...rest
   } = _ref;
   const listRef = react.useRef(null);
-  react.useLayoutEffect(() => {
+  const {
+    sync,
+    onFocus
+  } = useEdgeFade.useEdgeFade(listRef);
+  const trailRef = react.useRef();
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
-    list.scrollLeft = list.scrollWidth;
-    syncFade(list);
-  }, [items]);
+    const trail = Array.from(list.children, li => li.textContent).join('\u0000');
+    if (trail !== trailRef.current) {
+      trailRef.current = trail;
+      list.scrollLeft = list.scrollWidth;
+    }
+    sync();
+  });
+
+  // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.
   react.useEffect(() => {
     const list = listRef.current;
     if (!list || typeof ResizeObserver === 'undefined') return;
@@ -38,53 +56,55 @@ const Breadcrumbs = _ref => {
     const observer = new ResizeObserver(() => {
       const wasHidden = hidden;
       hidden = list.clientWidth === 0;
-      if (wasHidden && !hidden) list.scrollLeft = list.scrollWidth;
-      syncFade(list);
+      if (!wasHidden || hidden) return;
+      list.scrollLeft = list.scrollWidth;
+      sync();
     });
     observer.observe(list);
     return () => observer.disconnect();
-  }, []);
+  }, [sync]);
   return /*#__PURE__*/jsxRuntime.jsx("nav", {
+    ref: ref,
     "aria-label": "Breadcrumb",
     className: cn(Breadcrumbs_module.nav, className),
+    "data-testid": dataTestId?.root,
     ...rest,
     children: /*#__PURE__*/jsxRuntime.jsx("ol", {
       ref: listRef,
       className: Breadcrumbs_module.list,
-      onScroll: e => syncFade(e.currentTarget),
+      "data-testid": dataTestId?.list,
+      onScroll: sync,
+      onFocus: onFocus,
       onPointerOver: syncTitle,
       children: items.map((_ref2, index) => {
         let {
           label,
+          dataTestId: itemTestId,
           ...itemProps
         } = _ref2;
+        const current = index === items.length - 1;
         const labelAttrs = itemProps.title === undefined ? {
           'data-label': ''
         } : {};
-        if (index === items.length - 1) {
-          return /*#__PURE__*/jsxRuntime.jsx("li", {
-            className: Breadcrumbs_module.item,
-            children: /*#__PURE__*/jsxRuntime.jsx("span", {
-              "aria-current": "page",
-              className: cn(Breadcrumbs_module.label, Breadcrumbs_module.current),
-              ...labelAttrs,
-              children: label
-            })
-          }, index);
-        }
-        const interactive = itemProps.href !== undefined || itemProps.onClick !== undefined;
+        const interactive = !current && (itemProps.href !== undefined || itemProps.onClick !== undefined) && !itemProps.disabled;
         return /*#__PURE__*/jsxRuntime.jsxs("li", {
           className: Breadcrumbs_module.item,
           children: [interactive ? /*#__PURE__*/jsxRuntime.jsx(ActionElement.ActionElement, {
+            "data-testid": itemTestId?.root,
             ...itemProps,
             ...labelAttrs,
             className: cn(Breadcrumbs_module.label, Breadcrumbs_module.link, itemProps.className),
             children: label
           }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: Breadcrumbs_module.label,
+            "data-testid": itemTestId?.root,
+            ...spanAttrs(itemProps),
             ...labelAttrs,
+            ...(current && {
+              'aria-current': 'page'
+            }),
+            className: cn(Breadcrumbs_module.label, current && Breadcrumbs_module.current, itemProps.className),
             children: label
-          }), /*#__PURE__*/jsxRuntime.jsx(IconChevronRight.IconChevronRight, {
+          }), !current && /*#__PURE__*/jsxRuntime.jsx(IconChevronRight.IconChevronRight, {
             className: Breadcrumbs_module.separator,
             "aria-hidden": "true"
           })]
@@ -92,7 +112,17 @@ const Breadcrumbs = _ref => {
       })
     })
   });
-};
+});
+BreadcrumbsTrail.displayName = 'BreadcrumbsTrail';
+
+/** Trail of ancestors ending in the current page (`aria-current="page"`); scrolls horizontally with an edge fade when it overflows. */
+const Breadcrumbs = /*#__PURE__*/react.forwardRef((props, ref) =>
+// Separate component so its mount effects attach once the list exists.
+props.items.length === 0 ? null : /*#__PURE__*/jsxRuntime.jsx(BreadcrumbsTrail, {
+  ref: ref,
+  ...props
+}));
+Breadcrumbs.displayName = 'Breadcrumbs';
 
 exports.Breadcrumbs = Breadcrumbs;
 //# sourceMappingURL=Breadcrumbs.cjs.map

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItem = ActionElementProps & {\n  label: ReactNode\n  children?: never\n}\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[]\n}\n\nconst syncFade = (list: HTMLElement) => {\n  list.toggleAttribute('data-fade-start', list.scrollLeft > 0)\n  list.toggleAttribute(\n    'data-fade-end',\n    list.scrollLeft < list.scrollWidth - list.clientWidth - 1,\n  )\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\nexport const Breadcrumbs = ({\n  items,\n  className,\n  ...rest\n}: BreadcrumbsProps) => {\n  const listRef = useRef<HTMLOListElement>(null)\n\n  useLayoutEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    list.scrollLeft = list.scrollWidth\n    syncFade(list)\n  }, [items])\n\n  useEffect(() => {\n    const list = listRef.current\n    if (!list || typeof ResizeObserver === 'undefined') return\n    let hidden = list.clientWidth === 0\n    const observer = new ResizeObserver(() => {\n      const wasHidden = hidden\n      hidden = list.clientWidth === 0\n      if (wasHidden && !hidden) list.scrollLeft = list.scrollWidth\n      syncFade(list)\n    })\n    observer.observe(list)\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <nav\n      aria-label='Breadcrumb'\n      className={cn(styles.nav, className)}\n      {...rest}\n    >\n      <ol\n        ref={listRef}\n        className={styles.list}\n        onScroll={(e) => syncFade(e.currentTarget)}\n        onPointerOver={syncTitle}\n      >\n        {items.map(({ label, ...itemProps }, index) => {\n          const labelAttrs =\n            itemProps.title === undefined ? { 'data-label': '' } : {}\n          if (index === items.length - 1) {\n            return (\n              <li key={index} className={styles.item}>\n                <span\n                  aria-current='page'\n                  className={cn(styles.label, styles.current)}\n                  {...labelAttrs}\n                >\n                  {label}\n                </span>\n              </li>\n            )\n          }\n          const interactive =\n            itemProps.href !== undefined || itemProps.onClick !== undefined\n          return (\n            <li key={index} className={styles.item}>\n              {interactive ? (\n                <ActionElement\n                  {...itemProps}\n                  {...labelAttrs}\n                  className={cn(styles.label, styles.link, itemProps.className)}\n                >\n                  {label}\n                </ActionElement>\n              ) : (\n                <span className={styles.label} {...labelAttrs}>\n                  {label}\n                </span>\n              )}\n              <IconChevronRight\n                className={styles.separator}\n                aria-hidden='true'\n              />\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],"names":["syncFade","list","toggleAttribute","scrollLeft","scrollWidth","clientWidth","syncTitle","e","el","target","closest","setAttribute","textContent","removeAttribute","Breadcrumbs","_ref","items","className","rest","listRef","useRef","useLayoutEffect","current","useEffect","ResizeObserver","hidden","observer","wasHidden","observe","disconnect","_jsx","cn","styles","nav","children","ref","onScroll","currentTarget","onPointerOver","map","_ref2","index","label","itemProps","labelAttrs","title","undefined","length","item","interactive","href","onClick","_jsxs","ActionElement","link","IconChevronRight","separator"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { useEdgeFade, useIsomorphicLayoutEffect } from '../hooks'\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItemDataTestId = { root?: string }\n\nexport type BreadcrumbItem = ActionElementProps & {\n  label: ReactNode\n  children?: never\n  /** Test id of the item's label element, for link, plain and current items alike. */\n  dataTestId?: BreadcrumbItemDataTestId\n}\n\nexport type BreadcrumbsDataTestId = { root?: string; list?: string }\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n  /** `href` renders a link, only `onClick` a button, anything else (and `disabled`) plain text; the last item is the current page; an empty array renders nothing. */\n  items: BreadcrumbItem[]\n  dataTestId?: BreadcrumbsDataTestId\n}\n\nconst ANCHOR_ONLY = [\n  'href',\n  'onClick',\n  'disabled',\n  'external',\n  'linkProps',\n  'type',\n  'target',\n  'rel',\n  'download',\n] as const\n\nconst spanAttrs = (props: Omit<BreadcrumbItem, 'label'>) => {\n  const attrs: Record<string, unknown> = { ...props }\n  for (const key of ANCHOR_ONLY) delete attrs[key]\n  return attrs as HTMLAttributes<HTMLSpanElement>\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\nconst BreadcrumbsTrail = forwardRef<HTMLElement, BreadcrumbsProps>(\n  ({ items, className, dataTestId, ...rest }, ref) => {\n    const listRef = useRef<HTMLOListElement>(null)\n\n    const { sync, onFocus } = useEdgeFade(listRef)\n    const trailRef = useRef<string>()\n\n    useIsomorphicLayoutEffect(() => {\n      const list = listRef.current\n      if (!list) return\n      const trail = Array.from(list.children, (li) => li.textContent).join(\n        '\\u0000',\n      )\n      if (trail !== trailRef.current) {\n        trailRef.current = trail\n        list.scrollLeft = list.scrollWidth\n      }\n      sync()\n    })\n\n    // A list mounted hidden (display: none) can't scroll on mount, so scroll once it gets a width.\n    useEffect(() => {\n      const list = listRef.current\n      if (!list || typeof ResizeObserver === 'undefined') return\n      let hidden = list.clientWidth === 0\n      const observer = new ResizeObserver(() => {\n        const wasHidden = hidden\n        hidden = list.clientWidth === 0\n        if (!wasHidden || hidden) return\n        list.scrollLeft = list.scrollWidth\n        sync()\n      })\n      observer.observe(list)\n      return () => observer.disconnect()\n    }, [sync])\n\n    return (\n      <nav\n        ref={ref}\n        aria-label='Breadcrumb'\n        className={cn(styles.nav, className)}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <ol\n          ref={listRef}\n          className={styles.list}\n          data-testid={dataTestId?.list}\n          onScroll={sync}\n          onFocus={onFocus}\n          onPointerOver={syncTitle}\n        >\n          {items.map(\n            ({ label, dataTestId: itemTestId, ...itemProps }, index) => {\n              const current = index === items.length - 1\n              const labelAttrs =\n                itemProps.title === undefined ? { 'data-label': '' } : {}\n              const interactive =\n                !current &&\n                (itemProps.href !== undefined ||\n                  itemProps.onClick !== undefined) &&\n                !itemProps.disabled\n              return (\n                <li key={index} className={styles.item}>\n                  {interactive ? (\n                    <ActionElement\n                      data-testid={itemTestId?.root}\n                      {...itemProps}\n                      {...labelAttrs}\n                      className={cn(\n                        styles.label,\n                        styles.link,\n                        itemProps.className,\n                      )}\n                    >\n                      {label}\n                    </ActionElement>\n                  ) : (\n                    <span\n                      data-testid={itemTestId?.root}\n                      {...spanAttrs(itemProps)}\n                      {...labelAttrs}\n                      {...(current && { 'aria-current': 'page' as const })}\n                      className={cn(\n                        styles.label,\n                        current && styles.current,\n                        itemProps.className,\n                      )}\n                    >\n                      {label}\n                    </span>\n                  )}\n                  {!current && (\n                    <IconChevronRight\n                      className={styles.separator}\n                      aria-hidden='true'\n                    />\n                  )}\n                </li>\n              )\n            },\n          )}\n        </ol>\n      </nav>\n    )\n  },\n)\n\nBreadcrumbsTrail.displayName = 'BreadcrumbsTrail'\n\n/** Trail of ancestors ending in the current page (`aria-current=\"page\"`); scrolls horizontally with an edge fade when it overflows. */\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  (props, ref) =>\n    // Separate component so its mount effects attach once the list exists.\n    props.items.length === 0 ? null : <BreadcrumbsTrail ref={ref} {...props} />,\n)\n\nBreadcrumbs.displayName = 'Breadcrumbs'\n"],"names":["ANCHOR_ONLY","spanAttrs","props","attrs","key","syncTitle","e","el","target","closest","scrollWidth","clientWidth","setAttribute","textContent","removeAttribute","BreadcrumbsTrail","forwardRef","_ref","ref","items","className","dataTestId","rest","listRef","useRef","sync","onFocus","useEdgeFade","trailRef","useIsomorphicLayoutEffect","list","current","trail","Array","from","children","li","join","scrollLeft","useEffect","ResizeObserver","hidden","observer","wasHidden","observe","disconnect","_jsx","cn","styles","nav","root","onScroll","onPointerOver","map","_ref2","index","label","itemTestId","itemProps","length","labelAttrs","title","undefined","interactive","href","onClick","disabled","_jsxs","item","ActionElement","link","IconChevronRight","separator","displayName","Breadcrumbs"],"mappings":"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"}

package/dist/cjs/breadcrumbs/Breadcrumbs.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"nav":"Breadcrumbs-module_nav__cDuA5","list":"Breadcrumbs-module_list__A6dlB","item":"Breadcrumbs-module_item__3t-Zj","label":"Breadcrumbs-module_label__gVU35","link":"Breadcrumbs-module_link__KJ87-","current":"Breadcrumbs-module_current__XK0a2","separator":"Breadcrumbs-module_separator__k-Tmd"};
+const styles = {"nav":"Breadcrumbs-module_nav__cDuA5","list":"Breadcrumbs-module_list__A6dlB ScrollFade-module_scrollFade__bK-Oi","item":"Breadcrumbs-module_item__3t-Zj","label":"Breadcrumbs-module_label__gVU35","link":"Breadcrumbs-module_link__KJ87-","current":"Breadcrumbs-module_current__XK0a2","separator":"Breadcrumbs-module_separator__k-Tmd"};
 
 module.exports = styles;
 //# sourceMappingURL=Breadcrumbs.module.css.cjs.map