@nxgt/material 3.107.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 |

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

@@ -207,7 +207,7 @@ till's quantity and cash pad beside the ticket) takes `size="compact"`:
 | `keyboard` | `'focus'` | `'focus'`, `'global'` or `false` |
 | `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 |
@@ -223,8 +223,9 @@ 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 (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`.

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

@@ -242,8 +242,11 @@
 	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. */
+/* 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;
 }
@@ -260,18 +263,12 @@
 .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;
+	padding-inline: 0.5rem;
 	font-size: 0.875rem;
-}
-.nxgt-keypad[data-size="compact"]
-	.nxgt-keypad-shortcuts
-	button:last-child:nth-child(odd) {
-	grid-column: auto;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 @media (pointer: coarse) {
 	.nxgt-keypad[data-size="compact"] .nxgt-keypad-shortcuts button {

package/package.json

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