docs

Styling contract

Wrapper dialog ships minimum theme styles, and the underlying primitive surface still exposes stable slot and state attributes for deeper shell customization.

Core data attributes

[data-slot="dialog"] with data-open, data-state, and data-size.
[data-slot="dialog-backdrop"] for fixed overlay surface and click-dismiss target.
[data-slot="dialog-panel"] for modal panel dimensions, layout, and elevation.
[data-slot="dialog-close"] and [data-slot="dialog-actions"] for action wiring.

Reference CSS

[tngDialog][data-open="true"] {
  --dialog-backdrop: rgb(2 6 23 / 56%);
}

[data-slot="dialog-backdrop"] {
  align-items: center;
  background: var(--dialog-backdrop);
  display: grid;
  inset: 0;
  position: fixed;
}

[data-slot="dialog-panel"] {
  background: var(--tng-semantic-background-surface);
  border: 1px solid var(--tng-semantic-border-subtle);
  border-radius: 0.9rem;
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
  padding: 1rem;
}

[data-slot="dialog-panel"][data-size="lg"] {
  max-width: 42rem;
}

[data-slot="dialog-close"] {
  border-radius: 0.6rem;
  min-height: 2rem;
}