Styling contract
The wrapper contributes a default .tng-tabs shell, but the stable styling hooks still come from the primitive parts you place inside it.
Stable hooks
| Hook | Values | Where |
|---|---|---|
data-slot | tabs, tab-list, tab, tab-panel | Root wrapper and primitive parts. |
data-selected | true | false | Tab triggers. |
data-focused | true | false | Tab triggers. |
data-disabled | true | false | Root and tab triggers. |
data-active | true | false | Tab panels. |
data-orientation, data-activation | orientation / activation mode | Root wrapper. |
Default shell
The wrapper root already renders a bordered, padded .tng-tabs shell. You can keep it, extend it, or replace it with your own utility classes around the tab parts.
Owner guidance
Keep trigger, list, and panel styles on the primitive hooks rather than assuming more wrapper DOM than .tng-tabs.
tabs.contract.css
css
.tng-tabs {
display: grid;
gap: 0.75rem;
}
[data-slot="tab-list"] {
display: flex;
gap: 0.5rem;
}
[data-slot="tab"][data-selected="true"] {
background: var(--tng-semantic-background-surface);
border-color: var(--tng-semantic-border-subtle);
}
[data-slot="tab-panel"][hidden] {
display: none !important;
}