[ @sdxc/u/effects ]

visibility

Controls the CSS visibility property: a "hidden" element keeps its layout box and can transition back to "visible", which is what a selection indicator or hover-triggered surface needs to fade in place.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { visibility } from "@sdxc/u/effects";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.visibility()`	`css({ visibility: "visible" })`
`u.visibility("hidden")`	`css({ visibility: "hidden" })`

Examples

Basic example

Use visibility("hidden") to hide an element while it keeps its place in the layout:

<div mix={[...]}>
	<div mix={[...]}>01</div>
	<div mix={[visibility("hidden"), ...]}>02</div>
	<div mix={[...]}>03</div>
</div>

Showing on hover

Hide an element with visibility("hidden") and bring it back with visibility() in a state. Hover the row:

invoice-0425.pdf

<div mix={[hstack({ gap: 4, justify: "between" }), ...]}>
	<span>invoice-0425.pdf</span>
	<button
		type="button"
		mix={[
			visibility("hidden"),
			when(":is(:hover, :focus-within) > &", visibility()),
			...,
		]}
	>
		Remove
	</button>
</div>

Collapsing table rows

Use visibility("collapse") on a table row to remove it from the table while its columns keep their widths:

Ada	Engineer
Grace Brewster Murray	Admiral
Alan	Mathematician

<table mix={[...]}>
	<tbody>
		<tr>
			<td>Ada</td>
			<td>Engineer</td>
		</tr>
		<tr mix={[visibility("collapse")]}>
			<td>Grace Brewster Murray</td>
			<td>Admiral</td>
		</tr>
		<tr>
			<td>Alan</td>
			<td>Mathematician</td>
		</tr>
	</tbody>
</table>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.visibility())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.visibility())

Signature

u.visibility(value?: VisibilityValue)