ScrollPanel
Bounded scroll with fade cues.
About
Fixed-height scroll region inside a bordered surface. Content scrolls natively, fades at each end hint at more, and the viewport is a tab stop while the content overflows, so plain text scrolls by keyboard. Reach for it when a list or a feed must stay inside a bounded box instead of growing the page.
Usage
<sui-scroll-panel height="180" aria-label="Journal">
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 18</span><span style="flex:1">Silver Hills Cafe, INV-1039 posted</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 19</span><span style="flex:1">Falls City Supply, INV-1040 posted</span><span style="font-feature-settings:'tnum'">$3,180.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 20</span><span style="flex:1">Payroll 4410, Semimonthly run</span><span style="font-feature-settings:'tnum'">$18,905.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 22</span><span style="flex:1">First Harrison, Deposit cleared</span><span style="font-feature-settings:'tnum'">$12,400.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 25</span><span style="flex:1">Ohio Valley Print, Bill received</span><span style="font-feature-settings:'tnum'">$640.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 27</span><span style="flex:1">Silver Hills Cafe, Payment applied</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 29</span><span style="flex:1">New Albany Utilities, Autopay</span><span style="font-feature-settings:'tnum'">$412.55</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 31</span><span style="flex:1">Depreciation, Monthly entry</span><span style="font-feature-settings:'tnum'">$2,050.00</span></div>
</sui-scroll-panel>
<script type="module">
import { defineCustomElements } from "@shineui/core/loader";
import "@shineui/core/shineui.css";
defineCustomElements();
</script>
import { SuiScrollPanel } from "@shineui/react";
import "@shineui/core/shineui.css";
export function Example() {
return (
<SuiScrollPanel height="180" aria-label="Journal">
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 18</span><span style="flex:1">Silver Hills Cafe, INV-1039 posted</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 19</span><span style="flex:1">Falls City Supply, INV-1040 posted</span><span style="font-feature-settings:'tnum'">$3,180.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 20</span><span style="flex:1">Payroll 4410, Semimonthly run</span><span style="font-feature-settings:'tnum'">$18,905.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 22</span><span style="flex:1">First Harrison, Deposit cleared</span><span style="font-feature-settings:'tnum'">$12,400.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 25</span><span style="flex:1">Ohio Valley Print, Bill received</span><span style="font-feature-settings:'tnum'">$640.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 27</span><span style="flex:1">Silver Hills Cafe, Payment applied</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 29</span><span style="flex:1">New Albany Utilities, Autopay</span><span style="font-feature-settings:'tnum'">$412.55</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 31</span><span style="flex:1">Depreciation, Monthly entry</span><span style="font-feature-settings:'tnum'">$2,050.00</span></div>
</SuiScrollPanel>
);
}
<script setup>
import { SuiScrollPanel } from "@shineui/vue";
import "@shineui/core/shineui.css";
</script>
<template>
<SuiScrollPanel height="180" aria-label="Journal"><div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 18</span><span style="flex:1">Silver Hills Cafe, INV-1039 posted</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 19</span><span style="flex:1">Falls City Supply, INV-1040 posted</span><span style="font-feature-settings:'tnum'">$3,180.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 20</span><span style="flex:1">Payroll 4410, Semimonthly run</span><span style="font-feature-settings:'tnum'">$18,905.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 22</span><span style="flex:1">First Harrison, Deposit cleared</span><span style="font-feature-settings:'tnum'">$12,400.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 25</span><span style="flex:1">Ohio Valley Print, Bill received</span><span style="font-feature-settings:'tnum'">$640.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 27</span><span style="flex:1">Silver Hills Cafe, Payment applied</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 29</span><span style="flex:1">New Albany Utilities, Autopay</span><span style="font-feature-settings:'tnum'">$412.55</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 31</span><span style="flex:1">Depreciation, Monthly entry</span><span style="font-feature-settings:'tnum'">$2,050.00</span></div></SuiScrollPanel>
</template>
import { Component } from "@angular/core";
import { SuiScrollPanel } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiScrollPanel],
template: `<sui-scroll-panel height="180" aria-label="Journal"><div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 18</span><span style="flex:1">Silver Hills Cafe, INV-1039 posted</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 19</span><span style="flex:1">Falls City Supply, INV-1040 posted</span><span style="font-feature-settings:'tnum'">$3,180.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 20</span><span style="flex:1">Payroll 4410, Semimonthly run</span><span style="font-feature-settings:'tnum'">$18,905.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 22</span><span style="flex:1">First Harrison, Deposit cleared</span><span style="font-feature-settings:'tnum'">$12,400.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 25</span><span style="flex:1">Ohio Valley Print, Bill received</span><span style="font-feature-settings:'tnum'">$640.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 27</span><span style="flex:1">Silver Hills Cafe, Payment applied</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 29</span><span style="flex:1">New Albany Utilities, Autopay</span><span style="font-feature-settings:'tnum'">$412.55</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 31</span><span style="flex:1">Depreciation, Monthly entry</span><span style="font-feature-settings:'tnum'">$2,050.00</span></div></sui-scroll-panel>`,
})
export class Example { }
Basic
A bordered surface with a fixed viewport height in px; the content scrolls natively and the fades follow the scroll position. The host aria-label names the viewport as a region for a screen reader.
Aug 18Silver Hills Cafe, INV-1039 posted$1,240.00
Aug 19Falls City Supply, INV-1040 posted$3,180.00
Aug 20Payroll 4410, Semimonthly run$18,905.00
Aug 22First Harrison, Deposit cleared$12,400.00
Aug 25Ohio Valley Print, Bill received$640.00
Aug 27Silver Hills Cafe, Payment applied$1,240.00
Aug 29New Albany Utilities, Autopay$412.55
Aug 31Depreciation, Monthly entry$2,050.00
<sui-scroll-panel height="180" aria-label="Journal" style="max-width:420px">
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 18</span><span style="flex:1">Silver Hills Cafe, INV-1039 posted</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 19</span><span style="flex:1">Falls City Supply, INV-1040 posted</span><span style="font-feature-settings:'tnum'">$3,180.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 20</span><span style="flex:1">Payroll 4410, Semimonthly run</span><span style="font-feature-settings:'tnum'">$18,905.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 22</span><span style="flex:1">First Harrison, Deposit cleared</span><span style="font-feature-settings:'tnum'">$12,400.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 25</span><span style="flex:1">Ohio Valley Print, Bill received</span><span style="font-feature-settings:'tnum'">$640.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 27</span><span style="flex:1">Silver Hills Cafe, Payment applied</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 29</span><span style="flex:1">New Albany Utilities, Autopay</span><span style="font-feature-settings:'tnum'">$412.55</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 31</span><span style="flex:1">Depreciation, Monthly entry</span><span style="font-feature-settings:'tnum'">$2,050.00</span></div>
</sui-scroll-panel>
Height and overflow
The fades stay hidden while the content fits, and each one turns off within 4px of its end, so a short panel never hints at content that is not there.
Aug 18Silver Hills Cafe, INV-1039 posted$1,240.00
Aug 19Falls City Supply, INV-1040 posted$3,180.00
Aug 20Payroll 4410, Semimonthly run$18,905.00
Aug 22First Harrison, Deposit cleared$12,400.00
Aug 25Ohio Valley Print, Bill received$640.00
Aug 27Silver Hills Cafe, Payment applied$1,240.00
Aug 29New Albany Utilities, Autopay$412.55
Aug 31Depreciation, Monthly entry$2,050.00
Two lines only.
Nothing overflows, so no fade appears.
<div style="display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap">
<sui-scroll-panel height="120" aria-label="Journal, vertical" style="flex:1;min-width:240px">
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 18</span><span style="flex:1">Silver Hills Cafe, INV-1039 posted</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 19</span><span style="flex:1">Falls City Supply, INV-1040 posted</span><span style="font-feature-settings:'tnum'">$3,180.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 20</span><span style="flex:1">Payroll 4410, Semimonthly run</span><span style="font-feature-settings:'tnum'">$18,905.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 22</span><span style="flex:1">First Harrison, Deposit cleared</span><span style="font-feature-settings:'tnum'">$12,400.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 25</span><span style="flex:1">Ohio Valley Print, Bill received</span><span style="font-feature-settings:'tnum'">$640.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 27</span><span style="flex:1">Silver Hills Cafe, Payment applied</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 29</span><span style="flex:1">New Albany Utilities, Autopay</span><span style="font-feature-settings:'tnum'">$412.55</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 31</span><span style="flex:1">Depreciation, Monthly entry</span><span style="font-feature-settings:'tnum'">$2,050.00</span></div>
</sui-scroll-panel>
<sui-scroll-panel height="120" aria-label="Note" style="flex:1;min-width:240px">
<div style="font-size:13px;color:var(--ink-muted)">Two lines only.</div>
<div style="font-size:13px;color:var(--ink-muted)">Nothing overflows, so no fade appears.</div>
</sui-scroll-panel>
</div>
Scrolling from script
scrollToBottom() is for a feed that grows, which has no element to scroll to; to reveal a row that exists call scrollIntoView() on it. Add new rows to your own container inside the panel so they land in the scrolling content.
Aug 18Silver Hills Cafe, INV-1039 posted$1,240.00
Aug 19Falls City Supply, INV-1040 posted$3,180.00
Aug 20Payroll 4410, Semimonthly run$18,905.00
Aug 22First Harrison, Deposit cleared$12,400.00
Aug 25Ohio Valley Print, Bill received$640.00
Aug 27Silver Hills Cafe, Payment applied$1,240.00
Aug 29New Albany Utilities, Autopay$412.55
Aug 31Depreciation, Monthly entry$2,050.00
<div style="display:flex;flex-direction:column;gap:10px;max-width:420px">
<div style="display:flex;flex-wrap:wrap;gap:8px">
<sui-button id="scp-add" variant="outline" size="sm" label="Post an entry"></sui-button>
<sui-button id="scp-find" variant="ghost" size="sm" label="Show the payroll run"></sui-button>
</div>
<sui-scroll-panel id="scp-feed" height="140" aria-label="Journal feed">
<div id="scp-rows">
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 18</span><span style="flex:1">Silver Hills Cafe, INV-1039 posted</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 19</span><span style="flex:1">Falls City Supply, INV-1040 posted</span><span style="font-feature-settings:'tnum'">$3,180.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 20</span><span style="flex:1">Payroll 4410, Semimonthly run</span><span style="font-feature-settings:'tnum'">$18,905.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 22</span><span style="flex:1">First Harrison, Deposit cleared</span><span style="font-feature-settings:'tnum'">$12,400.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 25</span><span style="flex:1">Ohio Valley Print, Bill received</span><span style="font-feature-settings:'tnum'">$640.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 27</span><span style="flex:1">Silver Hills Cafe, Payment applied</span><span style="font-feature-settings:'tnum'">$1,240.00</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 29</span><span style="flex:1">New Albany Utilities, Autopay</span><span style="font-feature-settings:'tnum'">$412.55</span></div>
<div class="jrow" style="display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted);width:52px">Aug 31</span><span style="flex:1">Depreciation, Monthly entry</span><span style="font-feature-settings:'tnum'">$2,050.00</span></div>
</div>
</sui-scroll-panel>
<span id="scp-log" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">8 entries.</span>
</div>
// setup(root): properties and events
setup(root) {
const panel = root.querySelector('#scp-feed');
const rows = root.querySelector('#scp-rows');
const log = root.querySelector('#scp-log');
let n = JOURNAL.length;
root.querySelector('#scp-add').addEventListener('click', () => {
n += 1;
const row = document.createElement('div');
row.className = 'jrow';
row.setAttribute('style', 'display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:13px');
row.textContent = `Sep 1, journal entry ${n}, posted just now`;
rows.appendChild(row);
panel.scrollToBottom();
log.textContent = `${n} entries. Scrolled to the end.`;
});
root.querySelector('#scp-find').addEventListener('click', () => {
rows.querySelectorAll('.jrow')[2].scrollIntoView({ block: 'nearest' });
log.textContent = 'Scrolled the payroll row into view.';
});
}
Keyboard reach
While the content overflows, the viewport is a tab stop with a visible ring, so a wall of plain text scrolls by keyboard. Controls inside stay reachable as before; the fades are decorative and aria-hidden.
We prepare the monthly close from the records you provide by the fifth business day. Entries posted after that date roll into the next period unless you ask us to reopen the month.
Bank and card feeds are reconciled to the statement balance. Unmatched items older than sixty days are listed in the close report for your decision.
Fixed assets are capitalised above the threshold in your policy and depreciated monthly on the straight-line basis unless the asset register says otherwise.
Sales tax returns are prepared from posted invoices. Corrections after filing are amended in the following return.
<div style="display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap">
<sui-scroll-panel height="150" aria-label="Terms of engagement" style="flex:1;min-width:240px">
<p style="font-size:13px;color:var(--ink-muted);line-height:1.7;margin:0 0 10px">We prepare the monthly close from the records you provide by the fifth business day. Entries posted after that date roll into the next period unless you ask us to reopen the month.</p>
<p style="font-size:13px;color:var(--ink-muted);line-height:1.7;margin:0 0 10px">Bank and card feeds are reconciled to the statement balance. Unmatched items older than sixty days are listed in the close report for your decision.</p>
<p style="font-size:13px;color:var(--ink-muted);line-height:1.7;margin:0 0 10px">Fixed assets are capitalised above the threshold in your policy and depreciated monthly on the straight-line basis unless the asset register says otherwise.</p>
<p style="font-size:13px;color:var(--ink-muted);line-height:1.7;margin:0 0 10px">Sales tax returns are prepared from posted invoices. Corrections after filing are amended in the following return.</p>
</sui-scroll-panel>
<sui-scroll-panel height="150" aria-label="Accounts to include" style="flex:1;min-width:240px">
<sui-checkbox name="acct" value="1000" label="1000 Operating Checking" checked></sui-checkbox>
<sui-checkbox name="acct" value="1200" label="1200 Accounts Receivable"></sui-checkbox>
<sui-checkbox name="acct" value="1500" label="1500 Prepaid Expenses"></sui-checkbox>
<sui-checkbox name="acct" value="2000" label="2000 Accounts Payable"></sui-checkbox>
<sui-checkbox name="acct" value="2200" label="2200 Sales Tax Payable"></sui-checkbox>
<sui-checkbox name="acct" value="4000" label="4000 Service Revenue"></sui-checkbox>
<sui-checkbox name="acct" value="5000" label="5000 Cost of Services"></sui-checkbox>
</sui-scroll-panel>
</div>
Keyboard
| Key | Action |
|---|---|
| Tab | Lands on the viewport, a tab stop only while the content overflows. A panel that fits its content is skipped. |
| ArrowUp ArrowDown PageUp PageDown Home End | Scroll the focused viewport. The browser handles these; the element adds nothing to them. |
API
<sui-scroll-panel>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
height | height | number | 200 | Height of the scroll viewport in px. The fades stay hidden while the content fits, and each turns off within 4px of its end. |
Methods
| Method | Signature | Description |
|---|---|---|
scrollToBottom() | scrollToBottom() => Promise<void> | Scrolls to the end of the content. A feed that grows, such as a log or a message list, has no element to scroll to, so this is the one scroll outcome no prop can express. To reveal a row that does exist, call scrollIntoView() on it (these are light-DOM children). |
setFocus() | setFocus() => Promise<void> | Moves keyboard focus to the viewport while the content overflows, when the viewport is a tab stop that the arrow and page keys scroll. Does nothing while the content fits. |
Slots
| Slot | Description |
|---|---|
(default) | Scrolling content (14/16px padding). |
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.
Color4
Typography1
Radius1
Elevation1
Motion2
Every name above is listed with its value and its role in Foundations.