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

Wrapper popover ships minimum theme styles, and the underlying primitive surface still exposes stable slot and state attributes for teams that need deeper shell customization.

Core data attributes

  • [data-slot="popover"] root with data-open, data-state, data-side, data-align, and data-disabled.
  • [data-slot="popover-trigger"] exposes aria-expanded, aria-controls, and matching data-state.
  • [data-slot="popover-panel"] carries data-side, data-align, data-state, and [hidden] while closed.
  • [data-slot="popover-close"] for explicit in-panel dismissal actions.

Reference CSS

popover-styling.css

css
[data-slot="popover"] {
  position: relative;
}

[data-slot="popover-trigger"] {
  border-radius: 0.65rem;
  min-height: 2.25rem;
  padding-inline: 0.85rem;
}

[data-slot="popover-panel"] {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  background: var(--tng-semantic-background-surface);
  border: 1px solid var(--tng-semantic-border-strong);
  border-radius: 0.9rem;
  display: grid;
  gap: 0.75rem;
  min-width: 16rem;
  max-width: min(24rem, 90vw);
  padding: 1rem;
  box-shadow: 0 22px 42px color-mix(in srgb, var(--tng-semantic-foreground-primary) 22%, transparent);
  z-index: 50;
}

[data-slot="popover-panel"][data-side="top"] {
  bottom: calc(100% + 0.45rem);
  top: auto;
}

[data-slot="popover-close"] {
  border-radius: 0.6rem;
  min-height: 2rem;
}

[data-slot="popover-panel"][hidden] {
  display: none !important;
}