@nxgt/material 3.106.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/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/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.106.0",
+	"version": "3.107.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"