@nxgt/material 3.75.0 → 3.76.0

package/docs/troubleshooting.md

@@ -466,6 +466,21 @@ words in your error.
 
 - [Reporting a bug](#reporting-a-bug)
 
+**Calculator**
+
+- [`The calculator is unstyled`](#the-calculator-is-unstyled)
+- [`The calculator does not remember its tape`](#the-calculator-does-not-remember-its-tape)
+- [`This calculator could not be loaded.`](#this-calculator-could-not-be-loaded)
+- [`A calculator key types nothing on the page`](#a-calculator-key-types-nothing-on-the-page)
+- [`Copy or paste does nothing in the calculator`](#copy-or-paste-does-nothing-in-the-calculator)
+- [`The scientific calculator answers "Undefined result"`](#the-scientific-calculator-answers-undefined-result)
+- [`The calculator now shows a switcher`](#the-calculator-now-shows-a-switcher)
+- [`The conversion calculator has no Currency category`](#the-conversion-calculator-has-no-currency-category)
+- [`Invalid exchange rates`](#invalid-exchange-rates)
+- [`The exchange rates could not be loaded`](#the-exchange-rates-could-not-be-loaded)
+- [`The point of sale's Charge button stays off`](#the-point-of-sales-charge-button-stays-off)
+- [`The Financial calculator shows no currency`](#the-financial-calculator-shows-no-currency)
+
 **Barcodes**
 
 - [`Code 128 holds ASCII only (0-127)`](#code-128-holds-ascii-only-0-127)
@@ -8073,6 +8088,125 @@ Before upgrading, precaching the illustration chunks in the service worker narro
 
 ---
 
+## Calculator
+
+### `The calculator is unstyled`
+
+The keypad is a column of plain buttons, the display has no tint and the keys
+have no shape.
+
+**Why:** the calculator's stylesheet is opt-in. `styles.css` does not import it,
+so `Calculator` and `CalculatorField` render their markup without it.
+**Fix:** import it once, after `styles.css`: `@import "@nxgt/material/calculator.css";`
+(or `import '@nxgt/material/calculator.css'`).
+
+### `This calculator could not be loaded.`
+
+**When:** a variant other than Standard (Scientific, Point of sale, Financial, Conversion, Programmer) shows this message and a "Try again" button in place of its keys.
+**Why:** each of those variants is a separate chunk fetched the first time it is shown, and the fetch was rejected. Usual causes: a Content Security Policy that blocks same-origin chunks (`script-src` without `'self'` or `'strict-dynamic'` under a nonce, see the [CSP guide](guides/csp.md)); a bundler or CDN that does not serve the hashed chunk files next to the entry; a tab kept open across a deploy that removed the old hashed chunks; or a flaky network.
+**Fix:** press Try again. If it fails again, reload the page, because a browser may keep a failed dynamic import until the page reloads. Then check the Network tab for the chunk's URL (`*-variant-*.js`): a 404 means the deploy dropped it, a blocked request means the CSP. The message and button are the `material.calculator.load-failed` and `material.calculator.retry` strings.
+
+### `The calculator does not remember its tape`
+
+Not an error. The tape and memory are read from `localStorage` after mount, so
+the server and the first client frame show an empty tape. Nothing is kept when
+`persist={false}`, in a private window that blocks storage or when the storage
+is full; two calculators with the same `persist` key share one slot, so give
+each its own `key`.
+
+```tsx
+<Calculator persist={{ key: 'till-2' }} />
+```
+
+### `Apply stays disabled in the calculator field`
+
+Not an error. `CalculatorField`'s Apply writes the display's number, so it is
+disabled while the display holds none: nothing typed yet, an unfinished entry
+such as `2 +` with nothing after it, or an error (a division by zero). Finish
+the sum or press `C` and enter a number; Cancel or Escape keeps the field's
+number.
+
+### `A calculator key types nothing on the page`
+
+The calculator takes the keys typed inside it. Pass `globalKeyboard` for the
+keys typed elsewhere on the page; a key typed in an input, a textarea, a
+select or an editable element is never taken.
+
+```tsx
+<Calculator globalKeyboard />
+```
+
+### `Copy or paste does nothing in the calculator`
+
+The async clipboard needs a secure context (HTTPS or `localhost`), and reading
+it needs the user's permission. Without them the buttons leave the calculator
+as it was and nothing is announced. Copy is also left to the browser while text
+is selected.
+
+### `The scientific calculator answers "Undefined result"`
+
+The engine refuses what has no real value instead of showing a wrong number:
+`tan(90)` in degrees, `ln(0)`, `sqrt(-1)`, `asin(2)`, `(-8)^0.5` and a
+radian argument of more than 40 digits. The angle unit decides `sin(30)`:
+check the toolbar's DEG, RAD, GRAD before suspecting the result.
+
+### `The calculator now shows a switcher`
+
+`variants` defaults to every registered variant (Standard, Scientific, Cash
+register, Financial and Conversion), so a plain `<Calculator />` offers the switcher, and the list grows as
+variants are added. Pass the set you want (`variants={['standard']}` for the
+single Standard calculator).
+
+### `The point of sale's Charge button stays off`
+
+Charge is off while the ticket has no line, and while the **Tendered** amount is
+smaller than the total (the line under the bills says "... still due"). Type or
+pick a larger amount, or clear the tendered field with `C` to charge without
+cash. Amounts are in the currency's minor unit: with `currency="JPY"` the keys
+type whole yen, so `1250` is 1,250 and not 12.50.
+
+### `The Financial calculator shows no currency`
+
+Amounts carry no currency code and have two decimals until you pass `currency`
+(`<Calculator variants={['financial']} currency="USD" />`, an ISO 4217 code;
+the point of sale reads the same prop). The code also sets the decimals:
+`JPY` has none, `KWD` three. `locale` only changes the separators.
+
+### `The conversion calculator has no Currency category`
+
+The category exists only when `currencyRates` is given, as an object
+`{ base, rates, asOf? }` or a function returning that. Without it the variant
+offers the eight unit categories.
+
+```tsx
+<Calculator defaultVariant="conversion" currencyRates={{ base: 'EUR', rates: { USD: '1.085' } }} />
+```
+
+### `Invalid exchange rates`
+
+Shown in the Conversion variant's Currency category. A rate is not a positive
+number, or the base is listed with a rate other than 1. Fix the payload the
+object or the function gives.
+
+```tsx
+<Calculator defaultVariant="conversion" currencyRates={{ base: 'EUR', rates: { USD: '1.085', EUR: '1' } }} />
+```
+
+### `The exchange rates could not be loaded`
+
+Shown in the Currency category when the `currencyRates` function rejected or
+threw (offline, a 500). **Try again** calls it again. Pass the `signal` to your
+`fetch` so a closed panel cancels the request:
+
+```tsx
+<Calculator
+  defaultVariant="conversion"
+  currencyRates={(signal) => fetch('/api/rates', { signal }).then((r) => r.json())}
+/>
+```
+
+---
+
 ## Barcodes
 
 ### `Code 128 holds ASCII only (0-127)`

package/lib/components/base-content.css

@@ -95,7 +95,7 @@
 	}
 
 	.form-grid-layout {
-		@apply relative flex flex-col gap-2 @container;
+		@apply relative flex flex-col @container;
 		[data-slot="form-fields"] {
 			@apply grid @2xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-2 bg-background/80 p-4 place-items-start;
 
@@ -152,10 +152,15 @@
 		@variant max-sm {
 			--form-actions-clearance-default: 8rem;
 		}
-		/* Sticky at the bottom of whatever scrolls the form: in reach. Padded
-		   for the safe area (`viewport-fit=cover`: the home indicator). */
+		/* The actions are one surface with the fields: same tint, no gap, so a
+		   short form on a page is one slab, not two. Sticky at the bottom of
+		   whatever scrolls the form (in reach, and only a long form scrolls);
+		   the blur keeps the fields passing under it quiet. Padded for the
+		   safe area (`viewport-fit=cover`: the home indicator). The 0.5rem above
+		   the buttons is a transparent border, painted with the tint, so a
+		   `*:p-0` on the form (the editor's edit forms) cannot make them flush. */
 		[data-slot="form-actions"] {
-			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] backdrop-blur-sm max-sm:*:flex-1;
+			@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;
 		}
 	}
 

package/lib/components/ui/collections/server-table/server-table-phone-row.css

@@ -92,11 +92,18 @@
 		min-width: 2.75rem;
 		min-height: 2.75rem;
 	}
-	/* The 44px box sits at the row's edge: the label's 14px of room
-	 * is taken back, so the box lines up with the search above. */
+	/* The label's 12px of room around the box is mostly taken back, but not
+	 * all of it. Since the list draws no panel on a phone (#2295) the row
+	 * starts 4px inside the page gutter, and a tap-target check
+	 * (`@nxgt/playwright`'s `expectTapTargets`) moves the 44px square centred
+	 * on the box back inside the viewport: with the box's centre under 22px
+	 * from the screen's edge (20px in an 8px gutter at -0.875rem), the square
+	 * reached past the box's `::after` (#2304). At -0.375rem the centre is
+	 * 20px in from the gutter: 22px or more from the edge in any gutter of
+	 * 2px or more. */
 	[data-slot="server-table-phone-row-start"]
 	[data-slot="select-checkbox-label"] {
-		margin-inline-start: -0.875rem;
+		margin-inline-start: -0.375rem;
 	}
 }
 [data-slot="server-table-phone-row"]

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

@@ -0,0 +1,146 @@
+/* The width bands of the calculator itself, touch, motion and forced colours. */
+/* Four or more variants do not fit one line under 480: two by two, as many rows as needed. */
+@container nxgt-calc (max-width: 479.98px) {
+	.nxgt-calc .nxgt-calc-switcher {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		border-radius: 1.5rem;
+		overflow: visible;
+	}
+	.nxgt-calc .nxgt-calc-switcher [role="tab"] {
+		min-width: 0;
+	}
+	/* The sliding indicator spans one row of a wrapped grid: each active tab draws its own surface instead. */
+	.nxgt-calc .nxgt-calc-switcher [data-slot="tabs-indicator"] {
+		display: none;
+	}
+	.nxgt-calc .nxgt-calc-switcher [role="tab"][data-state="active"]::after {
+		display: block;
+	}
+}
+/* Compact: under 360 */
+@container nxgt-calc (max-width: 359.98px) {
+	.nxgt-calc-body {
+		--calc-gap: 0.375rem;
+		--calc-key: 2.75rem;
+		--calc-radius: 1.5rem;
+		--calc-result: 2.25rem;
+	}
+	.nxgt-calc-key {
+		font-size: 1.125rem;
+	}
+}
+/* Tablet: 600 and up */
+@container nxgt-calc (min-width: 600px) {
+	.nxgt-calc-body {
+		--calc-gap: 0.625rem;
+		--calc-key: 3.75rem;
+		--calc-result: 3.75rem;
+	}
+}
+/* Scientific: the functions beside the keys where there is room for them:
+ * 600-719, and 1000 and up once the tape takes its column. */
+@container nxgt-calc ((min-width: 600px) and (max-width: 719.98px)) or (
+	min-width: 1000px
+) {
+	.nxgt-calc[data-variant="scientific"] .nxgt-calc-keys {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		align-items: start;
+	}
+	.nxgt-calc[data-variant="scientific"] .nxgt-calc-pane {
+		display: grid;
+		grid-template-columns: repeat(12, minmax(0, 1fr));
+		gap: var(--calc-gap);
+	}
+}
+/* On touch the beside layout needs 6 keys of 44px a pane: from 640px, and from
+ * 1040px with the tape; the bands under that stay stacked. */
+@media (pointer: coarse) {
+	@container nxgt-calc ((min-width: 600px) and (max-width: 639.98px)) or (
+		(min-width: 1000px) and (max-width: 1039.98px)
+	) {
+		.nxgt-calc[data-variant="scientific"] .nxgt-calc-keys {
+			grid-template-columns: repeat(12, minmax(0, 1fr));
+		}
+		.nxgt-calc[data-variant="scientific"] .nxgt-calc-pane {
+			display: contents;
+		}
+	}
+}
+/* The tape beside the keypad: 720 and up */
+@container nxgt-calc (min-width: 720px) {
+	.nxgt-calc-body {
+		grid-template-columns: minmax(0, 1fr) 18rem;
+		gap: 1.5rem;
+	}
+	.nxgt-calc-tape,
+	.nxgt-calc[data-tape-open] .nxgt-calc-tape {
+		position: static;
+		display: flex;
+		padding: 0;
+		background: none;
+	}
+	.nxgt-calc-tape-toggle {
+		display: none;
+	}
+	.nxgt-calc[data-tape-open] .nxgt-calc-keys {
+		display: grid;
+	}
+}
+/* Desktop: 900 and up */
+@container nxgt-calc (min-width: 900px) {
+	.nxgt-calc-body {
+		--calc-key: 4rem;
+		--calc-result: 4.25rem;
+		grid-template-columns: minmax(0, 1fr) 22rem;
+	}
+}
+/* A short landscape phone: keys shrink so the keypad is not cut off */
+@media (max-height: 480px) and (orientation: landscape) {
+	.nxgt-calc-body {
+		--calc-key: 2.5rem;
+		--calc-result: 2.25rem;
+	}
+}
+/* Touch: keys stay 44px and more */
+@media (pointer: coarse) {
+	.nxgt-calc-key,
+	.nxgt-calc-key[data-role="memory"],
+	.nxgt-calc-key[data-role="bracket"] {
+		min-height: max(var(--calc-key), 2.75rem);
+	}
+	.nxgt-calc-switcher [role="tab"],
+	.nxgt-calc-segment-item,
+	.nxgt-calc-second,
+	.nxgt-calc-entry button,
+	.nxgt-calc-tool {
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.nxgt-calc-swap {
+		animation: none;
+	}
+	.nxgt-calc-key {
+		transition: none;
+	}
+	.nxgt-calc-key:active {
+		transform: none;
+	}
+}
+@media (forced-colors: active) {
+	.nxgt-calc-segment-item[aria-pressed="true"] {
+		background: Highlight;
+		color: HighlightText;
+	}
+	.nxgt-calc-key,
+	.nxgt-calc-display,
+	.nxgt-calc-entry {
+		border: 1px solid ButtonText;
+	}
+	.nxgt-calc-key[data-role="equals"] {
+		background: Highlight;
+		color: HighlightText;
+	}
+}

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

@@ -0,0 +1,83 @@
+/* The display: tools row, memory chip, expression and result. */
+/* Display */
+.nxgt-calc-display {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	min-width: 0;
+	padding: 0.5rem 1rem 1rem;
+	border-radius: var(--calc-radius);
+}
+.nxgt-calc-tools {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	min-height: 2rem;
+}
+.nxgt-calc-memory {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 1.75rem;
+	height: 1.75rem;
+	padding-inline: 0.5rem;
+	border-radius: 9999px;
+	font-size: 0.8125rem;
+	font-weight: 600;
+}
+.nxgt-calc-screen {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	min-width: 0;
+	border-radius: 1rem;
+	text-align: right;
+	direction: ltr;
+}
+.nxgt-calc-screen:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+.nxgt-calc-expression {
+	max-width: 100%;
+	min-height: 1.5rem;
+	margin: 0;
+	overflow-x: auto;
+	overflow-wrap: anywhere;
+	color: var(--muted-foreground);
+	font-size: 1.125rem;
+	font-variant-numeric: tabular-nums;
+}
+.nxgt-calc-result {
+	display: block;
+	max-width: 100%;
+	font-size: var(--calc-result);
+	font-weight: 500;
+	line-height: 1.1;
+	letter-spacing: -0.02em;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+}
+.nxgt-calc-result[data-size="long"] {
+	font-size: calc(var(--calc-result) * 0.72);
+}
+.nxgt-calc-result[data-size="xlong"] {
+	font-size: calc(var(--calc-result) * 0.5);
+}
+.nxgt-calc-result[data-kind="preview"] {
+	color: var(--muted-foreground);
+}
+.nxgt-calc-result[data-kind="error"] {
+	color: var(--error-text);
+	font-size: 1.5rem;
+}
+.nxgt-calc-swap {
+	display: inline-block;
+	animation: nxgt-calc-swap 180ms ease-out;
+}
+@keyframes nxgt-calc-swap {
+	from {
+		opacity: 0;
+		transform: translateY(0.35em);
+	}
+}

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

@@ -0,0 +1,118 @@
+/* The shaped keys by role, on a grid of twelve units. */
+/* Keys */
+.nxgt-calc-keys {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	gap: var(--calc-gap);
+	direction: ltr;
+}
+.nxgt-calc-key {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 0;
+	min-height: var(--calc-key);
+	border: 0;
+	border-radius: 1.75rem;
+	font: inherit;
+	font-size: 1.375rem;
+	font-weight: 500;
+	font-variant-numeric: tabular-nums;
+	cursor: pointer;
+	touch-action: manipulation;
+	user-select: none;
+	transition:
+		border-radius 120ms ease-out,
+		transform 120ms ease-out,
+		filter 120ms;
+}
+.nxgt-calc-key[data-span="2"] {
+	grid-column: span 2;
+}
+.nxgt-calc-key[data-span="3"] {
+	grid-column: span 3;
+}
+.nxgt-calc-key[data-span="6"] {
+	grid-column: span 6;
+}
+.nxgt-calc-key[data-role="operator"],
+.nxgt-calc-key[data-role="equals"] {
+	border-radius: 9999px;
+}
+.nxgt-calc-key[data-role="utility"] {
+	border-radius: 1.125rem;
+}
+.nxgt-calc-key[data-role="function"] {
+	border-radius: 9999px;
+	font-size: 1rem;
+}
+.nxgt-calc-key[data-role="memory"],
+.nxgt-calc-key[data-role="bracket"] {
+	min-height: 2.5rem;
+	border-radius: 9999px;
+	font-size: 0.875rem;
+}
+/* Scientific: the functions pane sits above the keys (display: contents joins
+ * the keypad's grid), 2nd and the toolbar above both. */
+.nxgt-calc-pane {
+	display: contents;
+}
+.nxgt-calc-pane[data-pane="functions"] .nxgt-calc-key {
+	min-height: max(calc(var(--calc-key) * 0.8), 2.75rem);
+	font-size: 0.8125rem;
+	letter-spacing: -0.02em;
+}
+.nxgt-calc-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+}
+.nxgt-calc-segment {
+	display: inline-flex;
+	gap: 2px;
+	padding: 2px;
+	border-radius: 9999px;
+	background: var(--muted);
+}
+.nxgt-calc-segment-item {
+	min-width: 2.25rem;
+	min-height: 1.75rem;
+	padding-inline: 0.5rem;
+	border: 0;
+	border-radius: 9999px;
+	background: transparent;
+	color: var(--foreground);
+	font: inherit;
+	font-size: 0.75rem;
+	font-weight: 500;
+	cursor: pointer;
+	touch-action: manipulation;
+}
+.nxgt-calc-segment-item[aria-pressed="true"] {
+	background: var(--primary);
+	color: var(--primary-foreground);
+}
+.nxgt-calc-segment-item:focus-visible,
+.nxgt-calc-second:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+.nxgt-calc-second {
+	min-height: 2rem;
+	border-radius: 9999px;
+	font-variant-numeric: tabular-nums;
+}
+.nxgt-calc-key:hover {
+	filter: brightness(0.96);
+}
+.nxgt-calc-key:active {
+	border-radius: 0.625rem;
+	transform: scale(0.95);
+}
+.nxgt-calc-key:focus-visible,
+.nxgt-calc-entry button:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}