@nxgt/material 3.75.0 → 3.76.0

package/lib/components/ui/widgets/calculator/calculator-pos-ticket.css

@@ -0,0 +1,185 @@
+/* The point of sale's ticket, payment and Charge button. */
+.nxgt-pos-ticket {
+	min-width: 0;
+	padding: 0.75rem 1rem;
+	border-radius: 1.5rem;
+}
+.nxgt-pos-ticket-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+}
+.nxgt-pos-heading {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 600;
+}
+.nxgt-pos-count {
+	min-width: 1.5rem;
+	padding-inline: 0.5rem;
+	border-radius: 9999px;
+	background: var(--secondary-container);
+	font-size: 0.8125rem;
+	text-align: center;
+	font-variant-numeric: tabular-nums;
+}
+.nxgt-pos-fold {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 2rem;
+	min-height: 2rem;
+	border: 0;
+	border-radius: 9999px;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+.nxgt-pos-fold:focus-visible,
+.nxgt-pos-bill:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+.nxgt-pos-ticket[data-collapsed] .nxgt-pos-ticket-body {
+	display: none;
+}
+.nxgt-pos-empty {
+	margin: 0.5rem 0;
+	color: var(--muted-foreground);
+}
+.nxgt-pos-lines {
+	margin: 0.25rem 0;
+	padding: 0;
+	list-style: none;
+}
+.nxgt-pos-line {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto auto;
+	align-items: center;
+	gap: 0.5rem;
+	padding-block: 0.25rem;
+}
+.nxgt-pos-line-name {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.nxgt-pos-line-name small {
+	color: var(--muted-foreground);
+	font-variant-numeric: tabular-nums;
+}
+.nxgt-pos-amount,
+.nxgt-pos-row dd {
+	margin: 0;
+	font-variant-numeric: tabular-nums;
+	text-align: end;
+}
+.nxgt-pos-totals {
+	margin: 0.5rem 0 0;
+	padding-top: 0.5rem;
+	border-top: 1px solid var(--border);
+}
+.nxgt-pos-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	min-height: 1.5rem;
+}
+.nxgt-pos-row dt {
+	color: var(--muted-foreground);
+}
+.nxgt-pos-row[data-row="total"] {
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+.nxgt-pos-row[data-row="total"] dt {
+	color: inherit;
+}
+.nxgt-pos-tender {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+.nxgt-pos-bills {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--calc-gap);
+}
+.nxgt-pos-bill {
+	flex: 1 1 4.5rem;
+	min-height: 2.75rem;
+	padding-inline: 0.75rem;
+	border: 0;
+	border-radius: 9999px;
+	background: var(--secondary-container);
+	color: var(--foreground);
+	font: inherit;
+	font-weight: 500;
+	font-variant-numeric: tabular-nums;
+	cursor: pointer;
+	touch-action: manipulation;
+}
+.nxgt-pos-settlement {
+	margin: 0;
+	min-height: 1.5rem;
+	font-size: 1.125rem;
+	font-weight: 600;
+	font-variant-numeric: tabular-nums;
+}
+.nxgt-pos-settlement[data-status="short"] {
+	color: var(--error-text);
+}
+.nxgt-pos-charge {
+	width: 100%;
+	max-width: 100%;
+	min-height: 3.5rem;
+	padding-inline: 1.5rem;
+	border: 0;
+	border-radius: 9999px;
+	background: var(--primary);
+	color: var(--primary-foreground);
+	font: inherit;
+	font-size: 1.25rem;
+	font-weight: 600;
+	font-variant-numeric: tabular-nums;
+	cursor: pointer;
+	touch-action: manipulation;
+}
+.nxgt-pos-charge:disabled {
+	background: var(--muted);
+	color: var(--muted-foreground);
+	cursor: not-allowed;
+}
+.nxgt-pos-charge:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+@container nxgt-calc (min-width: 600px) {
+	.nxgt-pos-fold {
+		display: none;
+	}
+	.nxgt-pos-ticket[data-collapsed] .nxgt-pos-ticket-body {
+		display: block;
+	}
+}
+@media (pointer: coarse) {
+	.nxgt-pos-fold,
+	.nxgt-pos-bill,
+	.nxgt-pos-charge {
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+	}
+}
+@media (forced-colors: active) {
+	.nxgt-pos-bill,
+	.nxgt-pos-ticket,
+	.nxgt-pos-charge {
+		border: 1px solid ButtonText;
+	}
+}

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

@@ -0,0 +1,38 @@
+/* The point-of-sale variant: the amount, the fields and the keys on one side,
+ * the ticket and the payment on the other (below on a phone, beside from 600). */
+.nxgt-calc[data-variant="pos"] .nxgt-calc-body {
+	grid-template-columns: minmax(0, 1fr);
+}
+.nxgt-calc-aside {
+	min-width: 0;
+}
+.nxgt-pos-side {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	min-width: 0;
+}
+.nxgt-pos-display .nxgt-calc-result[data-field="quantity"],
+.nxgt-pos-display .nxgt-calc-result[data-field="discount"] {
+	color: var(--primary);
+}
+.nxgt-pos-total {
+	display: flex;
+	align-items: baseline;
+	justify-content: flex-end;
+	gap: 0.5rem;
+}
+.nxgt-pos-total strong {
+	color: var(--foreground);
+	font-weight: 600;
+}
+.nxgt-pos-fields {
+	justify-content: flex-start;
+}
+@container nxgt-calc (min-width: 600px) {
+	.nxgt-calc[data-variant="pos"] .nxgt-calc-body {
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		gap: 1.5rem;
+		align-items: start;
+	}
+}

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

@@ -0,0 +1,71 @@
+/* Tape: closed unless opened, always there beside the keypad from 720 */
+.nxgt-calc-tape {
+	display: none;
+	flex-direction: column;
+	gap: 0.5rem;
+	min-width: 0;
+	min-height: 0;
+	max-height: 100%;
+	overflow-y: auto;
+}
+.nxgt-calc[data-tape-open] .nxgt-calc-tape {
+	display: flex;
+}
+.nxgt-calc-tape-head {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	padding-inline: 0.25rem;
+}
+.nxgt-calc-tape-title {
+	margin: 0;
+	font-size: 1rem;
+	font-weight: 600;
+}
+.nxgt-calc-tape-empty {
+	margin: 0;
+	padding: 0.5rem;
+	font-size: 0.875rem;
+}
+.nxgt-calc-entries {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.nxgt-calc-entry {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	min-width: 0;
+	padding: 0.5rem 0.75rem;
+	border-radius: 1rem;
+}
+.nxgt-calc-entry button {
+	max-width: 100%;
+	padding: 0;
+	border: 0;
+	border-radius: 0.375rem;
+	background: none;
+	color: inherit;
+	font: inherit;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+	text-align: right;
+	cursor: pointer;
+}
+.nxgt-calc-entry-expression {
+	color: var(--muted-foreground);
+	font-size: 0.875rem;
+}
+.nxgt-calc-entry-result {
+	font-size: 1.125rem;
+	font-weight: 500;
+}
+/* Below 720 the open tape takes the keypad's place (the tools row and the
+ * history toggle stay on screen); from 720 it is always beside it. */
+.nxgt-calc[data-tape-open] .nxgt-calc-keys {
+	display: none;
+}

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

@@ -0,0 +1,97 @@
+/* Calculator (`@nxgt/material/calculator`). Opt-in: the app imports
+ * `@nxgt/material/calculator.css` after styles.css; styles.css does not carry
+ * it. No inline style and no runtime <style>: everything
+ * that depends on the width is a container query on `.nxgt-calc`, so the
+ * server's first frame is already the right one.
+ *
+ * Bands of the calculator's own width: under 360 compact, 360-599 phone,
+ * 600-899 tablet, 900 and up desktop; the tape moves beside the keypad from
+ * 720. Direction B Expressive: shaped keys (a squircle for digits, pills for
+ * operators and "=", rounded squares for utilities), a large tonal display. */
+@import "./calculator-display.css";
+@import "./calculator-keys.css";
+@import "./calculator-tape.css";
+@import "./calculator-bands.css";
+@import "./calculator-pos.css";
+@import "./calculator-pos-ticket.css";
+@import "./variants/financial/financial.css";
+@import "./variants/programmer/programmer.css";
+@import "./variants/conversion/conversion.css";
+
+.nxgt-calc {
+	container: nxgt-calc / inline-size;
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	color: var(--foreground);
+}
+.nxgt-calc-tabs {
+	gap: 0.75rem;
+}
+.nxgt-calc-switcher {
+	max-width: 100%;
+	overflow-x: auto;
+}
+.nxgt-calc-panel {
+	outline: none;
+}
+.nxgt-calc-body {
+	--calc-gap: 0.5rem;
+	--calc-key: 3.25rem;
+	--calc-radius: 2rem;
+	--calc-result: 3rem;
+	position: relative;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.75rem;
+	padding-block-start: 0.5rem;
+}
+.nxgt-calc-main {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	min-width: 0;
+}
+.nxgt-calc-grow {
+	flex: 1 1 auto;
+}
+
+/* The body of a variant that is still loading: a display and a keypad of
+   skeleton keys, the same size as Standard's, so the frame does not jump when
+   the variant lands. A failed load keeps the shape, still, with its message. */
+.nxgt-calc-loading-display {
+	min-block-size: calc(var(--calc-result) + 3rem);
+	border-radius: var(--calc-radius);
+}
+.nxgt-calc-loading-pad {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	gap: var(--calc-gap);
+}
+.nxgt-calc-loading-pad > * {
+	block-size: var(--calc-key);
+	border-radius: var(--calc-radius);
+}
+.nxgt-calc-loading-message {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	min-block-size: calc(var(--calc-result) + 3rem);
+	padding: 0.5rem;
+	border-radius: var(--calc-radius);
+	background: var(--muted);
+	color: var(--foreground);
+	text-align: center;
+	font-weight: 500;
+}
+.nxgt-calc-loading[data-state="failed"] [data-slot="skeleton"] {
+	animation: none;
+	opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+	.nxgt-calc-loading [data-slot="skeleton"] {
+		animation: none;
+	}
+}

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

@@ -0,0 +1,98 @@
+/* Conversion: a category, a value, two units and the answer. Direction B
+ * Expressive: a tonal result card with the answer large in the primary colour,
+ * a tonal swap button. Sizes follow the calculator's own width (a container
+ * query on .nxgt-calc), so the server's first frame is already right. */
+.nxgt-conv {
+	display: flex;
+	flex-direction: column;
+	gap: 0.875rem;
+	min-width: 0;
+}
+.nxgt-conv-field {
+	display: grid;
+	gap: 0.375rem;
+	min-width: 0;
+}
+.nxgt-conv-units {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.5rem;
+	min-width: 0;
+}
+.nxgt-conv-units > .nxgt-conv-swap {
+	justify-self: center;
+}
+.nxgt-conv-result {
+	min-width: 0;
+	padding: 1rem 1.25rem;
+	border-radius: var(--calc-radius, 2rem);
+	background: var(--muted);
+}
+.nxgt-conv-value {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	min-width: 0;
+	color: var(--primary);
+	font-size: 2.25rem;
+	font-weight: 500;
+	line-height: 1.15;
+	letter-spacing: -0.02em;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+	text-align: right;
+}
+.nxgt-conv-value[data-size="long"] {
+	font-size: 1.5rem;
+}
+.nxgt-conv-unit {
+	color: var(--muted-foreground);
+	font-size: 1.125rem;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+.nxgt-conv-note {
+	margin: 0;
+	color: var(--muted-foreground);
+	font-size: 0.875rem;
+}
+.nxgt-conv-error {
+	margin: 0;
+	color: var(--destructive);
+	font-size: 0.875rem;
+	font-weight: 500;
+}
+.nxgt-conv-note.nxgt-conv-error {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+}
+@container nxgt-calc (min-width: 480px) {
+	.nxgt-conv-units {
+		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+		align-items: end;
+	}
+	.nxgt-conv-value {
+		font-size: 3rem;
+	}
+	.nxgt-conv-value[data-size="long"] {
+		font-size: 2rem;
+	}
+}
+@media (pointer: coarse) {
+	.nxgt-conv-swap {
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+	}
+}
+@media (forced-colors: active) {
+	.nxgt-conv-result {
+		border: 1px solid ButtonText;
+	}
+	.nxgt-conv-value {
+		color: CanvasText;
+	}
+}

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

@@ -0,0 +1,162 @@
+/* Financial: the four calculations in sub-tabs. Direction B Expressive: a
+ * tonal results card with the answer large, pill choices, a captioned table.
+ * Sizes follow the calculator's own width (a container query on .nxgt-calc). */
+.nxgt-fin-tabs {
+	gap: 0.75rem;
+	min-width: 0;
+}
+.nxgt-fin-tabs .nxgt-fin-tablist {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	width: 100%;
+	max-width: 100%;
+}
+.nxgt-fin-tabs .nxgt-fin-tablist [role="tab"] {
+	min-width: 0;
+	padding-inline: 0.25rem;
+	font-size: 0.8125rem;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.nxgt-fin-body {
+	min-width: 0;
+	outline: none;
+}
+.nxgt-fin-body[hidden] {
+	display: none;
+}
+.nxgt-fin-panel {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	min-width: 0;
+}
+.nxgt-fin-panel > .nxgt-calc-segment {
+	align-self: flex-start;
+	max-width: 100%;
+	flex-wrap: wrap;
+	border-radius: 1.25rem;
+}
+.nxgt-fin-fields {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.75rem;
+}
+.nxgt-fin-field {
+	min-width: 0;
+}
+.nxgt-fin-results {
+	min-width: 0;
+	padding: 1rem;
+	border-radius: var(--calc-radius, 2rem);
+	background: var(--muted);
+}
+.nxgt-fin-hint,
+.nxgt-fin-error {
+	margin: 0;
+	color: var(--muted-foreground);
+	font-size: 0.875rem;
+}
+.nxgt-fin-error {
+	color: var(--destructive);
+	font-weight: 500;
+}
+.nxgt-fin-figures {
+	display: grid;
+	gap: 0.5rem;
+	margin: 0;
+}
+.nxgt-fin-figures > div {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: space-between;
+	column-gap: 0.75rem;
+	min-width: 0;
+}
+.nxgt-fin-figures dt {
+	color: var(--muted-foreground);
+	font-size: 0.875rem;
+}
+.nxgt-fin-figures dd {
+	margin: 0;
+	min-width: 0;
+	font-size: 1.125rem;
+	font-variant-numeric: tabular-nums;
+	overflow-wrap: anywhere;
+	text-align: right;
+}
+.nxgt-fin-figures > div[data-main] {
+	flex-direction: column;
+	align-items: flex-end;
+	padding-block-end: 0.5rem;
+	border-block-end: 1px solid var(--border);
+}
+.nxgt-fin-figures > div[data-main] dd {
+	color: var(--primary);
+	font-size: 1.75rem;
+	font-weight: 600;
+	letter-spacing: -0.02em;
+}
+.nxgt-fin-table-wrap {
+	max-width: 100%;
+	overflow-x: auto;
+	border-radius: 1rem;
+	background: var(--muted);
+}
+.nxgt-fin-table-wrap:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+.nxgt-fin-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.75rem;
+	font-variant-numeric: tabular-nums;
+}
+.nxgt-fin-table caption {
+	padding: 0.5rem 0.5rem 0.25rem;
+	color: var(--muted-foreground);
+	font-size: 0.8125rem;
+	text-align: start;
+}
+.nxgt-fin-table th,
+.nxgt-fin-table td {
+	padding: 0.25rem 0.375rem;
+	text-align: right;
+	white-space: nowrap;
+}
+.nxgt-fin-table thead th {
+	color: var(--muted-foreground);
+	font-weight: 500;
+}
+.nxgt-fin-table tbody tr:nth-child(even) {
+	background: color-mix(in oklab, var(--foreground) 4%, transparent);
+}
+.nxgt-fin-table tbody th {
+	font-weight: 500;
+}
+@container nxgt-calc (min-width: 480px) {
+	.nxgt-fin-fields {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.nxgt-fin-table {
+		font-size: 0.875rem;
+	}
+}
+@container nxgt-calc (min-width: 720px) {
+	.nxgt-fin-fields {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+@media (pointer: coarse) {
+	.nxgt-fin-tabs .nxgt-fin-tablist [role="tab"] {
+		min-height: 2.75rem;
+	}
+}
+@media (forced-colors: active) {
+	.nxgt-fin-results,
+	.nxgt-fin-table-wrap {
+		border: 1px solid ButtonText;
+	}
+}