@marianmeres/stuic 3.181.0 → 3.183.0

package/dist/components/Input/index.css

@@ -98,6 +98,46 @@
 	--stuic-field-date-placeholder-text: var(--stuic-input-placeholder);
 	--stuic-field-date-embedded-padding: 0.5rem;
 	--stuic-field-date-dialog-padding: 1rem;
+
+	/* FieldTable specific (see the FIELD TABLE section at the bottom of this file) */
+	--stuic-field-table-border-color: var(--stuic-color-border);
+	--stuic-field-table-header-bg: var(--stuic-color-muted);
+	--stuic-field-table-header-text: var(--stuic-color-muted-foreground);
+	--stuic-field-table-row-divider-color: var(--stuic-color-border);
+	--stuic-field-table-cell-padding-x: calc(var(--spacing) * 1.5);
+	--stuic-field-table-cell-padding-y: calc(var(--spacing) * 1);
+	--stuic-field-table-card-bg: transparent;
+	--stuic-field-table-card-gap: calc(var(--spacing) * 2);
+	--stuic-field-table-invalid-color: var(--stuic-input-accent-error);
+	--stuic-field-table-unit-text: var(--stuic-color-muted-foreground);
+	/* `--stuic-field-table-card-radius` is deliberately NOT declared: it is read as a
+	   fallback argument at the usage site (`--stuic-radius`) — see docs/conventions.md. */
+	/* Minimum usable width per cell type in table mode (the table scrolls instead) */
+	--stuic-field-table-col-min-text: 10rem;
+	--stuic-field-table-col-min-number: 6rem;
+	--stuic-field-table-col-min-select: 8rem;
+	--stuic-field-table-col-min-checkbox: 3rem;
+	--stuic-field-table-col-min-date: 9.5rem;
+	--stuic-field-table-col-min-url: 12rem;
+
+	/* FieldSingleAsset */
+	--stuic-field-single-asset-size-sm: 5rem;
+	--stuic-field-single-asset-size-md: 8rem;
+	--stuic-field-single-asset-size-lg: 12rem;
+	--stuic-field-single-asset-wide-ratio: 16 / 9;
+	--stuic-field-single-asset-preview-bg: var(--stuic-color-muted);
+	--stuic-field-single-asset-preview-border: var(--stuic-color-border);
+	--stuic-field-single-asset-preview-border-hover: var(--stuic-color-ring);
+	--stuic-field-single-asset-placeholder-text: var(--stuic-color-muted-foreground);
+	--stuic-field-single-asset-meta-text: var(--stuic-color-muted-foreground);
+	--stuic-field-single-asset-control-bg: rgb(0 0 0 / 0.6);
+	--stuic-field-single-asset-control-bg-hover: rgb(0 0 0 / 0.8);
+	--stuic-field-single-asset-control-text: #fff;
+	--stuic-field-single-asset-overlay-bg: rgb(0 0 0 / 0.4);
+	--stuic-field-single-asset-error-color: var(--stuic-input-accent-error);
+	/* `--stuic-field-single-asset-size`, `-radius`, `-control-radius`, `-border-width`
+	   and `-transition` are deliberately NOT declared: they are read as fallback
+	   arguments at the usage site — see docs/conventions.md. */
 }
 
 @layer components {
@@ -954,3 +994,764 @@
 		overflow-x: auto;
 	}
 }
+
+/* ============================================================================
+   FIELD TABLE
+   One DOM for both layouts: a real <table> is the base ("table" mode), and the
+   "stacked" mode restyles it into one card per row (thead gone, each <td> a
+   label + control line, the actions cell moved to the card's top). `auto`
+   picks the mode by a container query on the component's OWN inline size — a
+   size query cannot read a custom property, hence a `data-table-from` attribute
+   on a fixed scale and one block per step (the DescriptionList pattern).
+
+   The stacked block is repeated verbatim per step on purpose: the alternative
+   (a JS ResizeObserver flipping an attribute) would remount nothing either, but
+   paints one frame in the wrong mode and costs an observer per instance.
+
+   Cell controls take their chrome from Tailwind utilities in the component
+   (the `.stuic-input input` base rule outranks any component-layer selector);
+   this file owns layout, headers, cards, min-widths and the messages.
+   ============================================================================ */
+
+@layer components {
+	.stuic-field-table {
+		padding: calc(var(--spacing) * 2);
+	}
+
+	.stuic-field-table[data-layout="auto"] {
+		/* Named so the queries below can only ever resolve against this element,
+		   never against a consumer's own @container ancestor. */
+		container-name: stuic-field-table;
+		container-type: inline-size;
+	}
+
+	/* ---- table mode (base) ---- */
+
+	.stuic-field-table-scroll {
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+
+	.stuic-field-table table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	.stuic-field-table th {
+		text-align: start;
+		font-size: var(--text-xs);
+		font-weight: 500;
+		color: var(--stuic-field-table-header-text);
+		background: var(--stuic-field-table-header-bg);
+		padding: var(--stuic-field-table-cell-padding-y)
+			var(--stuic-field-table-cell-padding-x);
+		white-space: nowrap;
+	}
+
+	.stuic-field-table th:first-child {
+		border-start-start-radius: var(
+			--stuic-field-table-header-radius,
+			var(--stuic-radius)
+		);
+	}
+
+	.stuic-field-table th:last-child {
+		border-start-end-radius: var(--stuic-field-table-header-radius, var(--stuic-radius));
+	}
+
+	.stuic-field-table td {
+		padding: var(--stuic-field-table-cell-padding-y)
+			var(--stuic-field-table-cell-padding-x);
+		vertical-align: top;
+		border-top: 1px solid var(--stuic-field-table-row-divider-color);
+	}
+
+	.stuic-field-table tbody tr:first-child td {
+		border-top-color: transparent;
+	}
+
+	/* never squash an input below usable width — the wrapper scrolls instead */
+	.stuic-field-table td[data-type="text"] {
+		min-width: var(--stuic-field-table-col-min-text);
+	}
+	.stuic-field-table td[data-type="number"] {
+		min-width: var(--stuic-field-table-col-min-number);
+	}
+	.stuic-field-table td[data-type="select"] {
+		min-width: var(--stuic-field-table-col-min-select);
+	}
+	.stuic-field-table td[data-type="checkbox"] {
+		min-width: var(--stuic-field-table-col-min-checkbox);
+	}
+	.stuic-field-table td[data-type="date"] {
+		min-width: var(--stuic-field-table-col-min-date);
+	}
+	.stuic-field-table td[data-type="url"] {
+		min-width: var(--stuic-field-table-col-min-url);
+	}
+
+	/* In table mode the <th scope="col"> is the visible heading; the per-cell
+	   label stays for the accessible name only ("Qty, row 3"). */
+	.stuic-field-table-cell-label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.stuic-field-table-row-title {
+		display: none;
+	}
+
+	.stuic-field-table-actions {
+		width: 1%;
+		white-space: nowrap;
+		text-align: end;
+	}
+
+	.stuic-field-table-actions-buttons {
+		display: inline-flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 0.5);
+	}
+
+	/* ---- cells ---- */
+
+	.stuic-field-table-number {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 1.5);
+	}
+
+	.stuic-field-table-unit {
+		color: var(--stuic-field-table-unit-text);
+		font-size: var(--text-xs);
+		white-space: nowrap;
+	}
+
+	.stuic-field-table-checkbox {
+		display: flex;
+		align-items: center;
+		min-height: var(--stuic-input-min-height-sm);
+	}
+
+	.stuic-field-table-readonly {
+		font-size: var(--text-sm);
+		padding-block: var(--stuic-field-table-cell-padding-y);
+		overflow-wrap: anywhere;
+	}
+
+	.stuic-field-table-unknown-row {
+		font-size: var(--text-xs);
+		color: var(--stuic-color-surface-warning-foreground);
+	}
+
+	.stuic-field-table-cell-error {
+		margin-top: calc(var(--spacing) * 1);
+		font-size: var(--text-xs);
+		color: var(--stuic-field-table-invalid-color);
+	}
+
+	/* ---- empty / footer ---- */
+
+	.stuic-field-table-empty {
+		padding: calc(var(--spacing) * 3);
+		text-align: center;
+		font-size: var(--text-sm);
+		opacity: 0.5;
+	}
+
+	.stuic-field-table-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: calc(var(--spacing) * 2);
+		padding-top: calc(var(--spacing) * 2);
+	}
+
+	.stuic-field-table-add {
+		display: inline-flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 1);
+		font-size: var(--text-sm);
+		padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2)
+			calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5);
+		border-radius: var(--stuic-field-table-add-radius, var(--stuic-radius-button));
+		background: var(--stuic-color-muted);
+		opacity: 0.75;
+		transition:
+			opacity var(--stuic-transition),
+			background var(--stuic-transition);
+	}
+
+	.stuic-field-table-add:hover:not(:disabled) {
+		opacity: 1;
+		background: var(--stuic-color-muted-hover);
+	}
+
+	.stuic-field-table-add:disabled {
+		opacity: 0.25;
+		cursor: not-allowed;
+	}
+
+	.stuic-field-table-count {
+		font-size: var(--text-xs);
+		color: var(--stuic-color-muted-foreground);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* ---- stacked mode (static) ---- */
+
+	.stuic-field-table[data-layout="stacked"] thead {
+		display: none;
+	}
+	.stuic-field-table[data-layout="stacked"] table,
+	.stuic-field-table[data-layout="stacked"] tbody,
+	.stuic-field-table[data-layout="stacked"] tr,
+	.stuic-field-table[data-layout="stacked"] td {
+		display: block;
+		min-width: 0;
+	}
+	.stuic-field-table[data-layout="stacked"] tbody {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-field-table-card-gap);
+	}
+	.stuic-field-table[data-layout="stacked"] tr {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--spacing) * 2);
+		padding: calc(var(--spacing) * 2.5);
+		border: 1px solid var(--stuic-field-table-border-color);
+		border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+		background: var(--stuic-field-table-card-bg);
+	}
+	.stuic-field-table[data-layout="stacked"] td {
+		display: grid;
+		grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+		column-gap: calc(var(--spacing) * 3);
+		align-items: center;
+		padding: 0;
+		border-top: 0;
+	}
+	.stuic-field-table[data-layout="stacked"] td[data-degraded] {
+		display: block;
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-cell-label {
+		position: static;
+		width: auto;
+		height: auto;
+		margin: 0;
+		overflow: visible;
+		clip-path: none;
+		white-space: normal;
+		font-size: var(--text-xs);
+		font-weight: 500;
+		color: var(--stuic-field-table-header-text);
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-cell-error {
+		grid-column: 2;
+		margin-top: 0;
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-actions {
+		order: -1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: auto;
+		white-space: normal;
+		padding-bottom: calc(var(--spacing) * 1.5);
+		border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-row-title {
+		display: inline;
+		font-size: var(--text-sm);
+		font-weight: 500;
+	}
+
+	/* ---- stacked mode by container query (`layout="auto"`) ----
+	   The same block as above, once per `tableFrom` step: sm 32rem, md 40rem,
+	   lg 48rem, xl 56rem. */
+
+	@container stuic-field-table (width < 32rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+
+	@container stuic-field-table (width < 40rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+
+	@container stuic-field-table (width < 48rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+
+	@container stuic-field-table (width < 56rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+}
+
+/* ============================================================================
+   FIELD SINGLE ASSET
+   One tile (the preview, also the picker + drop target) with hover/focus
+   actions, a meta column, and an inline Undo after a remove. Layout that a
+   theme may want to change lives here; utility classes in the component only
+   handle flex/gap.
+   ============================================================================ */
+@layer components {
+	.stuic-field-single-asset-tile {
+		--_size: var(
+			--stuic-field-single-asset-size,
+			var(--stuic-field-single-asset-size-md)
+		);
+		height: var(--_size);
+	}
+	.stuic-field-single-asset[data-size="sm"] .stuic-field-single-asset-tile {
+		--_size: var(
+			--stuic-field-single-asset-size,
+			var(--stuic-field-single-asset-size-sm)
+		);
+	}
+	.stuic-field-single-asset[data-size="lg"] .stuic-field-single-asset-tile {
+		--_size: var(
+			--stuic-field-single-asset-size,
+			var(--stuic-field-single-asset-size-lg)
+		);
+	}
+
+	.stuic-field-single-asset-preview {
+		position: relative;
+		display: grid;
+		place-content: center;
+		overflow: hidden;
+		height: 100%;
+		width: auto;
+		max-width: 100%;
+		aspect-ratio: 1 / 1;
+		padding: 0;
+		background: var(--stuic-field-single-asset-preview-bg);
+		color: var(--stuic-field-single-asset-placeholder-text);
+		border-style: solid;
+		border-width: var(--stuic-field-single-asset-border-width, var(--stuic-border-width));
+		border-color: var(--stuic-field-single-asset-preview-border);
+		border-radius: var(--stuic-field-single-asset-radius, var(--stuic-radius));
+		cursor: pointer;
+		transition: border-color
+			var(--stuic-field-single-asset-transition, var(--stuic-transition));
+	}
+	.stuic-field-single-asset[data-shape="circle"] .stuic-field-single-asset-preview {
+		border-radius: 9999px;
+	}
+	.stuic-field-single-asset[data-shape="wide"] .stuic-field-single-asset-preview {
+		aspect-ratio: var(--stuic-field-single-asset-wide-ratio);
+	}
+	.stuic-field-single-asset[data-state="empty"] .stuic-field-single-asset-preview {
+		border-style: dashed;
+	}
+	.stuic-field-single-asset[data-state="error"] .stuic-field-single-asset-preview {
+		border-color: var(--stuic-field-single-asset-error-color);
+	}
+	.stuic-field-single-asset-preview:disabled {
+		cursor: default;
+	}
+	.stuic-field-single-asset[data-state="loading"] .stuic-field-single-asset-preview {
+		cursor: default;
+		border-color: transparent;
+	}
+	.stuic-field-single-asset-preview:not(:disabled):hover {
+		border-color: var(--stuic-field-single-asset-preview-border-hover);
+	}
+	.stuic-field-single-asset-preview:focus-visible {
+		outline: 2px solid var(--stuic-color-ring);
+		outline-offset: 2px;
+	}
+	/* the tile is `disabled` while the field only displays — keep it legible */
+	.stuic-field-single-asset[data-state="filled"]
+		.stuic-field-single-asset-preview:disabled {
+		opacity: 1;
+	}
+
+	.stuic-field-single-asset-img {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.stuic-field-single-asset[data-fit="contain"] .stuic-field-single-asset-img {
+		object-fit: contain;
+		padding: calc(var(--spacing) * 2);
+	}
+	.stuic-field-single-asset-icon {
+		display: grid;
+		place-content: center;
+	}
+
+	.stuic-field-single-asset-overlay {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-content: center;
+		pointer-events: none;
+		color: #fff;
+		background: var(--stuic-field-single-asset-overlay-bg);
+	}
+	.stuic-field-single-asset-overlay[data-error] {
+		background: color-mix(
+			in oklab,
+			var(--stuic-field-single-asset-error-color) 55%,
+			transparent
+		);
+	}
+
+	/* Actions: hidden until the tile is hovered / focused (or on a failed upload,
+	   where Retry / Discard must be findable); pointer events gated the same way so
+	   an invisible control never intercepts a click meant for the tile. Keyboard
+	   users Tab to them regardless. Touch has no hover: always shown there. */
+	.stuic-field-single-asset-actions {
+		position: absolute;
+		top: calc(var(--spacing) * 1);
+		right: calc(var(--spacing) * 1);
+		display: flex;
+		gap: calc(var(--spacing) * 1);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity
+			var(--stuic-field-single-asset-transition, var(--stuic-transition));
+	}
+	.stuic-field-single-asset-tile:hover .stuic-field-single-asset-actions,
+	.stuic-field-single-asset-tile:focus-within .stuic-field-single-asset-actions,
+	.stuic-field-single-asset[data-state="error"] .stuic-field-single-asset-actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+	@media (hover: none) {
+		.stuic-field-single-asset-actions {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+	.stuic-field-single-asset-control {
+		display: grid;
+		place-content: center;
+		padding: calc(var(--spacing) * 1);
+		border-radius: var(
+			--stuic-field-single-asset-control-radius,
+			var(--stuic-radius-button)
+		);
+		background: var(--stuic-field-single-asset-control-bg);
+		color: var(--stuic-field-single-asset-control-text);
+		cursor: pointer;
+		transition: background-color
+			var(--stuic-field-single-asset-transition, var(--stuic-transition));
+	}
+	.stuic-field-single-asset-control:hover {
+		background: var(--stuic-field-single-asset-control-bg-hover);
+	}
+	.stuic-field-single-asset-control:focus-visible {
+		outline: 2px solid var(--stuic-color-ring);
+		outline-offset: 1px;
+	}
+
+	.stuic-field-single-asset-meta {
+		color: var(--stuic-field-single-asset-meta-text);
+	}
+	.stuic-field-single-asset-undo {
+		display: inline-flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 1);
+		margin-left: calc(var(--spacing) * 2);
+		color: var(--stuic-color-foreground);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+		cursor: pointer;
+	}
+	.stuic-field-single-asset-undo:focus-visible {
+		outline: 2px solid var(--stuic-color-ring);
+		outline-offset: 2px;
+		border-radius: var(
+			--stuic-field-single-asset-control-radius,
+			var(--stuic-radius-button)
+		);
+	}
+}