dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
44 lines (43 loc) • 2.32 kB
TypeScript
import { DdsElement } from '../../internal/dds-hu-element';
/**
* `dap-ds-scroll-area`
* @summary A component that provides a customizable scrollable area with a custom scrollbar.
* @element dap-ds-scroll-area
* @title - Scroll area
*
* @slot - The content to be scrolled
*
* @csspart viewport - The viewport element that contains the scrollable content
* @csspart scrollbar - The scrollbar container
* @csspart corner - The corner between vertical and horizontal scrollbars
*
* @cssprop --dds-scroll-area-radius - The border radius of the scroll area and its elements (default: var(--dds-radius-base))
* @cssprop --dds-scroll-area-background - The background color of the scroll area (default: var(--dds-background-neutral-base))
* @cssprop --dds-scroll-area-scrollbar-background - The background color of the scrollbar (default: var(--dds-background-neutral-subtle))
* @cssprop --dds-scroll-area-thumb-background - The background color of the scrollbar thumb (default: var(--dds-background-neutral-interactive))
* @cssprop --dds-scroll-area-thumb-hover-background - The background color of the scrollbar thumb on hover (default: var(--dds-background-neutral-interactive-hover))
* @cssprop --dds-scroll-area-thumb-active-background - The background color of the scrollbar thumb when active (default: var(--dds-background-neutral-interactive-active))
* @cssprop --dds-scroll-area-transition - The transition timing for scrollbar interactions (default: var(--dds-transition-fast) var(--dds-easing-ease-out))
* @cssprop --dds-scroll-area-scrollbar-size - The width/height of the scrollbar (default: 10px)
*/
export default class DapDSScrollArea extends DdsElement {
static tagName: string;
/**
* The orientation of the scrollbar.
* @type {'vertical' | 'horizontal' | 'both'}
* @default 'vertical'
*/
orientation: 'vertical' | 'horizontal' | 'both';
static readonly styles: import('lit').CSSResult;
private viewport;
private scrollbar;
private thumbHorizontal;
private thumbVertical;
private isDragging;
private startY;
private startScrollTop;
firstUpdated(): void;
private setupScrollbar;
getScrollbar(orientation: 'horizontal' | 'vertical'): import('lit-html').TemplateResult;
render(): import('lit-html').TemplateResult;
}