# `PhiaUi.Components.Surface`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/surface/surface.ex#L1)

Surface primitives for PhiaUI — 5 components covering elevation, tonality,
inset depth, scrollable containers, and tonal color layers.

## Components
- `surface/1` — variant-based container with elevation control
- `paper/1` — MUI-style paper with elevation 0-5
- `inset_surface/1` — sunken / inset panel (Atlassian Sunken tier)
- `scrollable_surface/1` — overflow-y container with optional edge fade
- `tonal_surface/1` — semantic color tonal panel

# `inset_surface`

Sunken / inset panel — Atlassian Sunken elevation tier equivalent.

## Examples

    <.inset_surface depth="lg">
      Deeply inset content
    </.inset_surface>

## Attributes

* `depth` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `paper`

MUI-style paper component with elevation 0-5 and optional outline.

## Examples

    <.paper elevation="2">
      Paper content
    </.paper>

    <.paper variant="outlined" square>
      Square outlined paper
    </.paper>

## Attributes

* `elevation` (`:integer`) - Defaults to `1`. Must be one of `0`, `1`, `2`, `3`, `4`, or `5`.
* `variant` (`:atom`) - Defaults to `:elevation`. Must be one of `:elevation`, or `:outlined`.
* `square` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `scrollable_surface`

Vertically scrollable container with optional top/bottom fade masks.

## Examples

    <.scrollable_surface max_height="30rem" fade_edges>
      Long list of items...
    </.scrollable_surface>

## Attributes

* `max_height` (`:string`) - Defaults to `"20rem"`.
* `fade_edges` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `surface`

Generic surface container with variant and elevation support.

## Examples

    <.surface variant="raised">
      Content here
    </.surface>

    <.surface elevation="3" tonal outlined>
      Elevated tonal outlined surface
    </.surface>

## Attributes

* `variant` (`:atom`) - Defaults to `:flat`. Must be one of `:flat`, `:raised`, `:floating`, or `:overlay`.
* `elevation` (`:any`) - Defaults to `nil`.
* `tonal` (`:boolean`) - Defaults to `false`.
* `outlined` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `tonal_surface`

Semantic color tonal panel using 10% opacity fills.

## Examples

    <.tonal_surface color="destructive">
      Warning area
    </.tonal_surface>

## Attributes

* `color` (`:string`) - Defaults to `"primary"`. Must be one of `"primary"`, `"secondary"`, `"destructive"`, `"muted"`, or `"accent"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*