Badge changelog

2026-10-05: Changed the former default Indigo palette to Brand (--brand), retaining opacity, states, and override behavior.

2026-09-21: Unified the usage guide, source property table, and Site / AI reading entry points. Documentation only; component behavior is unchanged.

Expanded the per-property descriptions, default fallbacks, and usage boundaries to match the existing source. Runtime behavior is unchanged.

Grid now centers the content layer at its natural width and allows symmetric overflow around the geometric center of fixed 16px / 12px Badges, correcting the optical offset of text labels and rightward offset of small numbers.

The text layer inside the Border variant now inherits a 16px line height, preventing the shared morph-item style from compressing its actual height to 12px. The New label now matches Kbd’s default border height.

Added variant="border", reusing the Tokens, padding, corner radius, font size, and line height of Kbd’s default outlined appearance for status and category labels such as New and updated. Default filled behavior is unchanged.

Badge-Motion.2026-06-18 Recreated the default motion with the two-layer structure of the transitions.dev Notification badge: the Frame root enters from the lower left while the full visual surface scales, fades, and blurs from its center. On exit the whole surface shrinks, rather than only the numeric content.
Badge-Motion.2026-06-30 Unified the semantics of the full visual channel for while*: an explicit object no longer shallow-merges Badge’s default x / y / scale / opacity; it inherits only default timing and dynamics.

Badge-Docs.2026-05-25 Archived the historical changelog at the top of the source file. Subsequent changes go in this document’s changelog; the source header retains only responsibilities, current key architecture, and the documentation path.

BD-Motion.1 Adopted a positioned root and visual surface as two layers, matching the parallel slide / pop motion of the Notification badge.
BD-Motion.2 Entrance uses 260ms movement, 500ms scale/blur, and 400ms opacity; exit uses 180ms scale/opacity/blur and shrinks the entire Badge toward its center.
BD-Color.1 Added the color Prop, using the shared SnowUI PascalCase semantic-color resolver for numbers, text, and Dot-mode fill.

BD-Layout.1 Removed the component’s internal margin chain under the inline shell layout protocol. Parent layout now manages outside spacing for Dot mode.

Freed the whileLoad keyword: Badge now uses loading for local loading state and passes whileLoad back to Frame as loading-state motion configuration.

BD-Typography.1 Standardized internal line height as line-height: 1 for base styles and morph items.

BD-Style.2 Fixed numeric content color to white (--static-white-100).
BD-Doc.1 Moved every in-component style definition to the document’s UserDefined section.

BD-Fix.2 Fixed numbers not being centered at large sizes by removing a forced line-height.

Size Context: Added support for reading size from Frame context. Role-aware inheritance keeps the Badge at the right visual proportion in different use cases.