@nxgt/material 3.79.1 → 3.81.0

package/dist/components/ui/actions/fab/fab-dock.css

@@ -1,6 +1,9 @@
 /* FabDock: the bottom-end corner, 16px in (24px from 840px wide, M3's
- * medium window), above the home indicator and above a docked bar that
- * sets --nxgt-media-dock. `contained` places it in its positioned parent.
+ * medium window), above the home indicator, above a docked bar that sets
+ * --nxgt-media-dock and above a bottom navigation bar (--nxgt-nav-bar);
+ * --nxgt-bottom-chrome is the two together. The bar's room holds the
+ * safe area, so the dock clears the taller of the two, not their sum. `contained` places it in its
+ * positioned parent.
  * While a FabMenu in it is open, a light scrim covers the page (contained:
  * the pane) behind the pills. The menu is modal, so the whole page is inert
  * either way. */
@@ -11,8 +14,13 @@
 		inset-inline-end: var(--fab-dock-gap);
 		inset-block-end: calc(
 			var(--fab-dock-gap) +
-			env(safe-area-inset-bottom, 0px) +
-			var(--nxgt-media-dock, 0px)
+			max(
+				env(safe-area-inset-bottom, 0px),
+				var(
+					--nxgt-bottom-chrome,
+					calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+				)
+			)
 		);
 		z-index: 40;
 		display: flex;
@@ -33,8 +41,13 @@
 		padding: var(--fab-dock-gap);
 		padding-block-end: calc(
 			var(--fab-dock-gap) +
-			env(safe-area-inset-bottom, 0px) +
-			var(--nxgt-media-dock, 0px)
+			max(
+				env(safe-area-inset-bottom, 0px),
+				var(
+					--nxgt-bottom-chrome,
+					calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+				)
+			)
 		);
 	}
 	@media (min-width: 840px) {

package/dist/components/ui/collections/data-table/data-table-items-tiles.css

@@ -65,8 +65,34 @@
 		) {
 		outline-offset: -2px;
 	}
-	/* The checkbox is centred on the tile, not pinned to its corner. */
+	/* The checkbox sits on the tile's title row (#2391): its centre on the
+	 * title's first line (1rem at 1.4, so 0.7rem under the tile's padding), not
+	 * the tile's middle, which a multi-line tile moves down to the body text.
+	 * The 36px box (44px on a coarse pointer) then starts at the padding minus
+	 * the half-box plus the half-line. The tile's content starts at the top so
+	 * the title is where the box expects it. */
+	[data-slot="data-table-tiles"]
+	> [data-slot="data-table-item"]:not(:has([data-slot="data-table-record"])) {
+		align-content: start;
+	}
 	[data-slot="data-table-tiles"] [data-slot="data-table-item-select"] {
+		inset-block-start: 0.325rem;
+	}
+	[data-slot="data-table-tiles"][data-density="compact"]
+		[data-slot="data-table-item-select"] {
+		inset-block-start: 0.075rem;
+	}
+	@media (pointer: coarse) {
+		[data-slot="data-table-tiles"] [data-slot="data-table-item-select"],
+		[data-slot="data-table-tiles"][data-density="compact"]
+			[data-slot="data-table-item-select"] {
+			inset-block-start: 0.075rem;
+		}
+	}
+	/* A record row is one dense line: its box stays centred on it. */
+	[data-slot="data-table-tiles"]
+		> [data-slot="data-table-item"]:has([data-slot="data-table-record"])
+		[data-slot="data-table-item-select"] {
 		inset-block-start: 50%;
 		translate: 0 -50%;
 	}

package/dist/components/ui/display/tube-cap/tube-cap.css

@@ -0,0 +1,87 @@
+/* TubeCap: a specimen tube's chip. The cap colours are the international tube
+ * convention, so they are fixed values, not theme tokens: the same in light
+ * and dark and in every theme. The swatch carries no text; the name beside it
+ * keeps the theme's foreground (AA by the theme), and a hairline in the
+ * foreground colour keeps a black or pale cap visible on either scheme. */
+@layer components {
+	.nxgt-tube-cap {
+		--tube-cap: oklch(0.92 0 0);
+		--tube-cap-size: 1.75rem;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		max-inline-size: 100%;
+		min-inline-size: 0;
+		padding: 0.25rem 0.625rem 0.25rem 0.25rem;
+		border: 1px solid var(--border);
+		border-radius: 9999px;
+		background: var(--card, var(--background));
+		color: var(--foreground);
+		font-size: 0.875rem;
+		line-height: 1.25;
+	}
+	.nxgt-tube-cap[data-size="sm"] {
+		--tube-cap-size: 1.25rem;
+		font-size: 0.8125rem;
+	}
+	.nxgt-tube-cap[data-size="lg"] {
+		--tube-cap-size: 2.5rem;
+		font-size: 1rem;
+	}
+	.nxgt-tube-cap[data-kind="edta"] {
+		--tube-cap: oklch(0.62 0.13 300);
+	}
+	.nxgt-tube-cap[data-kind="heparin"] {
+		--tube-cap: oklch(0.62 0.17 145);
+	}
+	.nxgt-tube-cap[data-kind="citrate"] {
+		--tube-cap: oklch(0.8 0.1 230);
+	}
+	.nxgt-tube-cap[data-kind="esr"] {
+		--tube-cap: oklch(0.22 0 0);
+	}
+	.nxgt-tube-cap[data-kind="serum"] {
+		--tube-cap: oklch(0.55 0.21 27);
+	}
+	.nxgt-tube-cap[data-kind="gel"] {
+		--tube-cap: oklch(0.82 0.15 85);
+	}
+	.nxgt-tube-cap[data-kind="fluoride"] {
+		--tube-cap: oklch(0.68 0.01 260);
+	}
+	.nxgt-tube-cap[data-kind="trace"] {
+		--tube-cap: oklch(0.45 0.18 262);
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-swatch"] {
+		flex: none;
+		box-sizing: border-box;
+		inline-size: var(--tube-cap-size);
+		block-size: var(--tube-cap-size);
+		border-radius: 9999px;
+		background: var(--tube-cap);
+		box-shadow: 0 0 0 1px
+			color-mix(in oklab, var(--foreground) 45%, transparent);
+		forced-color-adjust: none;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-text"] {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		column-gap: 0.5rem;
+		min-inline-size: 0;
+		overflow-wrap: anywhere;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-label"] {
+		font-weight: 600;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-volume"],
+	.nxgt-tube-cap [data-slot="tube-cap-accession"] {
+		color: var(--muted-foreground);
+		font-variant-numeric: tabular-nums;
+	}
+	.nxgt-tube-cap [data-slot="tube-cap-action"] {
+		display: inline-flex;
+		flex: none;
+		margin-inline-start: 0.125rem;
+	}
+}

package/dist/components/ui/layout/app-search/app-search.css

@@ -0,0 +1,62 @@
+/* The app bar's search (app-search-bar.tsx, search-view.tsx). One source for
+ * the sizes: --nxgt-search-h is the pill's height, 2.75rem in the bar and
+ * 3rem (a 48px target) in the phone's full-screen view; the back arrow, the
+ * phone's button and the field read it. The pill is a filled, fully rounded
+ * field box: no border at rest, the field box's focus ring when focused.
+ * Classes in the `components` layer: a utility passed as `className` wins. */
+@layer components {
+	.nxgt-search-bar {
+		--nxgt-search-h: 2.75rem;
+	}
+	.nxgt-search-button {
+		--nxgt-search-h: 3rem;
+	}
+	.nxgt-search-view {
+		--nxgt-search-h: 3rem;
+	}
+	.nxgt-search-pill {
+		--nxgt-field-radius: calc(var(--nxgt-search-h) / 2);
+	}
+	.nxgt-search-pill [data-slot="input-group"] {
+		height: var(--nxgt-search-h);
+		border-color: transparent;
+		background-color: var(--muted);
+	}
+	.nxgt-search-pill [data-slot="input-group"]:focus-within {
+		background-color: var(--background);
+	}
+	/* The bar's pill: grows to a comfortable width and gives way to the title. */
+	.nxgt-search-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 0 1 28rem;
+		min-width: 0;
+	}
+	.nxgt-search-form {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.nxgt-search-button {
+		flex: none;
+	}
+	.nxgt-search-view-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		padding-top: max(0.5rem, env(safe-area-inset-top));
+		padding-left: max(0.5rem, env(safe-area-inset-left));
+		padding-right: max(0.5rem, env(safe-area-inset-right));
+	}
+	.nxgt-search-view-back {
+		flex: none;
+	}
+	.nxgt-search-view-results {
+		min-height: 0;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0.5rem 1rem;
+		padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+	}
+}

package/dist/components/ui/layout/app-shell/activity-backdrop.css

@@ -82,8 +82,16 @@
 		--nxgt-backdrop-height: calc(
 			100dvh -
 			var(--nxgt-backdrop-top) -
-			max(0.5rem, env(safe-area-inset-bottom)) -
-			var(--nxgt-media-dock, 0px)
+			max(
+				max(0.5rem, env(safe-area-inset-bottom)),
+				calc(
+					0.5rem +
+					var(
+						--nxgt-bottom-chrome,
+						calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+					)
+				)
+			)
 		);
 		position: sticky;
 		top: var(--nxgt-backdrop-top);

package/dist/components/ui/layout/app-shell/app-header.css

@@ -0,0 +1,108 @@
+/* The app bar's variants (app-header.tsx). A medium or large bar is a first row
+ * (the small bar) and a headline row under it. `--nxgt-header-progress` (0
+ * expanded, 1 collapsed) is set on the bar by use-header-scroll.ts as the shell
+ * scrolls; unset (the server, a bar outside the shell) it is 0, the expanded
+ * bar. Scoped to the bar's `data-variant`: the default small bar is untouched. */
+[data-slot="app-header"][data-variant="medium"] {
+	--nxgt-header-extra: 5rem;
+}
+[data-slot="app-header"][data-variant="large"] {
+	--nxgt-header-extra: 8rem;
+}
+/* The bar's height now: the row, and the headline's share still showing. */
+[data-slot="app-header"][data-variant] {
+	--nxgt-header-h: var(--nxgt-header-height);
+}
+[data-slot="app-header"]:is([data-variant="medium"], [data-variant="large"]) {
+	--nxgt-header-h: calc(
+		var(--nxgt-header-height) +
+		var(--nxgt-header-extra) *
+		(1 - var(--nxgt-header-progress, 0))
+	);
+	height: var(--nxgt-header-h);
+}
+[data-slot="app-header-headline"] {
+	min-height: 0;
+	opacity: clamp(0, calc(1 - var(--nxgt-header-progress, 0) * 1.6), 1);
+	transform: translateY(calc(var(--nxgt-header-progress, 0) * -0.75rem));
+}
+/* Not collapsing: the headline stays. */
+[data-slot="app-header"]:not([data-collapsible])
+[data-slot="app-header-headline"] {
+	opacity: 1;
+	transform: none;
+}
+/* The copy of the title in the small row appears once the headline is going. */
+[data-slot="app-header-collapsed-title"] {
+	opacity: clamp(0, calc((var(--nxgt-header-progress, 0) - 0.5) * 2), 1);
+}
+
+/* Hide on scroll: the bar slides up under the gutter, and out of the tab order
+ * (`inert`, set with data-hidden). A bar in a contained shell is in the flow,
+ * so it also gives its room back. */
+[data-slot="app-header"][data-variant] {
+	transition: transform 200ms ease;
+}
+[data-slot="app-header"][data-hidden] {
+	transform: translateY(calc(-100% - 1rem - env(safe-area-inset-top, 0px)));
+}
+[data-slot="activity-layout"][data-scroll="container"]
+	[data-slot="app-header"][data-hidden] {
+	margin-bottom: calc(-1 * var(--nxgt-header-h) - 0.5rem);
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-slot="app-header"][data-variant] {
+		transition: none;
+	}
+}
+
+/* Tabs: a row of one size under the bar, stuck to it (app-header.tsx). The bar
+ * is that much taller; while it hides on scroll it slides up by everything but
+ * the tabs, which stay pinned at the top of the window. */
+[data-slot="app-header"] {
+	--nxgt-header-tabs: 3rem;
+}
+[data-slot="app-header"][data-tabs]:is(
+	[data-variant="medium"],
+	[data-variant="large"]
+) {
+	height: calc(var(--nxgt-header-h) + var(--nxgt-header-tabs));
+}
+[data-slot="app-header"][data-tabs][data-hidden] {
+	transform: translateY(calc(var(--nxgt-header-tabs) - 100%));
+}
+[data-slot="activity-layout"][data-scroll="container"]
+	[data-slot="app-header"][data-tabs][data-hidden] {
+	margin-bottom: calc(-1 * var(--nxgt-header-h));
+}
+/* The headline's bottom padding goes with the collapse when tabs close the bar,
+ * else it would keep 1rem the tabs have no room for. */
+[data-slot="app-header"][data-tabs] [data-slot="app-header-headline"] {
+	padding-bottom: calc(1rem * (1 - var(--nxgt-header-progress, 0)));
+}
+[data-slot="app-header"][data-tabs]:not([data-collapsible])
+	[data-slot="app-header-headline"] {
+	padding-bottom: 1rem;
+}
+
+/* The bar's whole height on the layout root (ActivityLayout sets data-header and
+ * data-header-tabs on it: nothing restyles the page from a descendant), for the sticky panels
+ * (sticky-offset.ts): worked out here from the bar's variant and tabs so the
+ * server's first paint is right; use-header-height.ts then replaces it with the
+ * measured height (a custom row, a wrapped tab bar). */
+[data-slot="activity-layout"] {
+	--nxgt-header-total: calc(
+		var(--nxgt-header-height, 4rem) +
+		var(--nxgt-header-total-extra, 0rem) +
+		var(--nxgt-header-total-tabs, 0rem)
+	);
+}
+[data-slot="activity-layout"][data-header="medium"] {
+	--nxgt-header-total-extra: 5rem;
+}
+[data-slot="activity-layout"][data-header="large"] {
+	--nxgt-header-total-extra: 8rem;
+}
+[data-slot="activity-layout"][data-header-tabs] {
+	--nxgt-header-total-tabs: 3rem;
+}

package/dist/components/ui/layout/navigation-toolbar/navigation-toolbar.css

@@ -0,0 +1,43 @@
+/* The navigation toolbar: the floating Toolbar's pill (its tokens, shadow and
+ * the slide away, toolbar.css and toolbar-variants.css, are used as they are)
+ * holding navigation links instead of actions. What differs: it is fixed at
+ * the bottom centre, an item is a 48px link at every pointer, and the current
+ * page (data-active, beside aria-current) takes the pressed look of toolbar-selected.css. Sizes
+ * are mirrored in navigation-toolbar.classes.ts. */
+@layer components {
+	.nxgt-toolbar.nxgt-nav-toolbar {
+		--nxgt-nav-toolbar-gap: 1rem;
+		--tb-item: 3rem;
+		--tb-icon: 1.5rem;
+		position: fixed;
+		inset-inline: 0;
+		/* A docked media bar sits above the pill (its bottom is --nxgt-nav-bar). */
+		bottom: calc(
+			env(safe-area-inset-bottom, 0px) +
+			var(--nxgt-nav-toolbar-gap)
+		);
+		z-index: 30;
+		margin-inline: auto;
+		max-width: calc(100% - 1rem);
+	}
+	.nxgt-nav-toolbar .nxgt-toolbar-item {
+		text-decoration: none;
+	}
+	.nxgt-nav-toolbar .nxgt-toolbar-item[data-active],
+	.nxgt-nav-toolbar .nxgt-toolbar-item[data-active]:is(:hover, :active) {
+		background: var(--tb-on);
+		color: var(--tb-on-fg);
+	}
+	/* Reduced motion: it snaps away instead of sliding. */
+	@media (prefers-reduced-motion: reduce) {
+		.nxgt-toolbar.nxgt-nav-toolbar {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		.nxgt-nav-toolbar .nxgt-toolbar-item[data-active] {
+			outline: 2px solid Highlight;
+			outline-offset: -2px;
+		}
+	}
+}