@nxgt/material 3.101.0 → 3.104.0

package/docs/guides/keypad.md

@@ -0,0 +1,233 @@
+# Keypad
+
+`@nxgt/material/keypad` is a numeric keypad you can use outside the Calculator
+widget: a touch and keyboard entry for a quantity, a price, a percentage, or an
+amount tendered in cash with the change worked out. The value is a canonical
+decimal string (`'12.5'`), the arithmetic is exact (`0.1 + 0.2` is `0.3`), and
+nothing is evaluated as code. The maths is `@nxgt/material-core/calculator`, the
+same engine as the [calculator](calculator.md).
+
+- [Set up](#set-up)
+- [Standard entry](#standard-entry)
+- [Decimal or minor-unit entry](#decimal-or-minor-unit-entry)
+- [Calculations](#calculations)
+- [Limits](#limits)
+- [Keyboard](#keyboard)
+- [Bind it to a field](#bind-it-to-a-field)
+- [Cash](#cash)
+- [Props](#props)
+- [Sizing and styles](#sizing-and-styles)
+- [Accessibility](#accessibility)
+- [Troubleshooting](#troubleshooting)
+
+## Set up
+
+```tsx
+import { Keypad } from '@nxgt/material/keypad';
+```
+
+The entry is its own: it is not in `@nxgt/material` or
+`@nxgt/material/components`, and it renders on the server. **There is no keypad
+stylesheet**: the Calculator's `calculator.css` styles it, so import it once,
+after `styles.css`:
+
+```css
+@import "@nxgt/material/styles.css";
+@import "@nxgt/material/calculator.css";
+```
+
+(or `import '@nxgt/material/calculator.css'` in your entry module).
+
+## Standard entry
+
+```tsx
+const [qty, setQty] = useState('');
+
+<Keypad value={qty} onValueChange={setQty} onCommit={(value) => addLine(value)} />
+```
+
+`value` is controlled with `onValueChange`; `defaultValue` leaves the keypad
+uncontrolled. `onValueChange` receives the value text each time it changes
+(`''` when emptied), but not while a calculation waits for `=`. The commit key (a check mark; "Enter" to a screen reader,
+or your `commitLabel`) and the Enter key call `onCommit(value, expression)`:
+the value held between `min` and `max`, and the expression that gave it. An
+empty keypad commits nothing. The keypad keeps its value after a commit; empty
+it from your side with a controlled `value`.
+
+## Decimal or minor-unit entry
+
+`entry="decimal"` (the default) types the number as written: `1`, `2`, `.`, `5`
+is `12.5`.
+
+`entry="minor"` types it the way a till does: `1`, `2`, `5` is `1.25`, `00`
+adds two zeros, backspace drops the last digit. It has no decimal key and no
+operations. The decimals come from `currency` (EUR 2, JPY 0, KWD 3) or
+`fractionDigits` (2 by default).
+
+```tsx
+<Keypad entry="minor" currency="EUR" value={price} onValueChange={setPrice} />
+```
+
+`currency` also draws the symbol after the amount. `locale` sets the decimal
+separator, the grouping and the decimal key's glyph. `fractionDigits` limits the
+decimals typed (a further digit is refused) and rounds a calculation half-up to
+them.
+
+## Calculations
+
+Pass `operations` to add calculation keys: `true` for add, subtract, multiply
+and divide, or a list such as `['add', 'multiply']`. The commit key then reads
+"=" while a calculation waits, and a second press commits the result:
+
+```tsx
+<Keypad operations onCommit={(value, expression) => save(value, expression)} />
+// 2 + 3 =  then the commit key: onCommit('5', '2+3')
+```
+
+An operator pressed after "=" continues from the result. `minor` entry and the
+`cash` variant take no operations.
+
+## Limits
+
+- `max`: a digit that would pass it is refused while typing.
+- `min`: never stops typing (`5` on the way to `50` is fine); the commit key
+  holds the value at `min`, and tells `onValueChange` when it moved it.
+- `fractionDigits`: see above; `0` removes the decimal key.
+
+An operand past `max` inside a calculation is not caught while typing: only the
+commit clamp holds the result.
+
+## Keyboard
+
+`keyboard` says where the physical keyboard works:
+
+| Value | |
+| --- | --- |
+| `'focus'` (default) | When focus is inside the keypad (after a tap or a Tab to a key) |
+| `'global'` | Anywhere on the page, except in a field. Use it for a screen that is the keypad, such as a till |
+| `false` | Never |
+
+Digits, `.` or `,` (by locale), the operators you offer, Backspace, Escape (clear) and
+Enter work. Enter on a focused key presses that key, as a button does; Enter
+elsewhere commits. The keys form one tab stop with arrow keys over the grid,
+Home and End along a row.
+
+## Bind it to a field
+
+`useKeypadNumber` and `useKeypadQuantity` bind the keypad to a field you already
+have. Pass the result as `binding`: the keypad reads the field's number, writes
+each change back, takes its decimals, `min` and `max`, and **hides its own
+display** (the field shows the number; pass `display` to show both). With
+`operations`, the display stays on, since the field keeps its number while a
+calculation is typed and `onValueChange` is called with the result at `=`.
+
+```tsx
+import { NumberField } from '@nxgt/material/components';
+import { Keypad, useKeypadNumber } from '@nxgt/material/keypad';
+
+const [qty, setQty] = useState<number | null>(1);
+const binding = useKeypadNumber({ value: qty, onChange: setQty, min: 1, max: 99 });
+
+<NumberField label="Quantity" value={qty} onChange={setQty} />
+<Keypad binding={binding} />
+```
+
+| Field | Hook |
+| --- | --- |
+| `NumberField`, `PercentField` | `useKeypadNumber({ value, onChange, min, max, fractionDigits })` |
+| `CurrencyField` | `useKeypadNumber({ ..., currency })`; with `minorUnits`, add `minorUnits: true`: the field holds cents (`1250`), the keypad types euros (`12.5`), and `min` / `max` stay in cents |
+| `QuantityField` | `useKeypadQuantity({ value, onChange })`: the keypad types the amount, the unit stays as the field holds it |
+
+An explicit prop on `Keypad` wins over the binding's, and both `onValueChange`
+handlers are called. A cleared keypad writes `null`. While a calculation is
+typed (`2+3`) the field keeps its number and nothing is written; the result is
+written at `=`.
+
+## Cash
+
+`variant="cash"` takes the amount a customer hands over and works out the change:
+
+```tsx
+<Keypad
+  variant="cash"
+  total="17.35"
+  denominations={[5, 10, 20, 50]}
+  currency="EUR"
+  onTender={(tendered, settlement) => {
+    if (settlement.status === 'paid') charge(tendered, settlement.change);
+    else askForMore(settlement.due);
+  }}
+/>
+```
+
+- The total is shown, then the change or what is **still due** as soon as an
+  amount is entered, and a live region says it ("Change 2.65", "Still due 7.35").
+- `denominations` add amount buttons: the exact total, then the next round
+  amount at or above it for each bill or coin (`17.35` with `[5, 10, 20, 50]`
+  gives `17.35`, `20`, `50`), four buttons at most, none above `max`. A button
+  fills the amount; the commit key (named "Tender") reports it.
+- `onTender(tendered, settlement)` is the only callback of the variant (`onCommit`
+  is not called). `settlement` is `{ status: 'paid', change }` (change may be
+  `'0'`) or `{ status: 'short', due }`, as exact decimal text. A short payment is a
+  settlement, not an error. **The app owns the charge**: the keypad only reports.
+- The settlement row carries a tone: **success** while the payment covers the
+  total (change may be `0`), **warning** while an amount is still due, with the
+  figure emphasised (AA text on a tinted band, light and dark).
+- The keys follow one scheme: digits neutral, the editing keys (C, backspace)
+  one tone, the commit key filled primary, the quick amounts tonal chips in a
+  two-column grid (an odd last chip takes the full row; amounts never
+  truncate). Without a decimal key the 0 key spans nine of the twelve columns,
+  the commit key the other three.
+- `total` must be a valid, non-negative amount (a number or exact decimal text);
+  without one the commit key does nothing.
+
+Use `entry="minor"` for a till that types cents, and `size="large"` for a
+counter's touch screen.
+
+## Props
+
+| Prop | Default | |
+| --- | --- | --- |
+| `value` / `defaultValue` / `onValueChange` | none | The value as decimal text, controlled or not |
+| `onCommit` | none | `(value, expression)` on the commit key or Enter; standard variant |
+| `binding` | none | From `useKeypadNumber` / `useKeypadQuantity` |
+| `entry` | `'decimal'` | `'decimal'` or `'minor'` |
+| `operations` | off | `true` or a list of `'add' \| 'subtract' \| 'multiply' \| 'divide'` |
+| `locale` | the page's | Separator, grouping, decimal key glyph |
+| `currency` | none | ISO 4217 code: the symbol and the currency's decimals |
+| `fractionDigits` | the currency's, else any | Decimals kept |
+| `min`, `max` | none | See [Limits](#limits) |
+| `keyboard` | `'focus'` | `'focus'`, `'global'` or `false` |
+| `size` | `'comfortable'` | `'comfortable'` or `'large'` |
+| `display` | `true`, `false` with a `binding` and no `operations` | Shows the amount above the keys |
+| `commitLabel` | translated "Enter" ("Tender" in cash) | The commit key's name and text |
+| `disabled` | `false` | Keys do nothing and say so (`aria-disabled`) |
+| `label` | "Keypad" | The group's accessible name |
+| `variant`, `total`, `denominations`, `onTender` | `'standard'` | See [Cash](#cash) |
+| `className` | | On the root |
+
+Types: `KeypadProps`, `KeypadEntry`, `KeypadOperation`, `KeypadVariant`, `KeypadSettlement`, `KeypadBinding`.
+
+## Sizing and styles
+
+The keypad sizes by its own width with the calculator's bands (compact under
+360px, wider keys from 600px) and is at most 24rem wide. `size="large"` gives
+taller keys. Colours and shapes follow the theme and dark mode through
+`styles.css`; the key rules are shared with the calculator in `calculator.css`.
+
+## Accessibility
+
+- The keys are native buttons in one `role="group"` (one tab stop, arrow keys
+  over the grid), at least 44px on a coarse pointer at 360px and 320px.
+- Each key's glyph is decoration; its name is spoken (Plus, Minus, "00, double zero",
+  Clear all, Enter, "Amount €20.00" in English, "Amount 20,00 €" in French). `commitLabel` replaces the commit key's name.
+- Results and, in cash, the change or amount still due are announced in a
+  polite live region; the display itself is not live, so typing is not read digit by digit.
+- Wording is the `material.keypad.*` and `material.calculator.keys.*` strings
+  (English and French shipped), overridable through `I18nProvider` `resources`.
+
+## Troubleshooting
+
+See [the keypad entries](../troubleshooting.md#keypad): unstyled keys, a keyboard
+that types nothing, a Tender
+key that does nothing, and a digit that is refused.

package/docs/guides/printing.md

@@ -2,7 +2,9 @@
 
 This page covers building PDF documents with `@nxgt/material/print`, turning
 them into a download, a new tab or a server response in one call, and
-shipping them from a browser or from a server bundle that must not crash.
+shipping them from a browser or from a server bundle that must not crash. It
+also covers [`toCsv` and `csvResponse`](#a-csv-export-tocsv-and-csvresponse),
+the CSV export beside `pdfResponse`.
 
 ```bash
 bun add @react-pdf/renderer@^4.9 react-pdf-tailwind
@@ -619,6 +621,8 @@ export function DownloadInvoice({ invoice }: { invoice: Invoice }) {
 | `openPdf(doc \| blob, options?)` | `Promise<void>`: the file opens in a new tab | browser |
 | `usePdfFile(doc \| null, options?)` | `{ blob, url, loading, error, refresh }` | browser (a React hook) |
 | `pdfResponse(doc, options?)` | `Promise<Response>` with the PDF and its headers | Node 18+, Bun |
+| `toCsv(rows, columns, options?)` | `string`: the CSV text | everywhere |
+| `csvResponse(text, fileName?, options?)` | `Response` with the CSV and its headers | Node 18+, Bun |
 | `renderPdfBuffer(doc, options?)` | `Promise<Uint8Array>` | browser, Node 18+, Bun |
 | `renderPdfBlob(doc, options?)` | `Promise<Blob>` of type `application/pdf` | browser, Node 18+, Bun |
 | `renderPdfStream(doc, options?)` | `Promise<ReadableStream<Uint8Array>>` (a Web stream) | Node 18+, Bun |
@@ -825,6 +829,50 @@ of your own. A `PdfReader` in the browser opens the route by its URL, with
 <PdfReader file={{ url: `/invoices/${id}/pdf`, httpHeaders: { Authorization: `Bearer ${token}` } }} fileName={`${number}.pdf`} />
 ```
 
+### A CSV export: `toCsv` and `csvResponse`
+
+A list exported to a spreadsheet is the same job as a PDF: text, then a
+download response. `toCsv` writes the text (RFC 4180) and `csvResponse` wraps
+it, with the same `Content-Disposition` helper as `pdfResponse`. Both are pure
+and server-safe, and add nothing to a client bundle.
+
+```ts
+import { csvResponse, toCsv } from '@nxgt/material/print';
+
+export async function loader() {
+  const items = await getItems();
+  const text = toCsv(
+    items,
+    [
+      { header: 'Name', value: (item) => item.name },
+      { header: 'Amount', value: (item) => item.amount },
+    ],
+    { separator: ';', bom: true },
+  );
+  return csvResponse(text, 'items.csv');
+}
+```
+
+| `toCsv` option | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `separator` | `','` \| `';'` \| `'\t'` | `','` | `';'` is what spreadsheets in comma-decimal locales (French, German) expect |
+| `bom` | `boolean` | `false` | Prefixes a UTF-8 byte order mark, which Excel needs to read accents |
+
+- The first line is the headers (`columns[].header`); each row then gives one
+  line from `columns[].value(row)`. Lines end with CRLF, with none after the last.
+- A field holding the separator, a quote, CR or LF is quoted and its quotes
+  doubled. `null` and `undefined` are empty fields; numbers and booleans are
+  written with `String()` and a `Date` as ISO 8601. Format amounts and dates in
+  `value` (see `formatAmount`) when the sheet should show them by locale.
+- A cell starting with `=`, `+`, `-` or `@` is written as it is: a
+  spreadsheet may read it as a formula, so prefix user-typed text yourself when
+  the file is opened by someone other than its author.
+
+`csvResponse(text, fileName?, options?)` answers with `Content-Type: text/csv;
+charset=utf-8`, an attachment `Content-Disposition` (an ASCII `filename` and a
+UTF-8 `filename*`, `.csv` added when missing) and `Cache-Control: private,
+no-store`, which `options.headers` can override.
+
 ### Bytes and streams: `renderPdfBuffer`, `renderPdfStream`
 
 For anything that is not a response (an email attachment, an upload to object
@@ -896,6 +944,8 @@ function renderPdfStream(input: PdfInput, options?: PdfRenderInputOptions): Prom
 function downloadPdf(input: PdfInput | Blob, options?: PdfOutputOptions): Promise<void>;
 function openPdf(input: PdfInput | Blob, options?: PdfOutputOptions): Promise<void>;
 function pdfResponse(input: PdfInput, options?: PdfResponseOptions & PdfRenderInputOptions): Promise<Response>;
+function toCsv<Row>(rows: readonly Row[], columns: readonly CsvColumn<Row>[], options?: CsvOptions): string;
+function csvResponse(text: string, fileName?: string, options?: { headers?: HeadersInit }): Response;
 function contentDisposition(disposition: 'inline' | 'attachment', fileName: string): string;
 function usePdfFile(input: PdfInput | null, options?: PdfRenderInputOptions): PdfFileState;
 

package/docs/roadmap.md

@@ -257,6 +257,9 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Later
 
+- **Keypad for Vue** — the `Keypad`, its field bindings and the cash variant on
+  `@nxgt/material-vue`, on the same engine and stylesheet
+  ([#2830](https://github.com/softistx/nxgt-material/issues/2830)).
 - **A lighter first load for the app shell** — `ActivityLayout` pulls about
   831 KB gzipped through the library's single shared chunk; splitting it so the
   shell costs tens of KB at first load, the rest loaded where a page uses it
@@ -379,6 +382,24 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Keypad (3.103.0)** — `@nxgt/material/keypad` is a touch and keyboard numeric keypad
+  you can use outside the Calculator widget, for quantity, price, percentage
+  and cash-tendered entry with change. Entry is a decimal or minor units, the
+  display is optional, and the keyboard is on `'focus'` by default (opt in to
+  `'global'`). `useKeypadNumber` and `useKeypadQuantity` bind it to
+  `NumberField`, `PercentField` and `CurrencyField`. A `cash` variant reports
+  `onTender(tendered, settlement)` and leaves the charge to your app. It is
+  styled by `calculator.css`, with no separate stylesheet
+  ([guide](guides/keypad.md)).
+- **A status chip that opens its choices (3.103.0)** — `StatusMenu` shows a record's
+  status as a tone-and-icon chip and changes it in one tap: a menu on a wide
+  screen, a bottom sheet on a phone. Statuses not reachable from the current
+  one are greyed with the reason, a locked or read-only record explains why,
+  a slow save keeps the old status with a spinner and announces a failure,
+  and a choice can ask for confirmation. `StatusMenuFormField` binds it to a
+  form, and `@nxgt/material-core/status-menu` holds the model; the status
+  board recipe's detail sheet uses it
+  ([#1653](https://github.com/softistx/nxgt-material/issues/1653)).
 - **Archived status filter (3.99.0)** — `archivedStatusField()` adds an active /
   archived / all choice to a table's filter model as a segmented chip group
   that is always set; `parseArchivedStatus` reads it in a loader and

package/docs/troubleshooting.md

@@ -392,7 +392,7 @@ words in your error.
 - [An empty gap under the `ServerTable` band while nothing is selected](#an-empty-gap-under-the-servertable-band-while-nothing-is-selected)
 - [The focus falls to the page after a `DataTable` bulk action](#the-focus-falls-to-the-page-after-a-datatable-bulk-action)
 - [A test's `getByText('No data available')` finds two elements after a change](#a-tests-getbytextno-data-available-finds-two-elements-after-a-change)
-- [`` [@nxgt/material] DataTable: `virtual` needs `maxHeight`; the rows are not virtualized. ``](#nxgtmaterial-datatable-virtual-needs-maxheight-the-rows-are-not-virtualized)
+- [`` [@nxgt/material] DataTable: `virtual` needs `maxHeight` or `maxHeightClassName`; the rows are not virtualized. ``](#nxgtmaterial-datatable-virtual-needs-maxheight-or-maxheightclassname-the-rows-are-not-virtualized)
 - [`` [@nxgt/material] DataTable: `renderExpandedRow` is ignored while `virtual` is on. ``](#nxgtmaterial-datatable-renderexpandedrow-is-ignored-while-virtual-is-on)
 - [`` [@nxgt/material] DataTable: `virtual` does not apply to the `cards` layout and is ignored. ``](#nxgtmaterial-datatable-virtual-does-not-apply-to-the-cards-layout-and-is-ignored)
 - [`` [@nxgt/material] DataTable: `layout="cards"` needs `renderCard`; each card shows its first column. ``](#nxgtmaterial-datatable-layoutcards-needs-rendercard-each-card-shows-its-first-column)
@@ -495,6 +495,13 @@ words in your error.
 - [`The point of sale's Charge button stays off`](#the-point-of-sales-charge-button-stays-off)
 - [`The Financial calculator shows no currency`](#the-financial-calculator-shows-no-currency)
 
+**Keypad**
+
+- [`The keypad is unstyled`](#the-keypad-is-unstyled)
+- [`A keypad key types nothing on the page`](#a-keypad-key-types-nothing-on-the-page)
+- [`A digit is refused by the keypad`](#a-digit-is-refused-by-the-keypad)
+- [`The cash keypad's Tender key does nothing`](#the-cash-keypads-tender-key-does-nothing)
+
 **Barcodes**
 
 - [`Code 128 holds ASCII only (0-127)`](#code-128-holds-ascii-only-0-127)
@@ -504,6 +511,10 @@ words in your error.
 - [`<name> must be a number (millimetres) or a length such as "50mm"`](#name-must-be-a-number-millimetres-or-a-length-such-as-50mm)
 - [`Unknown symbology "x": use "code128" or "datamatrix"`](#unknown-symbology-x-use-code128-or-datamatrix)
 
+**Status menu**
+
+- [`[status-menu] the value "…" matches no choice`](#status-menu-the-value--matches-no-choice)
+
 ---
 
 ## Install
@@ -7215,14 +7226,15 @@ expect(within(empty).getByText('No data available')).toBeVisible();
 const status = canvasElement.querySelector<HTMLElement>('[data-slot="data-table-status"]')!;
 expect(status).toHaveTextContent('No data available');
 ```
-### `` [@nxgt/material] DataTable: `virtual` needs `maxHeight`; the rows are not virtualized. ``
+### `` [@nxgt/material] DataTable: `virtual` needs `maxHeight` or `maxHeightClassName`; the rows are not virtualized. ``
 
-**When:** in development, a `DataTable` with `virtual` and no `maxHeight` logs this once, and renders its rows paged, as without `virtual`.
+**When:** in development, a `DataTable` with `virtual` and neither `maxHeight` nor `maxHeightClassName` logs this once, and renders its rows paged, as without `virtual`.
 **Why:** virtual rows scroll inside the table's own box; with no height cap there is no box to scroll, and the page would hold every row.
-**Fix:** give the table a height, in pixels or any CSS length:
+**Fix:** give the table a height, in pixels or any CSS length, or a Tailwind class (no inline `style`, for a strict CSP):
 
 ```tsx
 <DataTable data={people} columns={columns} virtual maxHeight="70vh" />
+<DataTable data={people} columns={columns} virtual maxHeightClassName="max-h-[28rem]" />
 ```
 
 ### `` [@nxgt/material] DataTable: `renderExpandedRow` is ignored while `virtual` is on. ``
@@ -8422,6 +8434,39 @@ threw (offline, a 500). **Try again** calls it again. Pass the `signal` to your
 
 ---
 
+## Keypad
+
+### `The keypad is unstyled`
+
+The keys are plain buttons in a column with no shape.
+
+**Why:** the keypad has no stylesheet of its own; the Calculator's `calculator.css` styles it, and `styles.css` does not import that.
+**Fix:** import it once, after `styles.css`: `@import "@nxgt/material/calculator.css";` (or `import '@nxgt/material/calculator.css'`).
+
+### `A keypad key types nothing on the page`
+
+**When:** you press a digit on the physical keyboard and nothing is entered.
+**Why:** `keyboard` is `'focus'` by default: the keys work when focus is inside the keypad (tap a key or Tab to it first), and never in `false`. A key the keypad does not offer (`+` without `operations`, `.` at `fractionDigits={0}` or in `minor` entry) is left to the page.
+**Fix:** for a screen that is the keypad (a till), set `keyboard="global"`; it still never takes a key typed in a field.
+
+```tsx
+<Keypad keyboard="global" />
+```
+
+### `A digit is refused by the keypad`
+
+Not an error. A digit that would pass `max`, or add a decimal past `fractionDigits` (or the `currency`'s decimals), is ignored; `min` never refuses a digit, it holds the value when the commit key is pressed.
+
+### `The cash keypad's Tender key does nothing`
+
+**When:** `variant="cash"` and the commit key (Tender) or Enter calls nothing.
+**Why:** `onTender` is called only for a valid, non-negative `total` and a non-empty amount. A missing, negative or non-numeric `total` does nothing; `onCommit` is never called in this variant.
+**Fix:** pass `total` as a number or exact decimal text and use `onTender`.
+
+```tsx
+<Keypad variant="cash" total="17.35" onTender={(tendered, settlement) => pay(tendered, settlement)} />
+```
+
 ## Barcodes
 
 ### `Code 128 holds ASCII only (0-127)`
@@ -8475,6 +8520,25 @@ Raised by `@nxgt/material/barcode` while rendering. `symbology` is neither value
 
 ---
 
+## Status menu
+
+### `[status-menu] the value "…" matches no choice`
+
+A development warning from `StatusMenu` and `StatusMenuFormField`. `value` is not among `choices`: an empty string (a form with no initial status) or a status the server sent that the app did not list. The chip then shows an empty value.
+
+Give an initial status, or add the choice.
+
+```tsx
+const form = useForm({ defaultValues: { status: 'open' } });
+
+const statuses: StatusChoice<'open' | 'archived'>[] = [
+  { value: 'open', label: 'Open' },
+  { value: 'archived', label: 'Archived' }, // a status the server can send
+];
+```
+
+---
+
 ## Reporting a bug
 
 If an error comes from inside this package and none of the entries above

package/lib/components/ui/actions/action-card/action-card-tile.css

@@ -133,6 +133,53 @@
 		align-self: start;
 	}
 
+	/* A tile with an action wraps instead of overflowing: a flex line holds the
+	 * icon, the title and the action; the title may shrink to --ac-title-min
+	 * (4.5rem), so an action that does not fit beside it (a StatusMenu chip in
+	 * a narrow tile) drops under the title, where an icon button still fits
+	 * beside it. The status, description, meta and footer are full-width lines.
+	 * No query, no measuring. */
+	.nxgt-action-card[data-size="tile"][data-has-action] {
+		--ac-icon-offset: 0px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		align-content: flex-start;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action][data-icon] {
+		--ac-icon-offset: 44px;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		> .nxgt-action-card-icon {
+		flex: none;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action] .nxgt-action-card-title {
+		order: 1;
+		flex: 1 1 var(--ac-title-min, 4.5rem);
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		> .nxgt-action-card-action {
+		order: 2;
+		flex: none;
+		max-inline-size: 100%;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		> .nxgt-action-card-indicator {
+		order: 3;
+		flex: none;
+		margin-inline-start: auto;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action] .nxgt-action-card-status,
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		.nxgt-action-card-description,
+	.nxgt-action-card[data-size="tile"][data-has-action] .nxgt-action-card-meta,
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		.nxgt-action-card-footer {
+		order: 4;
+		flex: 0 0 calc(100% - var(--ac-icon-offset));
+		margin-inline-start: var(--ac-icon-offset);
+	}
+
 	@media (forced-colors: active) {
 		.nxgt-action-card:has(.nxgt-action-card-button:focus-visible) {
 			outline: 3px solid CanvasText;

package/lib/components/ui/display/chip/chip-soft.css

@@ -1,5 +1,5 @@
 /* Chip `tonal` and `filled`, "soft": no outline at all. A low tonal fill that reads as a
- * chip on any surface; selected = the library's primary tint, a hairline
+ * chip on any surface; selected = the library's primary tint (a toggle chip of a tone: the filled tone, last block), a hairline
  * ring in primary-text and a check (the ≥3:1 cue), the label unchanged. In
  * dark the tint is mixed from --primary-text, the light end of the primary,
  * 56 % at rest and 58 % on hover, and the label is white: in all 14 themes
@@ -91,7 +91,8 @@
  * (--nxgt-tone-text, 4.5:1 or more on it). It reads --nxgt-tint-status, not
  * --nxgt-tint-container: the container of a calm zone (calm.css) fades to
  * the surface through its flags, and a status chip keeps its tint there. Selected
- * keeps the primary tint and the foreground label above. */
+ * keeps the primary tint and the foreground label above, except a toggle chip of a
+ * tone (the last block). */
 @layer components {
 	.nxgt-chip[data-look="soft"]:not([data-tone="neutral"]) {
 		--chip-status-base: var(--nxgt-tone);
@@ -121,3 +122,27 @@
 		color: var(--nxgt-tone-text);
 	}
 }
+
+/* A coloured toggle chip, selected: the filled tone (--nxgt-tone) under the
+ * tone's on-colour (--nxgt-tone-on, 4.5:1 or more, light and dark), the ring
+ * in the on-colour so the edge holds on the page. The check stays the
+ * non-colour cue. A status chip (`active`, not a toggle) keeps the tint. */
+@layer components {
+	.nxgt-chip[data-look="soft"]:not([data-tone="neutral"])[data-selected]:is(
+		[aria-checked="true"],
+		[aria-pressed="true"]
+	) {
+		--chip-on: var(--nxgt-tone);
+		--chip-on-hover: color-mix(
+			in oklab,
+			var(--nxgt-tone-on) 10%,
+			var(--nxgt-tone)
+		);
+		--chip-on-ring: color-mix(
+			in oklab,
+			var(--nxgt-tone-on) 55%,
+			var(--nxgt-tone)
+		);
+		--chip-on-text: var(--nxgt-tone-on);
+	}
+}

package/lib/components/ui/display/code/code-moonlight.css

@@ -4,7 +4,7 @@
 [data-slot="code-block"][data-scheme="dark"] {
 	--code-bg: #222436;
 	--code-fg: #c8d3f5;
-	--code-comment: #7a88cf;
+	--code-comment: #8f9ad6;
 	--code-blue: #82aaff;
 	--code-cyan: #86e1fc;
 	--code-green: #c3e88d;
@@ -19,15 +19,15 @@
 [data-slot="code-block"][data-scheme="light"] {
 	--code-bg: #f5f7ff;
 	--code-fg: #383a51;
-	--code-comment: #7a88cf;
-	--code-blue: #3e68d7;
-	--code-cyan: #0b8ec2;
-	--code-green: #4db380;
-	--code-orange: #c44c22;
-	--code-yellow: #ac8300;
-	--code-red: #c53b40;
-	--code-magenta: #7a5af5;
-	--code-pink: #b04d9a;
+	--code-comment: #4356ba;
+	--code-blue: #2a56ca;
+	--code-cyan: #08658a;
+	--code-green: #2d6a4c;
+	--code-orange: #a33f1c;
+	--code-yellow: #765a00;
+	--code-red: #ac3337;
+	--code-magenta: #5d36f3;
+	--code-pink: #924080;
 	--code-selection: #d4daf0;
 }
 

package/lib/components/ui/primitives/collapsible/collapsible.css

@@ -73,6 +73,15 @@
 	.nxgt-collapsible-trigger[data-variant="tonal"][data-state="open"] {
 		border-radius: 0.75rem;
 	}
+	/* `flush` (text only): label at the left edge, the parent's font, so the
+	 * trigger can sit in a heading. */
+	.nxgt-collapsible-trigger[data-variant="text"][data-flush] {
+		min-height: 1.5rem;
+		padding: 0.25rem 0.25rem 0.25rem 0;
+		border-radius: 0.5rem;
+		font: inherit;
+		letter-spacing: inherit;
+	}
 	.nxgt-collapsible-trigger:hover:not(:disabled) {
 		background-color: color-mix(in oklab, var(--ct-fg) 8%, var(--ct-bg));
 	}

package/lib/components/ui/widgets/calculator/calculator-keys.css

@@ -32,6 +32,9 @@
 .nxgt-calc-key[data-span="3"] {
 	grid-column: span 3;
 }
+.nxgt-calc-key[data-span="9"] {
+	grid-column: span 9;
+}
 .nxgt-calc-key[data-span="6"] {
 	grid-column: span 6;
 }