@setsquare/ui 0.1.0

package/README.md

@@ -0,0 +1,313 @@
+# @setsquare/ui
+
+React components, design tokens, a dashboard shell and a site shell for public pages, built on [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html) and Tailwind CSS 4. One attribute switches every size, space and colour that WCAG 2.2 sets a level for between AA and AAA:
+
+```html
+<html data-conformance="aaa">
+```
+
+Setsquare's own portal runs at AAA. Docuccino runs at AA and can offer AAA as a per-person setting.
+
+Controls are built in three layers, so the switch changes targets without changing what people see: at AAA a 36px button is still painted at 36px, inside a 44px target.
+
+> **What this is and isn't.** The components are built to meet WCAG 2.2 AA, and AAA when AAA is switched on, and they are tested for it (see [What is tested](#what-is-tested)). Automated tests are evidence that the automated checks passed. They are not a conformance claim, and a product is not conformant because it uses these components: content, reading level, link text, headings and error wording are the product's.
+
+## Install
+
+```sh
+pnpm add @setsquare/ui react-aria-components @internationalized/date
+```
+
+It needs React 18.3 or later (Next.js 16 uses React 19), React Aria Components 1.21 or later, and Tailwind CSS 4 in the app. A module is a client component (`'use client'`) only when it needs to be: React Aria, a hook, a context or an event handler. The rest — `StatusBadge`, `Avatar`, `ProductMark`, `Kbd`, `EmptyState`, `IconButton`, `PageHeader`, `PageContent`, the site shell's `SiteShell`, `SiteMain`, `SiteHeader`, `SiteNav`, `SiteFooter` and `SiteFooterGroup`, the content components `Section`, `SectionHeader`, `Container`, `Eyebrow`, `Hero`, `HeroHighlight`, `Card`, `CardGrid`, `Prose`, `Steps`, `Step`, `Split`, `Tag`, `StatList` and `Stat`, `CodeBlock`, `ThemeScript`, `buttonTargetStyles()` and `buttonVisualStyles()` — have no directive, so a server component uses them without shipping them to the browser. Server components can render either kind. A server component that gives a client component an icon (`Alert`, `MenuItem`, `SidebarItem`, a search item) passes the element, `icon={<Folder />}`: a component can't cross into a client component.
+
+In the app's global stylesheet, after Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@setsquare/ui/styles.css";
+```
+
+`styles.css` brings the tokens as CSS variables (four themes), Tailwind's theme mapping (`bg-primary`, `h-control`, `min-h-target`…), the `focus-ring` and type utilities, the `dark:` and `aaa:` variants, and an `@source` that points Tailwind at the package's compiled components, which Tailwind doesn't scan in `node_modules` by itself.
+
+Load the fonts yourself: the tokens name Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono (`next/font/google`), or set `--font-sans` and `--font-mono` to your own.
+
+```tsx
+import { Button, DashboardShell, ShellMain, TextField } from '@setsquare/ui';
+```
+
+## Themes and levels
+
+- `<html data-conformance="aa|aaa" class="dark?">` picks one of four themes: Light · AA, Dark · AA, Light · AAA, Dark · AAA.
+- Components never read an `-aa` or `-aaa` token directly. They read the alias (`--target-min`, `--control-height`, `--choice-size`, `--focus-width`…) through its utility (`min-h-target`, `h-control`, `size-choice`, `focus-ring`), so no component code changes between levels. The design system's README lists every one.
+- A product brings its `brand` and `brand-subtle` colours. `pnpm lint` runs `scripts/check-contrast.mjs`, which checks every pair the token notes promise in all four themes. Run it again after changing a colour.
+
+### Switching theme and level
+
+`ThemeScript` goes in the root layout's `<head>`. It puts the stored choice on `<html>` before the first paint, so the page doesn't flash the wrong theme. `ThemeSwitcher` offers Light, Dark and System (with `level`, AA and AAA too) and keeps the choice where the script reads it.
+
+```tsx
+// app/layout.tsx: the script changes <html> before React hydrates it.
+<html lang="en" suppressHydrationWarning>
+  <head>
+    <ThemeScript />
+  </head>
+  <body>{children}</body>
+</html>
+
+// in a header or a footer
+<ThemeSwitcher />
+```
+
+- Give both the same options. `storage="cookie"` sends the choice with every request as well, so the server can render `<html>` with it; the default, `localStorage`, keeps it in the browser.
+- System follows the operating system, including when it changes while the page is open. `defaultTheme` is what shows before anyone chooses: `system` unless you say otherwise.
+- For a Content-Security-Policy that lists inline scripts by hash, these are the default scripts' hashes. `themeScriptHash(options)` gives the hash for any other options, and `nonce` takes a per-request nonce instead. `pnpm test` fails if this table and the scripts disagree.
+
+| Script | Hash |
+| --- | --- |
+| `<ThemeScript />` | `sha256-Z5PHa59cVDw2tw79t4evpPh8wFvKN39vFaHoJmsq5XY=` |
+| `<ThemeScript storage="cookie" />` | `sha256-RLgTmJnd9qBgn/qicRT4Fvi49baxiD9DFiphOXks2jc=` |
+
+## Three layers
+
+Every control that can paint smaller than its target — buttons, links, icon buttons, segments, fields, the select trigger, menu and list rows, sidebar items, calendar days, slider thumbs, breadcrumbs — is built the way Themis (`@tribepad/themis`) builds its buttons:
+
+1. **Target:** the React Aria element a pointer hits (`<button>`, `<a>`, `<input>`, a row, a cell). Transparent, at least `--target-min` both ways — 24px at AA, 44px at AAA. It takes `className`.
+2. **Paint:** what people see — ground, border, radius, hover, and the focus ring. Sized by `visualSize` and the painted tokens (`--control-height` …), equal at AA and AAA by default. It takes `visualClassName`.
+3. **Content:** the label, icons and spinner.
+
+```tsx
+<Button visualSize="sm" fullWidth visualClassName="justify-start">Archive</Button>
+```
+
+- The target is the element itself, so checkers measure the size a pointer gets. A field's `<input>` is 44px tall at AAA with its 36px box painted behind it (`fieldBox` and `fieldInput`), rather than a wrapper that focuses the input with a script.
+- The target is in the layout, so targets don't overlap. At AAA that makes things with small paint take more room than they look. The design system's README lists what that costs, and what a 44px target costs whatever the paint.
+- To paint at the target's size instead, raise `--control-height-aaa`, `--control-height-sm-aaa` and `--nav-item-height-aaa` to 44px.
+- For your own button-like element: `buttonTargetStyles()` on a React Aria `Button`, `Link` or `ToggleButton`, `buttonVisualStyles()` on a span inside it.
+
+## Links and cursors
+
+- A link in a sentence is a `TextLink`, always underlined: colour alone would need 3:1 against the text around it (WCAG's G183), and `brand` doesn't have it. A plain `<a href>` with no `class` (Markdown, CMS content) gets the same underline from the base styles; `text-link` is the utility.
+- One cursor rule on every target (Layer 1): `pointer` on anything pressed, buttons included; `text` on text entry; `grab` on a slider thumb; `not-allowed` when disabled; `wait` while a button is pending; the default arrow on the current breadcrumb and read-only choices. The design system's README has the table and the reasons.
+
+```tsx
+<p>Invite people by email, or share the <TextLink href="/settings/invite">workspace link</TextLink>.</p>
+```
+
+## Site layer
+
+For a public page — a marketing site, a privacy notice — the stylesheet also brings Tailwind 4 utilities built from the tokens. They work in any Tailwind 4 app, with or without React:
+
+```html
+<section class="section-band">
+  <div class="site-container">
+    <div class="section-head">
+      <p class="eyebrow">How it works</p>
+      <h2 class="text-display-section">Three steps, no annotations</h2>
+    </div>
+    <ol role="list" class="steps">…</ol>
+  </div>
+</section>
+```
+
+- Layout: `site-container`, `site-container-narrow`, `section-band`, `section-band-tight`, `section-band-raised`, `section-head` and `split`.
+- Previews: `site-preview` on a box shows a site shell at the box's width instead of the window's, with no iframe. The shell's breakpoints are `site-md`, `site-lg` and `site-xl`, media queries on a real page and container queries in the box.
+- Content: `eyebrow`, `site-prose`, `card-surface`, `card-grid`, `steps`, `stat-list` and `tag`.
+- Type: `text-display`, `text-display-page`, `text-display-section` and `text-lead`, fluid from a 320px viewport to 1280px. Each size has a `rem` part, so it still grows as the page zooms in.
+- Tokens: `--site-max`, `--site-max-narrow`, `--site-gutter`, `--section-y` and `--section-y-tight`, with `max-w-site` and `max-w-site-narrow`.
+- `Button` and `LinkButton` take `visualSize="lg"` for a page's call to action, painted at `--control-height-lg` (44px).
+
+The design-system README's Site layer section has the rules. React components apply the same utilities, all server-safe except `LinkCard`:
+
+```tsx
+<Hero
+  title={<>API docs that know <HeroHighlight>their history</HeroHighlight></>}
+  actions={<LinkButton href="/start" variant="primary" visualSize="lg">Get started</LinkButton>}
+/>
+<Section eyebrow="What it reads" title="Everything you already wrote" raised>
+  <CardGrid>
+    <Card icon={<FileText />} title="Requests" description="Validation rules become request bodies." />
+    <LinkCard href="/docs" title="Getting started" description="Install it in a minute." />
+  </CardGrid>
+</Section>
+```
+
+- `Section` (with `SectionHeader`, `Container` and `Eyebrow`): a band with its heading. `landmark` names it by that heading; it's off by default.
+- `Hero` and `HeroHighlight`: the landing page's first band, with an optional aside and media.
+- `Card` and `CardGrid`: cards in a list, as many to a row as fit. `LinkCard`: a card that is one link, named by its heading.
+- `Prose`: long text, such as a privacy notice.
+- `Steps` and `Step`: numbered steps, read with their numbers. `Split`: text beside media. `Tag`: a label in a pill, not a status. `StatList` and `Stat`: figures, each with a required `source`.
+- `CodeBlock`: code with a label and a Copy button that says whether it worked; `tone="terminal"` copies the commands without their `$`. `CopyButton` is the button on its own.
+
+## Site shell
+
+For public pages: a header, the page and a footer in one column, with the document as the scroller. `SiteShell`, `SiteMain`, `SiteHeader`, `SiteNav`, `SiteFooter` and `SiteFooterGroup` have no directive; `SiteMenu`, `SiteNavLink` and `SitePathProvider` are the client parts.
+
+```tsx
+const NAV = [
+  { href: '/product', label: 'Product' },
+  { href: '/pricing', label: 'Pricing' },
+];
+
+<SiteShell>
+  <SiteHeader
+    lockup={<a href="/">Product</a>}
+    nav={<SiteNav items={NAV} />}
+    menu={<SiteMenu items={NAV} />}
+  />
+  <SiteMain>{children}</SiteMain>
+  <SiteFooter>
+    <SiteFooterGroup id="site-nav" title="Product" items={NAV} />
+  </SiteFooter>
+</SiteShell>
+```
+
+- One list feeds the header, the phone menu and a footer group, so every copy of the navigation keeps one order.
+- Below `lg` (1024px, generated from the `bp-lg` token) the nav gives way to a Menu button. Its panel pushes the page down rather than covering it, and Escape closes it and puts focus back on the button.
+- Until the page hydrates, the Menu is a link to `#site-nav`: the footer group with that id. So it works with JavaScript off, as long as that group lists every nav item.
+- The current page gets `aria-current="page"`, bold and a marker. Give `SitePathProvider` the router's path, or pass `current`.
+- The header is static. `sticky` sticks it and sets `scroll-padding-top` to its height, so a focused control doesn't end up under it.
+- `Disclosure`, the panel the Menu uses, is also a component of its own: a heading whose button shows and hides what follows.
+
+## Templates
+
+`templates/next/root-layout.tsx` is the root layout, `app/layout.tsx`, with `ThemeScript` in its `<head>`.
+
+`templates/next/` has App Router files to copy into `app/(portal)/`: `portal-layout.tsx` (the dashboard shell, with React Aria links wired to Next's router), `loading.tsx`, `error.tsx`, `not-found.tsx`, `page-transition.tsx` (React's `<ViewTransition>`, for React 19.3 and later) and `prefetch-on-intent.ts` (prefetches a page when someone is about to open it, which also keeps the page transition). Each page wraps its `ShellMain` in `PageTransition`, not the other way round.
+
+For public pages, into `app/(site)/`: `site-layout.tsx` (the site shell, a server component, with a `ThemeSwitcher` in the footer), `site-router.tsx` (React Aria links through Next's router, and the current path for the navigation), `site-nav.ts` (the navigation, once) and `site-not-found.tsx`. The root layout keeps `<html>` and `<head>`.
+
+## Guards
+
+React Aria renders the real `<input>` of a checkbox, radio, switch, slider or date field, and the drop button of a drop zone, in a visually hidden span that is `position: absolute` with no offsets. Tailwind's `sr-only` is the same. Such an element is laid out against its nearest *positioned* ancestor. With a scroll container between the two, it doesn't scroll with the content, and when something scrolls it into view — focus, a screen reader's cursor, find in page — the browser scrolls the outer, often `overflow: hidden`, element instead. The page shifts and leaves blank space at the bottom.
+
+The components avoid it: every scroll container and every control that hides an input is `relative`. And the three layers come apart as soon as a `className` shrinks a target or a link gets only the paint. Two guards keep product code from bringing either back.
+
+### Lint rules — `@setsquare/ui/lint`
+
+| Rule | Reports |
+| --- | --- |
+| `setsquare-ui/no-raw-aria-controls` | Importing React Aria's `Checkbox`, `Radio`, `Switch`, `Slider`, date fields, `Calendar`, `DropZone` or `GridList` instead of the Setsquare version (and `ColorArea`, `ColorSlider`, `ColorWheel`, which have none yet). |
+| `setsquare-ui/positioned-scroll-container` | A class list with `overflow-auto` or `overflow-scroll` (any axis or variant) and no `relative`, `absolute`, `fixed` or `sticky`, in `className`, `cn()`, `clsx()`, `cva()` and similar; and inline `overflow` styles without a `position`. Fixes itself by adding `relative`. |
+| `setsquare-ui/no-static-control-root` | `static` passed in `className` to a Setsquare component whose root has to stay positioned. |
+| `setsquare-ui/no-target-shrink` | `min-h-*` or `min-w-*` in the `className` of `Button`, `LinkButton`, `IconButton` or `Segment`. `className` is the target, and these replace its `--target-min` floor. |
+| `setsquare-ui/no-visual-only-target` | `buttonVisualStyles()` in the `className` of a link or button: the paint on its own, which makes the painted box the pointer target. |
+| `setsquare-ui/client-directive` | A module without `'use client'` that needs it (it imports React Aria, calls a hook other than `use`, `useCallback`, `useDebugValue`, `useId` or `useMemo`, calls `createContext`, or passes an event handler or a function as a prop or child), and one with it that needs none of those. Not in `recommended`: turn it on for the modules of a component library, where server components import them. |
+
+ESLint (flat config, with a parser that reads TSX, such as typescript-eslint's):
+
+```js
+// eslint.config.js
+import setsquare from '@setsquare/ui/lint';
+export default [setsquare.configs.recommended];
+```
+
+oxlint (`jsPlugins`, which oxlint marks as alpha):
+
+```jsonc
+// .oxlintrc.json
+{
+  "jsPlugins": [{ "name": "setsquare-ui", "specifier": "@setsquare/ui/lint" }],
+  "rules": {
+    "setsquare-ui/no-raw-aria-controls": "error",
+    "setsquare-ui/positioned-scroll-container": "error",
+    "setsquare-ui/no-static-control-root": "error",
+    "setsquare-ui/no-target-shrink": "error",
+    "setsquare-ui/no-visual-only-target": "error"
+  }
+}
+```
+
+Turn `no-raw-aria-controls` off in the directory where you wrap React Aria yourself. `positioned-scroll-container` can't see positioning that a library sets inline at runtime (React Aria's popovers are `position: absolute` from a `style` attribute): disable it on that line and say why.
+
+### Page checks — `@setsquare/ui/testing`
+
+The lint rules only see class names. These check what the browser laid out, so they also find wrappers, third-party widgets and CSS from elsewhere.
+
+```ts
+import {
+  expectAnimationsPausable,
+  expectCursorsMatch,
+  expectFocusVisible,
+  expectLinksDistinguished,
+  expectPageReflows,
+  expectPositioningContained,
+  expectTargetsSized,
+  expectTextUnclipped,
+} from '@setsquare/ui/testing';
+
+test('settings page', async ({ page }) => {
+  await page.goto('/settings');
+  await expectPositioningContained(page); // each throws, listing every finding
+  await expectTargetsSized(page);
+  await expectFocusVisible(page);
+  await expectLinksDistinguished(page, { underline: true });
+  await expectCursorsMatch(page);
+  await expectTextUnclipped(page);
+  await expectAnimationsPausable(page);
+  await page.setViewportSize({ width: 320, height: 640 });
+  await expectPageReflows(page);
+});
+```
+
+- `findUncontainedPositioning()` lists every absolutely positioned element whose containing block is outside its nearest scroll container.
+- `findHiddenOverflowScrolls()` focuses every focusable element, and brings every absolutely positioned one into view the way a screen reader's cursor or find-in-page would (so not a decorative, `aria-hidden` one with no text), with each scroll container scrolled to its start and then its end. It reports every time an `overflow: hidden` element scrolled as a result. It restores scroll positions and focus afterwards.
+
+- `findSmallTargets(options?)` lists every pointer target under `--target-min` in either axis, measured as laid out: for a visually hidden input, the control around it. Disabled, hidden and inline elements (links in a sentence) are left out; `ignore` takes a selector for anything the Equivalent exception covers.
+- `findOverlappingTargets()` lists targets whose boxes overlap on screen within one layer (a toast or popover over the page is left out), since WCAG doesn't count the overlapping area. `expectTargetsSized(page)` throws with both lists.
+- `findInvisibleFocus(page)` focuses every control a keyboard reaches, one at a time, and compares a screenshot of it with focus on it and with focus on another control. Any that didn't change have no visible focus indicator (2.4.7). Tooltips, transitions and the caret are turned off for the comparison. A control that focus can't leave (the only one in a modal) comes back as `trapped` rather than passed. `{ ignore }` leaves controls unchecked, such as parts checked on another page, while focus can still move to them. `expectFocusVisible(page)` throws for the rest.
+- `findUndistinguishedLinks(options?)` lists links in running text (laid out inline, in a block with words of its own) that nothing but colour marks, at under 3:1 against the text around them — WCAG's F73. An underline or bottom border, bold or italics the surrounding text doesn't have, or 3:1 passes. `{ underline: true }` holds links to this package's rule instead: underlined. `expectLinksDistinguished(page, options?)` throws with them.
+- `findPageOverflow(options?)` lists everything that reaches past the right edge of the page at the width it is laid out at: `scrolls` when the page scrolls sideways because of it, `clipped` when an `overflow: hidden` or `clip` box at the page's edge cuts off something with words or media in it. Content in a scroller of its own that fits (a `ScrollRegion`, a code block), content clipped inside a component, and fixed-position elements are left out, so a decorative glow bleeding off the edge isn't reported. Set the viewport to 320px for WCAG 1.4.10's reflow width. `expectPageReflows(page, options?)` throws with them.
+- `findClippedText(options?)` applies WCAG 1.4.12's four spacing metrics to the page (line height 1.5, 2em after paragraphs, letter spacing 0.12em, word spacing 0.16em) and lists every box whose content now runs out of it further than before: `clipped` for one that hides its overflow or truncates, `overflows` for one with a set size that the text spills out of. Scroll containers are left out, since their content can still be scrolled to, and so is text that runs out of a box inside a scroller that scrolls that way (code in a code block). The spacing comes off again afterwards. `expectTextUnclipped(page, options?)` throws with them.
+- `findEndlessAnimations(options?)` lists what moves for longer than five seconds (`max`), or forever, with nothing to pause it: the CSS animations, CSS transitions and Web Animations running now (`document.getAnimations()`), and playing videos without `controls`, whether or not they are `aria-hidden`. Something is paused by a control when it sits inside an element whose `id` a visible button names in `data-pauses`. It can't see motion drawn with `requestAnimationFrame`, SVG animation, animated images or canvas, and only sees what is running when it is called. A duration comes back as `Infinity` for anything that repeats forever. `expectAnimationsPausable(page, options?)` throws with them.
+- `findCursorMismatches(page, options?)` hovers every target and reads the cursor at its centre and just inside each corner, so the whole target is checked, not only its paint. Each kind has its expected cursors (`press`: `pointer`; `text`: `text` or `auto`; `drag`: `grab`; `disabled`: `not-allowed`; `pending`: `wait` or `progress`; `readonly` and `current`: `default`); `expect` changes them, and `{ press: ['default'] }` checks a product that keeps the arrow on buttons. `expectCursorsMatch(page, options?)` throws with them.
+
+The positioning, target, link, reflow, text-spacing and motion scans run in the page (`page.evaluate(findUncontainedPositioning)`), so they work with any runner that has `evaluate`. The focus check takes screenshots and the cursor check moves the mouse, so they need a Playwright page. Nothing here imports Playwright. The checks that scroll turn smooth scrolling off while they measure, so a page with `scroll-behavior: smooth` is read where things land. Run them on each state that matters, such as with a panel open or errors showing: they only check what is rendered.
+
+## What is tested
+
+`pnpm ci:local` runs all of it; each line says what it does and doesn't cover.
+
+- **Types:** `tsc` on React 19 (the build) and React 18 (`pnpm typecheck:react18`).
+- **Lint rules:** ESLint's `RuleTester`, and oxlint loading the built plugin through `jsPlugins`.
+- **Contrast:** `scripts/check-contrast.mjs` computes every token pair the usage notes promise, in all four themes. It doesn't check colours a product adds.
+- **Browser (Chromium only):** the design-system previews on React 18, loaded as the design-system artifact loads them:
+  - axe-core on every preview in all four themes;
+  - keyboard and focus behaviour for the dashboard shell, forms, feedback states, and the slider, date, file and selection controls;
+  - the site shell: the phone menu opening, pushing the page down and closing on Escape from the panel or the button; the current page's weight and marker; one order for the header, the phone menu and the footer; a sticky header covering no focused control; and the header fitting at seven widths from 320px to 1280px, either side of `lg` among them;
+  - the motion rule on the Hero card's media: the motion check exempts it only for its visible pause control, Pause stops it, reduced motion never starts it, and nothing waits hidden for it;
+  - code blocks copying, announcing a second copy, a terminal copying its commands only, and a refused copy; the theme switcher's choice, System following the operating system, the level, and the theme script running under a CSP that allows only its published hash;
+  - the content components: link cards named by their titles alone, card grids as lists, a region landmark only where a section asks for one, one `h1` naming `main` on the landing page, which doesn't scroll sideways at 320px, and the contact form's validation, confirmation and hidden honeypot;
+  - `ScrollRegion` and the shell's `main` becoming tab stops only while they scroll with nothing focusable in them;
+  - every target on every preview at least `--target-min`, and no two overlapping, at AA and AAA;
+  - the paint of every three-layer control the same height at AA and AAA, and the focus ring on the paint;
+  - every control a keyboard reaches visibly changing when it takes focus, in two themes;
+  - every link in running text underlined, and every target showing the cursor the rule gives it, across its whole area;
+  - toasts measured against the focused control;
+  - nothing on any preview running off its width, no text cut off or spilling with WCAG 1.4.12's spacing applied, and nothing but a loading indicator moving past five seconds, at AA and AAA;
+  - the page checks above, each also run on a page built to fail.
+- **Packaging:** `pnpm package:verify` packs the tarball and installs it into a new Next.js app. It builds the app, loads it in both levels, and runs the page checks and the lint plugin from the installed package. It also follows a sidebar link on the freshly started app, to check the templates' page transition runs with its `nav-forward` type. The root layout's `ThemeScript` is checked to put a stored dark theme on `<html>` before any of the page's own JavaScript runs, and the footer's `ThemeSwitcher` to change it for the next page load. A route on the site templates is checked too: the current page, reflow at 320px, the Menu as a link to the footer's navigation with JavaScript off, and the swap to the Menu button when the page hydrates, in the same place and keeping focus.
+- **The docs site** (`apps/docs`): `pnpm test:site` loads every page of its production build in all four themes at 1280px, and at AA and AAA at 390px (and each component the Playground shows). Each run has axe, positioning, targets, underlined links, sideways overflow and console errors. Visible focus runs in three of them (light, dark AAA and 390px AAA: both themes, both levels, both layouts) and cursors in three (light, light AAA and 390px AAA), and both check the sidebar and header, which are the same on every page, on the home page only; a check fails if that selector ever leaves out a control in a page's content. It also fails on console errors, sideways overflow, and any internal link to a page it doesn't check, and it follows a sidebar link, in Chromium and in WebKit, to check that the navigation stays client-side, runs the page transition, and covers the old page while it leaves. It also tries a shadcn/ui theme from the Playground: that it reaches every page, lasts through a reload without a flash, resets, and that a paste can set nothing but valid token values. The findings it accepts are listed in `test/site/pages.mjs`, each with its reason. The site brings its own palette, so its build runs the contrast audit against those colours.
+- **Not tested:** other browsers; real screen readers (VoiceOver, NVDA and JAWS haven't been run on these components); Windows High Contrast; pasting files into the drop zone; everything that depends on a product's content.
+
+## Developing
+
+```sh
+pnpm install
+pnpm build           # CSS from tokens/tokens.json, then tsc into dist/
+pnpm test            # lint-rule tests (vitest)
+pnpm docs:build      # the design-system artifact, into docs/.artifact/
+pnpm test:browser    # browser suites (after docs:build); pnpm test:axe for axe on every card
+pnpm docs:site       # the docs site (apps/docs) in development
+pnpm docs:site:build # its production build; pnpm test:site then checks every page of it
+pnpm ci:local        # everything above, in CI order
+```
+
+- `tokens/tokens.json` is the only place a token value lives. The CSS in `dist/styles/` is generated from it.
+- `docs/design-system/` holds the design-system artifact's text, previews and cover. `pnpm docs:build` assembles the artifact from it and from `src/`.
+- `apps/docs/` is the documentation site, a Next.js app built on the package. Its text is generated from this repository: the READMEs, `index.d.ts`, the lint fixtures, the templates and the changelog. Its colours are Setsquare's, in `apps/docs/palette/setsquare.json`.
+- The site deploys to Vercel as a project whose Root Directory is `apps/docs`. Keep **Include source files outside of the Root Directory in the Build Step** on (the default for new projects): the build reads the READMEs, templates and scripts. `apps/docs/vercel.json` builds the package at the workspace root, then the site. Set `ENABLE_EXPERIMENTAL_COREPACK=1` in the project's environment variables, so Vercel uses the pnpm pinned in `packageManager`.
+- `CLAUDE.md` has the rules this repository works by, and `RELEASING.md` has how a version is published.
+
+## Licence
+
+Apache-2.0 licensed. See `LICENSE` and `NOTICE`. "Setsquare" is a trademark of WORKTREE AMIGOS LTD; the licence grants no right to use it.

package/dist/index.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @setsquare/ui — React Aria components, tokens, a dashboard shell and a site shell for public pages, with a
+ * WCAG 2.2 AA / AAA conformance switch. Controls are built in three layers (target, painted box, content), so the switch changes targets
+ * without changing what people see. A module is a client component ('use client') only when it needs to be —
+ * React Aria, a hook, a context, an event handler — so server components can use the rest without shipping them
+ * to the browser. Import from here, and the styles from "@setsquare/ui/styles.css".
+ */
+export { cn } from './lib/cn.js';
+export { useElementWidth } from './lib/use-element-width.js';
+export { Button, LinkButton } from './ui/button.js';
+export type { ButtonProps, LinkButtonProps } from './ui/button.js';
+export { buttonTargetStyles, buttonVisualStyles } from './ui/button-styles.js';
+export type { ButtonVariant, ButtonVisualSize } from './ui/button-styles.js';
+export { TextLink } from './ui/text-link.js';
+export type { TextLinkProps } from './ui/text-link.js';
+export { IconButton } from './ui/icon-button.js';
+export type { IconButtonProps } from './ui/icon-button.js';
+export type { IconComponent, IconProp } from './ui/icon.js';
+export { Tooltip, TooltipTrigger } from './ui/tooltip.js';
+export { Kbd } from './ui/kbd.js';
+export { StatusBadge } from './ui/badge.js';
+export type { StatusTone, StatusBadgeProps } from './ui/badge.js';
+export { Avatar, ProductMark } from './ui/avatar.js';
+export { Breadcrumbs } from './ui/breadcrumbs.js';
+export type { BreadcrumbItem, BreadcrumbsProps } from './ui/breadcrumbs.js';
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Popover, rowTarget, itemVisual, } from './ui/menu.js';
+export { SegmentedControl, Segment } from './ui/segmented-control.js';
+export { Table, TableHeader, Column, TableBody, Row, Cell } from './ui/table.js';
+export { ScrollRegion } from './ui/scroll-region.js';
+export type { ScrollRegionProps } from './ui/scroll-region.js';
+export { Sheet } from './ui/sheet.js';
+export { AppSearch, CommandSearch, SearchTrigger } from './ui/search.js';
+export type { SearchItem, SearchSection } from './ui/search.js';
+export { DashboardShell, ShellInset, ShellBody, ShellMain, useShell, useOptionalShell, } from './shell/dashboard-shell.js';
+export type { ShellSize, PanelMode, DashboardShellProps } from './shell/dashboard-shell.js';
+export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarList, SidebarItem, SidebarSwitcher, SidebarTrigger, useSidebarCollapsed, } from './shell/sidebar.js';
+export { AppHeader } from './shell/app-header.js';
+export { SiteShell, SiteMain } from './shell/site-shell.js';
+export type { SiteShellProps, SiteMainProps } from './shell/site-shell.js';
+export { SiteHeader } from './shell/site-header.js';
+export type { SiteHeaderProps } from './shell/site-header.js';
+export { SiteNav } from './shell/site-nav.js';
+export type { SiteNavProps } from './shell/site-nav.js';
+export { SiteNavLink, SitePathProvider } from './shell/site-nav-link.js';
+export type { SiteNavLinkProps, SiteNavLinkVariant } from './shell/site-nav-link.js';
+export { SiteMenu } from './shell/site-menu.js';
+export type { SiteMenuProps } from './shell/site-menu.js';
+export { SiteFooter, SiteFooterGroup } from './shell/site-footer.js';
+export type { SiteFooterProps, SiteFooterGroupProps } from './shell/site-footer.js';
+export { samePath } from './shell/site-path.js';
+export type { SiteNavItem } from './shell/site-path.js';
+export { Disclosure } from './ui/disclosure.js';
+export type { DisclosureProps } from './ui/disclosure.js';
+export { Container, Eyebrow, Section, SectionHeader } from './ui/section.js';
+export type { ContainerProps, SectionProps, SectionHeaderProps } from './ui/section.js';
+export { Card, CardGrid } from './ui/card.js';
+export type { CardProps, CardGridProps } from './ui/card.js';
+export { LinkCard } from './ui/link-card.js';
+export type { LinkCardProps } from './ui/link-card.js';
+export { Hero, HeroHighlight } from './ui/hero.js';
+export type { HeroProps } from './ui/hero.js';
+export { Prose } from './ui/prose.js';
+export type { ProseProps } from './ui/prose.js';
+export { Steps, Step } from './ui/steps.js';
+export type { StepsProps, StepProps } from './ui/steps.js';
+export { Split } from './ui/split.js';
+export type { SplitProps } from './ui/split.js';
+export { Tag } from './ui/tag.js';
+export type { TagProps } from './ui/tag.js';
+export { StatList, Stat } from './ui/stat-list.js';
+export type { StatListProps, StatProps } from './ui/stat-list.js';
+export { CodeBlock } from './ui/code-block.js';
+export type { CodeBlockProps } from './ui/code-block.js';
+export { CopyButton } from './ui/copy-button.js';
+export type { CopyButtonProps } from './ui/copy-button.js';
+export { ThemeScript, themeScript, themeScriptHash, applyTheme, applyLevel, readTheme, readLevel, resolveTheme, subscribeTheme, THEME_CHANGE_EVENT, } from './ui/theme.js';
+export type { ThemeOptions, ThemePreference, ConformanceLevel, ThemeScriptProps, } from './ui/theme.js';
+export { ThemeSwitcher } from './ui/theme-switcher.js';
+export type { ThemeSwitcherProps } from './ui/theme-switcher.js';
+export { PageHeader, PageContent } from './shell/page-header.js';
+export { RightPanel, PanelToggle, PanelSection } from './shell/right-panel.js';
+export { FieldLabel, FieldDescription, FieldError, NecessityContext, fieldBox, fieldInput, fieldWidths, } from './ui/field.js';
+export type { NecessityIndicator, FieldWidth } from './ui/field.js';
+export { TextField, TextArea } from './ui/text-field.js';
+export type { TextFieldProps, TextAreaProps } from './ui/text-field.js';
+export { NumberField } from './ui/number-field.js';
+export type { NumberFieldProps } from './ui/number-field.js';
+export { SearchField } from './ui/search-field.js';
+export type { SearchFieldProps } from './ui/search-field.js';
+export { ListBox, Option, OptionSection } from './ui/list-box.js';
+export { Select } from './ui/select.js';
+export type { SelectProps } from './ui/select.js';
+export { ComboBox } from './ui/combo-box.js';
+export type { ComboBoxProps } from './ui/combo-box.js';
+export { Checkbox, CheckboxGroup, SelectionCheckbox } from './ui/checkbox.js';
+export type { CheckboxProps, CheckboxGroupProps, SelectionCheckboxProps } from './ui/checkbox.js';
+export { RadioGroup, Radio } from './ui/radio-group.js';
+export type { RadioGroupProps, RadioProps } from './ui/radio-group.js';
+export { Switch } from './ui/switch.js';
+export type { SwitchProps } from './ui/switch.js';
+export { Form, FormSection, FormActions, ErrorSummary, StatusMessage } from './ui/form.js';
+export type { FormProps, FormSectionProps, ErrorItem, ErrorSummaryProps } from './ui/form.js';
+export { SpinnerIcon, Spinner, ProgressBar } from './ui/spinner.js';
+export type { SpinnerProps, ProgressBarProps } from './ui/spinner.js';
+export { Skeleton, SkeletonText, TableSkeleton, LoadingState } from './ui/skeleton.js';
+export type { LoadingStateProps } from './ui/skeleton.js';
+export { Alert, OfflineAlert, useOnline } from './ui/alert.js';
+export type { AlertProps, AlertTone } from './ui/alert.js';
+export { EmptyState } from './ui/empty-state.js';
+export type { EmptyStateProps } from './ui/empty-state.js';
+export { Dialog, ConfirmDialog } from './ui/dialog.js';
+export type { DialogProps, ConfirmDialogProps } from './ui/dialog.js';
+export { Toaster, toast, toastQueue } from './ui/toast.js';
+export type { ToastContent, ToastTone } from './ui/toast.js';
+export { ErrorState, ErrorBoundary } from './ui/error-state.js';
+export type { ErrorStateProps, ErrorKind, ErrorBoundaryProps } from './ui/error-state.js';
+export { Slider, RangeSlider } from './ui/slider.js';
+export type { SliderProps, RangeSliderProps } from './ui/slider.js';
+export { Calendar, RangeCalendar } from './ui/calendar.js';
+export type { CalendarProps, RangeCalendarProps } from './ui/calendar.js';
+export { DateField, TimeField, DatePicker, DateRangePicker } from './ui/date-field.js';
+export type { DateFieldProps, TimeFieldProps, DatePickerProps, DateRangePickerProps, } from './ui/date-field.js';
+export { FileUpload, formatBytes } from './ui/file-upload.js';
+export type { FileUploadProps, FileUploadItem, FileUploadStatus, FileRejection, } from './ui/file-upload.js';
+export { GridList, GridListItem } from './ui/grid-list.js';
+export type { GridListProps, GridListItemProps } from './ui/grid-list.js';
+export { SelectionBar } from './ui/selection-bar.js';
+export type { SelectionBarProps } from './ui/selection-bar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,78 @@
+/**
+ * @setsquare/ui — React Aria components, tokens, a dashboard shell and a site shell for public pages, with a
+ * WCAG 2.2 AA / AAA conformance switch. Controls are built in three layers (target, painted box, content), so the switch changes targets
+ * without changing what people see. A module is a client component ('use client') only when it needs to be —
+ * React Aria, a hook, a context, an event handler — so server components can use the rest without shipping them
+ * to the browser. Import from here, and the styles from "@setsquare/ui/styles.css".
+ */
+export { cn } from './lib/cn.js';
+export { useElementWidth } from './lib/use-element-width.js';
+export { Button, LinkButton } from './ui/button.js';
+// From their own module, which has no 'use client', so a server component can call them.
+export { buttonTargetStyles, buttonVisualStyles } from './ui/button-styles.js';
+export { TextLink } from './ui/text-link.js';
+export { IconButton } from './ui/icon-button.js';
+export { Tooltip, TooltipTrigger } from './ui/tooltip.js';
+export { Kbd } from './ui/kbd.js';
+export { StatusBadge } from './ui/badge.js';
+export { Avatar, ProductMark } from './ui/avatar.js';
+export { Breadcrumbs } from './ui/breadcrumbs.js';
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Popover, rowTarget, itemVisual, } from './ui/menu.js';
+export { SegmentedControl, Segment } from './ui/segmented-control.js';
+export { Table, TableHeader, Column, TableBody, Row, Cell } from './ui/table.js';
+export { ScrollRegion } from './ui/scroll-region.js';
+export { Sheet } from './ui/sheet.js';
+export { AppSearch, CommandSearch, SearchTrigger } from './ui/search.js';
+export { DashboardShell, ShellInset, ShellBody, ShellMain, useShell, useOptionalShell, } from './shell/dashboard-shell.js';
+export { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarList, SidebarItem, SidebarSwitcher, SidebarTrigger, useSidebarCollapsed, } from './shell/sidebar.js';
+export { AppHeader } from './shell/app-header.js';
+// The site shell, for public pages. SiteShell, SiteMain, SiteHeader, SiteNav, SiteFooter and SiteFooterGroup
+// have no 'use client'; SiteMenu and SiteNavLink do.
+export { SiteShell, SiteMain } from './shell/site-shell.js';
+export { SiteHeader } from './shell/site-header.js';
+export { SiteNav } from './shell/site-nav.js';
+export { SiteNavLink, SitePathProvider } from './shell/site-nav-link.js';
+export { SiteMenu } from './shell/site-menu.js';
+export { SiteFooter, SiteFooterGroup } from './shell/site-footer.js';
+export { samePath } from './shell/site-path.js';
+export { Disclosure } from './ui/disclosure.js';
+export { Container, Eyebrow, Section, SectionHeader } from './ui/section.js';
+export { Card, CardGrid } from './ui/card.js';
+export { LinkCard } from './ui/link-card.js';
+export { Hero, HeroHighlight } from './ui/hero.js';
+export { Prose } from './ui/prose.js';
+export { Steps, Step } from './ui/steps.js';
+export { Split } from './ui/split.js';
+export { Tag } from './ui/tag.js';
+export { StatList, Stat } from './ui/stat-list.js';
+export { CodeBlock } from './ui/code-block.js';
+export { CopyButton } from './ui/copy-button.js';
+export { ThemeScript, themeScript, themeScriptHash, applyTheme, applyLevel, readTheme, readLevel, resolveTheme, subscribeTheme, THEME_CHANGE_EVENT, } from './ui/theme.js';
+export { ThemeSwitcher } from './ui/theme-switcher.js';
+export { PageHeader, PageContent } from './shell/page-header.js';
+export { RightPanel, PanelToggle, PanelSection } from './shell/right-panel.js';
+export { FieldLabel, FieldDescription, FieldError, NecessityContext, fieldBox, fieldInput, fieldWidths, } from './ui/field.js';
+export { TextField, TextArea } from './ui/text-field.js';
+export { NumberField } from './ui/number-field.js';
+export { SearchField } from './ui/search-field.js';
+export { ListBox, Option, OptionSection } from './ui/list-box.js';
+export { Select } from './ui/select.js';
+export { ComboBox } from './ui/combo-box.js';
+export { Checkbox, CheckboxGroup, SelectionCheckbox } from './ui/checkbox.js';
+export { RadioGroup, Radio } from './ui/radio-group.js';
+export { Switch } from './ui/switch.js';
+export { Form, FormSection, FormActions, ErrorSummary, StatusMessage } from './ui/form.js';
+export { SpinnerIcon, Spinner, ProgressBar } from './ui/spinner.js';
+export { Skeleton, SkeletonText, TableSkeleton, LoadingState } from './ui/skeleton.js';
+export { Alert, OfflineAlert, useOnline } from './ui/alert.js';
+export { EmptyState } from './ui/empty-state.js';
+export { Dialog, ConfirmDialog } from './ui/dialog.js';
+export { Toaster, toast, toastQueue } from './ui/toast.js';
+export { ErrorState, ErrorBoundary } from './ui/error-state.js';
+export { Slider, RangeSlider } from './ui/slider.js';
+export { Calendar, RangeCalendar } from './ui/calendar.js';
+export { DateField, TimeField, DatePicker, DateRangePicker } from './ui/date-field.js';
+export { FileUpload, formatBytes } from './ui/file-upload.js';
+export { GridList, GridListItem } from './ui/grid-list.js';
+export { SelectionBar } from './ui/selection-bar.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/lib/cn.d.ts

@@ -0,0 +1,4 @@
+import { type ClassValue } from 'clsx';
+/** Join class names, later ones winning where two set the same property. */
+export declare function cn(...parts: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/lib/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAwD7C,4EAA4E;AAC5E,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,UAAU,EAAE,GAAG,MAAM,CAEjD"}