Layout tokens

State hooks

• .tng-command-palette-option[data-active] styles the keyboard-active row.
• .tng-command-palette-option[data-selected] styles the selected row.
• .tng-command-palette-option[data-disabled] styles rows blocked by isOptionDisabled.
• .tng-command-palette-state[data-state="loading"] and [data-state="empty"] distinguish default state blocks.

Inner component styles

Add a class on <tng-command-palette> and target the stable inner classes to customize backdrop, panel shell, search row, options, and footer without changing component behavior.

• .tng-command-palette-backdrop controls the screen overlay.
• .tng-command-palette-panel controls the dialog container.
• .tng-command-palette-search controls the input region spacing and border.
• .tng-command-palette-option controls each result row.
• .tng-command-palette-footer controls helper and shortcut text.

Template guidance

Combine host tokens for layout/stacking with scoped inner-class selectors for shell details. Prefer templates for app-specific row content and metadata layout.

.docs-command-palette {
  --tng-command-palette-width: min(44rem, calc(100vw - 2rem));
  --tng-command-palette-max-height: min(38rem, calc(100vh - 4rem));
  --tng-command-palette-list-max-height: 24rem;
  --tng-z-overlay: 1200;
}

.docs-command-palette .tng-command-palette-backdrop {
  background: color-mix(in srgb, #020617 55%, transparent);
}

.docs-command-palette .tng-command-palette-panel {
  border-radius: 1rem;
  box-shadow: 0 2rem 4rem color-mix(in srgb, #000 35%, transparent);
}

.docs-command-palette .tng-command-palette-search {
  padding: 1rem;
}

.docs-command-palette .tng-command-palette-option[data-active] {
  background: color-mix(in srgb, var(--tng-semantic-accent-brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--tng-semantic-accent-brand) 40%, transparent);
}

.docs-command-palette .tng-command-palette-footer {
  font-size: 0.8rem;
}