UNPKG

dap-design-system

Version:

Official design system for the DÁP (dap.gov.hu)

ghes.idomsoft.hu/idom-green/dap-design-system

43 lines (42 loc) • 3.3 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { default as Component } from '../../components/progress/progress.js'; /** * `dap-ds-progress` * @summary Progress indicator component with linear and circular variants. * @element dap-ds-progress * @title - Progress * * @csspart base - The main progress container. * @csspart track - The progress track (background). * @csspart fill - The progress fill (bar for linear, circle for circular). * @csspart label - The progress label text. * @csspart percentage - The percentage text (circular variant only). * @csspart background - The background circle (circular variant only). * * @slot label - Custom label content for the progress indicator. * * @cssprop --dds-progress-track-color - Background color of the progress track (default: var(--dds-neutral-200)) * @cssprop --dds-progress-fill-color-neutral - Fill color for neutral variant (default: var(--dds-icon-neutral-base)) * @cssprop --dds-progress-fill-color-brand - Fill color for brand variant (default: var(--dds-icon-brand-subtle)) * @cssprop --dds-progress-fill-color-negative - Fill color for negative variant (default: var(--dds-icon-negative-subtle)) * @cssprop --dds-progress-fill-color-positive - Fill color for positive variant (default: var(--dds-icon-positive-subtle)) * @cssprop --dds-progress-fill-color-inverted - Fill color for inverted variant (default: var(--dds-icon-neutral-inverted)) * @cssprop --dds-progress-height-xs - Height for extra small linear progress (default: var(--dds-spacing-50)) * @cssprop --dds-progress-height-sm - Height for small linear progress (default: var(--dds-spacing-100)) * @cssprop --dds-progress-height-md - Height for medium linear progress (default: var(--dds-spacing-150)) * @cssprop --dds-progress-height-lg - Height for large linear progress (default: var(--dds-spacing-200)) * @cssprop --dds-progress-height-xl - Height for extra large linear progress (default: var(--dds-spacing-300)) * @cssprop --dds-progress-height-xxl - Height for extra extra large linear progress (default: var(--dds-spacing-400)) * @cssprop --dds-progress-diameter-xs - Diameter for extra small circular progress (default: var(--dds-spacing-600)) * @cssprop --dds-progress-diameter-sm - Diameter for small circular progress (default: var(--dds-spacing-800)) * @cssprop --dds-progress-diameter-md - Diameter for medium circular progress (default: var(--dds-spacing-1200)) * @cssprop --dds-progress-diameter-lg - Diameter for large circular progress (default: var(--dds-spacing-1600)) * @cssprop --dds-progress-diameter-xl - Diameter for extra large circular progress (default: var(--dds-spacing-2000)) * @cssprop --dds-progress-diameter-xxl - Diameter for extra extra large circular progress (default: var(--dds-spacing-2400)) * @cssprop --dds-progress-stroke-width - Stroke width for circular progress (default: var(--dds-spacing-200)) * @cssprop --dds-progress-animation-duration - Duration of indeterminate animation (default: 1.5s) * * @property { 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' } size - The size of the progress indicator. Default is `sm`. See SizedMixin. * @property {string} sizeMap - Responsive size map (e.g. "md:lg"); see SizedMixin. */ declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>; export default reactWrapper;