Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Styling contract

Style the component layer by overriding semantic tokens on the toggle, the group, or an ancestor shell. Avoid depending on internal wrapper DOM beyond the documented state hooks.

SurfaceRecommended contractWhy it is safe
tng-toggleSet semantic tokens such as --tng-semantic-accent-brand and --tng-semantic-background-surface.The rendered internal button inherits those values without exposing private DOM in your app styles.
tng-toggle-groupAdjust layout, spacing, and supporting shell styles on the host element.The group host is public, and selection logic stays inside the wrapper.
Ancestor shellDefine a token set on a surrounding card to theme several toggles together.CSS custom properties inherit cleanly into every nested toggle.
TokenTypical use
--tng-semantic-accent-brandSelected toggle background and border.
--tng-semantic-background-surfaceIdle toggle surface.
--tng-semantic-border-strongIdle toggle border.
--tng-semantic-foreground-primaryIcon or glyph color inside the toggle.
--tng-semantic-focus-ringFocus-visible ring color.

Host-level token overrides

css
.release-toggle-shell {
  border: 1px solid var(--tng-semantic-border-subtle);
  background: var(--tng-semantic-background-surface);
}

User scenario style examples

Use the same component contract inside a plain CSS shell or a Tailwind shell by overriding host-level semantic tokens.

Release checklist (Plain-CSS)

Release checklist

Use token overrides on the wrapper shell so the component keeps its internal DOM private.

ReviewHuman approval before publish.
QARegression sign-off from the test pass.
DocsRelease notes and migration guidance.