dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
62 lines (61 loc) • 2.92 kB
TypeScript
import { DdsElement } from '../../internal/dds-hu-element';
declare const ScrollProgressBaseWithSized: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
export type ScrollProgressVariant = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
/**
* `dap-ds-scroll-progress`
* @summary A progress bar that displays scroll position, supporting both page-level and container-level scroll tracking.
* @element dap-ds-scroll-progress
* @title - Scroll Progress
*
* @csspart base - The main scroll progress container.
* @csspart track - The progress track (background).
* @csspart fill - The progress fill bar.
*
* @cssprop --dds-scroll-progress-z-index - Z-index for fixed positioning (default: 1000)
* @cssprop --dds-scroll-progress-transition - Transition for progress updates (default: width 0.1s ease-out)
* @cssprop --dds-scroll-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200))
* @cssprop --dds-scroll-progress-fill-color-neutral - Fill color for neutral variant
* @cssprop --dds-scroll-progress-fill-color-brand - Fill color for brand variant
* @cssprop --dds-scroll-progress-fill-color-negative - Fill color for negative variant
* @cssprop --dds-scroll-progress-fill-color-positive - Fill color for positive variant
* @cssprop --dds-scroll-progress-fill-color-inverted - Fill color for inverted variant
*
* @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the scroll progress bar. Default is `sm`. See SizedMixin.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin.
*/
export default class DapDSScrollProgress extends ScrollProgressBaseWithSized {
static tagName: string;
/**
* CSS selector for scroll container. If not set, tracks global page scroll.
* When set, the component uses sticky positioning within the container.
*/
target?: string;
/**
* The color variant of the progress indicator.
* @type {"neutral" | "brand" | "negative" | "positive" | "inverted"}
*/
variant: ScrollProgressVariant;
/**
* Current progress value (0-100).
*/
private progress;
private targetElement;
private rafId;
private boundHandleScroll;
static readonly styles: import('lit').CSSResult;
/** Maps effectiveSize from SizedMixin to scroll-progress visual size (xs, sm, md; xxs→xs, lg→md). */
private get scrollProgressSize();
constructor();
connectedCallback(): void;
disconnectedCallback(): void;
protected updated(changedProperties: Map<PropertyKey, unknown>): void;
private setupScrollListener;
private cleanupScrollListener;
private handleScroll;
private calculateProgress;
render(): import('lit-html').TemplateResult<1>;
}
export {};