|
|
/* ── Provider — variant-shared base ─────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs] {
|
|
|
--_tabs-trigger-height: var(--tabs-trigger-height-md);
|
|
|
--_tabs-trigger-padding-inline: var(--tabs-trigger-padding-inline-md);
|
|
|
--_tabs-trigger-gap: var(--tabs-trigger-gap-md);
|
|
|
--_tabs-trigger-font-size: var(--tabs-trigger-font-size-md);
|
|
|
--_tabs-content-padding: var(--tabs-content-padding-md);
|
|
|
--_tabs-stack-gap: var(--tabs-stack-gap);
|
|
|
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: var(--_tabs-stack-gap);
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-orientation='vertical'] {
|
|
|
flex-direction: row;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
/* ── Sizes ──────────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs][data-size='xs'] {
|
|
|
--_tabs-trigger-height: var(--tabs-trigger-height-xs);
|
|
|
--_tabs-trigger-padding-inline: var(--tabs-trigger-padding-inline-xs);
|
|
|
--_tabs-trigger-gap: var(--tabs-trigger-gap-xs);
|
|
|
--_tabs-trigger-font-size: var(--tabs-trigger-font-size-xs);
|
|
|
--_tabs-content-padding: var(--tabs-content-padding-xs);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-size='sm'] {
|
|
|
--_tabs-trigger-height: var(--tabs-trigger-height-sm);
|
|
|
--_tabs-trigger-padding-inline: var(--tabs-trigger-padding-inline-sm);
|
|
|
--_tabs-trigger-gap: var(--tabs-trigger-gap-sm);
|
|
|
--_tabs-trigger-font-size: var(--tabs-trigger-font-size-sm);
|
|
|
--_tabs-content-padding: var(--tabs-content-padding-sm);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-size='lg'] {
|
|
|
--_tabs-trigger-height: var(--tabs-trigger-height-lg);
|
|
|
--_tabs-trigger-padding-inline: var(--tabs-trigger-padding-inline-lg);
|
|
|
--_tabs-trigger-gap: var(--tabs-trigger-gap-lg);
|
|
|
--_tabs-trigger-font-size: var(--tabs-trigger-font-size-lg);
|
|
|
--_tabs-content-padding: var(--tabs-content-padding-lg);
|
|
|
}
|
|
|
|
|
|
/* ── List ───────────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs-list] {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: var(--tabs-list-gap);
|
|
|
min-width: 0;
|
|
|
/* border-box so a `fitted` list's intrinsic padding (pills / segmented track)
|
|
|
is absorbed INSIDE width:100% — without it the band overflows its column by
|
|
|
the padding (the right-edge asymmetry inside a popover). */
|
|
|
box-sizing: border-box;
|
|
|
background: var(--tabs-list-bg);
|
|
|
}
|
|
|
|
|
|
[data-tabs-list][data-orientation='vertical'] {
|
|
|
flex-direction: column;
|
|
|
flex: 0 0 var(--tabs-list-width);
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
/* ── Trigger ────────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs-trigger] {
|
|
|
position: relative;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: var(--_tabs-trigger-gap);
|
|
|
min-height: var(--_tabs-trigger-height);
|
|
|
padding-inline: var(--_tabs-trigger-padding-inline);
|
|
|
border: var(--tabs-trigger-border-width) solid var(--tabs-trigger-border);
|
|
|
border-radius: var(--tabs-trigger-radius);
|
|
|
background: var(--tabs-trigger-bg);
|
|
|
color: var(--tabs-trigger-fg);
|
|
|
font-family: var(--tabs-trigger-font-family);
|
|
|
font-size: var(--_tabs-trigger-font-size);
|
|
|
font-weight: var(--tabs-trigger-font-weight);
|
|
|
line-height: var(--tabs-trigger-line-height);
|
|
|
letter-spacing: var(--tabs-trigger-letter-spacing);
|
|
|
text-decoration: none;
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
background var(--tabs-trigger-transition-duration) var(--tabs-trigger-transition-ease),
|
|
|
border-color var(--tabs-trigger-transition-duration) var(--tabs-trigger-transition-ease),
|
|
|
color var(--tabs-trigger-transition-duration) var(--tabs-trigger-transition-ease),
|
|
|
box-shadow var(--tabs-trigger-transition-duration) var(--tabs-trigger-transition-ease);
|
|
|
}
|
|
|
|
|
|
[data-tabs-trigger]:hover {
|
|
|
background-image: linear-gradient(var(--state-hover), var(--state-hover));
|
|
|
color: var(--tabs-hover-trigger-fg);
|
|
|
}
|
|
|
|
|
|
[data-tabs-trigger]:focus-visible {
|
|
|
/* Canonical focus ring — `outline` (HCM-safe, survives forced-colors, unlike the
|
|
|
2-layer box-shadow this replaced) with the shared focus tokens. Matches the
|
|
|
framework-wide focus sweep; on filled variants (pills / segmented) it hugs the
|
|
|
pill radius cleanly instead of reading as a heavy boxed input. */
|
|
|
outline: var(--tabs-trigger-focus-ring-width) solid var(--tabs-trigger-focus-ring-color);
|
|
|
outline-offset: var(--tabs-trigger-focus-ring-offset);
|
|
|
}
|
|
|
|
|
|
[data-tabs-trigger][data-disabled],
|
|
|
[data-tabs-trigger]:disabled {
|
|
|
cursor: default;
|
|
|
opacity: var(--tabs-disabled-opacity);
|
|
|
}
|
|
|
|
|
|
/* ── Content ────────────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs-content] {
|
|
|
min-width: 0;
|
|
|
flex: 1 1 auto;
|
|
|
padding: var(--_tabs-content-padding);
|
|
|
border: var(--tabs-content-border-width) solid var(--tabs-content-border);
|
|
|
border-radius: var(--tabs-content-radius);
|
|
|
background: var(--tabs-content-bg);
|
|
|
color: var(--tabs-content-fg);
|
|
|
}
|
|
|
|
|
|
/* ── Variant: line ──────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs][data-variant='line'] {
|
|
|
--_tabs-stack-gap: var(--tabs-line-stack-gap);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='line'] [data-tabs-list] {
|
|
|
padding: 0;
|
|
|
border-bottom: var(--tabs-list-border-width) solid var(--tabs-list-border);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='line'][data-orientation='vertical'] [data-tabs-list] {
|
|
|
border-bottom: none;
|
|
|
border-inline-end: var(--tabs-list-border-width) solid var(--tabs-list-border);
|
|
|
padding-inline-end: var(--tabs-line-list-padding-inline-end);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='line'] [data-tabs-trigger] {
|
|
|
border-radius: 0;
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='line'] [data-tabs-trigger][data-state='active'] {
|
|
|
color: var(--tabs-active-trigger-fg);
|
|
|
}
|
|
|
|
|
|
/* In `line` variant the underline is the indicator's job (when present)
|
|
|
* — but if no indicator is rendered, fall back to a static border so the
|
|
|
* active state remains visible. The indicator's styles (below) override
|
|
|
* this when the consumer renders it. */
|
|
|
[data-tabs][data-variant='line']:not(:has([data-tabs-indicator]))
|
|
|
[data-tabs-trigger][data-state='active'] {
|
|
|
border-bottom-color: var(--tabs-active-trigger-border);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='line'][data-orientation='vertical']:not(:has([data-tabs-indicator]))
|
|
|
[data-tabs-trigger][data-state='active'] {
|
|
|
border-bottom-color: transparent;
|
|
|
border-inline-end-color: var(--tabs-active-trigger-border);
|
|
|
}
|
|
|
|
|
|
/* ── Variant: surface ───────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs][data-variant='surface'] {
|
|
|
padding: var(--tabs-surface-provider-padding);
|
|
|
border: var(--tabs-provider-border-width) solid var(--tabs-provider-border);
|
|
|
border-radius: var(--tabs-provider-radius);
|
|
|
background: var(--tabs-provider-bg);
|
|
|
box-shadow: var(--tabs-surface-provider-shadow);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='surface'] [data-tabs-list] {
|
|
|
padding: var(--tabs-list-padding);
|
|
|
border: var(--tabs-list-border-width) solid var(--tabs-list-border);
|
|
|
border-radius: var(--tabs-list-radius);
|
|
|
background: var(--tabs-surface-list-bg);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='surface'] [data-tabs-trigger][data-state='active'] {
|
|
|
background: var(--tabs-active-trigger-bg);
|
|
|
color: var(--tabs-active-trigger-fg);
|
|
|
border-color: var(--tabs-active-surface-trigger-border);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='surface'] [data-tabs-content] {
|
|
|
border-color: var(--tabs-surface-content-border);
|
|
|
background: var(--tabs-surface-content-bg);
|
|
|
}
|
|
|
|
|
|
/* ── Variant: pills ─────────────────────────────────────────────────────── */
|
|
|
|
|
|
[data-tabs][data-variant='pills'] [data-tabs-list] {
|
|
|
padding: var(--tabs-list-padding);
|
|
|
border-radius: var(--tabs-list-radius);
|
|
|
background: var(--tabs-pills-list-bg);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='pills'] [data-tabs-trigger] {
|
|
|
border-radius: var(--tabs-pills-trigger-radius);
|
|
|
}
|
|
|
|
|
|
/* In pills, the indicator (when present) IS the active background.
|
|
|
* Without an indicator, fall back to a static active background. */
|
|
|
[data-tabs][data-variant='pills']:not(:has([data-tabs-indicator]))
|
|
|
[data-tabs-trigger][data-state='active'] {
|
|
|
background: var(--tabs-active-trigger-bg);
|
|
|
color: var(--tabs-active-trigger-fg);
|
|
|
border-color: var(--tabs-active-pills-trigger-border);
|
|
|
box-shadow: var(--tabs-active-pills-trigger-shadow);
|
|
|
}
|
|
|
|
|
|
/* When the indicator IS present in pills, the active trigger keeps a
|
|
|
* neutral bg but raises its color above the indicator's tint. */
|
|
|
[data-tabs][data-variant='pills']:has([data-tabs-indicator])
|
|
|
[data-tabs-trigger][data-state='active'] {
|
|
|
color: var(--tabs-active-trigger-fg);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='pills'] [data-tabs-content] {
|
|
|
padding-inline: 0;
|
|
|
padding-block: var(--tabs-pills-content-padding-block-start) 0;
|
|
|
border: none;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
/* ── Variant: segmented ──────────────────────────────────────────────────────
|
|
|
* iOS / Untitled-UI segmented control. A filled, recessed track holds equal
|
|
|
* segments; the active segment is a PRIMARY accent pill (`segmented-trigger-
|
|
|
* bg-active` = primary-solid + on-solid text + subtle shadow), NOT an accent
|
|
|
* border nor a near-invisible neutral pill — so it reads clearly in light AND
|
|
|
* dark, not as a focus-ringed box. Both the active bg and the on-solid text
|
|
|
* are themeable tokens (override `--tabs-active-segmented-trigger-bg` /
|
|
|
* `-color-active` to retint or restore a neutral pill). The trigger radius is
|
|
|
* CONCENTRIC with the track (`segmented-trigger-radius` = track radius − list
|
|
|
* padding). Pair with `fitted` for equal-width segments. */
|
|
|
|
|
|
[data-tabs][data-variant='segmented'] [data-tabs-list] {
|
|
|
gap: 0;
|
|
|
padding: var(--tabs-list-padding);
|
|
|
border-radius: var(--tabs-segmented-list-radius);
|
|
|
background: var(--tabs-segmented-list-bg);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='segmented'] [data-tabs-trigger] {
|
|
|
border-radius: var(--tabs-segmented-trigger-radius);
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
|
|
|
/* Without an indicator, the active segment paints its own accent pill. */
|
|
|
[data-tabs][data-variant='segmented']:not(:has([data-tabs-indicator]))
|
|
|
[data-tabs-trigger][data-state='active'] {
|
|
|
background: var(--tabs-active-segmented-trigger-bg);
|
|
|
color: var(--tabs-active-segmented-trigger-fg);
|
|
|
box-shadow: var(--tabs-active-segmented-trigger-shadow);
|
|
|
}
|
|
|
|
|
|
/* With the indicator present, it IS the pill; the active trigger only raises
|
|
|
* its label to the on-solid colour above the accent indicator. */
|
|
|
[data-tabs][data-variant='segmented']:has([data-tabs-indicator])
|
|
|
[data-tabs-trigger][data-state='active'] {
|
|
|
color: var(--tabs-active-segmented-trigger-fg);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='segmented'] [data-tabs-content] {
|
|
|
padding-inline: 0;
|
|
|
padding-block: var(--tabs-pills-content-padding-block-start) 0;
|
|
|
border: none;
|
|
|
border-radius: 0;
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
/* ── Indicator ──────────────────────────────────────────────────────────────
|
|
|
* The wrapper writes inline `transform`, `width`, `height` based on the
|
|
|
* active trigger's offset rect. The recipe handles the slide animation,
|
|
|
* z-index, and per-variant appearance. */
|
|
|
|
|
|
/* Position + size come from soma's `--indicator-*` (the "soma positions, eidos
|
|
|
shapes" contract); the variants below own the look and may pin a cross-axis
|
|
|
dimension on top. Uses the independent `translate` property, not `transform`,
|
|
|
so a per-variant `transform` never wipes the slide.
|
|
|
|
|
|
Those four vars are soma's VALUE CHANNEL, not a theming surface: the
|
|
|
`MeasuredIndicator` layer writes the active trigger's offset rect onto this
|
|
|
element on every move, so a public `--tabs-indicator-width` on top would be a
|
|
|
knob a theme could pin and thereby break the slide — the adjudication
|
|
|
`navigation-menu` already carries for its own `indicator-w` (and the reason
|
|
|
its `-x` was retired dead). What belongs to a theme is the indicator's FORM —
|
|
|
thickness, fill, radius, shadow, the slide's duration and ease — and those
|
|
|
are the keys below.
|
|
|
|
|
|
`left` is PHYSICAL on purpose: soma measures `triggerRect.left - listRect.left`,
|
|
|
an offset that grows rightwards whatever the direction. A logical
|
|
|
`inset-inline-start` anchored the indicator to the RIGHT edge in RTL while the
|
|
|
offset kept pointing right, landing it on the wrong tab (measured: 400px off,
|
|
|
and RTL-1 could not see it because the offset used to be an INLINE transform
|
|
|
written by JS, not a CSS declaration). In LTR the two are identical. */
|
|
|
[data-tabs-indicator] {
|
|
|
position: absolute;
|
|
|
inset-block-start: 0;
|
|
|
left: 0;
|
|
|
pointer-events: none;
|
|
|
z-index: 0;
|
|
|
translate: var(--indicator-x, 0px) var(--indicator-y, 0px);
|
|
|
inline-size: var(--indicator-w, 0px);
|
|
|
block-size: var(--indicator-h, 0px);
|
|
|
transition:
|
|
|
translate var(--tabs-indicator-transition-duration) var(--tabs-indicator-transition-ease),
|
|
|
inline-size var(--tabs-indicator-transition-duration) var(--tabs-indicator-transition-ease),
|
|
|
block-size var(--tabs-indicator-transition-duration) var(--tabs-indicator-transition-ease),
|
|
|
opacity var(--duration-fast) var(--ease-out);
|
|
|
will-change: translate, inline-size, block-size;
|
|
|
}
|
|
|
|
|
|
[data-tabs-indicator]:not([data-ready]) {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
/* `line` variant: indicator is a thin underline along the leading edge */
|
|
|
[data-tabs][data-variant='line'] [data-tabs-indicator] {
|
|
|
background: var(--tabs-active-trigger-border);
|
|
|
height: var(--tabs-indicator-line-thickness, 2px);
|
|
|
inset-block-start: auto;
|
|
|
inset-block-end: calc(var(--tabs-list-border-width) * -1);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-variant='line'][data-orientation='vertical'] [data-tabs-indicator] {
|
|
|
width: var(--tabs-indicator-line-thickness, 2px);
|
|
|
inset-inline-start: auto;
|
|
|
inset-inline-end: calc(var(--tabs-list-border-width) * -1);
|
|
|
height: auto;
|
|
|
}
|
|
|
|
|
|
/* When the recipe takes over indicator dimensions (line variant uses a
|
|
|
* fixed thickness), the wrapper's inline width/height for the cross axis
|
|
|
* are overridden by the rules above; the inline axis stays driven by JS. */
|
|
|
|
|
|
/* `pills` variant: indicator is the rounded active background */
|
|
|
[data-tabs][data-variant='pills'] [data-tabs-indicator] {
|
|
|
background: var(--tabs-active-trigger-bg);
|
|
|
border: var(--tabs-trigger-border-width) solid var(--tabs-active-pills-trigger-border);
|
|
|
border-radius: var(--tabs-pills-trigger-radius);
|
|
|
box-shadow: var(--tabs-active-pills-trigger-shadow);
|
|
|
z-index: 0;
|
|
|
}
|
|
|
|
|
|
/* `segmented` variant: indicator is the PRIMARY accent pill (no accent
|
|
|
* border), concentric with the track. */
|
|
|
[data-tabs][data-variant='segmented'] [data-tabs-indicator] {
|
|
|
background: var(--tabs-active-segmented-trigger-bg);
|
|
|
border-radius: var(--tabs-segmented-trigger-radius);
|
|
|
box-shadow: var(--tabs-active-segmented-trigger-shadow);
|
|
|
z-index: 0;
|
|
|
}
|
|
|
|
|
|
/* Triggers inside a list with an indicator need to layer above it so the
|
|
|
* label is readable. */
|
|
|
[data-tabs-list]:has([data-tabs-indicator]) [data-tabs-trigger] {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
[data-tabs-list]:has([data-tabs-indicator])
|
|
|
[data-tabs-trigger][data-state='active'] {
|
|
|
background: transparent;
|
|
|
}
|
|
|
|
|
|
/* Surface variant doesn't use the indicator — hide if accidentally rendered. */
|
|
|
[data-tabs][data-variant='surface'] [data-tabs-indicator] {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
/* ── Fitted ─────────────────────────────────────────────────────────────────
|
|
|
* List fills inline width and triggers split it equally (flex: 1 1 0).
|
|
|
* Wraps still work because flex-wrap is on the list — when wrapping
|
|
|
* happens, each row's triggers re-distribute. */
|
|
|
|
|
|
[data-tabs][data-fitted] [data-tabs-list] {
|
|
|
width: 100%; /* literal: identity — `fitted` IS "the list fills the inline axis"; a token here would be a knob that can only hold one value without unsaying the prop */
|
|
|
flex-wrap: nowrap;
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-fitted] [data-tabs-trigger] {
|
|
|
flex: 1 1 0;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
/* ── Scrollable list ───────────────────────────────────────────────────────
|
|
|
* Horizontal-only — vertical scroll is handled by the natural overflow
|
|
|
* of the column. Edge fade signals scrollability. */
|
|
|
|
|
|
[data-tabs][data-scrollable]:not([data-orientation='vertical']) [data-tabs-list] {
|
|
|
flex-wrap: nowrap;
|
|
|
overflow-x: auto;
|
|
|
scroll-snap-type: x proximity;
|
|
|
scrollbar-width: none;
|
|
|
mask-image: linear-gradient(
|
|
|
to right,
|
|
|
transparent,
|
|
|
black var(--tabs-scrollable-fade, 16px),
|
|
|
black calc(100% - var(--tabs-scrollable-fade, 16px)),
|
|
|
transparent
|
|
|
);
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-scrollable] [data-tabs-list]::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-scrollable] [data-tabs-trigger] {
|
|
|
flex: 0 0 auto;
|
|
|
scroll-snap-align: start;
|
|
|
}
|
|
|
|
|
|
/* ── Collapse vertical → horizontal at narrow widths ────────────────────────
|
|
|
* `data-collapsed` is written by the wrapper via ResizeObserver when the
|
|
|
* provider is narrower than the `collapseAt` threshold. Selectors below
|
|
|
* mirror the horizontal-orientation rules so a vertical tablist gracefully
|
|
|
* adopts the horizontal layout on narrow widths. */
|
|
|
|
|
|
[data-tabs][data-collapsed][data-orientation='vertical'] {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-collapsed][data-orientation='vertical'] [data-tabs-list] {
|
|
|
flex: 0 1 auto;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-collapsed][data-variant='line'][data-orientation='vertical']
|
|
|
[data-tabs-list] {
|
|
|
border-inline-end: none;
|
|
|
border-bottom: var(--tabs-list-border-width) solid var(--tabs-list-border);
|
|
|
padding-inline-end: 0;
|
|
|
}
|
|
|
|
|
|
[data-tabs][data-collapsed][data-variant='line'][data-orientation='vertical']
|
|
|
[data-tabs-indicator] {
|
|
|
width: auto;
|
|
|
height: var(--tabs-indicator-line-thickness, 2px);
|
|
|
inset-block-start: auto;
|
|
|
inset-block-end: calc(var(--tabs-list-border-width) * -1);
|
|
|
inset-inline-end: auto;
|
|
|
inset-inline-start: 0;
|
|
|
}
|
|
|
|
|
|
/* ── Content motion presets ────────────────────────────────────────────────
|
|
|
* The active panel animates in; inactive panels are unmounted (default
|
|
|
* lazy) or hidden (`keepMounted`). All presets respect prefers-reduced-
|
|
|
* motion below.
|
|
|
*
|
|
|
* MATERIALS from the motion channel (registered, themeable keyframes) — the
|
|
|
* trigger stays these recipe rules because tabs' own `data-motion` prop
|
|
|
* ('fade'/'slide') × `data-orientation` selects the flavour, a per-component
|
|
|
* axis the generic preset trigger doesn't model. The subtle 4px nudge feeds
|
|
|
* the distance hook from the canonical scale. */
|
|
|
|
|
|
[data-tabs-content][data-motion='fade'][data-state='active'] {
|
|
|
animation: fade-in var(--duration-fast) var(--ease-out) both;
|
|
|
}
|
|
|
|
|
|
[data-tabs-content][data-motion='slide'][data-state='active'][data-orientation='horizontal'] {
|
|
|
--motion-distance-md: var(--motion-distance-sm);
|
|
|
animation:
|
|
|
slide-from-bottom var(--duration-normal) var(--ease-out) both,
|
|
|
fade-in var(--duration-normal) var(--ease-out) both;
|
|
|
}
|
|
|
|
|
|
[data-tabs-content][data-motion='slide'][data-state='active'][data-orientation='vertical'] {
|
|
|
--motion-distance-md: var(--motion-distance-sm);
|
|
|
animation:
|
|
|
slide-from-right var(--duration-normal) var(--ease-out) both,
|
|
|
fade-in var(--duration-normal) var(--ease-out) both;
|
|
|
}
|
|
|
|
|
|
/* ── Reduced motion ─────────────────────────────────────────────────────────
|
|
|
* Honour the user's OS preference: indicator snaps without slide,
|
|
|
* content panels appear instantly. */
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
[data-tabs-indicator] {
|
|
|
transition: opacity var(--duration-fast) var(--ease-out);
|
|
|
}
|
|
|
[data-tabs-content][data-motion='fade'],
|
|
|
[data-tabs-content][data-motion='slide'] {
|
|
|
animation: none;
|
|
|
}
|
|
|
}
|
