# Frames & surfaces
Frames, corner crosses and half-crosses, control targets, capsules and floating surfaces.
Use `framed` for a ruled frame, `crossed` for corner crosses and `half-crossed` for corner marks, on any element. Three rules cover every layout: a frame draws its own borders; stacked frames in `Page` or `Main` drop their bottom rule, so the next frame's top rule is the shared line; a cross erases the line segments around it. No frame needs to know its neighbors.
## Frames and corner crosses
Shared geometry defines control targets, border thickness and decorative cross length. Cross clearances and optical adjustments stay with the structural classes or owning component.
| Token | Role |
| -------------------- | ---------------------------------------------------------------------------- |
| `--control-min-size` | Minimum width and height of control targets, independent of their icon size. |
| `--border-width` | Shared thickness of borders, dividers and structural crosses. |
| `--cross-size` | Full stroke length of the decorative crosses in .crossed. |
Apply `--control-min-size` to both minimum dimensions of an interactive target. Padding and content can make it larger: the token is a floor, not a fixed square. The drawing inside the target keeps its own dimensions, and layout clearance that depends on a target follows the token.
```css
.control {
min-width: var(--control-min-size);
min-height: var(--control-min-size);
}
```
`--border-width` sets borders and structural strokes, crosses included; keyboard focus, text underlines and icon drawings keep their own strokes. Crosses take `--accent` and frame rules `--border`.
## Capsules
Structural frames, text buttons and native fields remain square. The capsule is the one shared rounded silhouette, used by the theme toggle and pill-shaped badges. Other rounded corners, such as circular controls, stay local to their component; do not add a radius prop to every component.
| Token | Role |
| --------------- | ----------------------------------------------- |
| `--radius-full` | Capsule silhouette; not circular icon geometry. |
## Floating surfaces
Use only the shared elevation roles needed by nonmodal surfaces. Native modal dialogs use the browser top layer; a z-index token cannot place an ordinary element above it. Their translucent backdrops share the overlay veil and blur: `background: var(--overlay); backdrop-filter: blur(var(--overlay-blur))`. Translucent bands over scrolling content reuse the blur alone.
| Token | Role |
| --------------------------- | -------------------------------------------------------------------- |
| `--floating-control-shadow` | Floating action above page content. |
| `--floating-shadow` | Nonmodal floating surface. |
| `--floating-control-layer` | Floating action above ordinary page content. |
| `--floating-layer` | Nonmodal surface above floating actions. |
| `--skip-link-layer` | Visible keyboard shortcut above nonmodal surfaces. |
| `--overlay` | Translucent veil behind modal surfaces. |
| `--overlay-blur` | Blur of the page seen through modal backdrops and translucent bands. |
The dark theme redefines both shadows and the overlay more densely, so floating surfaces and modal backdrops still separate from the near-black page. Shadows do not replace visible borders or meaningful hierarchy.
## Classes
| Name | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------- |
| `.framed` | Draws all four edges; direct children of `Page` and `Main` drop the bottom one. Adds no content padding. |
| `.crossed` | Draws crosses at all four corners, independently of the frame. |
| `.crossed-top` | Draws only the top pair. Works without `.crossed`. |
| `.crossed-bottom` | Draws only the bottom pair. Works without `.crossed`. |
| `.half-crossed` | Marks the four corners with accent half-crosses drawn as background layers, inside the element. |
## Overrides
| Name | Type | Default | Description |
| --------------- | ------------ | ----------------------------------------- | --------------------------------------------------------------------------------------- |
| `border-top` | `CSS border` | `var(--border-width) solid var(--border)` | Set to `none` to open the top of a frame, as `Header` does at the top of the page. |
| `border-bottom` | `CSS border` | `var(--border-width) solid var(--border)` | Set to `none` to open the bottom of a standalone frame; stacked frames already omit it. |
## Notes
- These classes add no content padding; the owning element or component supplies it. Use one cross variant per element: `framed crossed-bottom` combines a frame with the bottom pair.
- For page sections, prefer `Section`: it already applies `framed` and selects crosses through its `crosses` prop. Place frames directly in `Page` or `Main`, where each junction is drawn once and the last frame stays open at the bottom, like `Footer`. Elsewhere, a frame keeps all four edges and the owning layout handles any spacing.
- A cross is centered on the frame lines and erases them for a short length around it, including a neighbor's lines, with the page background. Two frames that cross the same junction paint identical pixels, so both may request it. Erasing affects only lines: content and tinted surfaces inside frames stay intact.
- Keep frames themselves transparent and tint their content instead; the erased line segments show the page background. Keep overflow visible on the crossed element: crosses extend beyond its bounds.
- Cross classes draw with `::before` and `::after`; leave both free. Override `--border-width` on a common container so neighboring frames share the same geometry.
- `.half-crossed` draws two `--cross-size` strokes of `--border-width` at each corner, pointing along the edges, from the border box; a transparent border keeps them on the outer edge. They are background images: a `background` shorthand, such as a hover fill, removes them, while `background-color` keeps them. Forced-colors mode drops them, so give the element a system border there. Focused text fields and select draw the same marks in `--focus`.
## Usage
```svelte
The final section is open at the bottom; its bottom crosses end the side rails.
```
A standalone frame uses the same classes:
```html
```