Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Styling contract

<tng-textarea> is token-first. It renders its own internal textarea shell, so the main public styling contract is the semantic token set it consumes plus the host width you apply from your layout.

Theme tokens

  • --tng-semantic-background-surface controls the textarea fill.
  • --tng-semantic-border-strong controls the default border.
  • --tng-semantic-foreground-primary colors the textarea value.
  • --tng-semantic-foreground-muted colors the placeholder text.
  • --tng-semantic-focus-ring powers the component focus ring.
  • --tng-semantic-accent-danger colors the invalid border state.

textarea.tokens.css

css
.release-notes-surface {
  --tng-semantic-background-surface: #ffffff;
  --tng-semantic-border-strong: #94a3b8;
  --tng-semantic-foreground-primary: #0f172a;
  --tng-semantic-foreground-muted: #94a3b8;
  --tng-semantic-focus-ring: color-mix(in srgb, #2563eb 18%, transparent);
  --tng-semantic-accent-danger: #dc2626;
}

Host sizing

The component host defaults to width: min(28rem, 100%). When you need the textarea to fill a wider card or form column, size the host from your own wrapper.

textarea.layout.css

css
.release-notes-surface {
  display: grid;
  gap: 0.65rem;
  inline-size: min(100%, 42rem);
  margin-inline: auto;
}

.release-notes-surface tng-textarea {
  inline-size: 100%;
}

State-driven theming

The component already handles focus, invalid, and disabled visuals internally. The most stable way to change those states is by adjusting the semantic tokens on the wrapper that contains the component.

textarea.states.css

css
.release-notes-surface {
  --tng-semantic-background-surface: #ffffff;
  --tng-semantic-border-strong: #94a3b8;
  --tng-semantic-foreground-primary: #0f172a;
  --tng-semantic-foreground-muted: #94a3b8;
  --tng-semantic-focus-ring: color-mix(in srgb, #2563eb 18%, transparent);
  --tng-semantic-accent-danger: #dc2626;
}

.release-notes-surface--invalid {
  --tng-semantic-border-strong: #dc2626;
  --tng-semantic-focus-ring: color-mix(in srgb, #dc2626 16%, transparent);
}

.release-notes-surface--quiet {
  --tng-semantic-background-surface: #f8fafc;
  --tng-semantic-border-strong: #cbd5e1;
}