Skip to content

Statistic

Displays statistical values with Intl.NumberFormat thousands separators and precision (locale-aware), supporting prefix/suffix and a skeleton loading placeholder.

Basic Usage

Basic value

Thousands Separator and Precision

Thousands separator + precision

Prefix / Suffix

prefix / suffix

Disabling Thousands Separator

group-separator=false

Loading State

loading (reuses skeleton)

Font Size

Font size is fixed at --oas-font-size-lg (16px) by default and does not follow the outer context; override with the CSS variable --oas-statistic-font (e.g. 32px).

Complex Prefix / Suffix (slot distribution)

slot=prefix / slot=suffix

Total incomecompletion

Use the prefix / suffix attributes for simple text; for complex content (icons/tags/badges etc.) distribute via the same-named slot="prefix" / slot="suffix" slots — distributed content natively replaces the attribute text.

API

Attributes

AttributeDescriptionTypeDefault
group-separatorThousands grouping ("false" disables)stringtrue
loadingLoading state (skeleton placeholder)boolean
precisionDecimal places (rounded)string0
prefixPrefix / suffix textstring
suffixPrefix / suffix textstring
valueNumeric value (number string)string0

Slots

NameDescription
prefixLeading content (icons/tags etc.; distributed content takes precedence over the prefix attribute text). For simple text use the prefix attribute
suffixTrailing content (icons/tags etc.; distributed content takes precedence over the suffix attribute text). For simple text use the suffix attribute

No events (purely presentational).

Released under the MIT OR Apache-2.0 License.