PhiaUi.Components.Surface (phia_ui v0.1.17)

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

Summary

Functions

inset_surface(assigns)

Sunken / inset panel — Atlassian Sunken elevation tier equivalent.

paper(assigns)

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

scrollable_surface(assigns)

Vertically scrollable container with optional top/bottom fade masks.

surface(assigns)

Generic surface container with variant and elevation support.

tonal_surface(assigns)

Semantic color tonal panel using 10% opacity fills.

Functions

inset_surface(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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)