@nxgt/material 3.48.0 → 3.50.0

package/dist/code-editor.js

@@ -1,26 +1,26 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-CsLGJMEJ.js";
-import { t as o } from "./use-material-translation-DOkTaWK_.js";
-import { i as s, n as c, o as l } from "./code-language-items-DAHtfQ7W.js";
-import { r as u, t as d } from "./field-blur-CJHzVSh9.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-CIMo4F9q.js";
+import { t as o } from "./use-material-translation-DWWeeg-B.js";
+import { i as s, n as c, o as l } from "./code-language-items-BKEUhQlF.js";
+import { r as u, t as d } from "./field-blur-5uRDFHvB.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-C9qBNoYb.js";
-import { ChevronDown as k, ChevronUp as A, Columns2 as j } from "lucide-react";
-import { useEffect as M, useRef as N, useState as P } from "react";
-import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-R_nPN_-d.js";
+import { useEffect as k, useRef as A, useState as j } from "react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+import { ChevronDown as F, ChevronUp as I, Columns2 as L } from "lucide-react";
 //#region lib/components/ui/widgets/code-editor/code-editor-form-field.tsx
 function R({ control: e, name: t, ...n }) {
-	return /* @__PURE__ */ I(u, {
+	return /* @__PURE__ */ N(u, {
 		control: e,
 		name: t,
-		render: ({ field: e, fieldState: t }) => /* @__PURE__ */ I(d, {
+		render: ({ field: e, fieldState: t }) => /* @__PURE__ */ N(d, {
 			onBlur: e.onBlur,
 			focusRef: e.ref,
-			children: /* @__PURE__ */ I(D, {
+			children: /* @__PURE__ */ N(D, {
 				...n,
 				name: e.name,
 				value: e.value ?? "",
@@ -41,18 +41,18 @@ function z(e) {
 //#region lib/components/ui/widgets/code-editor/diff/code-diff-parts.tsx
 function B({ added: e, removed: t }) {
 	let { t: n } = o();
-	return /* @__PURE__ */ L("span", {
+	return /* @__PURE__ */ P("span", {
 		className: "nxgt-code-diff-totals",
 		children: [
-			/* @__PURE__ */ L("ins", {
+			/* @__PURE__ */ P("ins", {
 				"aria-hidden": !0,
 				children: ["+", e]
 			}),
-			/* @__PURE__ */ L("del", {
+			/* @__PURE__ */ P("del", {
 				"aria-hidden": !0,
 				children: ["−", t]
 			}),
-			/* @__PURE__ */ I("span", {
+			/* @__PURE__ */ N("span", {
 				className: "sr-only",
 				children: n("material.code.diff-totals", "{added, plural, one {# line added} other {# lines added}}, {removed, plural, other {# removed}}", {
 					added: e,
@@ -67,18 +67,18 @@ function V({ index: e, count: t, language: n, children: r }) {
 		index: e + 1,
 		count: t
 	});
-	return /* @__PURE__ */ L("div", {
+	return /* @__PURE__ */ P("div", {
 		"data-slot": "code-diff-status",
 		className: "nxgt-code-status",
 		children: [
 			r,
-			/* @__PURE__ */ I("span", {
+			/* @__PURE__ */ N("span", {
 				"aria-hidden": e >= 0 || void 0,
 				children: a
 			}),
-			/* @__PURE__ */ I("span", { className: "nxgt-code-status-gap" }),
-			/* @__PURE__ */ I("span", { children: s(n) }),
-			/* @__PURE__ */ I(p, {
+			/* @__PURE__ */ N("span", { className: "nxgt-code-status-gap" }),
+			/* @__PURE__ */ N("span", { children: s(n) }),
+			/* @__PURE__ */ N(p, {
 				slot: "code-diff-change-status",
 				children: e < 0 ? null : a
 			})
@@ -89,7 +89,7 @@ function V({ index: e, count: t, language: n, children: r }) {
 //#region lib/components/ui/widgets/code-editor/diff/code-diff-toolbar.tsx
 function H({ sideBySide: e, onSideBySideChange: t, changeCount: s, onStep: u, getCode: d }) {
 	let { t: f } = o(), { status: p, copy: m } = l();
-	return /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ L(n, {
+	return /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ P(n, {
 		label: f("material.code.diff-tools", "Diff tools"),
 		variant: "floating",
 		selectedLook: "morph",
@@ -99,34 +99,34 @@ function H({ sideBySide: e, onSideBySideChange: t, changeCount: s, onStep: u, ge
 		moreLabel: f("material.code.more-tools", "More code tools"),
 		className: "nxgt-code-toolbar",
 		children: [
-			t && /* @__PURE__ */ I(r, {
-				icon: /* @__PURE__ */ I(j, {}),
+			t && /* @__PURE__ */ N(r, {
+				icon: /* @__PURE__ */ N(L, {}),
 				label: f("material.code.side-by-side", "Side by side"),
 				priority: 1,
 				pressed: !!e,
 				onPressedChange: t
 			}),
-			/* @__PURE__ */ L(a, {
+			/* @__PURE__ */ P(a, {
 				label: f("material.code.changes", "Changes"),
 				priority: 3,
-				children: [/* @__PURE__ */ I(i, {
-					icon: /* @__PURE__ */ I(A, {}),
+				children: [/* @__PURE__ */ N(i, {
+					icon: /* @__PURE__ */ N(I, {}),
 					label: f("material.code.previous-change", "Previous change"),
 					disabled: !s,
 					onClick: () => u(-1)
-				}), /* @__PURE__ */ I(i, {
-					icon: /* @__PURE__ */ I(k, {}),
+				}), /* @__PURE__ */ N(i, {
+					icon: /* @__PURE__ */ N(F, {}),
 					label: f("material.code.next-change", "Next change"),
 					disabled: !s,
 					onClick: () => u(1)
 				})]
 			}),
-			/* @__PURE__ */ I(T, {
+			/* @__PURE__ */ N(T, {
 				status: p,
 				onCopy: () => void m(d())
 			})
 		]
-	}), /* @__PURE__ */ I(c, {
+	}), /* @__PURE__ */ N(c, {
 		slot: "code-diff-copy-status",
 		status: p
 	})] });
@@ -151,8 +151,8 @@ function K(e, t, n) {
 //#endregion
 //#region lib/components/ui/widgets/code-editor/diff/use-diff-changes.ts
 function q(e) {
-	let [t, n] = P([]), [r, i] = P(-1);
-	return M(() => {
+	let [t, n] = j([]), [r, i] = j(-1);
+	return k(() => {
 		if (!e) return;
 		let t = () => {
 			n(e.getLineChanges() ?? []), i(-1);
@@ -177,8 +177,8 @@ function q(e) {
 //#endregion
 //#region lib/components/ui/widgets/code-editor/diff/use-narrower.ts
 function J(e, t) {
-	let [n, r] = P(!1);
-	return M(() => {
+	let [n, r] = j(!1);
+	return k(() => {
 		let n = e.current;
 		if (!n || typeof ResizeObserver > "u") return;
 		let i = new ResizeObserver(([e]) => r(e.contentRect.width < t));
@@ -193,24 +193,24 @@ function X(n) {
 		prop: n.sideBySide,
 		defaultProp: n.defaultSideBySide ?? !0,
 		onChange: n.onSideBySideChange
-	}), [C, T] = P(), { changes: D, index: O, go: k } = q(C), A = $(), j = Z(h(n.label) || h(n.filename)), M = (e, t) => {
+	}), [C, T] = j(), { changes: D, index: O, go: k } = q(C), A = $(), M = Z(h(n.label) || h(n.filename)), F = (e, t) => {
 		A.keep(e), _(t), T(e);
 	};
-	return /* @__PURE__ */ L("div", {
+	return /* @__PURE__ */ P("div", {
 		ref: l.surfaceRef,
 		...l.surfaceProps,
 		"data-slot": "code-diff",
 		className: e("nxgt-code-frame", l.surfaceClass, n.className),
 		children: [
-			s && /* @__PURE__ */ L("div", {
+			s && /* @__PURE__ */ P("div", {
 				className: "nxgt-code-head",
 				children: [
-					n.filename && /* @__PURE__ */ I("span", {
+					n.filename && /* @__PURE__ */ N("span", {
 						className: "nxgt-code-filename",
 						children: n.filename
 					}),
-					C && /* @__PURE__ */ I(B, { ...W(D) }),
-					/* @__PURE__ */ I(H, {
+					C && /* @__PURE__ */ N(B, { ...W(D) }),
+					/* @__PURE__ */ N(H, {
 						sideBySide: g,
 						onSideBySideChange: p ? void 0 : S,
 						changeCount: D.length,
@@ -219,7 +219,7 @@ function X(n) {
 					})
 				]
 			}),
-			c ? /* @__PURE__ */ I(y, { height: o }) : /* @__PURE__ */ I(w, {
+			c ? /* @__PURE__ */ N(y, { height: o }) : /* @__PURE__ */ N(w, {
 				original: r,
 				modified: i,
 				language: a,
@@ -228,17 +228,17 @@ function X(n) {
 				height: o,
 				keepCurrentOriginalModel: !0,
 				keepCurrentModifiedModel: !0,
-				onMount: M,
+				onMount: F,
 				options: {
 					...Q(l.overflow, g && !p),
-					...j
+					...M
 				},
-				loading: /* @__PURE__ */ I(f, {
+				loading: /* @__PURE__ */ N(f, {
 					style: { height: o },
 					className: "w-full"
 				})
 			}),
-			s && /* @__PURE__ */ I(V, {
+			s && /* @__PURE__ */ N(V, {
 				index: O,
 				count: D.length,
 				language: a
@@ -265,8 +265,8 @@ function Q(e, t) {
 	};
 }
 function $() {
-	let e = N([]);
-	return M(() => () => {
+	let e = A([]);
+	return k(() => () => {
 		let t = e.current;
 		e.current = [], queueMicrotask(() => {
 			for (let e of t) e.dispose();

package/dist/{code-language-items-DAHtfQ7W.js → code-language-items-BKEUhQlF.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-Df8785nt.js";
-import { t as n } from "./use-material-translation-DOkTaWK_.js";
+import { d as e, f as t } from "./dropdown-menu-XLlxfDgq.js";
+import { t as n } from "./use-material-translation-DWWeeg-B.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";

package/dist/components/components.css

@@ -191,6 +191,7 @@
 @import "./ui/feedback/toast/toast-tokens.css";
 @import "./ui/actions/action-card/action-card.css";
 @import "./ui/actions/action-card/action-card-indicator.css";
+@import "./ui/actions/action-card/action-card-tile.css";
 @import "./ui/actions/action-card/action-card-modes.css";
 @import "./ui/media/galleries/gallery-image-lists.css";
 /* Gallery: the View Transition from a tile to its lightbox. */

package/dist/components/ui/actions/action-card/action-card-indicator.css

@@ -37,4 +37,52 @@
 	.nxgt-action-card[data-active] .nxgt-action-card-indicator svg {
 		stroke-dashoffset: 0;
 	}
+
+	/* The indicator takes its own column, after the action, only when shown. */
+	.nxgt-action-card[data-size="tile"]:has(> .nxgt-action-card-indicator) {
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-areas: "title ind" "status status" "desc desc" "meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-icon]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			"icon title ind"
+			". status status"
+			". desc desc"
+			". meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+		grid-template-areas:
+			"title act ind"
+			"status status status"
+			"desc desc desc"
+			"meta meta meta";
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action][data-icon]:has(
+		> .nxgt-action-card-indicator
+	) {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		grid-template-areas:
+			"icon title act ind"
+			". status status status"
+			". desc desc desc"
+			". meta meta meta";
+	}
+
+	/* The indicator is centred on the title row (36px high). */
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-indicator {
+		align-self: start;
+		margin-block: 5px;
+	}
+
+	/* The action is no longer at the card's edge: no optical offset. */
+	.nxgt-action-card[data-size="tile"]:has(> .nxgt-action-card-indicator)
+	.nxgt-action-card-action {
+		margin-inline-end: 0;
+	}
 }

package/dist/components/ui/actions/action-card/action-card-modes.css

@@ -7,7 +7,10 @@
 		.nxgt-action-card * {
 			transition: none;
 		}
-		.nxgt-action-card[data-interactive]:not([data-disabled]):active {
+		.nxgt-action-card[data-interactive]:not([data-disabled]):active,
+		.nxgt-action-card[data-has-action][data-interactive]:not(
+				[data-disabled]
+			):has(.nxgt-action-card-button:active) {
 			scale: none;
 			--ac-r: 12px;
 		}

package/dist/components/ui/actions/action-card/action-card-tile.css

@@ -0,0 +1,141 @@
+/* biome-ignore-all lint/style/noDescendingSpecificity: states are grouped by meaning, not by specificity */
+/* ActionCard status, meta, action and the tile variant. Loaded after
+ * action-card.css and the indicator. With an `action` the title is the card's
+ * one button: its ::after covers the card, and the action sits above it. */
+@layer components {
+	.nxgt-action-card-status {
+		display: flex;
+		margin-top: 4px;
+		min-width: 0;
+	}
+	.nxgt-action-card-meta {
+		display: block;
+		margin-top: 2px;
+		min-width: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: color-mix(in oklab, var(--card-foreground) 70%, var(--card));
+	}
+
+	/* The title button: the card's press surface. */
+	.nxgt-action-card-button {
+		display: inline;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		letter-spacing: inherit;
+		text-align: start;
+		cursor: pointer;
+		outline: none;
+	}
+	.nxgt-action-card-button::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		z-index: 0;
+	}
+	.nxgt-action-card-button:disabled {
+		cursor: not-allowed;
+	}
+	.nxgt-action-card:has(.nxgt-action-card-button:focus-visible) {
+		outline: 3px solid var(--ac-ring);
+		outline-offset: -3px;
+	}
+
+	/* The action: its own grid area, above the stretched button. */
+	.nxgt-action-card-action {
+		grid-area: act;
+		position: relative;
+		z-index: 1;
+		justify-self: end;
+		display: inline-flex;
+		margin-inline-end: -8px;
+	}
+	.nxgt-action-card[data-has-action] {
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		grid-template-areas: "icon text act ind";
+	}
+	.nxgt-action-card[data-has-action][data-size="md"] {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas: "icon act ind" "text text text";
+	}
+	.nxgt-action-card[data-has-action][data-size="md"]:not([data-icon]) {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+		grid-template-areas: "text act ind";
+	}
+
+	/* Tile: a compact grid cell, title and action on the first row, then the
+	 * status, the description and the meta line, each full width. The text
+	 * wrapper dissolves so its children take the areas. */
+	.nxgt-action-card[data-size="tile"] {
+		grid-template-columns: minmax(0, 1fr) auto;
+		grid-template-areas: "title act" "status status" "desc desc" "meta meta";
+		align-items: start;
+		/* A taller neighbour stretches the card: keep the rows at the top. */
+		align-content: start;
+		row-gap: 0;
+		column-gap: 8px;
+		min-height: 0;
+		min-width: 0;
+		padding-block: 12px;
+		padding-inline: 16px 12px;
+	}
+	.nxgt-action-card[data-size="tile"][data-icon] {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			"icon title act"
+			". status status"
+			". desc desc"
+			". meta meta";
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-icon {
+		width: 36px;
+		height: 36px;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-text {
+		display: contents;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-title {
+		grid-area: title;
+		align-self: center;
+		min-height: 36px;
+		display: flex;
+		align-items: center;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-description {
+		grid-area: desc;
+		margin-top: 2px;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-status {
+		grid-area: status;
+	}
+	.nxgt-action-card[data-size="tile"] .nxgt-action-card-meta {
+		grid-area: meta;
+	}
+	.nxgt-action-card[data-size="tile"][data-has-action]
+		.nxgt-action-card-action {
+		align-self: start;
+	}
+
+	@media (forced-colors: active) {
+		.nxgt-action-card:has(.nxgt-action-card-button:focus-visible) {
+			outline: 3px solid CanvasText;
+			outline-offset: -5px;
+		}
+		.nxgt-action-card-meta {
+			color: CanvasText;
+		}
+		/* a chosen tile's border is 2px here: the content keeps its place */
+		.nxgt-action-card[data-size="tile"][data-active] {
+			padding-block: 11px;
+			padding-inline: 15px 11px;
+		}
+	}
+}

package/dist/components/ui/actions/action-card/action-card.css

@@ -125,13 +125,43 @@
 	.nxgt-action-card[data-interactive]:not([data-disabled]) {
 		cursor: pointer;
 	}
-	.nxgt-action-card[data-interactive]:not([data-disabled]):hover {
+	.nxgt-action-card[data-interactive]:not(
+		[data-has-action],
+		[data-disabled]
+	):hover {
 		--ac-tint: 11%;
 	}
-	.nxgt-action-card[data-interactive][data-active]:not([data-disabled]):hover {
+	.nxgt-action-card[data-interactive][data-active]:not(
+		[data-has-action],
+		[data-disabled]
+	):hover {
 		--ac-tint: 21%;
 	}
-	.nxgt-action-card[data-interactive]:not([data-disabled]):active {
+	.nxgt-action-card[data-interactive]:not(
+		[data-has-action],
+		[data-disabled]
+	):active {
+		--ac-tint: 15%;
+		--ac-r: 16px;
+		scale: 0.97;
+	}
+
+	/* With an action, only the title button answers hover and press (its
+	 * stretched ::after covers the card, padding included); the action does
+	 * not. The rules above leave these cards to the ones below. */
+	.nxgt-action-card[data-has-action][data-interactive]:not([data-disabled]):has(
+		.nxgt-action-card-button:hover
+	) {
+		--ac-tint: 11%;
+	}
+	.nxgt-action-card[data-has-action][data-interactive][data-active]:not(
+		[data-disabled]
+	):has(.nxgt-action-card-button:hover) {
+		--ac-tint: 21%;
+	}
+	.nxgt-action-card[data-has-action][data-interactive]:not([data-disabled]):has(
+		.nxgt-action-card-button:active
+	) {
 		--ac-tint: 15%;
 		--ac-r: 16px;
 		scale: 0.97;