# `node`

```strand
group node
```

What every element accepts. Every visual prop springs; `x`, `y`,
`scale`, `rotate` and `opacity` are paint-only and never relayout.

| Prop | Type | |
| --- | --- | --- |
| `id` | `Node` | Names the element, so others read its state (`results.selected`) and keys route to it (`nav: results`). |
| `width` | `length \| auto` | Its width: logical pixels, or `40%` of the parent; `auto` (as unset) sizes it by what it holds, and takes a transition there (`width: auto ~ instant`). |
| `height` | `length \| auto` | Its height: logical pixels, or a percentage of the parent; `auto` as for `width`. |
| `min_width` | `length` | The smallest width it takes. |
| `min_height` | `length` | The smallest height it takes. |
| `max_width` | `length` | The largest width it takes. |
| `max_height` | `length` | The largest height it takes: `max_height: 420`. |
| `size` | `length \| auto` | Its width and height at once: `size: 8`; `auto` as for `width`. |
| `grow` | `float` | Its share of the space left in its row or column: `grow: 1`. |
| `shrink` | `float` | How much it gives up when its row or column is too small: `shrink: 0` keeps its size (default 1). |
| `justify` | `Justify` | How its children share the main axis: `justify: space_between`. |
| `pad` | `insets` | Space inside its edge: one to four values (`pad: 0, $space.3`). |
| `margin` | `insets` | Space outside its edge: one to four values. |
| `gap` | `length` | Space between its children: `gap: $space.2`. |
| `align` | `Align` | Alignment of its children on the cross axis, or of a text's lines. |
| `place` | `Place` | `absolute` takes it out of the flow, placed by `x` and `y`. |
| `stagger` | `duration` | Delays each child's `enter` this much after the one before. |
| `x` | `length` | Horizontal offset; paint-only. |
| `y` | `length` | Vertical offset; paint-only. |
| `scale` | `float` | Scale about its centre; paint-only. |
| `rotate` | `angle` | Rotation about its centre; paint-only: `rotate: t * 20deg`. |
| `opacity` | `float` | Opacity, 0 to 1; paint-only. |
| `bg` | `paint` | Background paint: a colour or a gradient. |
| `color` | `color` | Inherited. Text and icon colour, inherited by every descendant. |
| `font` | `font` | Inherited. Font, inherited by every descendant: `"Inter" 13px 500`, `$font.ui`. |
| `weight` | `int` | Inherited. Font weight, inherited by every descendant: `weight: 600`. |
| `radius` | `corners \| full` | Corner radii: one value, four (`14, 14, 0, 0`), or `full` for a pill. |
| `corners` | `CornerStyle` | `squircle` for smooth corners. |
| `border` | `length, paint` | A border of a width and a paint: `border: 1, $border`. A gradient's angle may animate; only the ring repaints. |
| `shadow` | `shadow` | Drop shadows: `0 2px 8px $shadow.alpha(0.25)`, comma-separated. |
| `inner_shadow` | `shadow` | A shadow inside its edge. |
| `blur` | `length` | Blur behind it, done by the compositor: `blur: 24`. |
| `blur_fallback` | `BlurFallback` | What to draw when the compositor cannot blur. |
| `backdrop` | `Filter` | A filter over your own content behind it: `backdrop: blur(16)`. |
| `clip` | `bool` | Clips its children to its rounded shape. |
| `hit` | `HitArea \| none` | Its hit area: `hit: grow(6)` enlarges it for small targets; `hit: none` takes no input in its own box (the pointer passes through to what is below), while its children take theirs. On a `trigger: hover` popup that draws nothing, a top-level element with `hit: none` gives the popup's input region its children's boxes instead of its own. |
| `cursor` | `CursorShape` | The pointer's shape while it is over it: `cursor: pointer` on a link, `grab` on a handle (`when pressed { cursor: grabbing }`), `ew_resize` on a grip. The innermost node under the pointer with one decides, and while a press is held the one it went down on does; an `input` shows `text` unless it says otherwise, anything else the default arrow. Set through `wp_cursor_shape_v1`, or the cursor theme where the compositor lacks it. |
| `tooltip` | `text` | A tooltip shown on hover. |
| `filter` | `Filter \| [Filter]` | Colour filters on its subtree: `filter: grayscale(1)`, or a list. |
| `blend` | `Blend` | How it blends with what is below it. |
| `mask` | `Mask` | Masks its subtree: `fade(bottom, 24)`, `radial(…)`, `shape(cookie)`. |
| `glow` | `length, color` | A glow of a radius and a colour: `glow: 12, $accent.alpha(0.6)`. |
| `rim` | `Edge, color` | A lit edge: `rim: top, $fg.alpha(0.15)`. |
| `grain` | `float` | Film grain: `grain: 0.04`. |
| `morph` | `text` | A shared-element name: nodes with the same `morph` morph into each other across surfaces (`morph: "media"`). |
| `jelly` | `float` | Squash and stretch while dragged: `jelly: 0.4`. |
| `parallax` | `length` | Moves with the pointer, up to this far: `parallax: 6px`. |
| `tilt` | `angle` | Tilts toward the pointer, up to this angle: `tilt: 8deg`. |
| `shape` | `Shape` | A shape from the shape library; a change morphs by spring. |
| `stroke` | `length, paint` | An outline of a width and a paint, with styles: `stroke: 3, $accent { trim: 0, progress; cap: round }`. |
| `stroke.trim` | `float, float` | The part drawn: from a start to an end fraction. |
| `stroke.wave` | `float, length` | A wavy stroke: its amplitude and wavelength. |
| `stroke.cap` | `Cap` | The line caps. |
| `stroke.dash` | `length, length` | Dash and gap lengths. |
| `enter` | `Pose \| PoseName` | The pose it enters from: `enter { opacity: 0 }`, `popin(0.8)`, `slide(top)`, `fade` or `slidefade`. `exit` mirrors it unless given. |
| `exit` | `Pose \| PoseName` | The pose it leaves by; the subtree unmounts once it has played. |
| `transition` | `SwapTransition \| SwapKind` | How its content swaps on `if`, `pages` and image changes: `wipe(left)`, `disc`, `dissolve` or `pixelate`; `none` for no mask. |
| `drag` | `any` | Makes it a drag source carrying this value: `drag: pin`. |

| Event | |
| --- | --- |
| `on click` | A primary click. |
| `on secondary` | A secondary (right) click. |
| `on middle` | A middle click. |
| `on scroll(dy: float, dx: float)` | A scroll: `on scroll(dy) { … }`. |
| `on drop(value: any, at: int)` | Something was dropped on it: a `drag:` source's value or a `Drop` from another program, and the index it landed at. |
| `on key(key: Key)` | A key press while it has focus. |
| `on activate` | It was chosen: clicked, Enter while selected in a `list`, or Enter in an `input` with no `nav:` list. |