StellarUI

<stellar-scroller>

Accessible scroll container with native scrolling and edge shadows.

Properties

Preview

Lane 01

Overview

Keep dense summaries visible without growing the surrounding shell.

Horizontal mode reads like a single wide strip of cards.

Both mode turns the same content into a board you can pan across and down.

Lane 02

Patterns

Use side-scroll rows for chips, metrics, thumbnails, and tab-like clusters.

Use vertical stacks for bounded panels, filters, and long supdocs notes.

Use both when the content behaves more like a canvas, map, or multi-lane workspace.

Lane 03

Tokens

Scrollbar colors and edge shadows come from shared Stellar surface tokens.

Native scrolling stays intact for wheel, touch, trackpad, keyboard, and assistive tech.

The component only owns the scroll region. Layout still belongs to the authored children.

Markup

Copy

<stellar-scroller>
  <section>
    <header>
      <p>Lane 01</p>
      <h3>Overview</h3>
    </header>
    <article><p>Keep dense summaries visible without growing the surrounding shell.</p></article>
    <article><p>Horizontal mode reads like a single wide strip of cards.</p></article>
    <article><p>Both mode turns the same content into a board you can pan across and down.</p></article>
  </section>
  <section>
    <header>
      <p>Lane 02</p>
      <h3>Patterns</h3>
    </header>
    <article><p>Use side-scroll rows for chips, metrics, thumbnails, and tab-like clusters.</p></article>
    <article><p>Use vertical stacks for bounded panels, filters, and long supdocs notes.</p></article>
    <article><p>Use both when the content behaves more like a canvas, map, or multi-lane workspace.</p></article>
  </section>
  <section>
    <header>
      <p>Lane 03</p>
      <h3>Tokens</h3>
    </header>
    <article><p>Scrollbar colors and edge shadows come from shared Stellar surface tokens.</p></article>
    <article><p>Native scrolling stays intact for wheel, touch, trackpad, keyboard, and assistive tech.</p></article>
    <article><p>The component only owns the scroll region. Layout still belongs to the authored children.</p></article>
  </section>
</stellar-scroller>

API

Complete props, events, slots, and implementation notes for the shipped scroller.

Props

Prop	Type	Default	Notes
`orientation`	`both \| horizontal \| vertical`	`both`

Events

Event	Source	Notes
native scroll events	`part="content"`	The component uses a native scrolling region under the hood and does not emit custom events.

Slots

Slot	Notes
default	Provide direct child content such as cards, buttons, or other overflow items.

Notes

`stellar-scroller` keeps native scrolling and keyboard Home/End behavior while adding edge shadows.
Authored child content stays in the default slot. The component only owns the scroll container and orientation.
The docs preview starts in `both` mode to match the component default and show two-axis overflow immediately.
The component always keeps the native scrollbar and shadow affordances. `orientation` is the only public prop.