@nxgt/material 3.106.0 → 3.107.1

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

@@ -1363,6 +1363,8 @@ import { Badge, ProductTile, ResponsiveGrid } from '@nxgt/material/components';
 </ResponsiveGrid>
 ```
 
+A `selected` tile gets `aria-pressed`, a tint, a 2px ring and a bar at the start. The edge is `--primary-indicator`, 3:1 or more against the Card in light and dark (the bar is the cue that does not rely on hue). The look is the `nxgt-tile-selected` class (from `tile-selected.css`).
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `title` | `ReactNode` | required | The name, up to two lines |
@@ -1370,14 +1372,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-display.md

@@ -1163,6 +1163,8 @@ import { ListTile } from '@nxgt/material/components';
 <ListTile title="Notifications" subtitle="Email and push" href="/settings/notifications" />
 ```
 
+`selected` draws a tint, a 2px ring and a bar at the start, from `--primary-indicator` (and `--primary-text` for the tint in dark): the edge is 3:1 or more against the surface in light and dark, and the bar tells it apart without hue. A `divided` row keeps the bar only. The look is the `nxgt-tile-selected` class (`tile-selected.css`); a `className` of your own should not repaint its `background` or `box-shadow`.
+
 A tile with an `href` ends with a discreet chevron after `trailing`: decorative (`aria-hidden`, so the link's name stays its text) and flipped in right-to-left. `chevron={false}` opts out; `chevron` on a button tile (an `onClick` that navigates) opts in.
 
 | Prop | Type | Default | Effect |

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 |
+| `commitLabel` | translated "Enter" ("Tender" in cash) | The commit key's name and text. A named key shows "✓ label" and takes a full-width row under the zero key, so a till's "Charge" reads whole |
 | `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,17 @@ 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) in two short columns, so none is cut at
+360px ("FCFA 20,000" fits). A 4-row pad with its display fits about
+320px of height (the cash variant a little more, and a named `commitLabel` key adds a fifth row). 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/components.css

@@ -179,6 +179,8 @@
 @import "./ui/display/chip/chip-hairline.css";
 @import "./ui/display/chip/chip-soft.css";
 @import "./ui/display/chip/chip-tag.css";
+/* Selected ProductTile and ListTile (#2925). */
+@import "./ui/display/list-tile/tile-selected.css";
 /* Calendar: its look, then its motion (springs from motion.css). */
 @import "./ui/dates/calendar/calendar.css";
 @import "./ui/dates/calendar/calendar-expressive.css";

package/lib/components/ui/display/list-tile/tile-selected.css

@@ -0,0 +1,34 @@
+/* The selected look of ProductTile and ListTile (#2925): a tint, a 2px ring and a bar
+ * at the start. The ring and the bar are --primary-indicator, the theme's 3:1
+ * non-text primary (the lifted one in dark), so a selected tile is >=3:1 against
+ * the surface in light and dark; the tint is --primary-text in dark (the deep
+ * --primary gave ~1.1:1 over a Card). The bar is the cue that does not rely on
+ * hue. The label stays --foreground (>=4.5:1 on the tint). */
+@layer components {
+	.nxgt-tile-selected {
+		--tile-on: color-mix(in oklab, var(--primary) 14%, var(--card));
+		--tile-edge: var(--primary-indicator);
+		--tile-bar: 3px;
+		box-shadow:
+			inset 0 0 0 2px var(--tile-edge),
+			inset var(--tile-bar) 0 0 0 var(--tile-edge);
+		background: var(--tile-on);
+		border-color: var(--tile-edge);
+	}
+	:is(.dark, [data-theme="dark"]) .nxgt-tile-selected {
+		--tile-on: color-mix(in oklab, var(--primary-text) 22%, var(--card));
+	}
+	.nxgt-tile-selected:dir(rtl) {
+		box-shadow:
+			inset 0 0 0 2px var(--tile-edge),
+			inset calc(var(--tile-bar) * -1) 0 0 0 var(--tile-edge);
+	}
+	/* A divided row is flat: the bar only, no ring. */
+	.nxgt-tile-selected.nxgt-tile-flat {
+		box-shadow: inset var(--tile-bar) 0 0 0 var(--tile-edge);
+		border-color: transparent;
+	}
+	.nxgt-tile-selected.nxgt-tile-flat:dir(rtl) {
+		box-shadow: inset calc(var(--tile-bar) * -1) 0 0 0 var(--tile-edge);
+	}
+}

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="12"] {
+	grid-column: span 12;
+}
 .nxgt-calc-key[data-span="9"] {
 	grid-column: span 9;
 }

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,37 @@
 	outline: 2px solid var(--ring);
 	outline-offset: 2px;
 }
+
+/* Keypad, compact: the cash rows and the quick amounts take less height. The
+ * amounts keep the two columns of the default size: four would give each a
+ * quarter of a 24rem keypad, less than "FCFA 20,000" needs, so they wrap to
+ * two short rows, and an amount too long for its half is cut with an ellipsis
+ * (its accessible name is the full amount). 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 button {
+	min-height: 2rem;
+	padding-inline: 0.5rem;
+	font-size: 0.875rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+@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.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"