@nxgt/material 3.80.0 → 3.81.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @nxgt/material
 
+## 3.81.0
+
+### Minor Changes
+
+- [#2428](https://github.com/softistx/nxgt-material/pull/2428) [`01db466`](https://github.com/softistx/nxgt-material/commit/01db466820ad19e33444a07bc5bff474168f7130) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ChoiceCardGroup` balances its rows: four cards in room for three now draw 2+2 instead of 3+1 (and five in room for four draw 3+2). The column count follows the group's own width through container-query classes, so the server and the client print the same markup, and four fit in one row when the space allows. The new `balance` prop (default `true`) turns it off (`balance={false}`) to keep the previous fill-every-column layout. A balanced group's root is an `@container`, so in a shrink-to-fit parent (an inline-flex box) give the parent a width or pass `balance={false}`, which adds no container. Fixes [#2423](https://github.com/softistx/nxgt-material/issues/2423).
+
+- [#2439](https://github.com/softistx/nxgt-material/pull/2439) [`77dc449`](https://github.com/softistx/nxgt-material/commit/77dc449ca58c3354274756d7790ba5dd3ae84a3f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DayGroupedList` takes a `headingLevel` prop (`2` to `6`, default `3`, so nothing changes for existing lists) to set the level of each bucket's heading and keep the page's outline right. Fixes [#2438](https://github.com/softistx/nxgt-material/issues/2438).
+
+- [#2454](https://github.com/softistx/nxgt-material/pull/2454) [`fd09402`](https://github.com/softistx/nxgt-material/commit/fd09402fce1e7c7b4fcbf3c682172ccfa9842483) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EventCalendar` has a template-week mode, `mode="template"`, for a recurring week such as a school timetable. The columns are named by weekday only, and there is no date navigation, Today button, today marker or now line. Events, slots and changes are keyed by ISO weekday (1 to 7) and `HH:mm` times (`EventCalendarTemplateEvent`, `EventCalendarTemplateSlot`, `EventCalendarTemplateChange`) instead of dates. Create, move, resize and the keyboard keep working. The optional `lanes` prop (`[{ id: 'A', label: 'Week A' }, …]`, with `lane`, `defaultLane` and `onLaneChange`) adds a switch to edit two alternating weeks in the same view: an event with a `lane` belongs to that week, one with none to every week. The dated props are unchanged, but `ComponentProps<typeof EventCalendar>` is now the union of the dated and template props: type a wrapper or a handler with `EventCalendarProps` (dated) or `EventCalendarTemplateProps`. Fixes [#2371](https://github.com/softistx/nxgt-material/issues/2371).
+
+- [#2427](https://github.com/softistx/nxgt-material/pull/2427) [`12a87b4`](https://github.com/softistx/nxgt-material/commit/12a87b4001d0c5a2dcd1b3249f04bd1cfc56a26b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material/hooks` exports `useSsrMediaQuery(query, serverValue)`, the hydration-safe media-query hook the library's own components use. Use it for a breakpoint `useIsMobile` (768px) does not cover, such as `(min-width: 80rem)`: the server and the hydrating client render `serverValue` (pass the desktop answer) and the client switches right after hydrating; a client-only render reads the real answer at once.
+
+- [#2455](https://github.com/softistx/nxgt-material/pull/2455) [`2346f87`](https://github.com/softistx/nxgt-material/commit/2346f8762edcfc01b2fa97e0c7dcd3d222695423) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A form grid can sit flush in a container that already pads it: add `data-padding="none"` to the `.form-grid-layout` element and its fields and actions lose their padding (the fields on all sides, the actions left and right), so they line up with the page's, card's or sheet's content edge instead of being double-padded. The default is unchanged. Fixes [#2452](https://github.com/softistx/nxgt-material/issues/2452).
+
+- [#2419](https://github.com/softistx/nxgt-material/pull/2419) [`397062b`](https://github.com/softistx/nxgt-material/commit/397062be38a5e82a649f2e7f4deed358dc6d884e) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `SortableList` and `SortableListFormField` pass axe: a row holds its own buttons (grip, move, remove), so the rows are `role="listitem"` of a `role="list"` instead of `option`s of a `listbox` (axe `nested-interactive`). Tab reaches the list on one row (a roving tab stop), the arrow keys move the focus from row to row and Space, Enter, Delete and Ctrl/⌘ + arrows keep their meaning when a row has the focus; a key pressed on a row's own button is no longer the list's. The grip's name carries the item (`Drag: Ada Lovelace`), and a truncated row title or subtitle (`ListPane` rows too) keeps its full text in a `title`. The component's props and emitted value are unchanged. For tests and queries: use `getByRole('list', { name })` and `getAllByRole('listitem')` in place of `listbox` and `option`; `aria-selected`, `aria-activedescendant` and `aria-required` are gone (`aria-disabled` stays on the rows of a disabled list or item, and a disabled list has no tab stop), so `required` only draws the asterisk. Fixes [#2416](https://github.com/softistx/nxgt-material/issues/2416).
+
+- [#2471](https://github.com/softistx/nxgt-material/pull/2471) [`55555ad`](https://github.com/softistx/nxgt-material/commit/55555ad70ba3ac23717db1e48f37353efe967ec8) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `TubeCap` (`@nxgt/material/components`, Data display): a chip for a specimen tube. The cap colour follows the international tube convention (`kind`: `edta` lavender, `heparin` green, `citrate` light blue, `esr` black, `serum` red, `gel` gold, `fluoride` grey, `trace` royal blue, `other` plain), fixed and identical in light and dark and in every theme. The container's name (`label`, required) is written beside the cap, so colour never carries the meaning alone. Optional `volume`, `accession`, `action` and `size`. Fixes [#2467](https://github.com/softistx/nxgt-material/issues/2467).
+
+### Patch Changes
+
+- [#2465](https://github.com/softistx/nxgt-material/pull/2465) [`8e0853d`](https://github.com/softistx/nxgt-material/commit/8e0853d6bef57b72691d39b95f773778ac0028c7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - In dark mode a tonal Button label now reaches 4.5:1 on a Card, a popover and the muted and accent surfaces, not only on the page and the ground, in every preset (teal success and secondary were 4.24 on a card, secondary 3.75 on muted). The dark secondary, info and success tonal labels are mixed toward white (80 %, 85 % and 70 % of the token). The dark success focus ring is a little lighter too. Nothing to adapt. Fixes [#2459](https://github.com/softistx/nxgt-material/issues/2459).
+
+- [#2441](https://github.com/softistx/nxgt-material/pull/2441) [`9c2453f`](https://github.com/softistx/nxgt-material/commit/9c2453fd280520e609be48ab5fdb5cc576d10bfe) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A field never exceeds its container: the 280px minimum width of `Textarea`, `InputGroupTextarea`, the labelled `Checkbox`, `ImageField`, `UploadField` and `NetworkUploadField` is now `min(280px, 100%)`. In a wide container the floor is the same; in a container narrower than 280px (a phone card, a narrow drawer or column) the field shrinks to fit instead of overflowing it. Fixes [#2210](https://github.com/softistx/nxgt-material/issues/2210).
+
+- [#2443](https://github.com/softistx/nxgt-material/pull/2443) [`5b14c8f`](https://github.com/softistx/nxgt-material/commit/5b14c8fe3f43bdf56abdbf2913e2a3a236ef5c5a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `SheetFooter` now stacks its buttons in the same order as `DialogFooter` on a phone: write the secondary action first and the main one last, and the main one is on top (the footer is a reversed column). Before, a sheet showed them in source order, the opposite of a dialog. A sheet footer written main-first (`Apply`, `Reset`) now shows `Reset` on top: swap the two children, or add `flex-col` to its `className`. The order is stated in the Dialog and Sheet docs. Fixes [#2394](https://github.com/softistx/nxgt-material/issues/2394).
+
+- [#2449](https://github.com/softistx/nxgt-material/pull/2449) [`8feff2a`](https://github.com/softistx/nxgt-material/commit/8feff2a393ca4d2f267d6720b2c6badb7488e67f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Gallery` now honours the props you pass to it: an `aria-label` or `aria-labelledby` names the gallery (two galleries on a page can be told apart by screen-reader users), and `id`, `data-*` and other div props reach its root element. Without a name, the default "Gallery" label stays; a given `aria-labelledby` replaces it. `MiniGallery` and `LightboxGallery` accept the same two name props. Fixes [#2447](https://github.com/softistx/nxgt-material/issues/2447).
+
+- [#2434](https://github.com/softistx/nxgt-material/pull/2434) [`a7173d5`](https://github.com/softistx/nxgt-material/commit/a7173d516a3fe051ddf668f02254a8828adc3435) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ListTile` `actions` no longer stretch the row: they are centred on it, so a tile with actions has the height and the title-to-subtitle rhythm of one without. Fixes [#2392](https://github.com/softistx/nxgt-material/issues/2392).
+
+- [#2424](https://github.com/softistx/nxgt-material/pull/2424) [`92d5a03`](https://github.com/softistx/nxgt-material/commit/92d5a03d292834e95ffa6f63ed4aaefd60474b9b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - RepeatableGroup and RepeatableGroupFormField take `removeAtMin="hide"`: at `min` rows the Remove button is not rendered instead of shown disabled (default `'disable'`, unchanged). Nothing to adapt. Fixes [#2389](https://github.com/softistx/nxgt-material/issues/2389).
+
+- [#2425](https://github.com/softistx/nxgt-material/pull/2425) [`fe38112`](https://github.com/softistx/nxgt-material/commit/fe38112ee2371789ba4ee11e660aeb78c41d2775) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The roadmap lists the layouts effort as shipped in 3.80.0.
+
+- [#2433](https://github.com/softistx/nxgt-material/pull/2433) [`4300c78`](https://github.com/softistx/nxgt-material/commit/4300c781b06112e0d11f89aa6ffd589f93b33def) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New recipe `Guides/Recipes/Search dialog and results page`: a command dialog (Ctrl/Cmd+K and a header button) with debounced suggestions grouped by type, and a results page with type chips, a filter that appears only where it applies and highlighted result cards, with its code in the `nxgt-material` plugin's `screen-recipes` skill (2.7.0).
+
+- [#2429](https://github.com/softistx/nxgt-material/pull/2429) [`fc72811`](https://github.com/softistx/nxgt-material/commit/fc7281170ce58ca57c1065a8b65d3f51a4280526) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ServerTable`'s `error` takes an `illustration` (a scene id, a node, `true` or `false`), as `empty.none` and `empty.noMatch` do, replacing the scene its `kind` picks. Fixes [#2388](https://github.com/softistx/nxgt-material/issues/2388).
+
+- [#2435](https://github.com/softistx/nxgt-material/pull/2435) [`b1c0445`](https://github.com/softistx/nxgt-material/commit/b1c0445d3a0cc43058c19864578b9db6ee197203) Thanks [@SteveGT96](https://github.com/SteveGT96)! - ServerTable (and DataTable) tiles: the selection checkbox sits on the tile's title row instead of the tile's vertical middle, and the tile's content starts at the top, so a multi-line tile no longer puts the box level with its body text. `item.Row` record rows keep the box centred. The phone select-all checkbox keeps an accessible name in every state. Nothing to adapt. Fixes [#2391](https://github.com/softistx/nxgt-material/issues/2391).
+
+- [#2436](https://github.com/softistx/nxgt-material/pull/2436) [`30ee430`](https://github.com/softistx/nxgt-material/commit/30ee430749af42cf1056b5fb106d7812f8d41a5c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `StickyActionBar` no longer adds its own 1rem of horizontal padding: its leading and trailing edges are those of the column it sits in, so its buttons line up with the cards and fields above instead of ending 16px short (sticky or inline). Below `md` it still pads clear of the left and right safe areas. Fixes [#2393](https://github.com/softistx/nxgt-material/issues/2393).
+
+- [#2431](https://github.com/softistx/nxgt-material/pull/2431) [`ec1da47`](https://github.com/softistx/nxgt-material/commit/ec1da478f72e8987a8e13192e7752d54f5ba20ea) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A tonal Button label now reaches 4.5:1 straight on the tinted page (`--ground`), not only on a card or a striped row, in every preset and in both themes. The light `--primary-text` share is solved against the ground too (teal 92 %, corail 88 %, pink 92 %, menthe 95 %), the secondary, info and success tonal labels are mixed 10 % toward black in light, and the error one 20 %. A new contrast pair `primary-text / primary@ground15` guards it. Nothing to adapt: regenerate a theme file to take the new shares. Fixes [#2398](https://github.com/softistx/nxgt-material/issues/2398).
+- Updated dependencies [[`ec1da47`](https://github.com/softistx/nxgt-material/commit/ec1da478f72e8987a8e13192e7752d54f5ba20ea)]:
+  - @nxgt/material-core@0.49.2
+
 ## 3.80.0
 
 ### Minor Changes

package/README.md

@@ -714,6 +714,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-metric-cards.webp" width="120" alt="TrendCard"> | [`TrendCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#metric-cards), `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard`, `Sparkline` | Dashboard tiles including compare, heat, funnel, gauge, spark bars, delta list, range band, latency, ratio, threshold, pace and labelled histogram. Container queries. A `tone` (named, or your app's) draws the accent in it; deltas and breaches stay semantic. | `TrendCard`, `GoalCard`, `BreakdownCard`, `RankCard`, `CompareCard`, `HeatweekCard`, `FunnelCard`, `GaugeCard`, `SparkbarCard`, `DeltaListCard`, `BandCard`, `LatencyCard`, `RatioCard`, `ThresholdCard`, `PaceCard`, `HistogramCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-card-presets.webp" width="120" alt="FeatureCard"> | [`FeatureCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#card-presets), `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` | Card presets including overlay, ticket, inbox, event, stack, link, album, tags, receipt, review, offer, place, file, status, score, shortcuts and checklist. Container queries. | `FeatureCard`, `MediaCard`, `PricingCard`, `ProfileCard`, `QuoteCard`, `OverlayCard`, `SpotlightCard`, `CrewCard`, `SplitCard`, `TicketCard`, `NoticeCard`, `TimelineCard`, `MessageCard`, `EventCard`, `StackCard`, `LinkCard`, `AlbumCard`, `TagCard`, `ReceiptCard`, `ReviewCard`, `OfferCard`, `PlaceCard`, `FileCard`, `StatusCard`, `ScoreCard`, `ShortcutCard`, `ChecklistCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-statusindicator.webp" width="120" alt="StatusIndicator"> | [`StatusIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#statusindicator) | Coloured status dot with an optional pulse and label. | `StatusIndicator` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-tubecap.webp" width="120" alt="TubeCap"> | [`TubeCap`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#tubecap) | A specimen tube's chip: a cap in its fixed convention colour, the container's name beside it, optional volume, accession and action | (later, #2470) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-summarydata.webp" width="120" alt="SummaryData"> | [`SummaryData`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#summarydata) | Label / value pairs as a grid or inline; hides empty values. | `SummaryData` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-description.webp" width="120" alt="Description"> | [`Description`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#description) | Read-only label / value pair that renders nothing when empty. | `Description` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-descriptionlist.webp" width="120" alt="DescriptionList"> | [`DescriptionList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#descriptionlist), `DescriptionList.Group` | Dense auto-fill grid of `Description`s in a `dl` (`minItem`, `maxColumns`, `meta`, `span`, `labelPosition`, `lines`), or tonal panels per group with `variant="panels"`. | — (later, [#1614](https://github.com/softistx/nxgt-material/issues/1614)) |
@@ -870,7 +871,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-chat-overview.webp" width="120" alt="ChatInbox"> | [`ChatInbox`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#chat-kit), `ChatThread`, `ChatMessageList`, `ChatMessage`, `ChatComposer`, `ChatThreadHeader`, `ChatWidget`, `ChatConversationItem`, `ChatActionProposal`, `ChatToolActivity`… | Chat kit: inbox (list + thread, container queries from `@md`), bubbles grouped by sender or flat rows, read receipts, replies, reactions and a message toolbar, a pill composer with quick replies, attachments and stop, a floating chat widget, an approval card for an assistant's proposed action and a compact tool-step row; 320 px to desktop, light and dark. | `ChatInbox`, `ChatThread`, `ChatMessageList`, `ChatMessage`, `ChatComposer` (same parts; `ChatActionProposal` and `ChatToolActivity` not yet, [#2145](https://github.com/softistx/nxgt-material/issues/2145)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-kanban.webp" width="120" alt="Kanban"> | [`Kanban`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#kanban) | Board with columns, swimlanes, WIP limits, search, and drag-and-drop cards and columns. | `Kanban` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-eventcalendar.webp" width="120" alt="EventCalendar"> | [`EventCalendar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#eventcalendar) | Month / week / day / agenda calendar with drag, resize and slot creation, a day view split by resource, a named time zone, a now line, a mini-month side panel and a phone layout. | `EventCalendar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-eventcalendar.webp" width="120" alt="EventCalendar"> | [`EventCalendar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#eventcalendar) | Month / week / day / agenda calendar with drag, resize and slot creation, a day view split by resource, a named time zone, a recurring template week (`mode="template"`), a now line, a mini-month side panel and a phone layout. | `EventCalendar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-native-charts-linechart.webp" width="120" alt="LineChart"> | [`LineChart`, `AreaChart`, `BarChart`, `PieChart`, `DonutChart`, `Gauge`, `RadialBarChart`, `FunnelChart`, `HeatmapChart`, `RadarChart`, `ScatterChart`, `ComboChart`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#charts) from `@nxgt/material/charts` | Native SVG charts with keyboard point navigation, a screen-reader summary, a "View data" table, `patterns`, a hide/isolate legend, zoom and phone scroll (client-only entry; [guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)). | [not yet](https://github.com/softistx/nxgt-material/issues/1255) (#1255) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-emojipicker.webp" width="120" alt="EmojiPicker"> | [`EmojiPicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#emojipicker), `EmojiList` | Shared picker. `ChatComposer` takes `emojis`; `Markdown` expands `:shortcode:`; the RTE toolbar uses the same picker. | `EmojiPicker`, `EmojiList` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-mentionlist.webp" width="120" alt="MentionList"> | [`MentionList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#mentionlist) | `@` mention list from an `items` prop (local search). ChatComposer and the RTE suggestion list use it. | `MentionList` |
@@ -931,7 +932,7 @@ which is private: adding it needs a GitHub account with access to it.
 | --- | --- |
 | skill `use-nxgt-material` | an index that picks the component by need and wires imports and `styles.css`; its references cover the tokens and themes, forms, i18n, tests by role, SSR and the other subpaths, read from these docs in `node_modules/@nxgt/material/docs/` |
 | skill `design-screens` | the library's visual language for a screen (hierarchy, rhythm, tones, surfaces, states, phone, dark, motion) and a 12-criteria grid to score a screen out of 5 |
-| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings, a dense record page, a status board and an occupancy board), each the code of a tested `Guides/Recipes/<Name>` story |
+| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings, a dense record page, a status board, an occupancy board, a landing page and a search dialog with its results page), each the code of a tested `Guides/Recipes/<Name>` story |
 | agent `screen-builder` | builds a page or a form from the catalogue, with tests by role and name and an accessibility check, then looks at 360 and 1440 px screenshots in light and dark and fixes until the grid reads 4 everywhere |
 | agent `design-reviewer` | read-only: scores a screen's screenshots on the same 12 criteria and returns the fixes ranked, each with the component and prop |
 | skill `build-a-theme` + agent `theme-builder` | the app's own theme with `defineTheme`: seeds, tones, background and icon motif, generation, provider and picker; checks the AA contrast of the generated tokens in light and dark and looks at key screens |

package/dist/{alert-dialog-DgHtXZuB.js → alert-dialog-DOZ0SfQs.js}

@@ -4,7 +4,7 @@ import { o as n } from "./dist-DVRQkaTK.js";
 import { r } from "./dist-DWZXlCZR.js";
 import { a as i } from "./dist-DHdUUM1w.js";
 import { t as a } from "./in-dialog-D61Yeaol.js";
-import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-BS1JLcnq.js";
+import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-C_Qz_yTk.js";
 import { i as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";

package/dist/{async-slice-YBQsGtQT.js → async-slice-BfVokA46.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-DTlOlIoq.js";
+import { l as e, r as t, s as n, u as r } from "./translator-CcEgQ-H7.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{button-_vm-xSBU.js → button-CSKUtMI3.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { n as r, t as i } from "./spinner-RITOxvpH.js";
+import { n as r, t as i } from "./spinner-DH1mm8hH.js";
 import { t as a } from "./dist-DkQbkF9T.js";
-import { a as o, i as s, n as c, o as l, s as u, t as d } from "./use-click-lock-BZYtTmVt.js";
+import { a as o, i as s, n as c, o as l, s as u, t as d } from "./use-click-lock-Bwg_caHO.js";
 import { t as f } from "./is-production-GLw59WU8.js";
 import { t as p } from "./button-group-context-CaP0X5p_.js";
 import { t as m } from "./has-text-content-Ds2dkHX_.js";

package/dist/{calculator-CTd_S23A.js → calculator-Cv00UQgR.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t, r as n, t as r, u as i } from "./tabs-DSo4eCUn.js";
-import { t as a } from "./button-_vm-xSBU.js";
-import { t as o } from "./use-material-translation-BJucC_xe.js";
-import { t as s } from "./icon-button-BamxMwZs.js";
+import { n as t, r as n, t as r, u as i } from "./tabs-Um0SFyf1.js";
+import { t as a } from "./button-CSKUtMI3.js";
+import { t as o } from "./use-material-translation-DYrfV_JJ.js";
+import { t as s } from "./icon-button-4PKlaI1g.js";
 import { t as c } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as l } from "./useEvent-2fKq-6w8.js";
 import { t as u } from "./useLatest-C2PnQEeD.js";
@@ -11,7 +11,7 @@ import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { n as m, t as h } from "./calculator-context-BugcKuVG.js";
 import { a as g, c as _, i as v, l as y, n as b, o as ee, r as te, s as ne } from "./calculator-announce-DRd2c6Dq.js";
-import { i as re, t as ie } from "./pos-types-CXnEdjdy.js";
+import { i as re, t as ie } from "./pos-types-BFrapNmx.js";
 import { a as ae, r as oe } from "./key-layout-cR79xfGE.js";
 import { n as x, r as se, t as ce } from "./programmer-word-CNCF7DJF.js";
 import { t as le } from "./standard-layout-BuSRr3TY.js";
@@ -279,11 +279,11 @@ function Le({ helpId: e }) {
 //#endregion
 //#region lib/components/ui/widgets/calculator/variants/variant-loader.ts
 var Re = {
-	scientific: () => import("./scientific-variant-B9ScTgfx.js"),
-	pos: () => import("./pos-variant-DMwn_7is.js"),
-	programmer: () => import("./programmer-variant-Bo4eiDFi.js"),
-	financial: () => import("./financial-variant-BdyfYhnp.js"),
-	conversion: () => import("./conversion-variant-CqrPwPjC.js")
+	scientific: () => import("./scientific-variant-CjErQxuZ.js"),
+	pos: () => import("./pos-variant-CctfqieO.js"),
+	programmer: () => import("./programmer-variant-Dd0YOixn.js"),
+	financial: () => import("./financial-variant-igpGRbGw.js"),
+	conversion: () => import("./conversion-variant-wZd-G6xR.js")
 }, B = "failed", V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Set(), W = () => {
 	for (let e of U) e();
 };

package/dist/calculator-field.js

@@ -1,11 +1,11 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./button-_vm-xSBU.js";
-import { t as n } from "./use-material-translation-BJucC_xe.js";
-import { t as r } from "./icon-button-BamxMwZs.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-BUCFMoAZ.js";
-import { r as l, t as u } from "./currency-field-CMFvctye.js";
+import { t } from "./button-CSKUtMI3.js";
+import { t as n } from "./use-material-translation-DYrfV_JJ.js";
+import { t as r } from "./icon-button-4PKlaI1g.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-CiTycWgV.js";
+import { r as l, t as u } from "./currency-field-DizBTAat.js";
 import { r as d, t as f } from "./field-blur-DkiZOVNV.js";
-import { t as p } from "./calculator-CTd_S23A.js";
+import { t as p } from "./calculator-Cv00UQgR.js";
 import { useId as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { Calculator as y } from "lucide-react";

package/dist/{calculator-segment-OI1BT3bA.js → calculator-segment-CwnC2cV_.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-BJucC_xe.js";
+import { t as e } from "./use-material-translation-DYrfV_JJ.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region lib/components/ui/widgets/calculator/partials/calculator-segment.tsx
 function n({ label: n, choices: r, value: i, nameKey: a, onChange: o }) {

package/dist/calculator.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./calculator-CTd_S23A.js";
+import { n as e, t } from "./calculator-Cv00UQgR.js";
 export { e as CALCULATOR_VARIANTS, t as Calculator };

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./warn-once-C_e47JM8.js";
-import { t as r } from "./button-_vm-xSBU.js";
-import { t as i } from "./use-material-translation-BJucC_xe.js";
+import { t as r } from "./button-CSKUtMI3.js";
+import { t as i } from "./use-material-translation-DYrfV_JJ.js";
 import { t as a } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as o, n as s, r as c, t as l } from "./util-4heV2LPI.js";
 import { t as u } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { t as d } from "./chip-DumcVzUO.js";
+import { t as d } from "./chip-BGn0V6Pt.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-DumcVzUO.js → chip-BGn0V6Pt.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-RITOxvpH.js";
-import { s as n } from "./use-click-lock-BZYtTmVt.js";
-import { t as r } from "./use-material-translation-BJucC_xe.js";
+import { n as t } from "./spinner-DH1mm8hH.js";
+import { s as n } from "./use-click-lock-Bwg_caHO.js";
+import { t as r } from "./use-material-translation-DYrfV_JJ.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { cloneElement as a, isValidElement as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/{code-editor-CiwgfSOK.js → code-editor-B25-mWhb.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./dist-DWZXlCZR.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-CPOgcajv.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-C6rcYGB9.js";
 import { a as c, i as l, n as u } from "./field-blur-context-BLGgf_3z.js";
-import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-Bt5RK-Nx.js";
+import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-BoEY5bkt.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-BJucC_xe.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-Dip0xnmc.js";
+import { t as _ } from "./use-material-translation-DYrfV_JJ.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-oRjtO3qV.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-DpaP0lm1.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,13 +1,13 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DWZXlCZR.js";
-import { o as n, r, s as i, t as a } from "./toolbar-items-Bt5RK-Nx.js";
-import { t as o } from "./use-material-translation-BJucC_xe.js";
-import { i as s, n as c, o as l } from "./code-language-items-Dip0xnmc.js";
+import { o as n, r, s as i, t as a } from "./toolbar-items-BoEY5bkt.js";
+import { t as o } from "./use-material-translation-DYrfV_JJ.js";
+import { i as s, n as c, o as l } from "./code-language-items-oRjtO3qV.js";
 import { t as u } from "./skeleton-DSdtr2qc.js";
 import { t as d } from "./live-status-BGPaN8r8.js";
 import { t as f } from "./use-mobile-BDro060N.js";
 import { t as p } from "./react-node-text-Crkpfpco.js";
-import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-CiwgfSOK.js";
+import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-B25-mWhb.js";
 import { r as D, t as O } from "./field-blur-DkiZOVNV.js";
 import { useEffect as k, useRef as A, useState as j } from "react";
 import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";

package/dist/{code-language-items-Dip0xnmc.js → code-language-items-oRjtO3qV.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-CPOgcajv.js";
-import { t as n } from "./use-material-translation-BJucC_xe.js";
+import { d as e, f as t } from "./dropdown-menu-C6rcYGB9.js";
+import { t as n } from "./use-material-translation-DYrfV_JJ.js";
 import { t as r } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as i } from "./live-status-BGPaN8r8.js";
 import { useEffect as a, useRef as o, useState as s } from "react";

package/dist/components/base-content.css

@@ -162,6 +162,17 @@
 		[data-slot="form-actions"] {
 			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/80 border-t-8 border-transparent px-4 pb-[max(1rem,env(safe-area-inset-bottom))] backdrop-blur-sm max-sm:*:flex-1;
 		}
+		/* `data-padding="none"`: the form sits flush in a container that
+		   already pads it (a page, a card, a sheet): no inset on the fields or
+		   the actions, so both align with the container's content edge. */
+		&[data-padding="none"] {
+			[data-slot="form-fields"] {
+				@apply p-0;
+			}
+			[data-slot="form-actions"] {
+				@apply px-0;
+			}
+		}
 	}
 
 	/* No height cap and no scroll of its own: the page (or the overlay) is

package/dist/components/components.css

@@ -144,6 +144,8 @@
 @import "./ui/display/seat-ring/seat-ring-ring.css";
 /* VoteTally: ranked bars with counts, shares and voters. */
 @import "./ui/display/vote-tally/vote-tally.css";
+/* TubeCap: a specimen tube chip, cap colours fixed by the tube convention. */
+@import "./ui/display/tube-cap/tube-cap.css";
 /* SecretCard: a face that is not rendered until it is revealed. */
 @import "./ui/display/secret-card/secret-card.css";
 /* Alert and Banner span the row in the form grids (#1497). */

package/dist/components/ui/collections/data-table/data-table-items-tiles.css

@@ -65,8 +65,34 @@
 		) {
 		outline-offset: -2px;
 	}
-	/* The checkbox is centred on the tile, not pinned to its corner. */
+	/* The checkbox sits on the tile's title row (#2391): its centre on the
+	 * title's first line (1rem at 1.4, so 0.7rem under the tile's padding), not
+	 * the tile's middle, which a multi-line tile moves down to the body text.
+	 * The 36px box (44px on a coarse pointer) then starts at the padding minus
+	 * the half-box plus the half-line. The tile's content starts at the top so
+	 * the title is where the box expects it. */
+	[data-slot="data-table-tiles"]
+	> [data-slot="data-table-item"]:not(:has([data-slot="data-table-record"])) {
+		align-content: start;
+	}
 	[data-slot="data-table-tiles"] [data-slot="data-table-item-select"] {
+		inset-block-start: 0.325rem;
+	}
+	[data-slot="data-table-tiles"][data-density="compact"]
+		[data-slot="data-table-item-select"] {
+		inset-block-start: 0.075rem;
+	}
+	@media (pointer: coarse) {
+		[data-slot="data-table-tiles"] [data-slot="data-table-item-select"],
+		[data-slot="data-table-tiles"][data-density="compact"]
+			[data-slot="data-table-item-select"] {
+			inset-block-start: 0.075rem;
+		}
+	}
+	/* A record row is one dense line: its box stays centred on it. */
+	[data-slot="data-table-tiles"]
+		> [data-slot="data-table-item"]:has([data-slot="data-table-record"])
+		[data-slot="data-table-item-select"] {
 		inset-block-start: 50%;
 		translate: 0 -50%;
 	}

package/dist/components/ui/display/tube-cap/tube-cap.css

@@ -0,0 +1,87 @@
+/* TubeCap: a specimen tube's chip. The cap colours are the international tube
+ * convention, so they are fixed values, not theme tokens: the same in light
+ * and dark and in every theme. The swatch carries no text; the name beside it
+ * keeps the theme's foreground (AA by the theme), and a hairline in the
+ * foreground colour keeps a black or pale cap visible on either scheme. */
+@layer components {
+	.nxgt-tube-cap {
+		--tube-cap: oklch(0.92 0 0);
+		--tube-cap-size: 1.75rem;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		max-inline-size: 100%;
+		min-inline-size: 0;
+		padding: 0.25rem 0.625rem 0.25rem 0.25rem;
+		border: 1px solid var(--border);
+		border-radius: 9999px;
+		background: var(--card, var(--background));
+		color: var(--foreground);
+		font-size: 0.875rem;
+		line-height: 1.25;
+	}
+	.nxgt-tube-cap[data-size="sm"] {
+		--tube-cap-size: 1.25rem;
+		font-size: 0.8125rem;
+	}
+	.nxgt-tube-cap[data-size="lg"] {
+		--tube-cap-size: 2.5rem;
+		font-size: 1rem;
+	}
+	.nxgt-tube-cap[data-kind="edta"] {
+		--tube-cap: oklch(0.62 0.13 300);
+	}
+	.nxgt-tube-cap[data-kind="heparin"] {
+		--tube-cap: oklch(0.62 0.17 145);
+	}
+	.nxgt-tube-cap[data-kind="citrate"] {
+		--tube-cap: oklch(0.8 0.1 230);
+	}
+	.nxgt-tube-cap[data-kind="esr"] {
+		--tube-cap: oklch(0.22 0 0);
+	}
+	.nxgt-tube-cap[data-kind="serum"] {
+		--tube-cap: oklch(0.55 0.21 27);
+	}
+	.nxgt-tube-cap[data-kind="gel"] {
+		--tube-cap: oklch(0.82 0.15 85);
+	}
+	.nxgt-tube-cap[data-kind="fluoride"] {
+		--tube-cap: oklch(0.68 0.01 260);
+	}
+	.nxgt-tube-cap[data-kind="trace"] {
+		--tube-cap: oklch(0.45 0.18 262);
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-swatch"] {
+		flex: none;
+		box-sizing: border-box;
+		inline-size: var(--tube-cap-size);
+		block-size: var(--tube-cap-size);
+		border-radius: 9999px;
+		background: var(--tube-cap);
+		box-shadow: 0 0 0 1px
+			color-mix(in oklab, var(--foreground) 45%, transparent);
+		forced-color-adjust: none;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-text"] {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		column-gap: 0.5rem;
+		min-inline-size: 0;
+		overflow-wrap: anywhere;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-label"] {
+		font-weight: 600;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-volume"],
+	.nxgt-tube-cap [data-slot="tube-cap-accession"] {
+		color: var(--muted-foreground);
+		font-variant-numeric: tabular-nums;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-action"] {
+		display: inline-flex;
+		flex: none;
+		margin-inline-start: 0.125rem;
+	}
+}