TailNG - Signal first Angular UI components

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 and data-state.
[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-content"] for the projected body wrapper and scroll rhythm.
[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%);
  --tng-dialog-width: 64rem;
  --tng-dialog-height: 28rem;
}

[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;
  height: var(--tng-dialog-height, auto);
  max-width: var(--tng-dialog-width, 34rem);
  padding: 1rem;
}

[data-slot="dialog-content"] {
  display: grid;
  gap: 0.75rem;
  max-block-size: min(52vh, 24rem);
  overflow: auto;
  padding-inline: 1rem;
}

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