docs

Supported contract

Theme the wrapper from its host. Override semantic and select tokens on <tng-select>; drop to headless when you need full trigger or overlay DOM ownership.

Selector or token	Applied on	Purpose
`<tng-select> + --tng-select-*`	Wrapper host	Stable surface for trigger, option, and overlay theming through copied host tokens.
`--tng-semantic-*`	Wrapper host	Feeds the shared light and dark semantic palette used by the select contract.
`#tngSelectValueTpl`	Projected template	Customizes the selected-value markup while preserving trigger semantics.
`#tngSelectOptionTpl`	Projected template	Customizes option rows while preserving listbox behavior and selection state.

Host tokens

These host-level variables are the stable styling surface for the wrapper. The same token set feeds the trigger, option rows, and the portaled overlay.

tng-select.docs-component-select-styling-release-owner-shell {
  --tng-semantic-background-canvas: #ffffff;
  --tng-semantic-background-surface: #f8fafc;
  --tng-semantic-border-subtle: #d8e2ef;
  --tng-semantic-border-strong: #94a3b8;
  --tng-semantic-foreground-primary: #0f172a;
  --tng-semantic-foreground-secondary: #475569;
  --tng-semantic-foreground-muted: #64748b;
  --tng-semantic-accent-brand: #0f766e;
  --tng-semantic-focus-ring: #0f766e;

  --tng-select-radius: 1rem;
  --tng-select-trigger-py: 0.625rem;
  --tng-select-trigger-px: 0.875rem;
  --tng-select-option-py: 0.625rem;
  --tng-select-option-px: 0.875rem;
  --tng-select-bg: #ffffff;
  --tng-select-surface: #f8fafc;
  --tng-select-border: #d8e2ef;
  --tng-select-border-strong: #94a3b8;
  --tng-select-fg: #0f172a;
  --tng-select-muted: #64748b;
  --tng-select-brand: #0f766e;
  --tng-select-focus-ring: #0f766e;
}

/* Palette tokens stay on the host. */
/* Add slot-level spacing only when you need a more opinionated presentation shell. */

Release owner shell

The wrapper keeps the same API while host-level tokens define the palette and lightweight slot spacing keeps the trigger polished.

Release owner shell (Plain-CSS)

Release owners

Host-level tokens define the palette while a small amount of slot spacing keeps the wrapper presentation tidy.

Selected: Mina Lee

Supported contract

Host tokens

select.tokens.css

Release owner shell

Release owner shell (Plain-CSS)

Release owner shell (Tailwind CSS)