docs

Supported contract

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

Selector or token	Applied on	Purpose
`.docs-component-multiselect-styling-shell + --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.
`#tngMultiSelectValueTpl`	Projected template	Customizes the selected-value markup while preserving trigger semantics.
`#tngMultiSelectOptionTpl`	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.

.docs-component-multiselect-styling-shell {
  --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-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. */

Category picker shell

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

Supported contract

Host tokens

multiselect.tokens.css

Category picker shell

Category picker (Plain-CSS)

Category picker (Tailwind CSS)