@nxgt/material 3.36.0 → 3.38.0

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

@@ -0,0 +1,189 @@
+/* ServerTable's second header row below 768px (#1719): the list's "Select all"
+ * (or the count and "Clear selection") at the start; the sort, "Filters (N)"
+ * and the page's actions at the end. Logical properties throughout. The list
+ * bar's own rules (data-table-items-bar.css) answer to the list's width; here
+ * the row is the band's, so they are restated for its slots.
+ *
+ * Unlayered on purpose: the buttons' sizes are Tailwind utilities (`min-w-0`,
+ * `px-*`), a layer that comes after `components`. */
+/* The row is the container the compactions below answer to: the band's
+ * width, not the window's (a page may pad it). */
+[data-slot="server-table-phone-row"] {
+	container: server-table-phone-row / inline-size;
+}
+[data-slot="server-table-phone-row-start"]
+	> [data-slot="data-table-list-bar-start"] {
+	flex-wrap: nowrap;
+	gap: 0.25rem 0.5rem;
+}
+[data-slot="data-table-list-bar-start"][data-in-row] {
+	/* A fixed row: the 44px box's height on a coarse pointer, the 36px
+	 * buttons' otherwise, so the count and the label swap with no move. */
+	min-height: 2.25rem;
+}
+[data-slot="data-table-list-bar-start"][data-in-row]
+	[data-slot="data-table-list-bar-count"] {
+	min-width: 0;
+	overflow-wrap: anywhere;
+	line-height: 1.15;
+}
+[data-slot="data-table-list-bar-start"][data-in-row][data-selected]
+	[data-slot="data-table-list-bar-count"] {
+	color: var(--primary-text);
+}
+[data-slot="server-table-phone-row"] [data-slot="data-table-list-bar-clear"] {
+	aspect-ratio: 1;
+	min-width: 2.25rem;
+	padding-inline: 0;
+}
+[data-slot="server-table-phone-row"] [data-slot="data-table-sort"] {
+	max-width: 9rem;
+}
+/* Room on a phone: the sort keeps its icon and its arrow (its name, "Sort:
+ * Name, Ascending", is still its accessible name); while rows are selected,
+ * and on a narrow band, "Filters (N)" keeps its icon and its count, and the
+ * name too. The count and "Clear selection" need the room. */
+@container server-table-phone-row (max-width: 30rem) {
+	[data-slot="data-table-sort-label"] {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+	[data-slot="server-table-phone-row"]:has(
+			[data-slot="data-table-list-bar-start"][data-selected]
+		)
+		[data-slot="filter-sheet-trigger"]
+		> [data-slot="button-label"] {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}
+@container server-table-phone-row (max-width: 19rem) {
+	[data-slot="filter-sheet-trigger"] > [data-slot="button-label"] {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}
+/* Icon-only: a button of the actions with an icon loses its label to its
+ * name and tooltip (a button without an icon keeps its text). */
+[data-slot="server-table-phone-row"]
+	[data-slot="server-table-actions"]
+	[data-slot="button"]:has(> svg:only-of-type) {
+	aspect-ratio: 1;
+	min-width: 2.25rem;
+	padding-inline: 0;
+}
+@media (pointer: coarse) {
+	[data-slot="server-table-phone-row"] [data-slot="data-table-list-bar-clear"],
+	[data-slot="server-table-phone-row"]
+		[data-slot="server-table-actions"]
+		[data-slot="button"]:has(> svg:only-of-type) {
+		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. */
+	[data-slot="server-table-phone-row-start"]
+	[data-slot="select-checkbox-label"] {
+		margin-inline-start: -0.875rem;
+	}
+}
+[data-slot="server-table-phone-row"]
+	[data-slot="data-table-list-bar-clear-label"],
+[data-slot="server-table-phone-row"] [data-slot="data-table-sort-prefix"],
+[data-slot="server-table-phone-row"]
+	[data-slot="server-table-actions"]
+	[data-slot="button"]:has(> svg:only-of-type)
+	> [data-slot="button-label"] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+/* While rows are selected the row is the selection bar: the bulk actions take
+ * the place of the sort, "Filters (N)" and the page's actions, which are
+ * hidden (not unmounted) and come back once the selection is empty. */
+[data-slot="server-table-phone-row"][data-selecting]
+[data-slot="server-table-phone-sort"],
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="filter-sheet-trigger"],
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="server-table-actions"] {
+	display: none;
+}
+/* The bulk buttons keep icon, label and count; they wrap onto a second line
+ * rather than scroll, and a long label is cut to the row's width. */
+[data-slot="server-table-phone-bulk"] {
+	flex: 1 1 auto;
+	justify-content: flex-end;
+}
+[data-slot="server-table-phone-bulk"] [data-slot="button"] {
+	max-width: 100%;
+}
+/* The menu trigger's own item radius would square the More
+ * button: it keeps its siblings' pill, and so does its focus ring. */
+[data-slot="server-table-phone-bulk"] [data-slot="dropdown-menu-trigger"] {
+	border-radius: var(--btn-rad, var(--btn-round));
+}
+/* An icon with its tone at full strength: the duotone's second layer is
+ * drawn at 40% by default, which on its own, in a button with no text, reads
+ * as disabled. */
+[data-slot="server-table-phone-row"]
+	[data-slot="server-table-actions"]
+	[data-slot="button"]:has(> svg:only-of-type) {
+	--fa-secondary-opacity: 1;
+}
+/* The selection bar wraps: the count and Clear keep their own width on the
+ * first line, the bulk buttons take the rest of it, or a line of their own
+ * (right-aligned) when they do not fit beside it; they wrap again inside it. */
+[data-slot="server-table-phone-row"][data-selecting] {
+	flex-wrap: wrap;
+	row-gap: 0.25rem;
+}
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="server-table-phone-row-start"] {
+	flex: 0 0 auto;
+}
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="data-table-list-bar-count"] {
+	white-space: nowrap;
+}
+[data-slot="server-table-phone-row"][data-selecting]
+	[data-slot="server-table-phone-row-end"] {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+/* The row is at least as high as the actions (40px, 44px on a coarse
+ * pointer), so selecting moves nothing; it grows when the bulk buttons wrap. */
+[data-slot="server-table-phone-row"] {
+	min-height: 2.5rem;
+}
+@media (pointer: coarse) {
+	[data-slot="server-table-phone-row"] {
+		min-height: 2.75rem;
+	}
+}
+@media (pointer: coarse) {
+	/* The 32px bulk buttons reach 44px with an invisible 6px margin: a gap of
+	 * 12px keeps neighbours from taking each other's edge. */
+	[data-slot="server-table-phone-row"][data-selecting] {
+		gap: 0.75rem;
+	}
+	[data-slot="server-table-phone-bulk"] {
+		gap: 0.75rem;
+	}
+}

package/package.json

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