Wrapper slot hooks

The wrapper forwards the primitive slot contract and adds documented owner-facing parts such as line numbers, rendered lines, captions, and the copy button.

[data-slot="code-block"] {
  --tng-code-block-radius: 0.9rem;
  --tng-code-block-border: color-mix(in srgb, var(--tng-semantic-border-subtle) 75%, #fff);
}

[data-slot="line-numbers"] {
  min-width: 3.25rem;
}

[data-slot="copy-button"] {
  border-radius: 999px;
}

Wrapper state attributes

• data-state="idle|highlighting|highlighted|error" on the root wrapper.
• data-highlighted, data-wrap, and data-variant on the root wrapper.
• data-has-copy and data-has-title for conditional header layout.
• data-copy-state on the copy button for copied and error feedback styling.

Owner guidance

Set your design tokens on the wrapper slots first, then layer any token-color or line-focus treatment in owner CSS.

.docs-codeblock [data-slot="line"].tng-code-block__line--highlight {
  background: color-mix(in srgb, var(--tng-semantic-accent-brand) 16%, transparent);
}

.docs-codeblock [data-slot="code"] {
  font-family: 'IBM Plex Mono', 'Fira Code', monospace;
}