@nxgt/material 3.54.0 → 3.55.0

package/lib/components/ui/display/seat-ring/seat-ring.css

@@ -0,0 +1,139 @@
+/* SeatRing: seats as a grid of cards, or on a circle when the box is wide
+ * enough. The component is a size container, so the switch follows its own
+ * width (a column, a dialog, a phone), never the window. The ring is pure CSS
+ * (trigonometry on `--i`, the seat's index, and `--n`, their count, both set by
+ * the attribute rules below, so server markup carries no `style`). It holds up
+ * to 10 seats (RING_LIMIT); more is a grid. Selected: the primary tint, a
+ * border and a check mark, so colour is never the only cue. */
+@layer components {
+	.nxgt-seat-ring {
+		--seat: 6rem;
+		--seat-avatar: 2.5rem;
+		--seat-dir: 1;
+		container: seat-ring / inline-size;
+	}
+	.nxgt-seat-ring:dir(rtl) {
+		--seat-dir: -1;
+	}
+	.nxgt-seat-ring[data-size="sm"] {
+		--seat: 4.75rem;
+		--seat-avatar: 2rem;
+	}
+	.nxgt-seat-ring[data-size="lg"] {
+		--seat: 8rem;
+		--seat-avatar: 3.5rem;
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-orbit"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-center"] {
+		order: -1;
+		display: grid;
+		place-items: center;
+		text-align: center;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-list"] {
+		display: grid;
+		grid-template-columns: repeat(
+				auto-fill,
+				minmax(min(var(--seat), 100%), 1fr)
+			);
+		gap: 0.5rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	@container seat-ring (max-width: 30rem) {
+		.nxgt-seat-ring [data-slot="seat-ring-list"] {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+
+	.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		min-inline-size: 0;
+		min-block-size: 2.75rem;
+		padding: 0.5rem 0.375rem;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-lg, 0.75rem);
+		background: var(--card, var(--background));
+		color: var(--foreground);
+		text-align: center;
+		transition:
+			background-color 150ms,
+			border-color 150ms;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-label"] {
+		max-inline-size: 100%;
+		overflow-wrap: anywhere;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.25;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-badge"] {
+		position: absolute;
+		inset-block-start: -0.5rem;
+		inset-inline-end: 0.25rem;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-mark"] {
+		position: absolute;
+		inset-block-start: 0.25rem;
+		inset-inline-start: 0.25rem;
+		display: grid;
+		inline-size: 1rem;
+		block-size: 1rem;
+		color: var(--primary-text, var(--primary));
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-empty-circle"] {
+		inline-size: var(--seat-avatar);
+		block-size: var(--seat-avatar);
+		border: 2px dashed var(--border);
+		border-radius: 9999px;
+	}
+	.nxgt-seat-ring [data-empty] {
+		border-style: dashed;
+		background: transparent;
+	}
+	.nxgt-seat-ring [data-highlighted] {
+		border-color: var(--primary-indicator, var(--primary));
+		box-shadow: 0 0 0 2px var(--primary-indicator, var(--primary));
+	}
+	.nxgt-seat-ring [role="option"]:not([aria-disabled="true"]) {
+		cursor: pointer;
+	}
+	.nxgt-seat-ring [role="option"]:not([aria-disabled="true"]):hover {
+		background: color-mix(
+			in oklab,
+			var(--primary-text, var(--primary)) 8%,
+			var(--card, var(--background))
+		);
+	}
+	.nxgt-seat-ring [role="option"][aria-selected="true"] {
+		border-color: var(--primary-text, var(--primary));
+		background: color-mix(
+			in oklab,
+			var(--primary-text, var(--primary)) 12%,
+			var(--card, var(--background))
+		);
+	}
+	.nxgt-seat-ring [role="option"][aria-disabled="true"],
+	.nxgt-seat-ring [aria-disabled="true"] {
+		opacity: 0.6;
+	}
+	.nxgt-seat-ring [role="option"]:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.nxgt-seat-ring [data-slot="seat-ring-seat"] {
+			transition: none;
+		}
+	}
+}

package/package.json

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