Layout recipes

Short recipes for chrome / layout atoms used in top-nav and character/loadout screens. Storybook: Samples~/Storybook (icon-rail, wedge-slider, parallax-stack, app-bar).

---

SusIconRail

Vertical (default) or horizontal category / loadout strip of circular items.

Prop	Role
Items	List<RailItem> — Label, Value, Icon, Disabled
Model	Selected Value (or index string)
Direction	vertical | horizontal
OnChanged	Action<string>

Root layout may need consumer USS overrides: Sharq scoping breaks self-target on .sus-icon-rail — put unscoped root rules in companion / theme USS.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-icon-rail__icon
• sus-icon-rail__item
• sus-icon-rail__item--active
• sus-icon-rail__item--disabled
• sus-icon-rail__item--h
• sus-icon-rail__label
• sus-icon-rail--horizontal
• sus-icon-rail--vertical

---

SusWedgeSlider

Segmented “volume wedge” (rising bars). Click along the row to set filled segment count.

Prop	Role
Label	Optional caption
Value / Segments	Filled count 0…Segments
ShowValue / ValueText	Numeric readout
Disabled	Blocks input
OnChanged	Action<int>

Helper: Bind(label, filled, segments = 10).

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-wedge-slider
• sus-wedge-slider__label
• sus-wedge-slider__row
• sus-wedge-slider__row--grow
• sus-wedge-slider__seg
• sus-wedge-slider__seg--h1
• sus-wedge-slider__seg--h10
• sus-wedge-slider__seg--h11
• sus-wedge-slider__seg--h12
• sus-wedge-slider__seg--h13
• sus-wedge-slider__seg--h14
• sus-wedge-slider__seg--h15
• sus-wedge-slider__seg--h16
• sus-wedge-slider__seg--h2
• sus-wedge-slider__seg--h3
• sus-wedge-slider__seg--h4
• sus-wedge-slider__seg--h5
• sus-wedge-slider__seg--h6
• sus-wedge-slider__seg--h7
• sus-wedge-slider__seg--h8
• sus-wedge-slider__seg--h9
• sus-wedge-slider__seg--on
• sus-wedge-slider__value
• sus-wedge-slider__wrap
• sus-wedge-slider--disabled

---

SusParallaxStack

Pointer-driven layered stack: bg → pattern → subject → ui (tips) → chrome.

Prop	Role
PatternAmp / SubjectAmp / UiAmp	Parallax amplitude (px)

Call EnsureLayers() after build to resolve Bg, Pattern, Subject, Ui, TipHost, Chrome. Add children into those layers; stack handles pointer move + lerp.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-parallax-stack
• sus-parallax-stack__bg
• sus-parallax-stack__chrome
• sus-parallax-stack__pattern
• sus-parallax-stack__subject
• sus-parallax-stack__tips
• sus-parallax-stack__ui
• sus-parallax-stack--off

---

SusAppBar

Top strip with prepend / default / append slots (+ optional extension when Prominent).

Prop	Role
Title	Label in content
Density	default | compact | comfortable
Color	primary | secondary | … | surface
Flat / Absolute / Prominent	Visual / position modifiers

Recipe: default slot = SusTabs; append = currency / action SusChips (see Storybook app-bar).

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-app-bar
• sus-app-bar__append
• sus-app-bar__content
• sus-app-bar__extension
• sus-app-bar__prepend
• sus-app-bar__row
• sus-app-bar__title
• sus-app-bar--absolute
• sus-app-bar--danger
• sus-app-bar--density-comfortable
• sus-app-bar--density-compact
• sus-app-bar--flat
• sus-app-bar--info
• sus-app-bar--primary
• sus-app-bar--prominent
• sus-app-bar--secondary
• sus-app-bar--success
• sus-app-bar--surface
• sus-app-bar--warning
• sus-slot