Struct El 

#[non_exhaustive]
pub struct El {

    pub kind: Kind,
    pub style_profile: StyleProfile,
    pub key: Option<String>,
    pub block_pointer: bool,
    pub hit_overflow: Sides,
    pub focusable: bool,
    pub focus_ring_placement: FocusRingPlacement,
    pub always_show_focus_ring: bool,
    pub selectable: bool,
    pub selection_source: Option<SelectionSource>,
    pub capture_keys: bool,
    pub alpha_follows_focused_ancestor: bool,
    pub blink_when_focused: bool,
    pub state_follows_interactive_ancestor: bool,
    pub hover_alpha: Option<HoverAlpha>,
    pub source: Source,
    pub axis: Axis,
    pub gap: f32,
    pub padding: Sides,
    pub align: Align,
    pub justify: Justify,
    pub width: Size,
    pub height: Size,
    pub component_size: Option<ComponentSize>,
    pub metrics_role: Option<MetricsRole>,
    pub explicit_width: bool,
    pub explicit_height: bool,
    pub explicit_padding: bool,
    pub explicit_gap: bool,
    pub explicit_radius: bool,
    pub explicit_font_family: bool,
    pub explicit_mono_font_family: bool,
    pub explicit_mono: bool,
    pub fill: Option<Color>,
    pub dim_fill: Option<Color>,
    pub stroke: Option<Color>,
    pub stroke_width: f32,
    pub radius: Corners,
    pub shadow: f32,
    pub surface_role: SurfaceRole,
    pub paint_overflow: Sides,
    pub clip: bool,
    pub scrollable: bool,
    pub pin_end: bool,
    pub arrow_nav_siblings: bool,
    pub tooltip: Option<String>,
    pub cursor: Option<Cursor>,
    pub cursor_pressed: Option<Cursor>,
    pub shader_override: Option<ShaderBinding>,
    pub layout_override: Option<LayoutFn>,
    pub virtual_items: Option<VirtualItems>,
    pub scrollbar: bool,
    pub text: Option<String>,
    pub text_color: Option<Color>,
    pub text_align: TextAlign,
    pub text_wrap: TextWrap,
    pub text_overflow: TextOverflow,
    pub text_role: TextRole,
    pub text_max_lines: Option<usize>,
    pub font_size: f32,
    pub line_height: f32,
    pub font_family: FontFamily,
    pub mono_font_family: FontFamily,
    pub font_weight: FontWeight,
    pub font_mono: bool,
    pub text_italic: bool,
    pub text_underline: bool,
    pub text_strikethrough: bool,
    pub text_link: Option<String>,
    pub text_bg: Option<Color>,
    pub math: Option<Arc<MathExpr>>,
    pub math_display: MathDisplay,
    pub icon: Option<IconSource>,
    pub icon_stroke_width: f32,
    pub image: Option<Image>,
    pub image_tint: Option<Color>,
    pub image_fit: ImageFit,
    pub surface_source: Option<SurfaceSource>,
    pub surface_alpha: SurfaceAlpha,
    pub surface_fit: ImageFit,
    pub surface_transform: Affine2,
    pub vector_source: Option<Arc<VectorAsset>>,
    pub vector_render_mode: VectorRenderMode,
    pub children: Vec<El>,
    pub opacity: f32,
    pub translate: (f32, f32),
    pub scale: f32,
    pub animate: Option<Timing>,
    pub redraw_within: Option<Duration>,
    pub computed_id: String,
}

The core tree node.

Construct via the component builders (text, button, card, column, …) and chain modifiers (.padding, .gap, .fill, …). Avoid building El directly — the builders set polished defaults.

#[non_exhaustive] — El is meant to be built through the component constructors, not by struct-literal syntax. Direct construction from outside this crate is intentionally disabled so adding new layout/style fields stays a non-breaking change.

Fields (Non-exhaustive)

Non-exhaustive structs could have additional fields added in future. Therefore, non-exhaustive structs cannot be constructed in external crates using the traditional Struct { .. } syntax; cannot be matched against without a wildcard ..; and struct update syntax will not work.

kind: Kind

style_profile: StyleProfile

key: Option<String>

block_pointer: bool

hit_overflow: Sides

Expand this element’s pointer hit target beyond its transformed layout rect. Layout-neutral and paint-neutral: siblings don’t move, the element doesn’t draw larger, and focus rings / shadows still use Self::paint_overflow.

Use sparingly for controls with deliberately small visuals but larger intended targets (resize handles, compact icon affordances, row chrome). Hover, press, cursor, tooltip, and click routing all share this expanded target, so the invisible area behaves like the visible control. Ancestor clips still bound hit-testing.

focusable: bool

focus_ring_placement: FocusRingPlacement

always_show_focus_ring: bool

Show the focus ring on this node even when focus arrived via pointer (i.e. the runtime’s focus_visible is false). Default behavior matches the web platform’s :focus-visible heuristic — ring on Tab, no ring on click. Widgets like text inputs and text areas opt in here because the ring is a meaningful “this surface is now the active editing target” affordance even when activated by mouse, beyond what the caret alone shows.

selectable: bool

When true, this node is a pointer target for the library’s text-selection manager: pointer-down inside its rect starts (or extends) the global crate::selection::Selection anchored at this node’s key. The leaf must also carry an explicit .key(...) — same convention as focusable widgets — so the selection survives tree rebuilds.

Set via Self::selectable. Coordinates with focus on a per-pointer-event basis: pointer-down on a focusable widget transfers focus and clears selection; pointer-down on a selectable-only leaf moves selection without disturbing focus.

selection_source: Option<SelectionSource>

Optional source-backed selection payload. Plain text leaves select/copy their rendered Self::text. Rich text systems can attach a crate::selection::SelectionSource so pointer positions resolve through rendered text but copy returns the original driving syntax (for example Markdown or TeX).

capture_keys: bool

When true, all key events (other than registered hotkeys) route to this node as raw KeyDown instead of being interpreted by the library’s defaults (Tab traversal, Enter/Space activation, Escape escape). Used by text-input widgets that need to consume Tab/Enter/etc. as text or editing actions. Implies focusable at the runner — the flag only takes effect when the node is also the focused target.

alpha_follows_focused_ancestor: bool

When true, this node’s paint opacity is multiplied by the nearest focusable ancestor’s focus envelope (0..1). The library already animates that envelope on focus / blur; flagged nodes fade in and out with the same easing without any app-side focus tracking.

Used by text_input’s caret bar — the caret only paints when the input is focused, fading via the standard focus animation. Documented in widget_kit.md as part of the public surface.

blink_when_focused: bool

When true, this node’s paint opacity is also multiplied by the runtime’s caret blink alpha. Combine with alpha_follows_focused_ancestor (the caret should blink only while the input is focused) — the two compose multiplicatively. Used by text_input / text_area’s caret bar.

state_follows_interactive_ancestor: bool

When true, this node’s hover and press visual envelopes are borrowed from its nearest focusable ancestor instead of being driven by its own (always-zero) envelope.

The hit-test only ever resolves to a focusable target, so a child of an interactive container — a slider thumb, a select trigger’s chevron, the dot inside a radio — never receives hover or press envelopes of its own. Flagged children pick up the ancestor’s envelopes so they can lighten / darken / ring out alongside the surface that captured the input.

Used by slider’s thumb so grabbing the slider visibly reacts on the thumb itself, mirroring shadcn’s hover:ring-4 hover:ring-ring/50.

hover_alpha: Option<HoverAlpha>

When Some, this node’s paint opacity is bound to the subtree interaction envelope — max of the hover, focus, and press envelopes for the subtree rooted here. The drawn alpha interpolates from rest (no interaction anywhere in the subtree) to peak (full interaction), then composes multiplicatively with the existing Self::opacity / inherited opacity stack.

“Interaction” includes hovering, pressing, or keyboard-focusing any descendant — so a hover-revealed close icon stays visible when its tab is keyboard-focused, and an action pill stays visible when the cursor moves to one of its focusable buttons. Mirrors CSS’s “this element OR any descendant is hot.”

Layout-neutral — the element’s geometry stays fixed regardless of interaction state. Use for hover-revealed close buttons, secondary actions on list rows, hover-only validation icons, and other “show on interaction” patterns whose visibility shouldn’t shift the surrounding layout.

source: Source

axis: Axis

gap: f32

padding: Sides

align: Align

justify: Justify

width: Size

height: Size

component_size: Option<ComponentSize>

Optional t-shirt size for stock widgets. None means the active theme supplies the component-class default.

metrics_role: Option<MetricsRole>

Optional theme-facing metrics role. Stock widgets set this so the theme can resolve default height/padding/radius before layout; app-defined widgets can set the same role to opt into identical sizing behavior.

explicit_width: bool

Author-overrode layout metrics. Stock constructors set defaults without these flags; public modifiers flip them so theme metrics do not clobber explicit app choices.

explicit_height: bool

explicit_padding: bool

explicit_gap: bool

explicit_radius: bool

explicit_font_family: bool

explicit_mono_font_family: bool

Author overrode the monospace font face for this node — theme application leaves Self::mono_font_family alone when set.

explicit_mono: bool

Author opted this node into the monospace family via Self::mono. Role modifiers (Self::caption, Self::label, Self::body, Self::title, Self::heading, Self::display) leave Self::font_mono alone when this flag is set, so the natural reading order text(s).mono().caption() keeps the mono family. Without this guard, role application silently resets font_mono = false. The Self::code role always forces font_mono = true regardless.

fill: Option<Color>

dim_fill: Option<Color>

Alternate fill used when the nearest focusable ancestor’s focus envelope is below 1.0; the painter linearly interpolates from dim_fill toward fill as the envelope approaches 1.0. Used by text_input / text_area selection bands so the highlight remains visible (in a muted color) even when the input loses focus, matching the macOS convention.

stroke: Option<Color>

stroke_width: f32

radius: Corners

Corner radii in logical pixels. Authored as a scalar in the common case (.radius(tokens::RADIUS_MD) works via super::geometry::Corners::from); per-corner shapes use super::geometry::Corners::top, super::geometry::Corners::bottom, etc. The painter clamps each corner to half the shorter side.

shadow: f32

surface_role: SurfaceRole

paint_overflow: Sides

Permit this element to paint outside its layout bounds. The outset enlarges the quad geometry handed to the shader (and any focus / shadow / glow visuals are positioned in the overflow band) while leaving the layout rect — and therefore sibling positions and hit-testing — unchanged. Subject to ancestor clip rects: a focused widget inside a clip()ped parent has its overflow clipped, same as any other paint.

clip: bool

Clip this element’s own paint and descendants to its computed rect. Used by scroll panes, host-painted regions, overlays, and any region where overflow should not leak visually or receive events.

scrollable: bool

This element is a vertical scroll viewport. The layout pass reads the offset from UiState’s scroll-offset side map keyed by computed_id, clamps it to [0, content_h - viewport_h], and writes the clamped value back. Set automatically by crate::scroll().

pin_end: bool

When set on a Kind::Scroll container, the runtime tracks the “stick to bottom” pin used by chat logs and activity feeds: the scroll offset stays glued to the tail across content growth, the user can scroll up to break the pin, and scrolling back to the bottom re-engages it. No effect on non-scrollable nodes. Defaults to false; opt in with Self::pin_end.

Mirrors egui’s ScrollArea::stick_to_bottom(true). The “is the pin currently engaged” bit lives in crate::state::UiState’s scroll subsystem, keyed by computed_id; layout reads it each frame to decide whether to snap the stored offset to max_offset before clamping.

arrow_nav_siblings: bool

Treat this element’s focusable children as a single arrow-navigable group: while a focused element is one of the direct children, Up / Down / Home / End move focus among the group’s focusable siblings instead of being routed as a KeyDown. Tab traversal is unchanged.

Used by popover_panel so menu items in a dropdown are keyboard-navigable; available to any user widget that wants the same semantics.

tooltip: Option<String>

Tooltip text. When set, the runtime synthesizes a hover-driven tooltip layer anchored to this node — appearing after the hover delay elapses, fading in with the standard envelope, and dismissed when the pointer leaves or presses the node. The trigger doesn’t have to be focusable or keyed; the runtime anchors the tooltip via the trigger’s computed_id.

cursor: Option<Cursor>

Pointer cursor declared for this element. None falls through to whatever an ancestor declared, else crate::cursor::Cursor::Default. Resolution lives in crate::state::UiState::cursor: if a press is captured, the cursor follows the press target; otherwise the hovered node is walked root-ward for the first explicit declaration. Disabled state is not auto-mapped — widgets that want crate::cursor::Cursor::NotAllowed when disabled set it explicitly in their build closure.

cursor_pressed: Option<Cursor>

Cursor to show only while a press is captured at this exact node. Powers the natural Grab → Grabbing transition: the slider sets cursor=Grab + cursor_pressed=Grabbing, and the resolver picks the latter while the press anchors here. Unlike Self::cursor, this does not walk up: an ancestor’s cursor_pressed doesn’t apply to a descendant press target. The press target’s own cursor is the fallback when this is None.

shader_override: Option<ShaderBinding>

Override the implicit stock::rounded_rect binding for this node’s surface. The escape hatch a user crate uses to bind a custom shader (e.g. liquid_glass).

layout_override: Option<LayoutFn>

Second escape hatch: author-supplied layout function that positions this node’s direct children. When set, the layout pass calls the function instead of running its column/row/ overlay distribution. The library still recurses into each child and still drives hit-test / focus / animation / scroll off the rects the function returns. See LayoutFn for the contract.

virtual_items: Option<VirtualItems>

Virtualized list state. Set by crate::virtual_list (and only on Kind::VirtualList nodes). The layout pass uses this to realize only the rows whose rect intersects the viewport. The node is automatically scrollable + clip.

scrollbar: bool

Show a draggable vertical scrollbar thumb when this node is scrollable and its content overflows the viewport. The thumb overlays the right edge of the viewport — it does not reflow children. No effect on non-scrollable nodes. Defaults to false; the crate::scroll() and crate::virtual_list() constructors flip it on by default. Authors disable with Self::no_scrollbar.

text: Option<String>

text_color: Option<Color>

text_align: TextAlign

text_wrap: TextWrap

text_overflow: TextOverflow

text_role: TextRole

text_max_lines: Option<usize>

font_size: f32

line_height: f32

font_family: FontFamily

mono_font_family: FontFamily

Monospace face used when Self::font_mono is set (or when the node carries TextRole::Code). Stamped by theme application from crate::Theme::mono_font_family unless the author set it explicitly via Self::mono_font_family.

font_weight: FontWeight

font_mono: bool

text_italic: bool

Italic styling. Author-set via Self::italic; honoured when this El is a styled text leaf inside an Kind::Inlines parent and (best-effort) on standalone text Els.

text_underline: bool

Underline styling. Author-set via Self::underline.

text_strikethrough: bool

Strikethrough styling. Author-set via Self::strikethrough.

text_link: Option<String>

Link target URL. When set on a text leaf inside Kind::Inlines, the run renders as a link (themed) and runs sharing a URL group together for hit-test. Author-set via Self::link.

text_bg: Option<Color>

Inline-run background. When set on a text leaf inside Kind::Inlines, the shaped span paints a solid quad behind its glyphs (one rect per line if the span wraps). No effect on standalone text Els — author wraps in a styled row() for chip-shaped surfaces. Author-set via Self::background.

math: Option<Arc<MathExpr>>

Native math expression rendered through Aetna’s math box layout. Set by crate::tree::math, crate::tree::math_inline, and crate::tree::math_block.

math_display: MathDisplay

icon: Option<IconSource>

icon_stroke_width: f32

image: Option<Image>

Raster image. When set together with Kind::Image (or any kind, though crate::image is the idiomatic builder) the draw_ops pass emits a crate::ir::DrawOp::Image projected per Self::image_fit and tinted by Self::image_tint. Layout intrinsic is the image’s natural pixel size when both width and height are Hug.

image_tint: Option<Color>

Multiply each sampled pixel by this colour (RGBA [0..1]). Most raster art wants None (no tint); set it for monochrome assets (icon-style PNGs) the app wants to recolour.

image_fit: ImageFit

How the image projects into the resolved rect. Defaults to ImageFit::Contain — preserves aspect ratio and letterboxes.

surface_source: Option<SurfaceSource>

App-owned GPU texture source for Kind::Surface elements. Set via Self::surface_source (typically through the crate::tree::surface builder).

surface_alpha: SurfaceAlpha

How the surface texture composes with widgets painted below it. Defaults to crate::surface::SurfaceAlpha::Premultiplied.

surface_fit: ImageFit

How the surface texture projects into the resolved rect. Defaults to ImageFit::Fill — stretch to the rect, ignoring aspect ratio. Contain / Cover / None mirror the corresponding modes on crate::tree::image.

surface_transform: Affine2

Affine applied to the texture quad in destination space, around the centre of the post-fit rect. Defaults to identity. Composes after Self::surface_fit: the fit projection picks the destination rect, then this matrix transforms it (rotate, scale, translate, shear). The auto-clip scissor still clamps to the El’s content rect, so transforms that move the texture outside that rect are cropped.

vector_source: Option<Arc<VectorAsset>>

Vector asset for Kind::Vector elements. Set via Self::vector_source (typically through the crate::tree::vector builder). The asset’s view box determines the natural aspect ratio.

vector_render_mode: VectorRenderMode

Render policy for Self::vector_source. Defaults to crate::vector::VectorRenderMode::Painted so authored vector paint is preserved unless the caller explicitly opts into mask rendering.

children: Vec<El>

opacity: f32

Paint-time alpha multiplier in [0, 1]. Default 1.0. Multiplies the alpha channel of fill, stroke, and text colour at draw time. Layout-neutral. App-driven changes are eased when Self::animate is set.

translate: (f32, f32)

Paint-time offset in logical pixels. Default (0.0, 0.0). Subtree-inheriting: descendants paint at their computed rect plus all ancestor translate accumulated through the paint recursion. Use this to slide a sidebar / drawer / list-item without re-running layout. App-driven changes are eased when Self::animate is set.

scale: f32

Per-node uniform scale around the computed-rect centre. Default 1.0. Scales this node’s surface quad and (if it carries text) its glyph run together. Not subtree-inheriting — descendants keep their own scale. Use this for tap-bounce on a button. App- driven changes are eased when Self::animate is set.

animate: Option<Timing>

Opt-in app-driven prop interpolation. When Some(timing), the animation tracker eases fill / text_color / stroke / opacity / translate / scale between rebuilds — the value the build closure produces becomes the spring/tween target; current carries over from last frame. State visuals (hover / press / focus ring) keep their own library defaults regardless.

redraw_within: Option<Duration>

Inside-out redraw deadline: when Some(d) and this El is visible (rect intersects the viewport), Aetna asks the host to schedule the next frame within d. Aggregated across the tree via min and surfaced as [crate::runtime::PrepareResult::next_redraw_in]; the host drives the loop, Aetna mediates by visibility.

Use this for any widget whose paint depends on time (animated images, video frames written via surface(), custom shaders that don’t go through the samples_time registration path, hover-and-fade effects implemented outside the built-in animation tracker). Duration::ZERO means “next frame ASAP”; non-zero values let the host pace at lower-than-display cadence.

computed_id: String

Stable path-based ID, filled by the layout pass. Used as the key for every side map that holds per-node bookkeeping in crate::state::UiState — computed rects, interaction state, state-envelope amounts, scroll offsets, in-flight animations.

Implementations

impl El

pub fn primary(self) -> Self

Examples found in repository

examples/settings_calibration.rs (line 104)

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

examples/polish_calibration.rs (line 134)

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

examples/circular_layout.rs (line 63)

fn fixture() -> El {
    let centre = h2("Compass").center_text();
    let dirs = [
        ("North", "n"),
        ("NE", "ne"),
        ("East", "e"),
        ("SE", "se"),
        ("South", "s"),
        ("SW", "sw"),
        ("West", "w"),
        ("NW", "nw"),
    ];

    let mut children: Vec<El> = vec![centre];
    for (label, k) in dirs {
        children.push(button(label).key(k).primary());
    }

    column([
        h1("Custom layout — circular"),
        paragraph(
            "Eight buttons positioned on a circle by an author-supplied \
             LayoutFn. Stock paint, automatic hover/press, and hit-test \
             all keep working — only the rect distribution changed.",
        )
        .muted(),
        stack(children)
            .key("compass")
            .layout(circular)
            .width(Size::Fill(1.0))
            .height(Size::Fixed(360.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/palette_demo.rs (line 322)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

examples/settings.rs (line 59)

fn settings() -> El {
    column([
        h1("Settings"),
        titled_card(
            "Account",
            [
                row([text("Email"), spacer(), text("user@example.com").muted()]),
                row([
                    text("Two-factor authentication"),
                    spacer(),
                    badge("Enabled").success(),
                ]),
                row([
                    text("Recovery codes"),
                    spacer(),
                    button("Generate").secondary(),
                ]),
            ],
        ),
        titled_card(
            "Appearance",
            [
                row([text("Theme"), spacer(), button("Dark").secondary()]),
                row([text("Compact mode"), spacer(), badge("Off").muted()]),
                row([text("Font size"), spacer(), text("14")]),
            ],
        ),
        titled_card(
            "Danger zone",
            [row([
                column([
                    text("Delete account").bold(),
                    text("Permanently remove your account and all data.")
                        .muted()
                        .small(),
                ])
                .gap(tokens::SPACE_1)
                .align(Align::Start)
                .width(Size::Hug),
                spacer(),
                button("Delete").destructive(),
            ])],
        ),
        row([spacer(), button("Cancel").ghost(), button("Save").primary()]),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn success(self) -> Self

Examples found in repository

examples/settings_calibration.rs (line 299)

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

examples/virtual_list.rs (line 22)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

examples/polish_calibration.rs (line 145)

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/dashboard_01_calibration.rs (line 223)

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

examples/palette_demo.rs (line 330)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

examples/settings.rs (line 26)

fn settings() -> El {
    column([
        h1("Settings"),
        titled_card(
            "Account",
            [
                row([text("Email"), spacer(), text("user@example.com").muted()]),
                row([
                    text("Two-factor authentication"),
                    spacer(),
                    badge("Enabled").success(),
                ]),
                row([
                    text("Recovery codes"),
                    spacer(),
                    button("Generate").secondary(),
                ]),
            ],
        ),
        titled_card(
            "Appearance",
            [
                row([text("Theme"), spacer(), button("Dark").secondary()]),
                row([text("Compact mode"), spacer(), badge("Off").muted()]),
                row([text("Font size"), spacer(), text("14")]),
            ],
        ),
        titled_card(
            "Danger zone",
            [row([
                column([
                    text("Delete account").bold(),
                    text("Permanently remove your account and all data.")
                        .muted()
                        .small(),
                ])
                .gap(tokens::SPACE_1)
                .align(Align::Start)
                .width(Size::Hug),
                spacer(),
                button("Delete").destructive(),
            ])],
        ),
        row([spacer(), button("Cancel").ghost(), button("Save").primary()]),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn warning(self) -> Self

Examples found in repository

examples/virtual_list.rs (line 21)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

examples/dashboard_01_calibration.rs (line 225)

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

examples/polish_calibration.rs (line 247)

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/palette_demo.rs (line 331)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

pub fn destructive(self) -> Self

Examples found in repository

examples/virtual_list.rs (line 23)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

examples/polish_calibration.rs (line 147)

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/modal.rs (line 33)

fn modal_fixture() -> El {
    stack([
        column([
            h1("Account"),
            titled_card(
                "Profile",
                [
                    row([text("Email"), spacer(), text("user@example.com").muted()]),
                    row([text("Plan"), spacer(), badge("Pro").info()]),
                ],
            ),
            titled_card(
                "Danger zone",
                [row([
                    column([
                        text("Delete account").bold(),
                        text("Remove this account and all associated data.")
                            .muted()
                            .small(),
                    ])
                    .gap(tokens::SPACE_1)
                    .align(Align::Start)
                    .width(Size::Hug),
                    spacer(),
                    button("Delete").destructive().key("open-delete"),
                ])],
            ),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7),
        modal(
            "delete-account",
            "Delete account?",
            [
                text("Permanent action. Export data first.").muted(),
                row([
                    spacer(),
                    button("Cancel").ghost().key("cancel-delete"),
                    button("Delete").destructive().key("confirm-delete"),
                ])
                .gap(tokens::SPACE_2),
            ],
        ),
    ])
}

examples/palette_demo.rs (line 332)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

examples/settings.rs (line 56)

fn settings() -> El {
    column([
        h1("Settings"),
        titled_card(
            "Account",
            [
                row([text("Email"), spacer(), text("user@example.com").muted()]),
                row([
                    text("Two-factor authentication"),
                    spacer(),
                    badge("Enabled").success(),
                ]),
                row([
                    text("Recovery codes"),
                    spacer(),
                    button("Generate").secondary(),
                ]),
            ],
        ),
        titled_card(
            "Appearance",
            [
                row([text("Theme"), spacer(), button("Dark").secondary()]),
                row([text("Compact mode"), spacer(), badge("Off").muted()]),
                row([text("Font size"), spacer(), text("14")]),
            ],
        ),
        titled_card(
            "Danger zone",
            [row([
                column([
                    text("Delete account").bold(),
                    text("Permanently remove your account and all data.")
                        .muted()
                        .small(),
                ])
                .gap(tokens::SPACE_1)
                .align(Align::Start)
                .width(Size::Hug),
                spacer(),
                button("Delete").destructive(),
            ])],
        ),
        row([spacer(), button("Cancel").ghost(), button("Save").primary()]),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn info(self) -> Self

Examples found in repository

examples/scroll_list.rs (line 19)

fn scroll_list_fixture() -> El {
    let rows: Vec<El> = (0..20)
        .map(|i| {
            row([
                badge(format!("#{i}")).info(),
                text(format!("Notification {i}")).bold(),
                spacer(),
                text(format!("{}m ago", i + 1)).muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Fixed(44.0))
            .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
        })
        .collect();

    let list = scroll(rows)
        .key("notifications")
        .height(Size::Fixed(420.0))
        .padding(tokens::SPACE_2);

    column([
        h2("Notifications"),
        text("Roll the wheel inside the panel to scroll. The content is taller than the viewport.")
            .muted(),
        list,
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/dashboard_01_calibration.rs (line 417)

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

examples/polish_calibration.rs (line 249)

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/modal.rs (line 17)

fn modal_fixture() -> El {
    stack([
        column([
            h1("Account"),
            titled_card(
                "Profile",
                [
                    row([text("Email"), spacer(), text("user@example.com").muted()]),
                    row([text("Plan"), spacer(), badge("Pro").info()]),
                ],
            ),
            titled_card(
                "Danger zone",
                [row([
                    column([
                        text("Delete account").bold(),
                        text("Remove this account and all associated data.")
                            .muted()
                            .small(),
                    ])
                    .gap(tokens::SPACE_1)
                    .align(Align::Start)
                    .width(Size::Hug),
                    spacer(),
                    button("Delete").destructive().key("open-delete"),
                ])],
            ),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7),
        modal(
            "delete-account",
            "Delete account?",
            [
                text("Permanent action. Export data first.").muted(),
                row([
                    spacer(),
                    button("Cancel").ghost().key("cancel-delete"),
                    button("Delete").destructive().key("confirm-delete"),
                ])
                .gap(tokens::SPACE_2),
            ],
        ),
    ])
}

examples/palette_demo.rs (line 333)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

pub fn secondary(self) -> Self

Default-styled secondary surface. This is the default look for button(...); calling .secondary() makes intent explicit.

Examples found in repository

examples/settings_calibration.rs (line 103)

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

examples/polish_calibration.rs (line 131)

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

examples/custom_shader.rs (line 62)

fn fixture() -> El {
    column([
        h1("Custom shader demo"),
        paragraph(
            "Three buttons below paint via a registered custom shader \
             (gradient.wgsl). The right-hand button is a stock rounded_rect \
             for contrast.",
        )
        .muted(),
        titled_card(
            "gradient.wgsl — vertical linear gradient",
            [row([
                gradient_button(
                    "Sunrise",
                    Color::rgb(255, 200, 90),
                    Color::rgb(245, 95, 110),
                    tokens::RADIUS_MD,
                ),
                gradient_button(
                    "Ocean",
                    Color::rgb(120, 200, 255),
                    Color::rgb(40, 90, 200),
                    tokens::RADIUS_MD,
                ),
                gradient_button(
                    "Forest",
                    Color::rgb(180, 230, 140),
                    Color::rgb(40, 110, 80),
                    tokens::RADIUS_MD,
                ),
                spacer(),
                button("Stock").secondary(),
            ])
            .gap(tokens::SPACE_3)],
        ),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/palette_demo.rs (line 323)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

examples/settings.rs (line 31)

fn settings() -> El {
    column([
        h1("Settings"),
        titled_card(
            "Account",
            [
                row([text("Email"), spacer(), text("user@example.com").muted()]),
                row([
                    text("Two-factor authentication"),
                    spacer(),
                    badge("Enabled").success(),
                ]),
                row([
                    text("Recovery codes"),
                    spacer(),
                    button("Generate").secondary(),
                ]),
            ],
        ),
        titled_card(
            "Appearance",
            [
                row([text("Theme"), spacer(), button("Dark").secondary()]),
                row([text("Compact mode"), spacer(), badge("Off").muted()]),
                row([text("Font size"), spacer(), text("14")]),
            ],
        ),
        titled_card(
            "Danger zone",
            [row([
                column([
                    text("Delete account").bold(),
                    text("Permanently remove your account and all data.")
                        .muted()
                        .small(),
                ])
                .gap(tokens::SPACE_1)
                .align(Align::Start)
                .width(Size::Hug),
                spacer(),
                button("Delete").destructive(),
            ])],
        ),
        row([spacer(), button("Cancel").ghost(), button("Save").primary()]),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn ghost(self) -> Self

No fill, no border. Low-emphasis actions like “Cancel” alongside a primary “Save”.

Examples found in repository

examples/settings_calibration.rs (line 99)

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

examples/dashboard_01_calibration.rs (line 196)

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

examples/modal.rs (line 46)

fn modal_fixture() -> El {
    stack([
        column([
            h1("Account"),
            titled_card(
                "Profile",
                [
                    row([text("Email"), spacer(), text("user@example.com").muted()]),
                    row([text("Plan"), spacer(), badge("Pro").info()]),
                ],
            ),
            titled_card(
                "Danger zone",
                [row([
                    column([
                        text("Delete account").bold(),
                        text("Remove this account and all associated data.")
                            .muted()
                            .small(),
                    ])
                    .gap(tokens::SPACE_1)
                    .align(Align::Start)
                    .width(Size::Hug),
                    spacer(),
                    button("Delete").destructive().key("open-delete"),
                ])],
            ),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7),
        modal(
            "delete-account",
            "Delete account?",
            [
                text("Permanent action. Export data first.").muted(),
                row([
                    spacer(),
                    button("Cancel").ghost().key("cancel-delete"),
                    button("Delete").destructive().key("confirm-delete"),
                ])
                .gap(tokens::SPACE_2),
            ],
        ),
    ])
}

examples/palette_demo.rs (line 325)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

examples/settings.rs (line 59)

fn settings() -> El {
    column([
        h1("Settings"),
        titled_card(
            "Account",
            [
                row([text("Email"), spacer(), text("user@example.com").muted()]),
                row([
                    text("Two-factor authentication"),
                    spacer(),
                    badge("Enabled").success(),
                ]),
                row([
                    text("Recovery codes"),
                    spacer(),
                    button("Generate").secondary(),
                ]),
            ],
        ),
        titled_card(
            "Appearance",
            [
                row([text("Theme"), spacer(), button("Dark").secondary()]),
                row([text("Compact mode"), spacer(), badge("Off").muted()]),
                row([text("Font size"), spacer(), text("14")]),
            ],
        ),
        titled_card(
            "Danger zone",
            [row([
                column([
                    text("Delete account").bold(),
                    text("Permanently remove your account and all data.")
                        .muted()
                        .small(),
                ])
                .gap(tokens::SPACE_1)
                .align(Align::Start)
                .width(Size::Hug),
                spacer(),
                button("Delete").destructive(),
            ])],
        ),
        row([spacer(), button("Cancel").ghost(), button("Save").primary()]),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn outline(self) -> Self

Outline-only style: no fill, prominent border.

Examples found in repository

examples/palette_demo.rs (line 324)

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

pub fn muted(self) -> Self

Muted/neutral emphasis. On surface profiles this swaps to a neutral background; on text-only profiles it switches the text color to muted-foreground.

Examples found in repository

examples/scrollbar.rs (line 24)

fn list_rows() -> Vec<El> {
    (0..40)
        .map(|i| {
            row([
                text(format!("{i:02}.")).mono().muted(),
                text(format!("scrollable list item {i}")),
            ])
            .gap(tokens::SPACE_2)
            .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
            .height(Size::Fixed(28.0))
            .align(Align::Center)
        })
        .collect()
}

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/custom_paint.rs (line 71)

fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
    row([
        graph_cell(c.lane, selected),
        text(c.sha).mono().muted(),
        text(c.subject),
        spacer(),
        text(format!("{} · {}", c.author, c.when)).muted(),
    ])
    .key(format!("commit-{idx}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(ROW_HEIGHT))
    .align(Align::Center)
}

fn fixture() -> El {
    #[rustfmt::skip]
    let commits = [
        FakeCommit { sha: "8a3f1c9", subject: "fix race condition in scheduler", author: "ada",     when: "12m", lane: 0 },
        FakeCommit { sha: "1b07d4e", subject: "tweak token tooltip wording",     author: "linus",   when: "1h",  lane: 0 },
        FakeCommit { sha: "9f2e4a1", subject: "wire avatar fallback identicon",  author: "joelle",  when: "3h",  lane: 1 },
        FakeCommit { sha: "44ab8d2", subject: "diff: word-level highlight pass", author: "raphael", when: "5h",  lane: 1 },
        FakeCommit { sha: "61c0fe7", subject: "ci: bump rust toolchain to 1.85", author: "mei",     when: "7h",  lane: 2 },
        FakeCommit { sha: "a90215b", subject: "switch logging to env_logger",    author: "isabel",  when: "1d",  lane: 2 },
        FakeCommit { sha: "0d7e3c4", subject: "drop unused commit_detail cache", author: "noor",    when: "1d",  lane: 1 },
        FakeCommit { sha: "33b2118", subject: "context-menu spacing pass",       author: "kira",    when: "2d",  lane: 3 },
    ];
    let selected_idx = 3;
    let rows = commits
        .iter()
        .enumerate()
        .map(|(i, c)| build_row(c, i, i == selected_idx))
        .collect::<Vec<_>>();

    column([
        h2("Custom-painted commit graph"),
        text("8 commits · custom shader paints lane line + circle node").muted(),
        column(rows).gap(0.0),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)
}

examples/virtual_list.rs (line 20)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

fn fixture() -> El {
    column([
        h1("Virtualized list"),
        paragraph(format!(
            "{ROW_COUNT} rows × {ROW_HEIGHT}px in a windowed viewport. \
             Only the rows intersecting the viewport are realized — see \
             `tree.txt` for proof."
        ))
        .muted(),
        virtual_list(ROW_COUNT, ROW_HEIGHT, build_row)
            .key("entries")
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/settings_calibration.rs (line 169)

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

examples/polish_calibration.rs (line 46)

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/scroll_list.rs (line 22)

fn scroll_list_fixture() -> El {
    let rows: Vec<El> = (0..20)
        .map(|i| {
            row([
                badge(format!("#{i}")).info(),
                text(format!("Notification {i}")).bold(),
                spacer(),
                text(format!("{}m ago", i + 1)).muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Fixed(44.0))
            .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
        })
        .collect();

    let list = scroll(rows)
        .key("notifications")
        .height(Size::Fixed(420.0))
        .padding(tokens::SPACE_2);

    column([
        h2("Notifications"),
        text("Roll the wheel inside the panel to scroll. The content is taller than the viewport.")
            .muted(),
        list,
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

Additional examples can be found in:

• examples/circular_layout.rs
• examples/toast.rs
• examples/inline_runs.rs
• examples/custom_shader.rs
• examples/dashboard_01_calibration.rs
• examples/palette_demo.rs
• examples/modal.rs
• examples/settings.rs
• examples/inline_runs_highlight.rs
• examples/long_form_content.rs

pub fn selected(self) -> Self

Selected row/item treatment. Use for the item that is selected inside a collection, not for transient keyboard focus.

Examples found in repository

examples/polish_calibration.rs (line 282)

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

pub fn current(self) -> Self

Current navigation/page treatment. Slightly quieter than Self::selected so nav chrome does not compete with content.

Examples found in repository

examples/polish_calibration.rs (line 88)

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

examples/settings_calibration.rs (line 156)

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

examples/dashboard_01_calibration.rs (line 133)

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

pub fn disabled(self) -> Self

Disabled treatment for controls and rows. Also removes the node from focus order and blocks pointer hits on this element.

Examples found in repository

examples/polish_calibration.rs (line 344)

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

pub fn invalid(self) -> Self

Invalid/error treatment for inputs, rows, and validation badges.

Examples found in repository

examples/polish_calibration.rs (line 339)

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

pub fn loading(self) -> Self

Loading treatment for a direct text-bearing node. Container widgets can still use this for opacity even when they do not have their own label text.

Examples found in repository

examples/polish_calibration.rs (line 345)

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

pub fn text_role(self, role: TextRole) -> Self

pub fn caption(self) -> Self

Examples found in repository

examples/palette_demo.rs (line 298)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

fn surface_sample(title: &'static str, fill: Color) -> El {
    column([
        text(title).label(),
        text("surface sample").caption().muted(),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_3)
    .fill(fill)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(76.0))
}

examples/polish_calibration.rs (line 265)

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/settings_calibration.rs (line 50)

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

examples/dashboard_01_calibration.rs (line 51)

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

pub fn label(self) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 352)

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

examples/palette_demo.rs (line 294)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

fn surface_sample(title: &'static str, fill: Color) -> El {
    column([
        text(title).label(),
        text("surface sample").caption().muted(),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_3)
    .fill(fill)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(76.0))
}

examples/polish_calibration.rs (line 272)

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

pub fn body(self) -> Self

pub fn title(self) -> Self

pub fn heading(self) -> Self

Examples found in repository

examples/settings_calibration.rs (line 167)

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

pub fn display(self) -> Self

Examples found in repository

examples/polish_calibration.rs (line 154)

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

pub fn bold(self) -> Self

Examples found in repository

examples/scroll_list.rs (line 20)

fn scroll_list_fixture() -> El {
    let rows: Vec<El> = (0..20)
        .map(|i| {
            row([
                badge(format!("#{i}")).info(),
                text(format!("Notification {i}")).bold(),
                spacer(),
                text(format!("{}m ago", i + 1)).muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Fixed(44.0))
            .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
        })
        .collect();

    let list = scroll(rows)
        .key("notifications")
        .height(Size::Fixed(420.0))
        .padding(tokens::SPACE_2);

    column([
        h2("Notifications"),
        text("Roll the wheel inside the panel to scroll. The content is taller than the viewport.")
            .muted(),
        list,
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/inline_runs.rs (line 23)

fn fixture() -> El {
    column([
        h2("Inline runs"),
        text_runs([
            text("Aetna's attributed-text path lets you compose runs with "),
            text("bold").bold(),
            text(", "),
            text("italic").italic(),
            text(", "),
            text("colored").color(tokens::DESTRUCTIVE),
            text(", and "),
            text("inline code").code(),
            text(" segments inside one wrapping paragraph."),
            hard_break(),
            text("Hard breaks act like ").muted(),
            text("<br>").code(),
            text(" — they end the current line without breaking out of the run.").muted(),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        paragraph(
            "All of the above flows through one cosmic-text rich-text shape — \
             wrapping decisions cross run boundaries the way real prose wraps.",
        )
        .muted(),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

examples/modal.rs (line 24)

fn modal_fixture() -> El {
    stack([
        column([
            h1("Account"),
            titled_card(
                "Profile",
                [
                    row([text("Email"), spacer(), text("user@example.com").muted()]),
                    row([text("Plan"), spacer(), badge("Pro").info()]),
                ],
            ),
            titled_card(
                "Danger zone",
                [row([
                    column([
                        text("Delete account").bold(),
                        text("Remove this account and all associated data.")
                            .muted()
                            .small(),
                    ])
                    .gap(tokens::SPACE_1)
                    .align(Align::Start)
                    .width(Size::Hug),
                    spacer(),
                    button("Delete").destructive().key("open-delete"),
                ])],
            ),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7),
        modal(
            "delete-account",
            "Delete account?",
            [
                text("Permanent action. Export data first.").muted(),
                row([
                    spacer(),
                    button("Cancel").ghost().key("cancel-delete"),
                    button("Delete").destructive().key("confirm-delete"),
                ])
                .gap(tokens::SPACE_2),
            ],
        ),
    ])
}

examples/settings.rs (line 47)

fn settings() -> El {
    column([
        h1("Settings"),
        titled_card(
            "Account",
            [
                row([text("Email"), spacer(), text("user@example.com").muted()]),
                row([
                    text("Two-factor authentication"),
                    spacer(),
                    badge("Enabled").success(),
                ]),
                row([
                    text("Recovery codes"),
                    spacer(),
                    button("Generate").secondary(),
                ]),
            ],
        ),
        titled_card(
            "Appearance",
            [
                row([text("Theme"), spacer(), button("Dark").secondary()]),
                row([text("Compact mode"), spacer(), badge("Off").muted()]),
                row([text("Font size"), spacer(), text("14")]),
            ],
        ),
        titled_card(
            "Danger zone",
            [row([
                column([
                    text("Delete account").bold(),
                    text("Permanently remove your account and all data.")
                        .muted()
                        .small(),
                ])
                .gap(tokens::SPACE_1)
                .align(Align::Start)
                .width(Size::Hug),
                spacer(),
                button("Delete").destructive(),
            ])],
        ),
        row([spacer(), button("Cancel").ghost(), button("Save").primary()]),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/inline_runs_highlight.rs (line 38)

fn fixture() -> El {
    column([
        h2("Inline run backgrounds"),
        paragraph(
            "RunStyle.bg paints a per-line solid quad behind the glyphs of \
             a styled span — the shaper computes the rect from the actual \
             glyph extents, so wrapping splits the highlight cleanly.",
        )
        .muted(),
        // Search-result style.
        text_runs([
            text("…the matcher finds "),
            text("aetna").background(HIGHLIGHT_YELLOW).bold(),
            text(" in "),
            text("aetna_core::widgets").mono(),
            text(" — the highlight tracks the glyph extent."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Diff-style: add + remove tints inside the same line.
        text_runs([
            text("- "),
            text("error::Custom").mono().background(DIFF_REMOVE),
            text("(\"too narrow\")"),
            hard_break(),
            text("+ "),
            text("error::WrapTooNarrow").mono().background(DIFF_ADD),
            text(" { available }"),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Wrapping highlight: long span that spans two lines.
        text_runs([
            text("Long highlight: "),
            text("the quick brown fox jumps over the lazy dog and keeps going")
                .background(HIGHLIGHT_YELLOW),
            text(" — the rect is split per line."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

examples/long_form_content.rs (line 33)

fn fixture() -> El {
    column([
        h2("Long-form content widgets"),
        paragraph(
            "These primitives compose the markdown-shaped vocabulary an \
             upcoming transformer will target. Each widget is plain \
             Aetna — selectable text, themed surfaces, the same layout \
             pass as everything else.",
        ),
        h3("Highlights"),
        bullet_list(vec![
            text_runs([
                text("Bulleted lists with a hanging indent — wrapped lines align under "),
                text("themselves").italic(),
                text(", not under the marker."),
            ]),
            text_runs([
                text("Inline runs work inside list items: "),
                text("bold").bold(),
                text(", "),
                text("code").code(),
                text(", "),
                text("links").link("https://aetna.dev"),
                text("."),
            ]),
            text("Nested blocks live inside an item by composing a column."),
        ]),
        blockquote([
            paragraph(
                "Markdown's shape is HTML's shape. The Aetna widget kit \
                 already mirrors most of that shape, so the transformer \
                 mostly hands events to existing constructors.",
            ),
            paragraph("— Aetna design notes").muted(),
        ]),
        h3("Setup steps"),
        numbered_list(vec![
            text("Add `aetna-markdown` to the workspace."),
            text_runs([
                text("Pull in "),
                text("pulldown-cmark").code(),
                text(" with the GFM features the project actually uses."),
            ]),
            text("Wire the transformer through the existing widget kit — paragraph, list, blockquote, code_block, divider, table."),
        ]),
        h3("Example fenced block"),
        code_block(
            "fn render(md: &str) -> El {\n    \
                 // pulldown-cmark events -> El\n    \
                 todo!(\"phase 2\")\n}",
        ),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

Additional examples can be found in:

• examples/scrollbar.rs

pub fn semibold(self) -> Self

Examples found in repository

examples/settings_calibration.rs (line 47)

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

examples/dashboard_01_calibration.rs (line 47)

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

pub fn small(self) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 352)

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

examples/polish_calibration.rs (line 272)

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/modal.rs (line 27)

fn modal_fixture() -> El {
    stack([
        column([
            h1("Account"),
            titled_card(
                "Profile",
                [
                    row([text("Email"), spacer(), text("user@example.com").muted()]),
                    row([text("Plan"), spacer(), badge("Pro").info()]),
                ],
            ),
            titled_card(
                "Danger zone",
                [row([
                    column([
                        text("Delete account").bold(),
                        text("Remove this account and all associated data.")
                            .muted()
                            .small(),
                    ])
                    .gap(tokens::SPACE_1)
                    .align(Align::Start)
                    .width(Size::Hug),
                    spacer(),
                    button("Delete").destructive().key("open-delete"),
                ])],
            ),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7),
        modal(
            "delete-account",
            "Delete account?",
            [
                text("Permanent action. Export data first.").muted(),
                row([
                    spacer(),
                    button("Cancel").ghost().key("cancel-delete"),
                    button("Delete").destructive().key("confirm-delete"),
                ])
                .gap(tokens::SPACE_2),
            ],
        ),
    ])
}

examples/settings.rs (line 50)

fn settings() -> El {
    column([
        h1("Settings"),
        titled_card(
            "Account",
            [
                row([text("Email"), spacer(), text("user@example.com").muted()]),
                row([
                    text("Two-factor authentication"),
                    spacer(),
                    badge("Enabled").success(),
                ]),
                row([
                    text("Recovery codes"),
                    spacer(),
                    button("Generate").secondary(),
                ]),
            ],
        ),
        titled_card(
            "Appearance",
            [
                row([text("Theme"), spacer(), button("Dark").secondary()]),
                row([text("Compact mode"), spacer(), badge("Off").muted()]),
                row([text("Font size"), spacer(), text("14")]),
            ],
        ),
        titled_card(
            "Danger zone",
            [row([
                column([
                    text("Delete account").bold(),
                    text("Permanently remove your account and all data.")
                        .muted()
                        .small(),
                ])
                .gap(tokens::SPACE_1)
                .align(Align::Start)
                .width(Size::Hug),
                spacer(),
                button("Delete").destructive(),
            ])],
        ),
        row([spacer(), button("Cancel").ghost(), button("Save").primary()]),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn xsmall(self) -> Self

pub fn color(self, c: Color) -> Self

Set an explicit text color.

Examples found in repository

examples/settings_calibration.rs (line 158)

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/dashboard_01_calibration.rs (line 112)

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

examples/inline_runs.rs (line 27)

fn fixture() -> El {
    column([
        h2("Inline runs"),
        text_runs([
            text("Aetna's attributed-text path lets you compose runs with "),
            text("bold").bold(),
            text(", "),
            text("italic").italic(),
            text(", "),
            text("colored").color(tokens::DESTRUCTIVE),
            text(", and "),
            text("inline code").code(),
            text(" segments inside one wrapping paragraph."),
            hard_break(),
            text("Hard breaks act like ").muted(),
            text("<br>").code(),
            text(" — they end the current line without breaking out of the run.").muted(),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        paragraph(
            "All of the above flows through one cosmic-text rich-text shape — \
             wrapping decisions cross run boundaries the way real prose wraps.",
        )
        .muted(),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

impl El

pub fn text(self, t: impl Into<String>) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 454)

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/polish_calibration.rs (line 358)

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

pub fn text_color(self, c: Color) -> Self

Examples found in repository

examples/custom_shader.rs (line 23)

fn gradient_button(label: &str, top: Color, bottom: Color, radius: f32) -> El {
    button(label).text_color(tokens::PRIMARY_FOREGROUND).shader(
        ShaderBinding::custom("gradient")
            .color("vec_a", top)
            .color("vec_b", bottom)
            .f32("vec_c", radius),
    )
}

pub fn text_align(self, align: TextAlign) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 455)

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/polish_calibration.rs (line 359)

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

pub fn center_text(self) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 438)

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

examples/circular_layout.rs (line 49)

fn fixture() -> El {
    let centre = h2("Compass").center_text();
    let dirs = [
        ("North", "n"),
        ("NE", "ne"),
        ("East", "e"),
        ("SE", "se"),
        ("South", "s"),
        ("SW", "sw"),
        ("West", "w"),
        ("NW", "nw"),
    ];

    let mut children: Vec<El> = vec![centre];
    for (label, k) in dirs {
        children.push(button(label).key(k).primary());
    }

    column([
        h1("Custom layout — circular"),
        paragraph(
            "Eight buttons positioned on a circle by an author-supplied \
             LayoutFn. Stock paint, automatic hover/press, and hit-test \
             all keep working — only the rect distribution changed.",
        )
        .muted(),
        stack(children)
            .key("compass")
            .layout(circular)
            .width(Size::Fill(1.0))
            .height(Size::Fixed(360.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn end_text(self) -> Self

pub fn text_wrap(self, wrap: TextWrap) -> Self

pub fn wrap_text(self) -> Self

Examples found in repository

examples/inline_runs.rs (line 36)

fn fixture() -> El {
    column([
        h2("Inline runs"),
        text_runs([
            text("Aetna's attributed-text path lets you compose runs with "),
            text("bold").bold(),
            text(", "),
            text("italic").italic(),
            text(", "),
            text("colored").color(tokens::DESTRUCTIVE),
            text(", and "),
            text("inline code").code(),
            text(" segments inside one wrapping paragraph."),
            hard_break(),
            text("Hard breaks act like ").muted(),
            text("<br>").code(),
            text(" — they end the current line without breaking out of the run.").muted(),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        paragraph(
            "All of the above flows through one cosmic-text rich-text shape — \
             wrapping decisions cross run boundaries the way real prose wraps.",
        )
        .muted(),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

examples/settings_calibration.rs (line 70)

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

examples/inline_runs_highlight.rs (line 43)

fn fixture() -> El {
    column([
        h2("Inline run backgrounds"),
        paragraph(
            "RunStyle.bg paints a per-line solid quad behind the glyphs of \
             a styled span — the shaper computes the rect from the actual \
             glyph extents, so wrapping splits the highlight cleanly.",
        )
        .muted(),
        // Search-result style.
        text_runs([
            text("…the matcher finds "),
            text("aetna").background(HIGHLIGHT_YELLOW).bold(),
            text(" in "),
            text("aetna_core::widgets").mono(),
            text(" — the highlight tracks the glyph extent."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Diff-style: add + remove tints inside the same line.
        text_runs([
            text("- "),
            text("error::Custom").mono().background(DIFF_REMOVE),
            text("(\"too narrow\")"),
            hard_break(),
            text("+ "),
            text("error::WrapTooNarrow").mono().background(DIFF_ADD),
            text(" { available }"),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Wrapping highlight: long span that spans two lines.
        text_runs([
            text("Long highlight: "),
            text("the quick brown fox jumps over the lazy dog and keeps going")
                .background(HIGHLIGHT_YELLOW),
            text(" — the rect is split per line."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

pub fn nowrap_text(self) -> Self

Examples found in repository

examples/palette_demo.rs (line 296)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

pub fn text_overflow(self, overflow: TextOverflow) -> Self

pub fn ellipsis(self) -> Self

Examples found in repository

examples/polish_calibration.rs (line 72)

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/palette_demo.rs (line 295)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

examples/settings_calibration.rs (line 48)

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

examples/dashboard_01_calibration.rs (line 48)

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

pub fn max_lines(self, lines: usize) -> Self

pub fn font_size(self, s: f32) -> Self

pub fn line_height(self, h: f32) -> Self

pub fn font_weight(self, w: FontWeight) -> Self

Examples found in repository

examples/polish_calibration.rs (line 71)

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/settings_calibration.rs (line 142)

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

examples/dashboard_01_calibration.rs (line 116)

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

pub fn font_family(self, family: FontFamily) -> Self

pub fn inter(self) -> Self

pub fn roboto(self) -> Self

pub fn mono_font_family(self, family: FontFamily) -> Self

Override the monospace face used when this node renders as code (font_mono = true, TextRole::Code, or any descendant that inherits the value through theme propagation). Setting this pins the node — theme with_mono_font_family(...) no longer stamps over it.

pub fn jetbrains_mono(self) -> Self

Pin this node’s monospace face to JetBrains Mono. Convenience shorthand for .mono_font_family(FontFamily::JetBrainsMono).

pub fn icon_source(self, source: impl IntoIconSource) -> Self

Set the icon for this element to either a built-in crate::IconName, an app-supplied crate::SvgIcon, or a string-typed name from the built-in vocabulary.

pub fn icon_name(self, source: impl IntoIconSource) -> Self

Convenience alias for Self::icon_source preserved for call sites that want the historical name.

pub fn icon_stroke_width(self, width: f32) -> Self

pub fn icon_size(self, size: f32) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 113)

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

examples/settings_calibration.rs (line 349)

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

pub fn image(self, image: impl Into<Image>) -> Self

Attach a raster image. Usually you’ll want the crate::image free builder instead, which sets crate::Kind::Image for you; this method exists for cases where you’ve already constructed an El (e.g. through a stock widget) and want to swap in pixel art.

pub fn image_fit(self, fit: ImageFit) -> Self

pub fn image_tint(self, c: Color) -> Self

pub fn surface_source(self, source: SurfaceSource) -> Self

Attach an app-owned GPU texture source. Typically set via the crate::tree::surface builder (which also sets crate::Kind::Surface); reach for this method on a stock widget El whose Kind you want to keep.

pub fn surface_alpha(self, alpha: SurfaceAlpha) -> Self

How a crate::Kind::Surface El composes with widgets below it. Default is crate::surface::SurfaceAlpha::Premultiplied.

pub fn surface_fit(self, fit: ImageFit) -> Self

How a crate::Kind::Surface El’s texture projects into its resolved rect. Defaults to crate::image::ImageFit::Fill — stretch to the rect — for parity with the pre-surface_fit behaviour. Contain / Cover / None mirror the modes on crate::El::image_fit.

pub fn surface_transform(self, transform: Affine2) -> Self

Affine applied to the texture quad in destination space, around the centre of the post-Self::surface_fit rect. Defaults to identity. Use this for rotation, mirroring, source-dimension- independent zoom/pan, or any combination thereof. The El’s auto-clip scissor still clamps the rendered content to the resolved rect.

pub fn vector_source(self, asset: impl Into<Arc<VectorAsset>>) -> Self

Attach a vector asset source. Typically set via the crate::tree::vector builder (which also sets crate::Kind::Vector); reach for this method on a stock widget El whose Kind you want to keep.

pub fn vector_render_mode(self, mode: VectorRenderMode) -> Self

Select how a vector asset should render. The default is crate::vector::VectorRenderMode::Painted, which preserves authored fills/strokes/gradients. Use Self::vector_mask when the asset is intended as one-colour coverage geometry.

pub fn vector_mask(self, color: Color) -> Self

Treat this vector as coverage geometry and paint it with one colour. Backends can render this through their MSDF path.

pub fn vector_painted(self) -> Self

Preserve authored vector paint. This is the default for crate::tree::vector.

pub fn redraw_within(self, deadline: Duration) -> Self

Inside-out redraw deadline. While this El is visible (rect intersects the viewport), Aetna asks the host to drive the next frame within deadline. Aggregated across the tree via min, so the host gets a single signal regardless of how many widgets are asking. Use Duration::ZERO for “next frame ASAP”; non-zero values pace the redraw loop below the display rate.

Apps that pause / resume animation (e.g. GIF playback) just stop calling this method on the relevant El — Aetna re-runs the aggregation each frame, so the redraw scheduler quiets automatically when no visible widget is asking.

pub fn mono(self) -> Self

Opt this node into the monospace face. Setting this flag also sets El::explicit_mono so a subsequent role modifier (.caption() / .label() / .body() / .title() / .heading() / .display()) won’t silently reset font_mono when the role’s default is non-mono. The natural reading order text(s).mono().caption() therefore renders in mono.

Examples found in repository

examples/scrollbar.rs (line 24)

fn list_rows() -> Vec<El> {
    (0..40)
        .map(|i| {
            row([
                text(format!("{i:02}.")).mono().muted(),
                text(format!("scrollable list item {i}")),
            ])
            .gap(tokens::SPACE_2)
            .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
            .height(Size::Fixed(28.0))
            .align(Align::Center)
        })
        .collect()
}

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/custom_paint.rs (line 71)

fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
    row([
        graph_cell(c.lane, selected),
        text(c.sha).mono().muted(),
        text(c.subject),
        spacer(),
        text(format!("{} · {}", c.author, c.when)).muted(),
    ])
    .key(format!("commit-{idx}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(ROW_HEIGHT))
    .align(Align::Center)
}

examples/virtual_list.rs (line 27)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

examples/inline_runs_highlight.rs (line 40)

fn fixture() -> El {
    column([
        h2("Inline run backgrounds"),
        paragraph(
            "RunStyle.bg paints a per-line solid quad behind the glyphs of \
             a styled span — the shaper computes the rect from the actual \
             glyph extents, so wrapping splits the highlight cleanly.",
        )
        .muted(),
        // Search-result style.
        text_runs([
            text("…the matcher finds "),
            text("aetna").background(HIGHLIGHT_YELLOW).bold(),
            text(" in "),
            text("aetna_core::widgets").mono(),
            text(" — the highlight tracks the glyph extent."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Diff-style: add + remove tints inside the same line.
        text_runs([
            text("- "),
            text("error::Custom").mono().background(DIFF_REMOVE),
            text("(\"too narrow\")"),
            hard_break(),
            text("+ "),
            text("error::WrapTooNarrow").mono().background(DIFF_ADD),
            text(" { available }"),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Wrapping highlight: long span that spans two lines.
        text_runs([
            text("Long highlight: "),
            text("the quick brown fox jumps over the lazy dog and keeps going")
                .background(HIGHLIGHT_YELLOW),
            text(" — the rect is split per line."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

pub fn italic(self) -> Self

Italic styling for a text run. Honoured by the crate::Kind::Inlines layout pass and (best-effort) on standalone text Els.

Examples found in repository

examples/inline_runs.rs (line 25)

fn fixture() -> El {
    column([
        h2("Inline runs"),
        text_runs([
            text("Aetna's attributed-text path lets you compose runs with "),
            text("bold").bold(),
            text(", "),
            text("italic").italic(),
            text(", "),
            text("colored").color(tokens::DESTRUCTIVE),
            text(", and "),
            text("inline code").code(),
            text(" segments inside one wrapping paragraph."),
            hard_break(),
            text("Hard breaks act like ").muted(),
            text("<br>").code(),
            text(" — they end the current line without breaking out of the run.").muted(),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        paragraph(
            "All of the above flows through one cosmic-text rich-text shape — \
             wrapping decisions cross run boundaries the way real prose wraps.",
        )
        .muted(),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

examples/long_form_content.rs (line 28)

fn fixture() -> El {
    column([
        h2("Long-form content widgets"),
        paragraph(
            "These primitives compose the markdown-shaped vocabulary an \
             upcoming transformer will target. Each widget is plain \
             Aetna — selectable text, themed surfaces, the same layout \
             pass as everything else.",
        ),
        h3("Highlights"),
        bullet_list(vec![
            text_runs([
                text("Bulleted lists with a hanging indent — wrapped lines align under "),
                text("themselves").italic(),
                text(", not under the marker."),
            ]),
            text_runs([
                text("Inline runs work inside list items: "),
                text("bold").bold(),
                text(", "),
                text("code").code(),
                text(", "),
                text("links").link("https://aetna.dev"),
                text("."),
            ]),
            text("Nested blocks live inside an item by composing a column."),
        ]),
        blockquote([
            paragraph(
                "Markdown's shape is HTML's shape. The Aetna widget kit \
                 already mirrors most of that shape, so the transformer \
                 mostly hands events to existing constructors.",
            ),
            paragraph("— Aetna design notes").muted(),
        ]),
        h3("Setup steps"),
        numbered_list(vec![
            text("Add `aetna-markdown` to the workspace."),
            text_runs([
                text("Pull in "),
                text("pulldown-cmark").code(),
                text(" with the GFM features the project actually uses."),
            ]),
            text("Wire the transformer through the existing widget kit — paragraph, list, blockquote, code_block, divider, table."),
        ]),
        h3("Example fenced block"),
        code_block(
            "fn render(md: &str) -> El {\n    \
                 // pulldown-cmark events -> El\n    \
                 todo!(\"phase 2\")\n}",
        ),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

pub fn background(self, color: Color) -> Self

Inline-run background. Honoured when this El is a styled text leaf inside an crate::Kind::Inlines parent: the shaped span paints a solid quad behind its glyphs (per-line if the span wraps). Mirrors HTML’s <mark> / inline background; the rect tracks the glyph extent rather than the El’s layout box, so a wrapped highlight follows the prose. No effect on standalone text Els.

Examples found in repository

examples/inline_runs_highlight.rs (line 38)

fn fixture() -> El {
    column([
        h2("Inline run backgrounds"),
        paragraph(
            "RunStyle.bg paints a per-line solid quad behind the glyphs of \
             a styled span — the shaper computes the rect from the actual \
             glyph extents, so wrapping splits the highlight cleanly.",
        )
        .muted(),
        // Search-result style.
        text_runs([
            text("…the matcher finds "),
            text("aetna").background(HIGHLIGHT_YELLOW).bold(),
            text(" in "),
            text("aetna_core::widgets").mono(),
            text(" — the highlight tracks the glyph extent."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Diff-style: add + remove tints inside the same line.
        text_runs([
            text("- "),
            text("error::Custom").mono().background(DIFF_REMOVE),
            text("(\"too narrow\")"),
            hard_break(),
            text("+ "),
            text("error::WrapTooNarrow").mono().background(DIFF_ADD),
            text(" { available }"),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        // Wrapping highlight: long span that spans two lines.
        text_runs([
            text("Long highlight: "),
            text("the quick brown fox jumps over the lazy dog and keeps going")
                .background(HIGHLIGHT_YELLOW),
            text(" — the rect is split per line."),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

pub fn underline(self) -> Self

Underline styling for a text run.

pub fn strikethrough(self) -> Self

Strikethrough styling for a text run.

pub fn code(self) -> Self

Markdown-flavoured inline-code styling. Currently mono-styled; a tinted background per the theme is a future addition. Authors who want raw mono without code chrome should use Self::mono instead.

Examples found in repository

examples/inline_runs.rs (line 29)

fn fixture() -> El {
    column([
        h2("Inline runs"),
        text_runs([
            text("Aetna's attributed-text path lets you compose runs with "),
            text("bold").bold(),
            text(", "),
            text("italic").italic(),
            text(", "),
            text("colored").color(tokens::DESTRUCTIVE),
            text(", and "),
            text("inline code").code(),
            text(" segments inside one wrapping paragraph."),
            hard_break(),
            text("Hard breaks act like ").muted(),
            text("<br>").code(),
            text(" — they end the current line without breaking out of the run.").muted(),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        paragraph(
            "All of the above flows through one cosmic-text rich-text shape — \
             wrapping decisions cross run boundaries the way real prose wraps.",
        )
        .muted(),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

examples/long_form_content.rs (line 35)

fn fixture() -> El {
    column([
        h2("Long-form content widgets"),
        paragraph(
            "These primitives compose the markdown-shaped vocabulary an \
             upcoming transformer will target. Each widget is plain \
             Aetna — selectable text, themed surfaces, the same layout \
             pass as everything else.",
        ),
        h3("Highlights"),
        bullet_list(vec![
            text_runs([
                text("Bulleted lists with a hanging indent — wrapped lines align under "),
                text("themselves").italic(),
                text(", not under the marker."),
            ]),
            text_runs([
                text("Inline runs work inside list items: "),
                text("bold").bold(),
                text(", "),
                text("code").code(),
                text(", "),
                text("links").link("https://aetna.dev"),
                text("."),
            ]),
            text("Nested blocks live inside an item by composing a column."),
        ]),
        blockquote([
            paragraph(
                "Markdown's shape is HTML's shape. The Aetna widget kit \
                 already mirrors most of that shape, so the transformer \
                 mostly hands events to existing constructors.",
            ),
            paragraph("— Aetna design notes").muted(),
        ]),
        h3("Setup steps"),
        numbered_list(vec![
            text("Add `aetna-markdown` to the workspace."),
            text_runs([
                text("Pull in "),
                text("pulldown-cmark").code(),
                text(" with the GFM features the project actually uses."),
            ]),
            text("Wire the transformer through the existing widget kit — paragraph, list, blockquote, code_block, divider, table."),
        ]),
        h3("Example fenced block"),
        code_block(
            "fn render(md: &str) -> El {\n    \
                 // pulldown-cmark events -> El\n    \
                 todo!(\"phase 2\")\n}",
        ),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

pub fn link(self, url: impl Into<String>) -> Self

Mark this run as a link to url. Inside an crate::Kind::Inlines parent the run paints with a link-themed color; runs sharing the same URL group together for hit-test.

Examples found in repository

examples/long_form_content.rs (line 37)

fn fixture() -> El {
    column([
        h2("Long-form content widgets"),
        paragraph(
            "These primitives compose the markdown-shaped vocabulary an \
             upcoming transformer will target. Each widget is plain \
             Aetna — selectable text, themed surfaces, the same layout \
             pass as everything else.",
        ),
        h3("Highlights"),
        bullet_list(vec![
            text_runs([
                text("Bulleted lists with a hanging indent — wrapped lines align under "),
                text("themselves").italic(),
                text(", not under the marker."),
            ]),
            text_runs([
                text("Inline runs work inside list items: "),
                text("bold").bold(),
                text(", "),
                text("code").code(),
                text(", "),
                text("links").link("https://aetna.dev"),
                text("."),
            ]),
            text("Nested blocks live inside an item by composing a column."),
        ]),
        blockquote([
            paragraph(
                "Markdown's shape is HTML's shape. The Aetna widget kit \
                 already mirrors most of that shape, so the transformer \
                 mostly hands events to existing constructors.",
            ),
            paragraph("— Aetna design notes").muted(),
        ]),
        h3("Setup steps"),
        numbered_list(vec![
            text("Add `aetna-markdown` to the workspace."),
            text_runs([
                text("Pull in "),
                text("pulldown-cmark").code(),
                text(" with the GFM features the project actually uses."),
            ]),
            text("Wire the transformer through the existing widget kit — paragraph, list, blockquote, code_block, divider, table."),
        ]),
        h3("Example fenced block"),
        code_block(
            "fn render(md: &str) -> El {\n    \
                 // pulldown-cmark events -> El\n    \
                 todo!(\"phase 2\")\n}",
        ),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

pub fn math_expr(self, expr: impl Into<Arc<MathExpr>>) -> Self

pub fn math_display(self, display: MathDisplay) -> Self

impl El

pub fn new(kind: Kind) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 304)

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/polish_calibration.rs (line 356)

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/custom_paint.rs (line 56)

fn graph_cell(lane: u8, selected: bool) -> El {
    let lane_color = lane_palette(lane);
    let ring_color = if selected {
        Color::rgb(245, 245, 250)
    } else {
        lane_color
    };
    let ring_w = if selected { 2.5 } else { 1.5 };
    let radius = 5.0;
    let line_w = 2.0;
    let lane_frac = (lane as f32 + 0.5) / LANE_COUNT as f32;

    El::new(Kind::Custom("graph_cell"))
        .width(Size::Fixed(GRAPH_WIDTH))
        .height(Size::Fixed(ROW_HEIGHT))
        .shader(
            ShaderBinding::custom("commit_node")
                .color("vec_a", tokens::BACKGROUND)
                .color("vec_b", ring_color)
                .vec4("vec_c", [radius, ring_w, line_w, lane_frac]),
        )
        .fill(lane_color)
}

examples/settings_calibration.rs (line 136)

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/palette_demo.rs (line 285)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

pub fn key(self, k: impl Into<String>) -> Self

Examples found in repository

examples/polish_calibration.rs (line 37)

fn polish_calibration() -> El {
    row([sidebar(), main_panel()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

examples/settings_calibration.rs (line 34)

fn settings_calibration() -> El {
    row([settings_sidebar(), settings_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

examples/dashboard_01_calibration.rs (line 34)

fn dashboard_01_calibration() -> El {
    row([dashboard_sidebar(), dashboard_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

examples/custom_paint.rs (line 76)

fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
    row([
        graph_cell(c.lane, selected),
        text(c.sha).mono().muted(),
        text(c.subject),
        spacer(),
        text(format!("{} · {}", c.author, c.when)).muted(),
    ])
    .key(format!("commit-{idx}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(ROW_HEIGHT))
    .align(Align::Center)
}

examples/virtual_list.rs (line 33)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

fn fixture() -> El {
    column([
        h1("Virtualized list"),
        paragraph(format!(
            "{ROW_COUNT} rows × {ROW_HEIGHT}px in a windowed viewport. \
             Only the rows intersecting the viewport are realized — see \
             `tree.txt` for proof."
        ))
        .muted(),
        virtual_list(ROW_COUNT, ROW_HEIGHT, build_row)
            .key("entries")
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/scroll_list.rs (line 31)

fn scroll_list_fixture() -> El {
    let rows: Vec<El> = (0..20)
        .map(|i| {
            row([
                badge(format!("#{i}")).info(),
                text(format!("Notification {i}")).bold(),
                spacer(),
                text(format!("{}m ago", i + 1)).muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Fixed(44.0))
            .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
        })
        .collect();

    let list = scroll(rows)
        .key("notifications")
        .height(Size::Fixed(420.0))
        .padding(tokens::SPACE_2);

    column([
        h2("Notifications"),
        text("Roll the wheel inside the panel to scroll. The content is taller than the viewport.")
            .muted(),
        list,
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

Additional examples can be found in:

• examples/circular_layout.rs
• examples/toast.rs
• examples/modal.rs

pub fn block_pointer(self) -> Self

pub fn hit_overflow(self, outset: impl Into<Sides>) -> Self

Expand this node’s pointer hit target without changing layout or paint. Hover, press, cursor, tooltip, and click routing all use the expanded target; UiEvent::target_rect still reports the node’s transformed visual rect from layout.

Keep this conservative. It is for controls whose effective interaction region is intentionally larger than their drawn chrome, not for making unrelated gutters activate nearby UI.

pub fn focusable(self) -> Self

Examples found in repository

examples/polish_calibration.rs (line 85)

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/settings_calibration.rs (line 153)

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

examples/dashboard_01_calibration.rs (line 130)

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

pub fn always_show_focus_ring(self) -> Self

Show the focus ring on this node even when focus arrived via pointer click. Default focus-ring behavior follows the web platform’s :focus-visible rule — ring on Tab, no ring on click. Widgets where the ring is meaningful regardless of source — text input, text area — opt in here so clicking into the field still raises the “now active” affordance. Implies nothing about focusability; pair with .focusable().

pub fn selectable(self) -> Self

Opt this node into the library’s text-selection system. The node must also carry an explicit .key(...); selection requires stable identity across rebuilds the same way focus does.

pub fn selection_source(self, source: SelectionSource) -> Self

Attach source-backed copy/hit-test text for this selectable node. The node still needs .selectable().key(...); this only changes how selection offsets map to copied text.

pub fn capture_keys(self) -> Self

Opt this node into raw key capture when focused. While this node is the focused target, the library’s traversal/activation defaults are bypassed and raw KeyDown events are delivered for the widget to interpret. Escape is still treated as “exit editing”: the raw KeyDown is delivered first, then focus is cleared. Implies focusable.

pub fn alpha_follows_focused_ancestor(self) -> Self

Multiply this element’s paint opacity by the nearest focusable ancestor’s focus envelope.

pub fn blink_when_focused(self) -> Self

Multiply this node’s paint opacity by the runtime’s caret blink alpha.

pub fn state_follows_interactive_ancestor(self) -> Self

Borrow hover and press visual envelopes from the nearest focusable ancestor.

pub fn hover_alpha(self, rest: f32, peak: f32) -> Self

Bind this element’s paint opacity to the subtree interaction envelope — the max of hover, focus, and press for the subtree rooted at this element.

At rest (no descendant is the active hover, focus, or press target) the element paints at rest. At full envelope it paints at peak. Both are clamped to [0.0, 1.0], with linear interpolation in between following the eased envelope.

“Subtree” matches CSS :hover semantics: hovering, focusing, or pressing any descendant keeps the element revealed. A hover-revealed close icon stays visible while the cursor moves across the tab body or while the tab is keyboard-focused; an action pill stays visible while the cursor moves between focusable buttons inside it. The trigger isn’t strictly “hover” — focus and press also count — but hover is the dominant case and the name reflects it.

Layout-neutral — the element keeps its computed rect at all times. Use for hover-revealed close buttons, secondary actions on list rows, hover-only validation icons, and other “show on interaction” patterns where the surrounding layout shouldn’t shift.

Beyond alpha

For the other common hover affordances — Material-style lift (translate_y), button-pop (scale), tint shift (fill) — drive the prop from app code using crate::BuildCx::is_hovering_within plus Self::animate:

fn build(&self, cx: &BuildCx) -> El {
    let lifted = cx.is_hovering_within("card");
    card([...])
        .key("card")
        .focusable()
        .translate(0.0, if lifted { -2.0 } else { 0.0 })
        .scale(if lifted { 1.02 } else { 1.0 })
        .animate(Timing::SPRING_QUICK)
}

is_hovering_within reads the same subtree predicate hover_alpha consumes (CSS :hover-style cascade). animate eases the prop between the two build values across frames, so the transition is smooth without per-channel declarative API. hover_alpha itself is the alpha-channel shorthand — it skips the boolean-to-value conversion and the per-node animate allocation, since alpha is the dominant hover affordance.

pub fn at(self, file: &'static str, line: u32) -> Self

Examples found in repository

examples/palette_demo.rs (line 286)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

pub fn at_loc(self, loc: &'static Location<'static>) -> Self

Set source from a Location (used internally by #[track_caller] constructors).

pub fn from_library(self) -> Self

Mark this El as constructed inside an aetna library closure where #[track_caller] doesn’t reach user code (e.g. the .map(|item| ...) body inside tabs_list, radio_group, etc.). The lint pass uses this flag to walk blame attribution upward to the nearest user-source ancestor instead of pointing findings at aetna-core internals. User code never needs to call this.

impl El

pub fn width(self, w: Size) -> Self

Examples found in repository

examples/polish_calibration.rs (line 61)

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/custom_paint.rs (line 57)

fn graph_cell(lane: u8, selected: bool) -> El {
    let lane_color = lane_palette(lane);
    let ring_color = if selected {
        Color::rgb(245, 245, 250)
    } else {
        lane_color
    };
    let ring_w = if selected { 2.5 } else { 1.5 };
    let radius = 5.0;
    let line_w = 2.0;
    let lane_frac = (lane as f32 + 0.5) / LANE_COUNT as f32;

    El::new(Kind::Custom("graph_cell"))
        .width(Size::Fixed(GRAPH_WIDTH))
        .height(Size::Fixed(ROW_HEIGHT))
        .shader(
            ShaderBinding::custom("commit_node")
                .color("vec_a", tokens::BACKGROUND)
                .color("vec_b", ring_color)
                .vec4("vec_c", [radius, ring_w, line_w, lane_frac]),
        )
        .fill(lane_color)
}

examples/circular_layout.rs (line 77)

fn fixture() -> El {
    let centre = h2("Compass").center_text();
    let dirs = [
        ("North", "n"),
        ("NE", "ne"),
        ("East", "e"),
        ("SE", "se"),
        ("South", "s"),
        ("SW", "sw"),
        ("West", "w"),
        ("NW", "nw"),
    ];

    let mut children: Vec<El> = vec![centre];
    for (label, k) in dirs {
        children.push(button(label).key(k).primary());
    }

    column([
        h1("Custom layout — circular"),
        paragraph(
            "Eight buttons positioned on a circle by an author-supplied \
             LayoutFn. Stock paint, automatic hover/press, and hit-test \
             all keep working — only the rect distribution changed.",
        )
        .muted(),
        stack(children)
            .key("compass")
            .layout(circular)
            .width(Size::Fill(1.0))
            .height(Size::Fixed(360.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/toast.rs (line 54)

fn fixture() -> El {
    // Apps wrap their main view in `overlays(main, [])` so the
    // runtime can append the synthesized toast layer as an overlay
    // sibling — same convention as for popovers and modals.
    overlays(
        column([
            h2("Toasts"),
            paragraph(
                "Apps queue toasts by returning ToastSpec values from \
                 App::drain_toasts. The runtime stamps each with a TTL, \
                 stacks them at the bottom-right corner, and dismisses \
                 them on click or auto-expiry.",
            )
            .muted(),
            row([
                button("Save changes").key("save"),
                button("Trigger error").key("err"),
                button("Show info").key("info"),
            ])
            .gap(tokens::SPACE_2),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .width(Size::Fill(1.0))
        .height(Size::Fill(1.0)),
        [],
    )
}

examples/inline_runs.rs (line 37)

fn fixture() -> El {
    column([
        h2("Inline runs"),
        text_runs([
            text("Aetna's attributed-text path lets you compose runs with "),
            text("bold").bold(),
            text(", "),
            text("italic").italic(),
            text(", "),
            text("colored").color(tokens::DESTRUCTIVE),
            text(", and "),
            text("inline code").code(),
            text(" segments inside one wrapping paragraph."),
            hard_break(),
            text("Hard breaks act like ").muted(),
            text("<br>").code(),
            text(" — they end the current line without breaking out of the run.").muted(),
        ])
        .wrap_text()
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        paragraph(
            "All of the above flows through one cosmic-text rich-text shape — \
             wrapping decisions cross run boundaries the way real prose wraps.",
        )
        .muted(),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
    .width(Size::Fixed(640.0))
}

examples/palette_demo.rs (line 98)

fn palette_demo(label: &'static str, palette: &Palette) -> El {
    column([
        row([
            column([
                h1("Palette demo"),
                text("Aetna and Radix palettes rendered through Aetna tokens.").muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Hug),
            spacer(),
            badge(label).muted(),
        ])
        .align(Align::Start)
        .height(Size::Hug),
        row([
            token_section(
                "Core tokens",
                "The shadcn-shaped semantic vocabulary.",
                &CORE_TOKENS,
                palette,
            )
            .width(Size::Fill(1.25)),
            column([
                token_section(
                    "Aetna extensions",
                    "Component and status tokens layered on top.",
                    &EXTENSION_TOKENS,
                    palette,
                ),
                component_section(),
            ])
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
        ])
        .gap(tokens::SPACE_4)
        .align(Align::Stretch)
        .height(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_8)
    .gap(tokens::SPACE_6)
    .fill_size()
    .fill(tokens::BACKGROUND)
}

const CORE_TOKENS: [TokenDef; 19] = [
    TokenDef {
        name: "background",
        color: tokens::BACKGROUND,
    },
    TokenDef {
        name: "foreground",
        color: tokens::FOREGROUND,
    },
    TokenDef {
        name: "card",
        color: tokens::CARD,
    },
    TokenDef {
        name: "card-foreground",
        color: tokens::CARD_FOREGROUND,
    },
    TokenDef {
        name: "popover",
        color: tokens::POPOVER,
    },
    TokenDef {
        name: "popover-foreground",
        color: tokens::POPOVER_FOREGROUND,
    },
    TokenDef {
        name: "primary",
        color: tokens::PRIMARY,
    },
    TokenDef {
        name: "primary-foreground",
        color: tokens::PRIMARY_FOREGROUND,
    },
    TokenDef {
        name: "secondary",
        color: tokens::SECONDARY,
    },
    TokenDef {
        name: "secondary-foreground",
        color: tokens::SECONDARY_FOREGROUND,
    },
    TokenDef {
        name: "muted",
        color: tokens::MUTED,
    },
    TokenDef {
        name: "muted-foreground",
        color: tokens::MUTED_FOREGROUND,
    },
    TokenDef {
        name: "accent",
        color: tokens::ACCENT,
    },
    TokenDef {
        name: "accent-foreground",
        color: tokens::ACCENT_FOREGROUND,
    },
    TokenDef {
        name: "destructive",
        color: tokens::DESTRUCTIVE,
    },
    TokenDef {
        name: "destructive-foreground",
        color: tokens::DESTRUCTIVE_FOREGROUND,
    },
    TokenDef {
        name: "border",
        color: tokens::BORDER,
    },
    TokenDef {
        name: "input",
        color: tokens::INPUT,
    },
    TokenDef {
        name: "ring",
        color: tokens::RING,
    },
];

const EXTENSION_TOKENS: [TokenDef; 12] = [
    TokenDef {
        name: "success",
        color: tokens::SUCCESS,
    },
    TokenDef {
        name: "success-foreground",
        color: tokens::SUCCESS_FOREGROUND,
    },
    TokenDef {
        name: "warning",
        color: tokens::WARNING,
    },
    TokenDef {
        name: "warning-foreground",
        color: tokens::WARNING_FOREGROUND,
    },
    TokenDef {
        name: "info",
        color: tokens::INFO,
    },
    TokenDef {
        name: "info-foreground",
        color: tokens::INFO_FOREGROUND,
    },
    TokenDef {
        name: "link-foreground",
        color: tokens::LINK_FOREGROUND,
    },
    TokenDef {
        name: "overlay-scrim",
        color: tokens::OVERLAY_SCRIM,
    },
    TokenDef {
        name: "scrollbar-thumb",
        color: tokens::SCROLLBAR_THUMB_FILL,
    },
    TokenDef {
        name: "scrollbar-thumb-active",
        color: tokens::SCROLLBAR_THUMB_FILL_ACTIVE,
    },
    TokenDef {
        name: "selection-bg",
        color: tokens::SELECTION_BG,
    },
    TokenDef {
        name: "selection-bg-unfocused",
        color: tokens::SELECTION_BG_UNFOCUSED,
    },
];

fn token_section(
    title: &'static str,
    description: &'static str,
    tokens: &'static [TokenDef],
    palette: &Palette,
) -> El {
    card([
        card_header([card_title(title), card_description(description)]),
        card_content([swatch_grid(tokens, palette)]),
    ])
    .height(Size::Fill(1.0))
}

fn swatch_grid(defs: &'static [TokenDef], palette: &Palette) -> El {
    let rows = defs
        .chunks(2)
        .map(|chunk| {
            row(chunk.iter().map(|token| token_chip(*token, palette)))
                .gap(tokens::SPACE_3)
                .align(Align::Center)
                .width(Size::Fill(1.0))
        })
        .collect::<Vec<_>>();

    column(rows)
        .gap(tokens::SPACE_3)
        .width(Size::Fill(1.0))
        .height(Size::Hug)
}

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

fn surface_sample(title: &'static str, fill: Color) -> El {
    column([
        text(title).label(),
        text("surface sample").caption().muted(),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_3)
    .fill(fill)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(76.0))
}

Additional examples can be found in:

• examples/settings_calibration.rs
• examples/modal.rs
• examples/settings.rs
• examples/inline_runs_highlight.rs
• examples/dashboard_01_calibration.rs
• examples/long_form_content.rs
• examples/scrollbar.rs

pub fn height(self, h: Size) -> Self

Examples found in repository

examples/scrollbar.rs (line 29)

fn list_rows() -> Vec<El> {
    (0..40)
        .map(|i| {
            row([
                text(format!("{i:02}.")).mono().muted(),
                text(format!("scrollable list item {i}")),
            ])
            .gap(tokens::SPACE_2)
            .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
            .height(Size::Fixed(28.0))
            .align(Align::Center)
        })
        .collect()
}

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/virtual_list.rs (line 36)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

fn fixture() -> El {
    column([
        h1("Virtualized list"),
        paragraph(format!(
            "{ROW_COUNT} rows × {ROW_HEIGHT}px in a windowed viewport. \
             Only the rows intersecting the viewport are realized — see \
             `tree.txt` for proof."
        ))
        .muted(),
        virtual_list(ROW_COUNT, ROW_HEIGHT, build_row)
            .key("entries")
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/polish_calibration.rs (line 49)

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/custom_paint.rs (line 58)

fn graph_cell(lane: u8, selected: bool) -> El {
    let lane_color = lane_palette(lane);
    let ring_color = if selected {
        Color::rgb(245, 245, 250)
    } else {
        lane_color
    };
    let ring_w = if selected { 2.5 } else { 1.5 };
    let radius = 5.0;
    let line_w = 2.0;
    let lane_frac = (lane as f32 + 0.5) / LANE_COUNT as f32;

    El::new(Kind::Custom("graph_cell"))
        .width(Size::Fixed(GRAPH_WIDTH))
        .height(Size::Fixed(ROW_HEIGHT))
        .shader(
            ShaderBinding::custom("commit_node")
                .color("vec_a", tokens::BACKGROUND)
                .color("vec_b", ring_color)
                .vec4("vec_c", [radius, ring_w, line_w, lane_frac]),
        )
        .fill(lane_color)
}

fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
    row([
        graph_cell(c.lane, selected),
        text(c.sha).mono().muted(),
        text(c.subject),
        spacer(),
        text(format!("{} · {}", c.author, c.when)).muted(),
    ])
    .key(format!("commit-{idx}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(ROW_HEIGHT))
    .align(Align::Center)
}

examples/scroll_list.rs (line 25)

fn scroll_list_fixture() -> El {
    let rows: Vec<El> = (0..20)
        .map(|i| {
            row([
                badge(format!("#{i}")).info(),
                text(format!("Notification {i}")).bold(),
                spacer(),
                text(format!("{}m ago", i + 1)).muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Fixed(44.0))
            .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
        })
        .collect();

    let list = scroll(rows)
        .key("notifications")
        .height(Size::Fixed(420.0))
        .padding(tokens::SPACE_2);

    column([
        h2("Notifications"),
        text("Roll the wheel inside the panel to scroll. The content is taller than the viewport.")
            .muted(),
        list,
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/circular_layout.rs (line 78)

fn fixture() -> El {
    let centre = h2("Compass").center_text();
    let dirs = [
        ("North", "n"),
        ("NE", "ne"),
        ("East", "e"),
        ("SE", "se"),
        ("South", "s"),
        ("SW", "sw"),
        ("West", "w"),
        ("NW", "nw"),
    ];

    let mut children: Vec<El> = vec![centre];
    for (label, k) in dirs {
        children.push(button(label).key(k).primary());
    }

    column([
        h1("Custom layout — circular"),
        paragraph(
            "Eight buttons positioned on a circle by an author-supplied \
             LayoutFn. Stock paint, automatic hover/press, and hit-test \
             all keep working — only the rect distribution changed.",
        )
        .muted(),
        stack(children)
            .key("compass")
            .layout(circular)
            .width(Size::Fill(1.0))
            .height(Size::Fixed(360.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

Additional examples can be found in:

• examples/toast.rs
• examples/inline_runs.rs
• examples/palette_demo.rs
• examples/settings_calibration.rs
• examples/inline_runs_highlight.rs
• examples/dashboard_01_calibration.rs

pub fn hug(self) -> Self

pub fn fill_size(self) -> Self

Examples found in repository

examples/polish_calibration.rs (line 39)

fn polish_calibration() -> El {
    row([sidebar(), main_panel()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

examples/settings_calibration.rs (line 36)

fn settings_calibration() -> El {
    row([settings_sidebar(), settings_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

examples/dashboard_01_calibration.rs (line 36)

fn dashboard_01_calibration() -> El {
    row([dashboard_sidebar(), dashboard_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

examples/palette_demo.rs (line 118)

fn palette_demo(label: &'static str, palette: &Palette) -> El {
    column([
        row([
            column([
                h1("Palette demo"),
                text("Aetna and Radix palettes rendered through Aetna tokens.").muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Hug),
            spacer(),
            badge(label).muted(),
        ])
        .align(Align::Start)
        .height(Size::Hug),
        row([
            token_section(
                "Core tokens",
                "The shadcn-shaped semantic vocabulary.",
                &CORE_TOKENS,
                palette,
            )
            .width(Size::Fill(1.25)),
            column([
                token_section(
                    "Aetna extensions",
                    "Component and status tokens layered on top.",
                    &EXTENSION_TOKENS,
                    palette,
                ),
                component_section(),
            ])
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
        ])
        .gap(tokens::SPACE_4)
        .align(Align::Stretch)
        .height(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_8)
    .gap(tokens::SPACE_6)
    .fill_size()
    .fill(tokens::BACKGROUND)
}

pub fn size(self, size: ComponentSize) -> Self

Set the t-shirt size for stock controls.

pub fn medium(self) -> Self

pub fn large(self) -> Self

pub fn metrics_role(self, role: MetricsRole) -> Self

Set the theme-facing stock metrics role for this widget.

Examples found in repository

examples/polish_calibration.rs (line 80)

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

examples/settings_calibration.rs (line 151)

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

examples/dashboard_01_calibration.rs (line 125)

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

pub fn padding(self, p: impl Into<Sides>) -> Self

Examples found in repository

examples/scrollbar.rs (line 28)

fn list_rows() -> Vec<El> {
    (0..40)
        .map(|i| {
            row([
                text(format!("{i:02}.")).mono().muted(),
                text(format!("scrollable list item {i}")),
            ])
            .gap(tokens::SPACE_2)
            .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
            .height(Size::Fixed(28.0))
            .align(Align::Center)
        })
        .collect()
}

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/custom_paint.rs (line 78)

fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
    row([
        graph_cell(c.lane, selected),
        text(c.sha).mono().muted(),
        text(c.subject),
        spacer(),
        text(format!("{} · {}", c.author, c.when)).muted(),
    ])
    .key(format!("commit-{idx}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(ROW_HEIGHT))
    .align(Align::Center)
}

fn fixture() -> El {
    #[rustfmt::skip]
    let commits = [
        FakeCommit { sha: "8a3f1c9", subject: "fix race condition in scheduler", author: "ada",     when: "12m", lane: 0 },
        FakeCommit { sha: "1b07d4e", subject: "tweak token tooltip wording",     author: "linus",   when: "1h",  lane: 0 },
        FakeCommit { sha: "9f2e4a1", subject: "wire avatar fallback identicon",  author: "joelle",  when: "3h",  lane: 1 },
        FakeCommit { sha: "44ab8d2", subject: "diff: word-level highlight pass", author: "raphael", when: "5h",  lane: 1 },
        FakeCommit { sha: "61c0fe7", subject: "ci: bump rust toolchain to 1.85", author: "mei",     when: "7h",  lane: 2 },
        FakeCommit { sha: "a90215b", subject: "switch logging to env_logger",    author: "isabel",  when: "1d",  lane: 2 },
        FakeCommit { sha: "0d7e3c4", subject: "drop unused commit_detail cache", author: "noor",    when: "1d",  lane: 1 },
        FakeCommit { sha: "33b2118", subject: "context-menu spacing pass",       author: "kira",    when: "2d",  lane: 3 },
    ];
    let selected_idx = 3;
    let rows = commits
        .iter()
        .enumerate()
        .map(|(i, c)| build_row(c, i, i == selected_idx))
        .collect::<Vec<_>>();

    column([
        h2("Custom-painted commit graph"),
        text("8 commits · custom shader paints lane line + circle node").muted(),
        column(rows).gap(0.0),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)
}

examples/virtual_list.rs (line 35)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

fn fixture() -> El {
    column([
        h1("Virtualized list"),
        paragraph(format!(
            "{ROW_COUNT} rows × {ROW_HEIGHT}px in a windowed viewport. \
             Only the rows intersecting the viewport are realized — see \
             `tree.txt` for proof."
        ))
        .muted(),
        virtual_list(ROW_COUNT, ROW_HEIGHT, build_row)
            .key("entries")
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/polish_calibration.rs (line 59)

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

examples/scroll_list.rs (line 26)

fn scroll_list_fixture() -> El {
    let rows: Vec<El> = (0..20)
        .map(|i| {
            row([
                badge(format!("#{i}")).info(),
                text(format!("Notification {i}")).bold(),
                spacer(),
                text(format!("{}m ago", i + 1)).muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Fixed(44.0))
            .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
        })
        .collect();

    let list = scroll(rows)
        .key("notifications")
        .height(Size::Fixed(420.0))
        .padding(tokens::SPACE_2);

    column([
        h2("Notifications"),
        text("Roll the wheel inside the panel to scroll. The content is taller than the viewport.")
            .muted(),
        list,
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/circular_layout.rs (line 81)

fn fixture() -> El {
    let centre = h2("Compass").center_text();
    let dirs = [
        ("North", "n"),
        ("NE", "ne"),
        ("East", "e"),
        ("SE", "se"),
        ("South", "s"),
        ("SW", "sw"),
        ("West", "w"),
        ("NW", "nw"),
    ];

    let mut children: Vec<El> = vec![centre];
    for (label, k) in dirs {
        children.push(button(label).key(k).primary());
    }

    column([
        h1("Custom layout — circular"),
        paragraph(
            "Eight buttons positioned on a circle by an author-supplied \
             LayoutFn. Stock paint, automatic hover/press, and hit-test \
             all keep working — only the rect distribution changed.",
        )
        .muted(),
        stack(children)
            .key("compass")
            .layout(circular)
            .width(Size::Fill(1.0))
            .height(Size::Fixed(360.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

Additional examples can be found in:

• examples/toast.rs
• examples/inline_runs.rs
• examples/custom_shader.rs
• examples/palette_demo.rs
• examples/settings_calibration.rs
• examples/modal.rs
• examples/settings.rs
• examples/inline_runs_highlight.rs
• examples/dashboard_01_calibration.rs
• examples/long_form_content.rs

pub fn pt(self, v: f32) -> Self

Override only the top padding side, preserving the other three sides at their current value (whether from a constructor’s default_padding or a previous explicit .padding(...)). Mirrors Tailwind’s pt-N. Marks the padding as explicit, so the metrics pass will not stamp a density-driven value over it.

pub fn pb(self, v: f32) -> Self

Override only the bottom padding side. Mirrors Tailwind’s pb-N. See Self::pt for composition semantics.

pub fn pl(self, v: f32) -> Self

Override only the left padding side. Mirrors Tailwind’s pl-N. See Self::pt for composition semantics.

pub fn pr(self, v: f32) -> Self

Override only the right padding side. Mirrors Tailwind’s pr-N. See Self::pt for composition semantics.

pub fn px(self, v: f32) -> Self

Override the horizontal padding sides (left + right), preserving top and bottom. Mirrors Tailwind’s px-N. See Self::pt for composition semantics.

pub fn py(self, v: f32) -> Self

Override the vertical padding sides (top + bottom), preserving left and right. Mirrors Tailwind’s py-N. See Self::pt for composition semantics.

pub fn gap(self, g: f32) -> Self

Examples found in repository

examples/polish_calibration.rs (line 38)

fn polish_calibration() -> El {
    row([sidebar(), main_panel()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

examples/settings_calibration.rs (line 35)

fn settings_calibration() -> El {
    row([settings_sidebar(), settings_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

examples/dashboard_01_calibration.rs (line 35)

fn dashboard_01_calibration() -> El {
    row([dashboard_sidebar(), dashboard_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

examples/scrollbar.rs (line 27)

fn list_rows() -> Vec<El> {
    (0..40)
        .map(|i| {
            row([
                text(format!("{i:02}.")).mono().muted(),
                text(format!("scrollable list item {i}")),
            ])
            .gap(tokens::SPACE_2)
            .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
            .height(Size::Fixed(28.0))
            .align(Align::Center)
        })
        .collect()
}

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/custom_paint.rs (line 77)

fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
    row([
        graph_cell(c.lane, selected),
        text(c.sha).mono().muted(),
        text(c.subject),
        spacer(),
        text(format!("{} · {}", c.author, c.when)).muted(),
    ])
    .key(format!("commit-{idx}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(ROW_HEIGHT))
    .align(Align::Center)
}

fn fixture() -> El {
    #[rustfmt::skip]
    let commits = [
        FakeCommit { sha: "8a3f1c9", subject: "fix race condition in scheduler", author: "ada",     when: "12m", lane: 0 },
        FakeCommit { sha: "1b07d4e", subject: "tweak token tooltip wording",     author: "linus",   when: "1h",  lane: 0 },
        FakeCommit { sha: "9f2e4a1", subject: "wire avatar fallback identicon",  author: "joelle",  when: "3h",  lane: 1 },
        FakeCommit { sha: "44ab8d2", subject: "diff: word-level highlight pass", author: "raphael", when: "5h",  lane: 1 },
        FakeCommit { sha: "61c0fe7", subject: "ci: bump rust toolchain to 1.85", author: "mei",     when: "7h",  lane: 2 },
        FakeCommit { sha: "a90215b", subject: "switch logging to env_logger",    author: "isabel",  when: "1d",  lane: 2 },
        FakeCommit { sha: "0d7e3c4", subject: "drop unused commit_detail cache", author: "noor",    when: "1d",  lane: 1 },
        FakeCommit { sha: "33b2118", subject: "context-menu spacing pass",       author: "kira",    when: "2d",  lane: 3 },
    ];
    let selected_idx = 3;
    let rows = commits
        .iter()
        .enumerate()
        .map(|(i, c)| build_row(c, i, i == selected_idx))
        .collect::<Vec<_>>();

    column([
        h2("Custom-painted commit graph"),
        text("8 commits · custom shader paints lane line + circle node").muted(),
        column(rows).gap(0.0),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)
}

examples/virtual_list.rs (line 34)

fn build_row(i: usize) -> El {
    let badge_el = match i % 5 {
        0 => badge("info").muted(),
        1 => badge("warn").warning(),
        2 => badge("ok").success(),
        3 => badge("err").destructive(),
        _ => spacer(),
    };
    row([
        text(format!("#{i:05}")).mono(),
        spacer(),
        text(format!("entry {i}")),
        spacer(),
        badge_el,
    ])
    .key(format!("row-{i}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_3, tokens::SPACE_2))
    .height(Size::Fixed(ROW_HEIGHT))
}

fn fixture() -> El {
    column([
        h1("Virtualized list"),
        paragraph(format!(
            "{ROW_COUNT} rows × {ROW_HEIGHT}px in a windowed viewport. \
             Only the rows intersecting the viewport are realized — see \
             `tree.txt` for proof."
        ))
        .muted(),
        virtual_list(ROW_COUNT, ROW_HEIGHT, build_row)
            .key("entries")
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

Additional examples can be found in:

• examples/scroll_list.rs
• examples/circular_layout.rs
• examples/toast.rs
• examples/inline_runs.rs
• examples/custom_shader.rs
• examples/palette_demo.rs
• examples/modal.rs
• examples/settings.rs
• examples/inline_runs_highlight.rs
• examples/long_form_content.rs

pub fn align(self, a: Align) -> Self

Examples found in repository

examples/polish_calibration.rs (line 40)

fn polish_calibration() -> El {
    row([sidebar(), main_panel()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

examples/settings_calibration.rs (line 37)

fn settings_calibration() -> El {
    row([settings_sidebar(), settings_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/dashboard_01_calibration.rs (line 37)

fn dashboard_01_calibration() -> El {
    row([dashboard_sidebar(), dashboard_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

examples/scrollbar.rs (line 30)

fn list_rows() -> Vec<El> {
    (0..40)
        .map(|i| {
            row([
                text(format!("{i:02}.")).mono().muted(),
                text(format!("scrollable list item {i}")),
            ])
            .gap(tokens::SPACE_2)
            .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
            .height(Size::Fixed(28.0))
            .align(Align::Center)
        })
        .collect()
}

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

examples/custom_paint.rs (line 80)

fn build_row(c: &FakeCommit, idx: usize, selected: bool) -> El {
    row([
        graph_cell(c.lane, selected),
        text(c.sha).mono().muted(),
        text(c.subject),
        spacer(),
        text(format!("{} · {}", c.author, c.when)).muted(),
    ])
    .key(format!("commit-{idx}"))
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(ROW_HEIGHT))
    .align(Align::Center)
}

examples/palette_demo.rs (line 89)

fn palette_demo(label: &'static str, palette: &Palette) -> El {
    column([
        row([
            column([
                h1("Palette demo"),
                text("Aetna and Radix palettes rendered through Aetna tokens.").muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Hug),
            spacer(),
            badge(label).muted(),
        ])
        .align(Align::Start)
        .height(Size::Hug),
        row([
            token_section(
                "Core tokens",
                "The shadcn-shaped semantic vocabulary.",
                &CORE_TOKENS,
                palette,
            )
            .width(Size::Fill(1.25)),
            column([
                token_section(
                    "Aetna extensions",
                    "Component and status tokens layered on top.",
                    &EXTENSION_TOKENS,
                    palette,
                ),
                component_section(),
            ])
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
        ])
        .gap(tokens::SPACE_4)
        .align(Align::Stretch)
        .height(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_8)
    .gap(tokens::SPACE_6)
    .fill_size()
    .fill(tokens::BACKGROUND)
}

const CORE_TOKENS: [TokenDef; 19] = [
    TokenDef {
        name: "background",
        color: tokens::BACKGROUND,
    },
    TokenDef {
        name: "foreground",
        color: tokens::FOREGROUND,
    },
    TokenDef {
        name: "card",
        color: tokens::CARD,
    },
    TokenDef {
        name: "card-foreground",
        color: tokens::CARD_FOREGROUND,
    },
    TokenDef {
        name: "popover",
        color: tokens::POPOVER,
    },
    TokenDef {
        name: "popover-foreground",
        color: tokens::POPOVER_FOREGROUND,
    },
    TokenDef {
        name: "primary",
        color: tokens::PRIMARY,
    },
    TokenDef {
        name: "primary-foreground",
        color: tokens::PRIMARY_FOREGROUND,
    },
    TokenDef {
        name: "secondary",
        color: tokens::SECONDARY,
    },
    TokenDef {
        name: "secondary-foreground",
        color: tokens::SECONDARY_FOREGROUND,
    },
    TokenDef {
        name: "muted",
        color: tokens::MUTED,
    },
    TokenDef {
        name: "muted-foreground",
        color: tokens::MUTED_FOREGROUND,
    },
    TokenDef {
        name: "accent",
        color: tokens::ACCENT,
    },
    TokenDef {
        name: "accent-foreground",
        color: tokens::ACCENT_FOREGROUND,
    },
    TokenDef {
        name: "destructive",
        color: tokens::DESTRUCTIVE,
    },
    TokenDef {
        name: "destructive-foreground",
        color: tokens::DESTRUCTIVE_FOREGROUND,
    },
    TokenDef {
        name: "border",
        color: tokens::BORDER,
    },
    TokenDef {
        name: "input",
        color: tokens::INPUT,
    },
    TokenDef {
        name: "ring",
        color: tokens::RING,
    },
];

const EXTENSION_TOKENS: [TokenDef; 12] = [
    TokenDef {
        name: "success",
        color: tokens::SUCCESS,
    },
    TokenDef {
        name: "success-foreground",
        color: tokens::SUCCESS_FOREGROUND,
    },
    TokenDef {
        name: "warning",
        color: tokens::WARNING,
    },
    TokenDef {
        name: "warning-foreground",
        color: tokens::WARNING_FOREGROUND,
    },
    TokenDef {
        name: "info",
        color: tokens::INFO,
    },
    TokenDef {
        name: "info-foreground",
        color: tokens::INFO_FOREGROUND,
    },
    TokenDef {
        name: "link-foreground",
        color: tokens::LINK_FOREGROUND,
    },
    TokenDef {
        name: "overlay-scrim",
        color: tokens::OVERLAY_SCRIM,
    },
    TokenDef {
        name: "scrollbar-thumb",
        color: tokens::SCROLLBAR_THUMB_FILL,
    },
    TokenDef {
        name: "scrollbar-thumb-active",
        color: tokens::SCROLLBAR_THUMB_FILL_ACTIVE,
    },
    TokenDef {
        name: "selection-bg",
        color: tokens::SELECTION_BG,
    },
    TokenDef {
        name: "selection-bg-unfocused",
        color: tokens::SELECTION_BG_UNFOCUSED,
    },
];

fn token_section(
    title: &'static str,
    description: &'static str,
    tokens: &'static [TokenDef],
    palette: &Palette,
) -> El {
    card([
        card_header([card_title(title), card_description(description)]),
        card_content([swatch_grid(tokens, palette)]),
    ])
    .height(Size::Fill(1.0))
}

fn swatch_grid(defs: &'static [TokenDef], palette: &Palette) -> El {
    let rows = defs
        .chunks(2)
        .map(|chunk| {
            row(chunk.iter().map(|token| token_chip(*token, palette)))
                .gap(tokens::SPACE_3)
                .align(Align::Center)
                .width(Size::Fill(1.0))
        })
        .collect::<Vec<_>>();

    column(rows)
        .gap(tokens::SPACE_3)
        .width(Size::Fill(1.0))
        .height(Size::Hug)
}

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

Additional examples can be found in:

• examples/modal.rs
• examples/settings.rs

pub fn justify(self, j: Justify) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 446)

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

examples/settings_calibration.rs (line 386)

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

pub fn clip(self) -> Self

pub fn scrollable(self) -> Self

pub fn scrollbar(self) -> Self

Show a draggable vertical scrollbar thumb when this scrollable node’s content overflows.

pub fn no_scrollbar(self) -> Self

Suppress the default scrollbar thumb on this scrollable node.

Examples found in repository

examples/scrollbar.rs (line 79)

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn pin_end(self) -> Self

Stick this scroll viewport’s offset to the tail of its content the way chat logs and activity feeds do — when new children land below the current bottom, the offset follows them; when the user scrolls up, the pin releases; when the user scrolls back to the bottom, it re-engages. Mirrors egui::ScrollArea::stick_to_bottom.

On first layout the offset starts at max_offset, so a freshly mounted scroll([...]).pin_end() paints with its tail visible rather than its head. Programmatic crate::scroll::ScrollRequest::EnsureVisible requests that resolve away from the tail also release the pin, so a “jump-to-message N” action behaves as the user expects.

pub fn virtual_anchor_policy(self, policy: VirtualAnchorPolicy) -> Self

Override how a dynamic virtual list chooses the in-viewport row point that anchors the next frame.

pub fn arrow_nav_siblings(self) -> Self

Treat this element’s focusable children as a single arrow-navigable group.

pub fn layout<F>(self, f: F) -> Self

where F: Fn(LayoutCtx<'_>) -> Vec<Rect> + Send + Sync + 'static,

Replace the column/row/overlay distribution for this node with a custom child layout function.

Examples found in repository

examples/circular_layout.rs (line 76)

fn fixture() -> El {
    let centre = h2("Compass").center_text();
    let dirs = [
        ("North", "n"),
        ("NE", "ne"),
        ("East", "e"),
        ("SE", "se"),
        ("South", "s"),
        ("SW", "sw"),
        ("West", "w"),
        ("NW", "nw"),
    ];

    let mut children: Vec<El> = vec![centre];
    for (label, k) in dirs {
        children.push(button(label).key(k).primary());
    }

    column([
        h1("Custom layout — circular"),
        paragraph(
            "Eight buttons positioned on a circle by an author-supplied \
             LayoutFn. Stock paint, automatic hover/press, and hit-test \
             all keep working — only the rect distribution changed.",
        )
        .muted(),
        stack(children)
            .key("compass")
            .layout(circular)
            .width(Size::Fill(1.0))
            .height(Size::Fixed(360.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn child(self, c: impl Into<El>) -> Self

Examples found in repository

examples/settings_calibration.rs (lines 380-384)

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

pub fn children<I, E>(self, cs: I) -> Self

where I: IntoIterator<Item = E>, E: Into<El>,

pub fn axis(self, a: Axis) -> Self

Set the layout axis directly.

impl El

pub fn fill(self, c: Color) -> Self

Examples found in repository

examples/polish_calibration.rs (line 41)

fn polish_calibration() -> El {
    row([sidebar(), main_panel()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/settings_calibration.rs (line 38)

fn settings_calibration() -> El {
    row([settings_sidebar(), settings_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/dashboard_01_calibration.rs (line 38)

fn dashboard_01_calibration() -> El {
    row([dashboard_sidebar(), dashboard_main()])
        .key("metric:root")
        .gap(0.0)
        .fill_size()
        .align(Align::Stretch)
        .fill(tokens::BACKGROUND)
}

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn metric_card(
    icon_name: &'static str,
    title: &'static str,
    value: &'static str,
    delta: &'static str,
    note: &'static str,
    positive: bool,
) -> El {
    let badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).warning()
    };
    let badge = if title == "Total Revenue" {
        badge.key("metric:kpi.badge")
    } else {
        badge
    };
    let value = if title == "Total Revenue" {
        h2(value).ellipsis().key("metric:kpi.value")
    } else {
        h2(value).ellipsis()
    };
    card([card_content([
        row([
            row([
                icon(icon_name)
                    .color(tokens::MUTED_FOREGROUND)
                    .icon_size(tokens::ICON_XS),
                text(title).muted().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0))
            .align(Align::Center),
            badge,
        ])
        .gap(tokens::SPACE_2)
        .align(Align::Center),
        value,
        text(note).caption().ellipsis().width(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_4)
    .gap(tokens::SPACE_2)])
    .key(if title == "Total Revenue" {
        "metric:kpi.card"
    } else {
        title
    })
    .width(Size::Fill(1.0))
}

fn chart_card() -> El {
    card([
        card_header([
            card_title("Visitors for the last 6 months"),
            card_description("Total visitors by channel."),
        ])
        .padding(tokens::SPACE_4),
        card_content([row(chart_bars())
            .gap(2.0)
            .height(Size::Fill(1.0))
            .align(Align::End)])
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        })
        .height(Size::Fill(1.0)),
    ])
    .key("metric:chart.card")
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn chart_bars() -> Vec<El> {
    [
        48.0, 72.0, 56.0, 90.0, 64.0, 80.0, 108.0, 84.0, 122.0, 96.0, 136.0, 118.0,
    ]
    .into_iter()
    .flat_map(|height| {
        [
            bar(height, tokens::MUTED_FOREGROUND),
            bar((height - 28.0_f32).max(24.0), tokens::INPUT),
        ]
    })
    .collect()
}

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/custom_paint.rs (line 65)

fn graph_cell(lane: u8, selected: bool) -> El {
    let lane_color = lane_palette(lane);
    let ring_color = if selected {
        Color::rgb(245, 245, 250)
    } else {
        lane_color
    };
    let ring_w = if selected { 2.5 } else { 1.5 };
    let radius = 5.0;
    let line_w = 2.0;
    let lane_frac = (lane as f32 + 0.5) / LANE_COUNT as f32;

    El::new(Kind::Custom("graph_cell"))
        .width(Size::Fixed(GRAPH_WIDTH))
        .height(Size::Fixed(ROW_HEIGHT))
        .shader(
            ShaderBinding::custom("commit_node")
                .color("vec_a", tokens::BACKGROUND)
                .color("vec_b", ring_color)
                .vec4("vec_c", [radius, ring_w, line_w, lane_frac]),
        )
        .fill(lane_color)
}

examples/palette_demo.rs (line 119)

fn palette_demo(label: &'static str, palette: &Palette) -> El {
    column([
        row([
            column([
                h1("Palette demo"),
                text("Aetna and Radix palettes rendered through Aetna tokens.").muted(),
            ])
            .gap(tokens::SPACE_2)
            .height(Size::Hug),
            spacer(),
            badge(label).muted(),
        ])
        .align(Align::Start)
        .height(Size::Hug),
        row([
            token_section(
                "Core tokens",
                "The shadcn-shaped semantic vocabulary.",
                &CORE_TOKENS,
                palette,
            )
            .width(Size::Fill(1.25)),
            column([
                token_section(
                    "Aetna extensions",
                    "Component and status tokens layered on top.",
                    &EXTENSION_TOKENS,
                    palette,
                ),
                component_section(),
            ])
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
        ])
        .gap(tokens::SPACE_4)
        .align(Align::Stretch)
        .height(Size::Fill(1.0)),
    ])
    .padding(tokens::SPACE_8)
    .gap(tokens::SPACE_6)
    .fill_size()
    .fill(tokens::BACKGROUND)
}

const CORE_TOKENS: [TokenDef; 19] = [
    TokenDef {
        name: "background",
        color: tokens::BACKGROUND,
    },
    TokenDef {
        name: "foreground",
        color: tokens::FOREGROUND,
    },
    TokenDef {
        name: "card",
        color: tokens::CARD,
    },
    TokenDef {
        name: "card-foreground",
        color: tokens::CARD_FOREGROUND,
    },
    TokenDef {
        name: "popover",
        color: tokens::POPOVER,
    },
    TokenDef {
        name: "popover-foreground",
        color: tokens::POPOVER_FOREGROUND,
    },
    TokenDef {
        name: "primary",
        color: tokens::PRIMARY,
    },
    TokenDef {
        name: "primary-foreground",
        color: tokens::PRIMARY_FOREGROUND,
    },
    TokenDef {
        name: "secondary",
        color: tokens::SECONDARY,
    },
    TokenDef {
        name: "secondary-foreground",
        color: tokens::SECONDARY_FOREGROUND,
    },
    TokenDef {
        name: "muted",
        color: tokens::MUTED,
    },
    TokenDef {
        name: "muted-foreground",
        color: tokens::MUTED_FOREGROUND,
    },
    TokenDef {
        name: "accent",
        color: tokens::ACCENT,
    },
    TokenDef {
        name: "accent-foreground",
        color: tokens::ACCENT_FOREGROUND,
    },
    TokenDef {
        name: "destructive",
        color: tokens::DESTRUCTIVE,
    },
    TokenDef {
        name: "destructive-foreground",
        color: tokens::DESTRUCTIVE_FOREGROUND,
    },
    TokenDef {
        name: "border",
        color: tokens::BORDER,
    },
    TokenDef {
        name: "input",
        color: tokens::INPUT,
    },
    TokenDef {
        name: "ring",
        color: tokens::RING,
    },
];

const EXTENSION_TOKENS: [TokenDef; 12] = [
    TokenDef {
        name: "success",
        color: tokens::SUCCESS,
    },
    TokenDef {
        name: "success-foreground",
        color: tokens::SUCCESS_FOREGROUND,
    },
    TokenDef {
        name: "warning",
        color: tokens::WARNING,
    },
    TokenDef {
        name: "warning-foreground",
        color: tokens::WARNING_FOREGROUND,
    },
    TokenDef {
        name: "info",
        color: tokens::INFO,
    },
    TokenDef {
        name: "info-foreground",
        color: tokens::INFO_FOREGROUND,
    },
    TokenDef {
        name: "link-foreground",
        color: tokens::LINK_FOREGROUND,
    },
    TokenDef {
        name: "overlay-scrim",
        color: tokens::OVERLAY_SCRIM,
    },
    TokenDef {
        name: "scrollbar-thumb",
        color: tokens::SCROLLBAR_THUMB_FILL,
    },
    TokenDef {
        name: "scrollbar-thumb-active",
        color: tokens::SCROLLBAR_THUMB_FILL_ACTIVE,
    },
    TokenDef {
        name: "selection-bg",
        color: tokens::SELECTION_BG,
    },
    TokenDef {
        name: "selection-bg-unfocused",
        color: tokens::SELECTION_BG_UNFOCUSED,
    },
];

fn token_section(
    title: &'static str,
    description: &'static str,
    tokens: &'static [TokenDef],
    palette: &Palette,
) -> El {
    card([
        card_header([card_title(title), card_description(description)]),
        card_content([swatch_grid(tokens, palette)]),
    ])
    .height(Size::Fill(1.0))
}

fn swatch_grid(defs: &'static [TokenDef], palette: &Palette) -> El {
    let rows = defs
        .chunks(2)
        .map(|chunk| {
            row(chunk.iter().map(|token| token_chip(*token, palette)))
                .gap(tokens::SPACE_3)
                .align(Align::Center)
                .width(Size::Fill(1.0))
        })
        .collect::<Vec<_>>();

    column(rows)
        .gap(tokens::SPACE_3)
        .width(Size::Fill(1.0))
        .height(Size::Hug)
}

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

fn surface_sample(title: &'static str, fill: Color) -> El {
    column([
        text(title).label(),
        text("surface sample").caption().muted(),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_3)
    .fill(fill)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(76.0))
}

pub fn dim_fill(self, c: Color) -> Self

Fill applied when the nearest focusable ancestor isn’t focused; the painter lerps from dim_fill toward fill as the focus envelope rises from 0 to 1. See Self::dim_fill field doc.

pub fn stroke(self, c: Color) -> Self

Examples found in repository

examples/polish_calibration.rs (line 64)

fn sidebar() -> El {
    column([
        column([h2("Aetna"), text("calibration").muted()])
            .key("metric:sidebar.brand")
            .gap(tokens::SPACE_1)
            .height(Size::Hug),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        nav_item("01", "Overview", true),
        nav_item("02", "Commands", false),
        nav_item("03", "Tables", false),
        nav_item("04", "Forms", false),
        spacer(),
        badge("dark theme").muted(),
    ])
    .gap(tokens::SPACE_2)
    .padding(tokens::SPACE_5)
    .key("metric:sidebar")
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn nav_item(icon: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon_cell(icon),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_3)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(40.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    }

    item
}

fn main_panel() -> El {
    column([
        toolbar(),
        column([
            row([
                kpi_card("Latency", "42 ms", "-18%", true),
                kpi_card("Runs", "1,284", "+12%", true),
                kpi_card("Errors", "7", "+2", false),
            ])
            .gap(tokens::SPACE_4),
            row([table_card(), command_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fill(1.0))
                .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4)
        .height(Size::Fill(1.0))
        .align(Align::Stretch),
    ])
    .padding(tokens::SPACE_7)
    .gap(tokens::SPACE_2)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn toolbar() -> El {
    row([
        column([
            h1("Polish calibration").key("metric:page.title"),
            text("A representative app surface for default tuning.")
                .muted()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Hug),
        spacer(),
        button_with_icon("search", "Preview")
            .secondary()
            .key("metric:action.secondary"),
        button_with_icon("upload", "Publish")
            .primary()
            .key("metric:action.primary"),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_4)
    .height(Size::Hug)
    .align(Align::Start)
}

fn kpi_card(label: &'static str, value: &'static str, delta: &'static str, positive: bool) -> El {
    let delta_badge = if positive {
        badge(delta).success()
    } else {
        badge(delta).destructive()
    };
    let delta_badge = if label == "Latency" {
        delta_badge.key("metric:kpi.badge")
    } else {
        delta_badge
    };
    let value_text = h2(value).display();
    let value_text = if label == "Latency" {
        value_text.key("metric:kpi.value")
    } else {
        value_text
    };
    card([
        card_header([card_title(label)]),
        card_content([
            row([value_text, spacer(), delta_badge]).align(Align::Center),
            text(if positive {
                "Moving in the expected direction"
            } else {
                "Needs visual attention"
            })
            .muted(),
        ])
        .gap(tokens::SPACE_6),
    ])
    .key(if label == "Latency" {
        "metric:kpi.card"
    } else {
        label
    })
    .width(Size::Fill(1.0))
}

fn table_card() -> El {
    card([
        card_header([card_title("Reference rows")]),
        card_content([table([
            table_header([table_row([
                table_head("Status").width(Size::Fixed(86.0)),
                table_head("Surface").width(Size::Fill(1.0)),
                table_head("Owner").width(Size::Fixed(110.0)),
                table_head("State").width(Size::Fixed(86.0)),
            ])
            .key("metric:table.header")]),
            divider(),
            table_body([
                data_row("OK", "Settings card", "core", "selected", true, "success"),
                data_row(
                    "WARN",
                    "Command palette density",
                    "widgets",
                    "needs work",
                    false,
                    "warning",
                ),
                data_row(
                    "ERR",
                    "Disabled and invalid states",
                    "style",
                    "missing",
                    false,
                    "destructive",
                ),
                data_row(
                    "INFO",
                    "Token resolution",
                    "theme",
                    "planned",
                    false,
                    "info",
                ),
                data_row(
                    "OK",
                    "Popover elevation",
                    "shader",
                    "queued",
                    false,
                    "success",
                ),
            ])
            .gap(tokens::SPACE_1)
            .width(Size::Fill(1.0)),
        ])]),
    ])
    .key("metric:table.card")
    .width(Size::Fill(1.2))
    .height(Size::Fill(1.0))
}

fn data_row(
    status: &'static str,
    title: &'static str,
    owner: &'static str,
    state: &'static str,
    selected: bool,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        "warning" => badge(status).warning(),
        "destructive" => badge(status).destructive(),
        _ => badge(status).info(),
    };
    let status_badge = if selected {
        status_badge.key("metric:table.badge")
    } else {
        status_badge
    };

    let mut row = table_row([
        table_cell(status_badge).width(Size::Fixed(70.0)),
        column([
            text(title)
                .font_weight(FontWeight::Medium)
                .ellipsis()
                .width(Size::Fill(1.0)),
            text("Default styling probe.")
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0)),
        table_cell(text(owner).muted()).width(Size::Fixed(110.0)),
        table_cell(text(state).label().small()).width(Size::Fixed(86.0)),
    ])
    .key(if selected {
        "metric:table.row".to_string()
    } else {
        format!("row-{title}")
    })
    .focusable();

    if selected {
        row = row.selected();
    }

    row
}

fn command_card() -> El {
    card([
        card_header([card_title("Command surface")]),
        card_content([
            text_input(
                "Search commands...",
                &Selection::default(),
                "command-search",
            )
            .key("metric:command.input")
            .width(Size::Fill(1.0)),
            popover_panel([
                command_row("git-branch", "New branch", "Ctrl+B").key("metric:command.row"),
                command_row("git-commit", "Commit staged files", "Ctrl+Enter")
                    .key("command-row-commit"),
                command_row("refresh-cw", "Refresh repository", "Ctrl+R")
                    .key("command-row-refresh"),
                command_row("alert-circle", "Force push", "Danger").key("command-row-force"),
            ])
            .width(Size::Fill(1.0)),
            scroll([form_probe()]).key("form-probe-scroll"),
        ])
        .height(Size::Fill(1.0)),
    ])
    .key("metric:command.card")
    .width(Size::Fill(0.8))
    .height(Size::Fill(1.0))
}

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/palette_demo.rs (line 288)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

fn surface_sample(title: &'static str, fill: Color) -> El {
    column([
        text(title).label(),
        text("surface sample").caption().muted(),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_3)
    .fill(fill)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(76.0))
}

examples/settings_calibration.rs (line 81)

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/dashboard_01_calibration.rs (line 99)

fn dashboard_sidebar() -> El {
    column([
        row([
            icon_cell("A"),
            column([
                text("Acme Inc.")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Enterprise")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Platform"),
        side_item("layout-dashboard", "Dashboard", true),
        side_item("activity", "Lifecycle", false),
        side_item("bar-chart", "Analytics", false),
        side_item("folder", "Projects", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Documents"),
        side_item("file-text", "Data library", false),
        side_item("download", "Reports", false),
        side_item("users", "Team", false),
        spacer(),
        row([
            icon_cell("AK"),
            column([
                text("Alicia Koch")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("alicia@example.com")
                    .caption()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(50.0))
        .align(Align::Center),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn dashboard_main() -> El {
    column([
        dashboard_header(),
        column([
            row([
                metric_card(
                    "bar-chart",
                    "Total Revenue",
                    "$1,250.00",
                    "+12.5%",
                    "Trending up this month",
                    true,
                ),
                metric_card(
                    "users",
                    "New Customers",
                    "1,234",
                    "-20%",
                    "Acquisition needs attention",
                    false,
                ),
                metric_card(
                    "folder",
                    "Active Accounts",
                    "45,678",
                    "+12.5%",
                    "Strong user retention",
                    true,
                ),
                metric_card(
                    "activity",
                    "Growth Rate",
                    "4.5%",
                    "+4.5%",
                    "Meets growth projections",
                    true,
                ),
            ])
            .gap(tokens::SPACE_4),
            row([chart_card(), sales_card()])
                .gap(tokens::SPACE_4)
                .height(Size::Fixed(306.0))
                .align(Align::Stretch),
            documents_card(),
        ])
        .gap(tokens::SPACE_4)
        .padding(tokens::SPACE_7)
        .height(Size::Fill(1.0)),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn dashboard_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Documents").key("metric:page.title"),
        spacer(),
        text_input("Search...", &Selection::default(), "dashboard-search")
            .key("metric:command.input")
            .width(Size::Fixed(260.0)),
        icon_button("plus").ghost(),
        icon_button("bell").ghost(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

examples/scrollbar.rs (line 46)

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn stroke_width(self, w: f32) -> Self

Examples found in repository

examples/scrollbar.rs (line 47)

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn radius(self, r: impl Into<Corners>) -> Self

Set the element’s corner radii. A scalar (e.g. .radius(tokens::RADIUS_MD)) sets all four corners uniformly via Corners::from; pass Corners::top / Corners::bottom / Corners::left / Corners::right, or a directly-built Corners, to round only a subset of corners.

Examples found in repository

examples/dashboard_01_calibration.rs (line 306)

fn bar(height: f32, color: Color) -> El {
    El::new(Kind::Custom("chart_bar"))
        .fill(color)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fill(1.0))
        .height(Size::Fixed(height))
}

fn sales_card() -> El {
    card([
        card_header([
            card_title("Recent Sales"),
            card_description("You made 265 sales this month."),
        ])
        .padding(tokens::SPACE_4),
        card_content([
            sale_row("OM", "Olivia Martin", "olivia@example.com", "+$1,999.00"),
            sale_row("JL", "Jackson Lee", "jackson@example.com", "+$39.00"),
            sale_row("IN", "Isabella Nguyen", "isabella@example.com", "+$299.00"),
            sale_row("WK", "William Kim", "will@example.com", "+$99.00"),
        ])
        .gap(tokens::SPACE_2)
        .padding(Sides {
            left: tokens::SPACE_4,
            right: tokens::SPACE_4,
            top: 0.0,
            bottom: tokens::SPACE_4,
        }),
    ])
    .key("metric:sales.card")
    .width(Size::Fixed(330.0))
    .height(Size::Fill(1.0))
}

fn sale_row(
    initials: &'static str,
    name: &'static str,
    email: &'static str,
    amount: &'static str,
) -> El {
    row([
        icon_cell(initials),
        column([
            text(name).semibold().ellipsis().width(Size::Fill(1.0)),
            text(email).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .height(Size::Hug)
        .width(Size::Fill(1.0)),
        text(amount).label().small(),
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(42.0))
    .align(Align::Center)
}

fn documents_card() -> El {
    card([
        card_header([card_title("Documents")]).padding(tokens::SPACE_4),
        card_content([scroll([table([
            table_header([table_row([
                table_head("").width(Size::Fixed(35.0)),
                table_head("Header").width(Size::Fill(1.8)),
                table_head("Section Type").width(Size::Fill(1.0)),
                table_head("Status").width(Size::Fixed(104.0)),
                table_head("Target").width(Size::Fixed(64.0)),
                table_head("Limit").width(Size::Fixed(64.0)),
                table_head("Reviewer").width(Size::Fixed(128.0)),
                table_head("").width(Size::Fixed(32.0)),
            ])
            .padding(Sides::xy(tokens::SPACE_4, 0.0))
            .key("metric:table.header")]),
            divider(),
            table_body([
                document_row(
                    "Cover page",
                    "Cover page",
                    "In Process",
                    "18",
                    "5",
                    "Eddie Lake",
                    "info",
                ),
                document_row(
                    "Table of contents",
                    "Table of contents",
                    "Done",
                    "29",
                    "24",
                    "Eddie Lake",
                    "success",
                ),
            ]),
        ])])
        .height(Size::Fill(1.0))])
        .gap(0.0)
        .padding(0.0)
        .height(Size::Fill(1.0)),
    ])
    .key("metric:table.card")
    .height(Size::Fill(1.0))
}

fn document_row(
    header: &'static str,
    section: &'static str,
    status: &'static str,
    target: &'static str,
    limit: &'static str,
    reviewer: &'static str,
    tone: &'static str,
) -> El {
    let status_badge = match tone {
        "success" => badge(status).success(),
        _ => badge(status).info(),
    };
    table_row([
        table_utility_cell("::"),
        table_cell(text(header).label().small()).width(Size::Fill(1.8)),
        table_cell(text(section).muted()).width(Size::Fill(1.0)),
        table_cell(status_badge).width(Size::Fixed(104.0)),
        table_cell(text(target).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(limit).label().small()).width(Size::Fixed(64.0)),
        table_cell(text(reviewer).muted()).width(Size::Fixed(128.0)),
        table_action_cell(),
    ])
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .key(if header == "Cover page" {
        "metric:table.row"
    } else {
        header
    })
}

fn table_utility_cell(label: &'static str) -> El {
    table_cell(text(label).muted().center_text()).width(Size::Fixed(35.0))
}

fn table_action_cell() -> El {
    stack([icon("more-horizontal")
        .icon_size(tokens::ICON_SM)
        .color(tokens::MUTED_FOREGROUND)])
    .align(Align::Center)
    .justify(Justify::Center)
    .width(Size::Fixed(32.0))
    .height(Size::Hug)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/palette_demo.rs (line 289)

fn token_chip(token: TokenDef, palette: &Palette) -> El {
    let resolved = palette.resolve(token.color);
    row([
        El::new(Kind::Custom("palette-swatch"))
            .at(file!(), line!())
            .fill(token.color)
            .stroke(tokens::BORDER)
            .radius(tokens::RADIUS_SM)
            .width(Size::Fixed(42.0))
            .height(Size::Fixed(34.0)),
        column([
            text(token.name)
                .label()
                .ellipsis()
                .nowrap_text()
                .width(Size::Fill(1.0)),
            mono(rgba_label(resolved)).caption().muted(),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_2))
    .align(Align::Center)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(54.0))
}

fn component_section() -> El {
    card([
        card_header([
            card_title("Stock widgets"),
            card_description("The same palette applied to regular component constructors."),
        ]),
        card_content([
            row([
                button("Primary").primary(),
                button("Secondary").secondary(),
                button("Outline").outline(),
                button("Ghost").ghost(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                badge("success").success(),
                badge("warning").warning(),
                badge("destructive").destructive(),
                badge("info").info(),
                badge("muted").muted(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                text_input("palette search", &Selection::default(), "palette:search")
                    .width(Size::Fill(1.0)),
                button_with_icon("settings", "Tune").secondary(),
            ])
            .gap(tokens::SPACE_2)
            .align(Align::Center),
            row([
                surface_sample("Card", tokens::CARD),
                surface_sample("Muted", tokens::MUTED),
                surface_sample("Popover", tokens::POPOVER),
            ])
            .gap(tokens::SPACE_3)
            .align(Align::Stretch),
        ])
        .gap(tokens::SPACE_4),
    ])
    .height(Size::Hug)
}

fn surface_sample(title: &'static str, fill: Color) -> El {
    column([
        text(title).label(),
        text("surface sample").caption().muted(),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_3)
    .fill(fill)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .width(Size::Fill(1.0))
    .height(Size::Fixed(76.0))
}

examples/polish_calibration.rs (line 352)

fn form_probe() -> El {
    form([
        form_item([
            form_label("Valid input"),
            form_control(
                text_input(
                    "Valid input",
                    &Selection::caret("valid-input", 11),
                    "valid-input",
                )
                .key("metric:form.input"),
            ),
            form_description("Default field spacing and helper text."),
        ]),
        form_item([
            form_label("Invalid input"),
            form_control(
                text_input(
                    "Invalid input",
                    &Selection::caret("invalid-input", 13),
                    "invalid-input",
                )
                .invalid(),
            ),
            form_message("This field needs attention."),
        ]),
        row([
            button("Disabled").secondary().disabled(),
            button("Loading").primary().loading(),
            spacer(),
        ]),
    ])
    .padding(tokens::SPACE_3)
    .fill(tokens::MUTED)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
}

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/settings_calibration.rs (line 73)

fn settings_sidebar() -> El {
    column([
        row([
            icon_slot("settings"),
            column([
                text("Workspace")
                    .semibold()
                    .ellipsis()
                    .width(Size::Fill(1.0)),
                text("Settings").caption().ellipsis().width(Size::Fill(1.0)),
            ])
            .gap(2.0)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_2)
        .height(Size::Fixed(44.0))
        .align(Align::Center),
        section_label("Personal"),
        side_item("users", "Profile", false),
        side_item("settings", "Account", true),
        side_item("alert-circle", "Security", false),
        side_item("bell", "Notifications", false),
        spacer().height(Size::Fixed(tokens::SPACE_4)),
        section_label("Workspace"),
        side_item("file-text", "Billing", false),
        side_item("bar-chart", "Appearance", false),
        side_item("activity", "Integrations", false),
        spacer(),
        column([text("Changes sync after save.").caption().wrap_text()])
            .padding(tokens::SPACE_2)
            .fill(tokens::MUTED)
            .radius(tokens::RADIUS_MD),
    ])
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_2))
    .key("metric:sidebar")
    .width(Size::Fixed(244.0))
    .height(Size::Fill(1.0))
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
}

fn settings_main() -> El {
    column([
        settings_header(),
        row([settings_nav_card(), settings_body(), settings_aside()])
            .gap(tokens::SPACE_4)
            .padding(tokens::SPACE_4)
            .height(Size::Fill(1.0))
            .align(Align::Stretch),
    ])
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn settings_header() -> El {
    row([
        icon_button("menu").ghost(),
        divider().width(Size::Fixed(1.0)).height(Size::Fixed(22.0)),
        h3("Settings").key("metric:page.title"),
        spacer(),
        button("Reset").secondary(),
        button("Save changes").primary(),
    ])
    .key("metric:header")
    .gap(tokens::SPACE_3)
    .height(Size::Fixed(56.0))
    .padding(Sides::xy(tokens::SPACE_4, 0.0))
    .align(Align::Center)
    .stroke(tokens::BORDER)
}

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/scrollbar.rs (line 48)

fn fixture() -> El {
    column([
        h2("Scrollbar"),
        text("scroll() and virtual_list() show a draggable thumb by default.").muted(),
        row([
            // 1) scroll() — default-on scrollbar.
            column([
                text("scroll() — default").bold(),
                scroll(list_rows())
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 2) virtual_list — thumb scales to content size.
            column([
                text("virtual_list(200, 28)").bold(),
                virtual_list(200, 28.0, |i| {
                    row([
                        text(format!("{i:03}")).mono().muted(),
                        text(format!("row {i}")),
                    ])
                    .gap(tokens::SPACE_2)
                    .padding(Sides::xy(tokens::SPACE_2, tokens::SPACE_1))
                    .height(Size::Fixed(28.0))
                    .align(Align::Center)
                })
                .height(Size::Fixed(240.0))
                .padding(tokens::SPACE_2)
                .stroke(tokens::BORDER)
                .stroke_width(1.0)
                .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
            // 3) Opt-out: same content, no thumb.
            column([
                text("scroll().no_scrollbar()").bold(),
                scroll(list_rows())
                    .no_scrollbar()
                    .height(Size::Fixed(240.0))
                    .padding(tokens::SPACE_2)
                    .stroke(tokens::BORDER)
                    .stroke_width(1.0)
                    .radius(tokens::RADIUS_MD),
            ])
            .gap(tokens::SPACE_2)
            .width(Size::Fill(1.0))
            .height(Size::Hug),
        ])
        .gap(tokens::SPACE_4)
        .width(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .padding(tokens::SPACE_7)
}

pub fn shadow(self, s: f32) -> Self

Examples found in repository

examples/settings_calibration.rs (line 131)

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

pub fn surface_role(self, role: SurfaceRole) -> Self

Tag this node with a semantic SurfaceRole so the theme can route it through the appropriate paint recipe. Most app code should not call this directly: the catalog widgets (card(), sidebar(), dialog(), popover(), tabs_list(), etc.) set the right role and the matching fill / stroke / radius / shadow together, while the .selected() and .current() chainables wrap the corresponding state recipes.

Reach for the raw chainable when authoring a new widget or when composing a custom container that the catalog doesn’t cover — and remember that decorative roles (Panel, Raised, Popover, Danger) require you to supply a fill yourself; see the SurfaceRole doc for the per-variant contract. The bundle lint pass flags Panel without a fill as crate::bundle::lint::FindingKind::MissingSurfaceFill.

Examples found in repository

examples/settings_calibration.rs (line 127)

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

pub fn paint_overflow(self, outset: impl Into<Sides>) -> Self

Permit paint to extend beyond this element’s layout bounds by outset on each side. Layout-neutral; siblings don’t move and hit-testing still uses the layout rect.

pub fn focus_ring_inside(self) -> Self

Draw the stock focus ring just inside this node’s layout rect.

The default focus ring is outside the rect so it does not reduce usable control area. Inside rings are for dense, flush stacks such as menu rows, where adding gaps would change the intended visual recipe.

pub fn focus_ring_outside(self) -> Self

Draw the stock focus ring outside this node’s layout rect.

pub fn tooltip(self, text: impl Into<String>) -> Self

Attach a hover tooltip to this element. The runtime synthesizes a floating tooltip layer when the pointer rests on the node for the configured delay.

The node must also have a key. Tooltips fire through the hit-test pipeline, and crate::hit_test only returns keyed nodes — an unkeyed leaf with .tooltip() is silently dead, because hover skips past it to the nearest keyed ancestor (which has a different computed_id and a different tooltip). The bundle lint flags this case as crate::bundle::lint::FindingKind::DeadTooltip.

For info-only chrome inside list rows (sha cells, timestamps, chips, identicon avatars) the usual key is a synthetic one like "row:{idx}.<part>" — its only purpose is to make the tooltip’s hover land. The tooltip text is snapshotted onto the hit target at hit-test time, so tooltips fire correctly even on virtual_list_dyn rows whose children are realized only during layout.

pub fn cursor(self, cursor: Cursor) -> Self

Declare the pointer cursor when the pointer is over this element.

pub fn cursor_pressed(self, cursor: Cursor) -> Self

Declare the cursor shown only while a press is captured at this exact node.

pub fn opacity(self, v: f32) -> Self

Multiply this element’s paint alpha by v (clamped to [0, 1]).

pub fn translate(self, x: f32, y: f32) -> Self

Offset this element’s paint and its descendants by (x, y) in logical pixels.

pub fn scale(self, v: f32) -> Self

Uniformly scale this element’s paint around its rect centre.

pub fn animate(self, timing: Timing) -> Self

Opt this element into app-driven prop interpolation.

pub fn shader(self, binding: ShaderBinding) -> Self

Bind a shader for the surface paint, replacing the implicit stock::rounded_rect.

Examples found in repository

examples/custom_shader.rs (lines 23-28)

fn gradient_button(label: &str, top: Color, bottom: Color, radius: f32) -> El {
    button(label).text_color(tokens::PRIMARY_FOREGROUND).shader(
        ShaderBinding::custom("gradient")
            .color("vec_a", top)
            .color("vec_b", bottom)
            .f32("vec_c", radius),
    )
}

examples/custom_paint.rs (lines 59-64)

fn graph_cell(lane: u8, selected: bool) -> El {
    let lane_color = lane_palette(lane);
    let ring_color = if selected {
        Color::rgb(245, 245, 250)
    } else {
        lane_color
    };
    let ring_w = if selected { 2.5 } else { 1.5 };
    let radius = 5.0;
    let line_w = 2.0;
    let lane_frac = (lane as f32 + 0.5) / LANE_COUNT as f32;

    El::new(Kind::Custom("graph_cell"))
        .width(Size::Fixed(GRAPH_WIDTH))
        .height(Size::Fixed(ROW_HEIGHT))
        .shader(
            ShaderBinding::custom("commit_node")
                .color("vec_a", tokens::BACKGROUND)
                .color("vec_b", ring_color)
                .vec4("vec_c", [radius, ring_w, line_w, lane_frac]),
        )
        .fill(lane_color)
}

pub fn style_profile(self, p: StyleProfile) -> Self

Examples found in repository

examples/dashboard_01_calibration.rs (line 453)

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

examples/polish_calibration.rs (line 357)

fn icon_cell(label: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .text(label)
        .text_align(TextAlign::Center)
        .caption()
        .font_weight(FontWeight::Semibold)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(26.0))
        .height(Size::Fixed(26.0))
}

examples/settings_calibration.rs (line 126)

fn settings_nav_card() -> El {
    column([
        settings_nav_item("Account", true),
        settings_nav_item("Security", false),
        settings_nav_item("Notifications", false),
        settings_nav_item("Appearance", false),
        settings_nav_item("Billing", false),
    ])
    .gap(tokens::SPACE_1)
    .padding(tokens::SPACE_1)
    .width(Size::Fixed(220.0))
    .height(Size::Fill(1.0))
    .style_profile(StyleProfile::Surface)
    .surface_role(SurfaceRole::Panel)
    .fill(tokens::CARD)
    .stroke(tokens::BORDER)
    .radius(tokens::RADIUS_MD)
    .shadow(tokens::SHADOW_MD)
}

fn settings_nav_item(label: &'static str, selected: bool) -> El {
    let mut item = row([
        El::new(Kind::Custom("nav-dot"))
            .fill(tokens::MUTED_FOREGROUND)
            .radius(tokens::RADIUS_PILL)
            .width(Size::Fixed(6.0))
            .height(Size::Fixed(6.0)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:settings.nav.row".to_string()
    } else {
        format!("settings-nav-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn settings_body() -> El {
    column([
        column([
            h1("Account").heading().key("metric:section.title"),
            text("Manage identity, workspace defaults, and security preferences.")
                .muted()
                .wrap_text()
                .key("metric:page.subtitle"),
        ])
        .gap(tokens::SPACE_1)
        .height(Size::Hug),
        scroll([profile_card(), preferences_card()])
            .key("settings-body-scroll")
            .gap(tokens::SPACE_4)
            .width(Size::Fill(1.0))
            .height(Size::Fill(1.0)),
    ])
    .gap(tokens::SPACE_4)
    .width(Size::Fill(1.0))
    .height(Size::Fill(1.0))
}

fn profile_card() -> El {
    card([
        card_header([
            card_title("Profile"),
            card_description("This information appears in audit logs and shared documents."),
        ]),
        card_content([form([
            row([
                setting_field("Display name", "Alicia Koch", "display-name"),
                setting_field("Email", "alicia@acme.co", "email"),
            ])
            .gap(tokens::SPACE_3),
            row([
                setting_select("Role", "Workspace admin", "role"),
                setting_select("Region", "US East", "region"),
            ])
            .gap(tokens::SPACE_3),
        ])]),
    ])
    .key("metric:profile.card")
}

fn setting_field(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([
        form_label(label),
        form_control(
            text_input(value, &Selection::caret(key, value.len()), key).key(
                if key == "display-name" {
                    "metric:form.input"
                } else {
                    key
                },
            ),
        ),
    ])
    .width(Size::Fill(1.0))
}

fn setting_select(label: &'static str, value: &'static str, key: &'static str) -> El {
    form_item([form_label(label), form_control(select_trigger(key, value))]).width(Size::Fill(1.0))
}

fn preferences_card() -> El {
    card([
        card_header([
            card_title("Preferences"),
            card_description("Defaults used when creating new dashboards and exports."),
        ]),
        card_content([column([
            preference_row(
                "Compact navigation",
                "Use tighter rows in the sidebar and command menus.",
                switch(true).key("compact-navigation"),
            ),
            divider(),
            preference_row(
                "Email summaries",
                "Send a daily digest when documents change.",
                switch(false).key("email-summaries"),
            ),
            divider(),
            preference_row(
                "Require approval",
                "Route external sharing through an owner review.",
                checkbox(true).key("approval-required"),
            ),
        ])
        .gap(0.0)
        .width(Size::Fill(1.0))])
        .padding(0.0),
    ])
    .key("metric:preferences.card")
}

fn preference_row(title: &'static str, description: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(description)
                .caption()
                .ellipsis()
                .width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .key(if title == "Compact navigation" {
        "metric:preference.row".to_string()
    } else {
        format!("preference-{title}")
    })
    .metrics_role(MetricsRole::PreferenceRow)
    .gap(tokens::SPACE_4)
    .padding(Sides::xy(tokens::SPACE_4, tokens::SPACE_3))
    .align(Align::Center)
}

fn settings_aside() -> El {
    column([security_card(), scale_card()])
        .gap(tokens::SPACE_4)
        .width(Size::Fixed(300.0))
        .height(Size::Fill(1.0))
}

fn security_card() -> El {
    card([
        card_header([
            card_title("Security"),
            card_description("Two-factor authentication is enabled for all privileged users."),
        ]),
        card_content([
            compact_stat("Passkeys", "2 registered", badge("On").success()),
            compact_stat("Sessions", "3 active", button("Review").secondary()),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn scale_card() -> El {
    card([
        card_header([
            card_title("Interface scale"),
            card_description("Reference captures keep browser zoom fixed and vary root UI scale."),
        ]),
        card_content([
            row([text("Dense").caption(), spacer(), text("Default").caption()]),
            slider(0.66, tokens::PRIMARY)
                .key("interface-scale")
                .width(Size::Fill(1.0)),
        ]),
    ])
    .width(Size::Fill(1.0))
}

fn compact_stat(title: &'static str, detail: &'static str, control: El) -> El {
    row([
        column([
            text(title).semibold().ellipsis().width(Size::Fill(1.0)),
            text(detail).caption().ellipsis().width(Size::Fill(1.0)),
        ])
        .gap(2.0)
        .width(Size::Fill(1.0))
        .height(Size::Hug),
        control,
    ])
    .gap(tokens::SPACE_2)
    .height(Size::Fixed(44.0))
    .align(Align::Center)
}

fn section_label(label: &'static str) -> El {
    text(label)
        .caption()
        .height(Size::Fixed(22.0))
        .padding(Sides::xy(tokens::SPACE_2, 0.0))
}

fn side_item(icon_name: &'static str, label: &'static str, selected: bool) -> El {
    let mut item = row([
        icon(icon_name)
            .color(tokens::MUTED_FOREGROUND)
            .icon_size(tokens::ICON_SM)
            .width(Size::Fixed(tokens::ICON_SM)),
        text(label)
            .font_weight(FontWeight::Medium)
            .ellipsis()
            .width(Size::Fill(1.0)),
    ])
    .key(if selected {
        "metric:sidebar.nav.row".to_string()
    } else {
        format!("side-item-{label}")
    })
    .metrics_role(MetricsRole::ListItem)
    .gap(tokens::SPACE_2)
    .padding(Sides::xy(tokens::SPACE_2, 0.0))
    .height(Size::Fixed(32.0))
    .align(Align::Center)
    .focusable();

    if selected {
        item = item.current();
    } else {
        item = item.color(tokens::MUTED_FOREGROUND);
    }

    item
}

fn icon_slot(icon_name: &'static str) -> El {
    El::new(Kind::Custom("icon_cell"))
        .style_profile(StyleProfile::Surface)
        .child(
            icon(icon_name)
                .color(tokens::FOREGROUND)
                .icon_size(tokens::ICON_XS),
        )
        .align(Align::Center)
        .justify(Justify::Center)
        .fill(tokens::MUTED)
        .stroke(tokens::BORDER)
        .radius(tokens::RADIUS_SM)
        .width(Size::Fixed(30.0))
        .height(Size::Fixed(30.0))
}

Trait Implementations

impl Clone for El

fn clone(&self) -> El

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for El

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl Default for El

fn default() -> Self

Returns the “default value” for a type.

impl From<&String> for El

fn from(s: &String) -> Self

Converts to this type from the input type.

impl From<&str> for El

fn from(s: &str) -> Self

Converts to this type from the input type.

impl From<String> for El

fn from(s: String) -> Self

Converts to this type from the input type.