@nxgt/material 3.105.0 → 3.107.0

package/docs/components/buttons-and-actions.md

@@ -1370,14 +1370,21 @@ import { Badge, ProductTile, ResponsiveGrid } from '@nxgt/material/components';
 | `status` | `ReactNode` | none | The stock state, on its own line under the price (a `Badge`) |
 | `image` | `string` | none | The photo's URL (a square one fits best), in a tinted 4:3 well, lazy loaded, with an empty `alt` (the title names the tile). If it fails to load, the toned `icon` shape takes its place |
 | `imageFit` | `'contain' \| 'cover'` | `contain` | `contain` for a cut-out PNG or a packshot on white, `cover` for a full-bleed photo |
-| `icon`, `tone`, `shape` | `IconName`, `Tone`, `ShapeName` | `primary`, `squircle` | Without an `image` (or when it fails), a toned shape with this icon, in the same 4:3 well, so tiles with and without a photo share one height |
+| `icon`, `tone`, `shape` | `IconName`, `Tone`, `ShapeName` | `primary`, `squircle` | Without an `image` (or when it fails), a toned shape with this icon, in the same 4:3 well (3:2 with `size="sm"`), so tiles with and without a photo share one height |
 | `media` | `ReactNode` | none | Your own media in place of the box; replaces `image` and `icon` |
+| `size` | `'md' \| 'sm'` | `md` | `sm` is the compact tile for a dense grid (`minItem` near 7.5 to 9rem, 6 to 7 columns on a desktop, 2 at 360 px): a 3:2 media box instead of 4:3, `p-1.5` instead of `p-2`, smaller name and price type, a smaller icon shape. It keeps the 44 px target and the accessible name |
 | `selected` | `boolean` | `false` | `aria-pressed`, a tint and a bar at the start (the item is in the basket) |
 | `disabled` | `boolean` | `false` | Dimmed and not tappable; its text, status included, is still read |
 | `asChild` | `boolean` | `false` | Render inside the one child (a router `Link`): `<ProductTile asChild title="…"><Link to="…" /></ProductTile>`. `selected` is then `aria-current`, `disabled` is `aria-disabled`, `tabIndex={-1}` and a cancelled click, so a link leaves the Tab order and Enter does not follow it; `onClick` is not called |
 
 The tile is one `button` named by its text: `getByRole('button', { name: /Orange juice.*1,500/ })`. It is a hairline card, at least 44 px high under a coarse pointer, and fills its grid cell (`h-full`): the name takes two lines and the status line is always reserved, so tiles of a row share one height. `minItem="9rem"` gives two columns at 360 px. It has a pressed state, a focus ring and a dark mode. It takes the `button`'s props, so `className` adds to it.
 
+```tsx
+<ResponsiveGrid minItem="7.5rem" gap="sm">
+	<ProductTile size="sm" title="Orange juice 1 L" price="1,500" icon="bottle-water" />
+</ResponsiveGrid>
+```
+
 **Storybook:** `Buttons & actions/ProductTile` · **Vue:** later
 
 ---

package/docs/components/data-table-filter-and-lists.md

@@ -97,6 +97,7 @@ table enables, for typing your own column defs.
 | `data` | `T[]` | — | rows; sorting, filtering and pagination run client-side |
 | `layout` | `'table' \| 'cards' \| 'tiles' \| { phone, wide }` | `'table'` | `'cards'` lays the rows out as a list of cards, `'tiles'` as one column in a single surface ([Cards and tiles](../guides/cards-and-tiles.md)); both ignore `virtual`, `renderExpandedRow` and `showViewOptions` |
 | `cardDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | `compact` fits cards of at least `--nxgt-cards-min` (15rem), up to four a row, with a tighter padding; `layout="cards"` only ([Cards and tiles](../guides/cards-and-tiles.md#columns)) |
+| `surface` | `'card' \| 'none'` | `'card'` | `'none'` drops the surface of a `cards` or `tiles` list so it sits on a card that already has one (no card in a card): the table's fill and padding go, tiles lose the list's border and corners (rows stay split by hairlines), cards lose their border and fill (one column stays split by hairlines) ([Cards and tiles](../guides/cards-and-tiles.md#inside-a-card)); the `table` layout ignores it |
 | `renderCard` | `(row, { Title, Actions, Row, selected, locked, reason }) => ReactNode` | — | a card's content, required with `layout="cards"`; `Title` is the card's one link and its name; `Actions` is the trailing action slot (outside the link, at least 44px); `Row` (the compact record row) is also passed, laid out inside the card's own padding, with no height of its own |
 | `renderTile` | `(row, { Title, Actions, Row, selected, locked, reason }) => ReactNode` | — | a tile's content, required with `layout="tiles"`; same `Title` as a card, or `Row`, the compact record row (title, subtitle, chips, trailing facts; see the cards and tiles guide) |
 | `renderExpandedRow` | `(row) => ReactNode` | — | makes rows expandable; pair with the `expand` column |

package/docs/guides/cards-and-tiles.md

@@ -302,6 +302,26 @@ on the list or an ancestor to tune it. The default `comfortable` keeps the one,
 two, three columns above, whatever the token; tiles ignore `cardDensity`. It is
 independent of `density`, which also tightens a card's padding and gap.
 
+## Inside a card
+
+A list draws its own surface: tiles are one bordered, filled box, cards each have
+a border and a fill. Inside a page card or a `PanelCard` that is a card in a card.
+`surface="none"` leaves it out:
+
+```tsx
+<PanelCard title="Team">
+  <DataTable layout="tiles" surface="none" renderTile={…} … />
+</PanelCard>
+```
+
+The table's own fill and padding go, tiles lose the list's border and rounded
+corners (the rows stay split by hairlines), and cards lose their border and fill (in
+one column they are split by hairlines). Hover and selected tints, the padding and
+the focus ring are unchanged, so the rows sit directly on the parent card. The
+default (`'card'`) is unchanged, and the `table` layout ignores it. `ServerTable`
+has its own `surface` (for its root, with the tiles keeping their border) and does
+not pass this one on.
+
 ## States
 
 - **First load** (`loading` with no row): placeholder cards (or tiles), hidden from

package/docs/guides/keypad.md

@@ -173,6 +173,8 @@ written at `=`.
 - 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 chips have a visible edge in the theme's AA primary text tone: 3:1
+  against the surface and 4.5:1 for the label, in 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
@@ -182,7 +184,12 @@ written at `=`.
   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.
+counter's touch screen. A keypad docked permanently in a narrow column (a
+till's quantity and cash pad beside the ticket) takes `size="compact"`:
+
+```tsx
+<Keypad variant="cash" size="compact" total={17.35} currency="EUR" onTender={tender} />
+```
 
 ## Props
 
@@ -198,10 +205,11 @@ counter's touch screen.
 | `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'` |
+| `size` | `'comfortable'` | `'comfortable'`, `'large'` or `'compact'` (docked use) |
 | `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`) |
+| `placeholder` | none | Muted hint while the entry is empty, also with a `currency` (visual only, `aria-hidden`; not shown on an error) |
 | `label` | "Keypad" | The group's accessible name |
 | `variant`, `total`, `denominations`, `onTender` | `'standard'` | See [Cash](#cash) |
 | `className` | | On the root |
@@ -210,10 +218,16 @@ Types: `KeypadProps`, `KeypadEntry`, `KeypadOperation`, `KeypadVariant`, `Keypad
 
 ## 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`.
+The keypad sizes by its own width with the calculator's bands (a narrow band
+under 360px, wider keys from 600px, automatic) and is at most 24rem wide. The
+`size` prop is separate: `size="large"` gives
+taller keys. `size="compact"` is for a keypad docked beside other content: 36px
+keys, tighter gaps, a smaller display, and in cash a denser total and change
+and the quick amounts (four at most) on one row, so a 4-row pad with its display fits about
+320px of height (the cash variant a little more). On a coarse pointer the keys
+and the quick amounts stay at 44px, so a touch till gets the tighter gaps and
+display but not shorter 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
 

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

@@ -13,6 +13,15 @@
 		border: 1px solid var(--item-border);
 		border-radius: var(--item-radius);
 	}
+	/* `surface="none"`: no surface of its own, for a list inside a card. The
+	 * rows keep their hairlines; the tints still mix over the parent. */
+	[data-slot="data-table-tiles"][data-surface="none"] {
+		--item-surface: transparent;
+		margin: 0;
+		background: none;
+		border: 0;
+		border-radius: 0;
+	}
 	/* A ServerTable on a phone has no panel of its own: the tile list sits at
 	 * the page gutter, in line with the heading (#2292). */
 	@media (max-width: 767.98px) {
@@ -52,6 +61,11 @@
 		border-end-start-radius: calc(var(--item-radius) - 1px);
 		border-end-end-radius: calc(var(--item-radius) - 1px);
 	}
+	/* `surface="none"`: no rounded first and last row either. */
+	[data-slot="data-table-tiles"][data-surface="none"]
+	> [data-slot="data-table-item"] {
+		border-radius: 0;
+	}
 	[data-slot="data-table-tiles"][data-selectable]
 		> [data-slot="data-table-item"] {
 		padding-inline-start: 3.25rem;

package/lib/components/ui/collections/data-table/data-table-items.css

@@ -73,6 +73,12 @@
 			grid-template-columns: repeat(3, minmax(0, 1fr));
 		}
 	}
+	/* `surface="none"`: the list sits on its parent, with no padding of the
+	 * table's own to take the ring room's 4px back from. */
+	[data-slot="table-wrapper"]:has(> [data-surface="none"]) {
+		margin-inline: 0;
+		width: 100% !important;
+	}
 	[data-slot="data-table-cards"][data-density="compact"] {
 		gap: var(--nxgt-cards-gap, 0.5rem);
 	}
@@ -120,6 +126,22 @@
 		> [data-slot="data-table-item"] {
 		padding: 0.75rem;
 	}
+	/* `surface="none"`: a card draws no border or fill of its own, for a list
+	 * inside a card. In one column the cards are split by hairlines. */
+	[data-slot="data-table-cards"][data-surface="none"] {
+		--item-surface: transparent;
+	}
+	[data-slot="data-table-cards"][data-surface="none"]
+		> [data-slot="data-table-item"] {
+		border-color: transparent;
+	}
+	@container (max-width: 35.999rem) {
+		[data-slot="data-table-cards"][data-surface="none"]
+			> [data-slot="data-table-item"]
+			+ [data-slot="data-table-item"] {
+			border-top-color: var(--item-border);
+		}
+	}
 	[data-slot="data-table-item"] a[data-slot="data-table-item-link"],
 	[data-slot="data-table-item"] button[data-slot="data-table-item-link"] {
 		color: inherit;

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

@@ -110,6 +110,24 @@
 	--calc-key: 4.5rem;
 	--calc-gap: 0.625rem;
 }
+/* Compact: a keypad docked beside other content. Shorter keys, tighter gaps,
+ * display and cash rows. A coarse pointer keeps 44px keys (the Touch rule in
+ * calculator-bands.css) and chips (the block after the cash rules). */
+.nxgt-keypad[data-size="compact"] .nxgt-calc-body {
+	--calc-key: 2.25rem;
+	--calc-gap: 0.25rem;
+	--calc-radius: 1rem;
+	--calc-result: 1.75rem;
+	gap: 0.375rem;
+}
+.nxgt-keypad[data-size="compact"] .nxgt-calc-key {
+	border-radius: 1rem;
+	font-size: 1.125rem;
+}
+.nxgt-keypad[data-size="compact"] .nxgt-calc-key[data-role="operator"],
+.nxgt-keypad[data-size="compact"] .nxgt-calc-key[data-role="equals"] {
+	border-radius: 9999px;
+}
 .nxgt-keypad-display {
 	display: block;
 	min-width: 0;
@@ -124,6 +142,15 @@
 	direction: ltr;
 	overflow-wrap: anywhere;
 }
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-display {
+	padding: 0.375rem 0.875rem;
+}
+.nxgt-keypad-display [data-placeholder] {
+	color: var(--muted-foreground);
+	font-size: 0.5em;
+	vertical-align: middle;
+	font-weight: 400;
+}
 .nxgt-keypad-display[data-kind="error"] {
 	color: var(--destructive);
 }
@@ -192,13 +219,14 @@
 	padding-inline: 0.875rem;
 	white-space: nowrap;
 	min-height: max(calc(var(--calc-key) * 0.8), 2.75rem);
-	border: 0;
 	border-radius: 9999px;
-	background: color-mix(
-		in oklab,
-		var(--primary) 16%,
-		color-mix(in oklab, var(--foreground) 3%, var(--background))
-	);
+	/* --primary is dark navy in dark mode, so a mix of it vanishes into the
+	 * surface. --primary-text is the theme's AA primary for text, light in
+	 * dark: 28 % of it tints the chip, 60 % draws its 1px edge (3:1 against the
+	 * surface in light and dark, text at 8:1 and more). */
+	border: 1px solid
+		color-mix(in oklab, var(--primary-text) 60%, var(--background));
+	background: color-mix(in oklab, var(--primary-text) 28%, var(--background));
 	color: var(--foreground);
 	font: inherit;
 	font-weight: 500;
@@ -213,3 +241,40 @@
 	outline: 2px solid var(--ring);
 	outline-offset: 2px;
 }
+
+/* Keypad, compact: the cash rows and the quick amounts take less height; the
+ * four amounts sit on one row. A coarse pointer keeps 44px chips. */
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-cash {
+	gap: 0.125rem;
+}
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-cash > div {
+	padding-inline: 0.875rem;
+}
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-cash dd {
+	font-size: 1rem;
+}
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-cash [data-status] {
+	padding-block: 0.125rem;
+	border-radius: 0.75rem;
+}
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-cash [data-status] dd {
+	font-size: 1.25rem;
+}
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-shortcuts {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.nxgt-keypad[data-size="compact"] .nxgt-keypad-shortcuts button {
+	min-height: 2rem;
+	padding-inline: 0.25rem;
+	font-size: 0.875rem;
+}
+.nxgt-keypad[data-size="compact"]
+	.nxgt-keypad-shortcuts
+	button:last-child:nth-child(odd) {
+	grid-column: auto;
+}
+@media (pointer: coarse) {
+	.nxgt-keypad[data-size="compact"] .nxgt-keypad-shortcuts button {
+		min-height: 2.75rem;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.105.0",
+	"version": "3.107.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"