docs

Styling contract

tngPress does not add classes or internal markup. Styling happens entirely through your own host classes plus the reflected ARIA and disabled attributes.

Host state hooks

Hook	When it appears	Use it for
`data-disabled`	Whenever the directive is disabled.	Unified disabled visuals across anchors and native buttons.
`aria-disabled="true"`	Only on anchor hosts.	Disabled anchor styling and semantics.
`role="button"`	On anchors without `href`.	Target link-like button shells without relying on fragile selectors.
`aria-pressed`, `aria-expanded`, `aria-haspopup`	When you bind those states yourself.	Pressed or disclosure-specific visual states.

[data-disabled]
[aria-disabled="true"]
[aria-pressed="true"]
[aria-expanded="true"]
[aria-haspopup="menu"]
[role="button"]

CSS starter

Build your own shell on the host element. The primitive only guarantees behavior and attrs.

.docs-press-host {
  align-items: center;
  appearance: none;
  border: 1px solid var(--tng-semantic-border-strong);
  border-radius: 0.6rem;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  text-decoration: none;
}

.docs-press-host:focus-visible {
  box-shadow: 0 0 0 3px var(--tng-semantic-focus-ring);
  outline: none;
}

.docs-press-host[data-disabled],
.docs-press-host[aria-disabled="true"],
.docs-press-host:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

Anchor guidance

If you style anchor hosts as buttons, keep the text-decoration reset on your own class and respect aria-disabled when you choose to suppress pointer interaction.

a.docs-press-host[role="button"] {
  cursor: pointer;
}

a.docs-press-host[aria-disabled="true"] {
  pointer-events: none;
}

Styling contract

Host state hooks

Useful selectors

CSS starter

press-host.css

Anchor guidance

anchor-button.css