ki-tab-panel

One content view paired with a ki-tab inside ki-tabs, sharing its value — never standalone.

Plans Invoices Plan management Invoice history

<ki-tabs label="Billing" value="plans">
<ki-tab value="plans">Plans</ki-tab>
<ki-tab value="invoices">Invoices</ki-tab>
<ki-tab-panel value="plans">Plan management</ki-tab-panel>
<ki-tab-panel value="invoices">Invoice history</ki-tab-panel>
</ki-tabs>

API reference

When to use: hold the content for one peer tab view, sharing value with its ki-tab.

When not to use: standalone, as lazy mounting, or for page navigation; orphan and duplicate panels are hidden by the parent group.

Properties & attributes

Attribute	Property	Type	Default	Description
value	value	string	''	Pairing identifier shared with a ki-tab. The first panel with a value owns it; duplicate or orphan panels stay hidden.

Slots

Slot	Description
(default)	Panel content.

CSS parts

Part	Description
panel	Panel surface.

CSS custom properties

The public styling contract of ki-tab-panel: reassign these tokens at :root or on a subtree — never override internals.

Token	Description
--ki-motion-distance-sm	Motion travel distance sm (4px): small slide/settle offsets.
--ki-motion-duration-medium-1	M3 md.sys.motion.duration.medium1 (250ms). onmars: MarsUI moderate step (240ms, 2x the 120ms base).
--ki-motion-easing-out	Decelerating interaction transition easing curve.
--ki-tab-panel-bg	color used by the tab panel component for background (Tab_nav masters have no panel chrome: content sits on the ambient surface; the panel never paints a surface it does not own).
--ki-tab-panel-fg	color used by the tab panel component for foreground (pairs a scheme-correct text color with whatever ground the transparent panel sits on — fixes black-on-black slotted text in dark).
--ki-tab-panel-focus-ring-color	color used by the tab panel component for focus ring color.
--ki-tab-panel-focus-ring-offset	dimension used by the tab panel component for focus ring offset.
--ki-tab-panel-focus-ring-width	dimension used by the tab panel component for focus ring width.
--ki-tab-panel-padding-block	dimension used by the tab panel component for padding block.
--ki-tab-panel-padding-inline	dimension used by the tab panel component for padding inline.
--ki-typography-family-body	semantic font family for typography family body.

Accessibility

The parent group wires the tab/panel ARIA relationship from the shared value; orphan and duplicate panels are hidden by the group. The panel is not a lazy-mounting mechanism — its content exists in the DOM whether or not it is the visible view.

Workshop

Documented with its parent: open ki-tabs in Storybook