docs

CSS token contracts

Style <tng-autocomplete> through host-level semantic tokens. The wrapper owns the trigger markup, so the supported surface is the wrapper host plus its CSS custom properties rather than private descendant selectors.

Selector / token	Applied on	Purpose
`tng-autocomplete`	Wrapper host	Width, margins, host-level semantic tokens, and disabled state affordance.
`tng-autocomplete[data-disabled]`	Wrapper host	Optional wrapper-level disabled presentation for surrounding shells.
`--tng-semantic-background-canvas`	Wrapper host	Trigger input surface background.
`--tng-semantic-background-surface`	Wrapper host	Trigger shell fill and default neutral state.
`--tng-semantic-border-subtle`	Wrapper host	Outer border color for the owned trigger shell.
`--tng-semantic-border-strong`	Wrapper host	Hover and resting border emphasis for the trigger shell.
`--tng-semantic-foreground-primary`	Wrapper host	Input text and selected option text color.
`--tng-semantic-foreground-secondary`	Wrapper host	Supporting copy and option helper color inside the owned theme.
`--tng-semantic-accent-brand`	Wrapper host	Selected row, active row, and icon accent color.
`--tng-semantic-focus-ring`	Wrapper host	Focus ring color around the owned trigger shell.

Portal overlay guidance

The wrapper trigger lives in your component tree, but the autocomplete panel is portaled. Use wrapper host tokens for the trigger shell, and move overlay-specific selectors into a global stylesheet when you need to restyle the panel itself.

/* Component-scoped CSS reaches the wrapper host and trigger shell. */
tng-autocomplete.release-owner-shell {
  --tng-semantic-background-canvas: #ffffff;
  --tng-semantic-background-surface: #f8fafc;
  --tng-semantic-border-subtle: #cbd5e1;
  --tng-semantic-border-strong: #cbd5e1;
  --tng-semantic-foreground-primary: #0f172a;
  --tng-semantic-foreground-secondary: #475569;
  --tng-semantic-accent-brand: #2563eb;
  --tng-semantic-focus-ring: #2563eb;
}

/* Overlay rows are portaled. Put overlay-specific selectors in a global stylesheet. */
[data-slot='autocomplete-overlay'] {
  border-radius: 1rem;
}

[data-slot='autocomplete-option'][data-selected] {
  background: color-mix(in srgb, var(--tng-semantic-accent-brand, #2563eb) 18%, transparent);
}

User scenario style examples

The same wrapper contract can sit inside a plain CSS shell or a Tailwind shell by overriding host-level semantic tokens.

Release owner shell (Plain-CSS)

Selected: Mina Lee

CSS token contracts

Portal overlay guidance

autocomplete.portal-guidance.css

User scenario style examples

Release owner shell (Plain-CSS)

Release owner shell (Tailwind CSS)