# `surface`

```strand
group surface: node
```

What every surface accepts.

Also every prop and event of [`node`](/reference/elements/node.html.md).

| Prop | Type | |
| --- | --- | --- |
| `screens` | `Screens \| [text] \| text` | The monitors it is on: `all`, `focused`, or output names. |
| `layer` | `Layer` | Its layer-shell layer. |
| `open` | `<-> bool` | Whether it is shown. Bound two-way (`open: <-> open`), Escape, click-away and focus loss write false; on a `window` only the compositor's close and `w.close()` do. |
| `keyboard` | `Keyboard` | Keyboard focus: `none`, `on_demand` or `exclusive`. |
| `anchor` | `Anchor` | Where it sits on the screen: `anchor: top_right`. |
| `attach` | `Edge` | Grows out of an edge with concave fillets: `attach: top`. |
| `scrim` | `color` | A colour dimming what is behind it, on a `popup` or `panel`: `scrim: $shadow.alpha(0.3)`. A single-pixel buffer, so it costs nothing; a gradient has no single-pixel form. |
| `inhibit_idle` | `bool` | While it is shown, the compositor does not go idle (no screensaver, dimming or lock by timeout): `bar Top { inhibit_idle: caffeine }`. |

| Event | |
| --- | --- |
| `on show` | It was shown: `on show { query = "" }`. |
| `on hide` | It was hidden. |