Docs / Components
SenseScrollPanelComponent
Scrollable viewport from @artificialsenselabs/ui for overflowing content inside a fixed-height container. Uses native overflow scrolling and token-styled scrollbars.
Live demo: run nx serve showcase and open /components/scroll-panel (port 4202).
Overview
Category: Layout. Selector: sense-scroll-panel. Import: import { SenseScrollPanelComponent } from '@artificialsenselabs/ui';
<sense-scroll-panel ariaLabel="Activity feed" class="feed-panel">
<ul>...</ul>
</sense-scroll-panel> Set block-size (or height) on the host so the inner viewport can scroll. The component does not measure content automatically. Surface chrome belongs on a composed sense-panel / sense-card — this host is an overflow primitive (no variant).
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | null | null | Accessible name when no visible heading exists. Enables role="region". |
ariaLabelledBy | string | null | null | Id of a visible heading that names the region (preferred when a heading is on-screen). |
styleClass | string | null | null | Extra class names merged onto the host element. |
Accessibility
- Landmark:ARIA region only when
ariaLabelorariaLabelledByprovides a name. tabindex="0"on the viewport so keyboard users can focus and scroll overflowing content.- Focus ring is inset so it stays visible inside the host's
overflow: hiddenclip. - Prefer a visible heading plus
ariaLabelledBywhen label text is on-screen.