docs

Supported contract

The styled wrapper is designed to be themed from its host. Override semantic tokens on <tng-multi-autocomplete>; drop to headless when you need direct control of chips, option rows, or overlay markup.

Selector or token	Applied on	Purpose
`tng-multi-autocomplete`	Wrapper host	Width, margins, host-level semantic tokens, and surrounding shell ownership.
`--tng-semantic-background-canvas`	Wrapper host	Base trigger background for the owned input shell.
`--tng-semantic-background-surface`	Wrapper host	Chip fill and overlay surface background.
`--tng-semantic-border-subtle`	Wrapper host	Overlay border and softer internal boundaries.
`--tng-semantic-border-strong`	Wrapper host	Resting shell border and stronger chip outlines.
`--tng-semantic-foreground-primary`	Wrapper host	Trigger text, chip text, and default option label color.
`--tng-semantic-foreground-secondary`	Wrapper host	Supporting copy around the control and any custom template metadata.
`--tng-semantic-foreground-muted`	Wrapper host	Placeholder text and empty-state copy.
`--tng-semantic-accent-brand`	Wrapper host	Selected option accent and brand-colored interaction states.
`--tng-semantic-focus-ring`	Wrapper host	Focus ring around the wrapper-owned trigger shell.

Host tokens

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

tng-multi-autocomplete.docs-component-multi-autocomplete-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: #2563eb;
  --tng-semantic-focus-ring: #2563eb;

  --tng-multi-autocomplete-radius: 1rem;
  --tng-multi-autocomplete-padding: 0.5rem;
  --tng-multi-autocomplete-trigger-py: 0.45rem;
  --tng-multi-autocomplete-trigger-px: 0.5rem;
  --tng-multi-autocomplete-chip-py: 0.375rem;
  --tng-multi-autocomplete-chip-px: 0.75rem;
  --tng-multi-autocomplete-option-py: 0.625rem;
  --tng-multi-autocomplete-option-px: 0.875rem;
  --tng-multi-autocomplete-bg: #ffffff;
  --tng-multi-autocomplete-surface: #f8fafc;
  --tng-multi-autocomplete-border: #d8e2ef;
  --tng-multi-autocomplete-border-strong: #94a3b8;
  --tng-multi-autocomplete-fg: #0f172a;
  --tng-multi-autocomplete-muted: #64748b;
  --tng-multi-autocomplete-brand: #2563eb;
  --tng-multi-autocomplete-focus-ring: #2563eb;
}

/* Structural slot selectors remain private to the wrapper. */
/* Move to headless or ownable when you need direct chip / option DOM ownership. */

Release owner shell

The wrapper keeps the same API while plain CSS and Tailwind shells override host-level tokens.

Release owner shell (Plain-CSS)

Release owners

Host-level semantic tokens restyle the wrapper without reaching into private child selectors.

Mina LeeSanjay Patel

Selected: Mina Lee, Sanjay Patel

Supported contract

Host tokens

multi-autocomplete.tokens.css

Release owner shell

Release owner shell (Plain-CSS)

Release owner shell (Tailwind CSS)