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.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | null | null | Accessible name for the scrollable role="region" when no visible heading exists. |
styleClass | string | null | null | Extra class names merged onto the host element. |
Accessibility
- Landmark:ARIA region on the scroll viewport with optional
aria-label. tabindex="0"on the viewport so keyboard users can focus and scroll overflowing content.- Focus ring uses design-token outline styles on
:focus-visible. - Prefer a visible heading plus
aria-labelledbyin consumer markup when label text is on-screen.