zabi-components 8.1.0 → 9.0.0

package/dist/molecules/SegmentedControl.svelte

@@ -6,6 +6,12 @@
     import { isRtl, radioKeyIndex } from "../util/radio-keys.js";
     import type { SegmentedControlOption } from "../util/segmented-control.js";
     import { generateId } from "../util/ssr-safe.js";
+    import {
+        afterFrame,
+        measureIndicator,
+        observeSizes,
+        type IndicatorBox,
+    } from "../util/sliding-indicator.js";
 
     /** Other attributes (`data-*`, `id`, ...) land on the host element. */
     type Props = Omit<
@@ -34,6 +40,12 @@
          * form reset leaves it alone.
          */
         name?: string;
+        /**
+         * The look of the selected segment. `neutral`: a card-coloured thumb with
+         * the headline colour on a tinted track, which does not compete with the
+         * screen's main button. `primary`: a solid primary fill, as in 8.1.
+         */
+        tone?: "neutral" | "primary";
         disabled?: boolean;
         /** Called with the new value when the user picks another segment. */
         onchange?: (value: string) => void;
@@ -49,6 +61,7 @@
         size = "md",
         fullWidth = true,
         name = "",
+        tone = "neutral",
         disabled = false,
         onchange,
         ...restProps
@@ -78,6 +91,43 @@
         options.filter((option) => !disabled && !option.disabled),
     );
 
+    /**
+     * The sliding indicator. Until a box has been measured (on the server,
+     * before hydration, with no layout) it is null and the checked segment draws
+     * its own selected look; with a box, the host is marked ready and that look
+     * moves to the indicator, which slides between segments.
+     */
+    let host = $state<HTMLDivElement | null>(null);
+    let indicator = $state<IndicatorBox | null>(null);
+    /** Off for the first placement, so the indicator appears in place and does not fly in. */
+    let indicatorMotion = $state(false);
+
+    const faceOf = (input: HTMLInputElement | undefined) =>
+        input?.nextElementSibling as HTMLElement | null | undefined;
+
+    function measure() {
+        const face = value === undefined ? undefined : faceOf(inputs[value]);
+        indicator = host && face ? measureIndicator(host, face) : null;
+    }
+
+    // After the DOM has followed a change of selection, options, size or look.
+    $effect(() => {
+        void [options, size, fullWidth, tone, host, value];
+        measure();
+    });
+
+    // The segments wrap and resize with zoomed text, a loaded font or a narrower container.
+    $effect(() => {
+        void options;
+        if (!host) return;
+        return observeSizes([host, ...Object.values(inputs).map(faceOf)], measure);
+    });
+
+    $effect(() => {
+        if (!indicator || indicatorMotion) return;
+        return afterFrame(() => (indicatorMotion = true));
+    });
+
     /** The segment that takes Tab: the selected one, or the first that can be chosen. */
     const tabStop = $derived(
         enabled.find((option) => option.value === value)?.value ?? enabled[0]?.value,
@@ -128,6 +178,10 @@ one changes nothing, and the value goes with a form. -->
 <div
     class={cn("segmented", fullWidth ? "w-full" : "", className)}
     data-size={size}
+    data-tone={tone}
+    data-indicator={indicator ? "ready" : undefined}
+    data-indicator-motion={indicator && indicatorMotion ? "" : undefined}
+    bind:this={host}
     data-full-width={fullWidth ? "" : undefined}
     role="radiogroup"
     aria-label={ariaLabelledby ? undefined : label || ariaLabel}
@@ -135,6 +189,17 @@ one changes nothing, and the value goes with a form. -->
     aria-disabled={disabled ? "true" : undefined}
     {...restProps}
 >
+    {#if indicator}
+        <!-- Under the segments (it comes first and they are positioned), and never in their way. -->
+        <span
+            class="segment-indicator"
+            aria-hidden="true"
+            data-disabled={disabled || options.find((option) => option.value === value)?.disabled
+                ? ""
+                : undefined}
+            style="transform: translate({indicator.x}px, {indicator.y}px); width: {indicator.width}px; height: {indicator.height}px;"
+        ></span>
+    {/if}
     {#each options as option (option.value)}
         {@const optionDisabled = disabled || !!option.disabled}
         {@const Icon = option.icon}
@@ -184,6 +249,8 @@ one changes nothing, and the value goes with a form. -->
         border: 1px solid var(--color-border);
         border-radius: var(--radius-control);
         background: var(--color-action-secondary);
+        /* The sliding indicator is placed against the padding box. */
+        position: relative;
     }
 
     .segmented:not([data-full-width]) {
@@ -241,8 +308,8 @@ one changes nothing, and the value goes with a form. -->
         line-height: 1.25;
         text-align: center;
         transition:
-            background-color 150ms,
-            color 150ms;
+            background-color var(--duration-base),
+            color var(--duration-base);
     }
 
     /* A long label wraps onto a second line, and breaks inside a word only when a word alone does not fit. */
@@ -263,9 +330,64 @@ one changes nothing, and the value goes with a form. -->
         background: var(--color-surface-active);
     }
 
+    /*
+     * The selected look, drawn by the segment itself: before the page hydrates,
+     * and wherever the indicator cannot be measured. Neutral is a thumb: the
+     * card colour with a soft shadow and an edge (the edge, held to 3:1 against
+     * the track, is what tells it from the others; the fill is only a step).
+     */
     input:checked + .segment-face {
+        background: var(--color-segment-thumb);
+        color: var(--color-segment-thumb-text);
+        box-shadow:
+            var(--shadow-sm),
+            0 0 0 1px var(--color-segment-thumb-border);
+    }
+
+    :where(.segmented[data-tone="primary"]) input:checked + .segment-face {
         background: var(--color-action-primary);
         color: var(--color-action-primary-text);
+        box-shadow: none;
+    }
+
+    /* With an indicator the segment keeps only its label colour. */
+    @media (forced-colors: none) {
+        :where(.segmented[data-indicator="ready"]) input:checked + .segment-face {
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    .segment-indicator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        border-radius: calc(var(--radius-control) - var(--zabi-segment-inset) - 1px);
+        background: var(--color-segment-thumb);
+        box-shadow:
+            var(--shadow-sm),
+            0 0 0 1px var(--color-segment-thumb-border);
+    }
+
+    .segmented[data-tone="primary"] .segment-indicator {
+        background: var(--color-action-primary);
+        box-shadow: none;
+    }
+
+    /* Only once the first placement is on screen: the thumb then slides and resizes. */
+    .segmented[data-indicator-motion] .segment-indicator {
+        transition:
+            transform var(--duration-moderate) var(--ease-spring),
+            width var(--duration-moderate) var(--ease-spring),
+            height var(--duration-moderate) var(--ease-spring);
+    }
+
+    /* Forced colours keep the segment's own Highlight look below. */
+    @media (forced-colors: active) {
+        .segment-indicator {
+            display: none;
+        }
     }
 
     /* Same geometry as `.focus-ring`: a 2px gap, then a 2px ring. */
@@ -283,6 +405,16 @@ one changes nothing, and the value goes with a form. -->
         opacity: 0.5;
     }
 
+    /* A disabled neutral thumb keeps its edge at full strength, so it is still seen; only its label dims. */
+    :where(.segmented[data-tone="neutral"]) input:checked:disabled + .segment-face {
+        opacity: 1;
+        color: color-mix(in srgb, var(--color-segment-thumb-text) 50%, transparent);
+    }
+
+    .segmented[data-tone="primary"] .segment-indicator[data-disabled] {
+        opacity: 0.5;
+    }
+
     /*
      * Forced colours paint every background with the canvas colour and drop
      * every box-shadow, which would leave the selected segment looking like
@@ -316,7 +448,8 @@ one changes nothing, and the value goes with a form. -->
     }
 
     @media (prefers-reduced-motion: reduce) {
-        .segment-face {
+        .segment-face,
+        .segmented[data-indicator-motion] .segment-indicator {
             transition: none;
         }
     }

package/dist/molecules/SegmentedControl.svelte.d.ts

@@ -25,6 +25,12 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange" | "aria-l
      * form reset leaves it alone.
      */
     name?: string;
+    /**
+     * The look of the selected segment. `neutral`: a card-coloured thumb with
+     * the headline colour on a tinted track, which does not compete with the
+     * screen's main button. `primary`: a solid primary fill, as in 8.1.
+     */
+    tone?: "neutral" | "primary";
     disabled?: boolean;
     /** Called with the new value when the user picks another segment. */
     onchange?: (value: string) => void;

package/dist/molecules/SidebarFooter.svelte

@@ -91,7 +91,7 @@
 {#if showFooter}
     <div class="w-full shrink-0" data-sidebar-flyout-root>
         <footer
-            class={cn(`flex w-full shrink-0 flex-col gap-3 border-t border-border pt-3 pb-1 ${className}`)}
+            class={cn(`flex w-full shrink-0 flex-col gap-3 border-t border-border-weak pt-3 pb-1 ${className}`)}
             aria-label={text.accountAndSettings}
         >
             {#if showPanelLauncher}

package/dist/molecules/SidebarNavSection.svelte

@@ -41,7 +41,7 @@
 <div class={cn(`flex w-full flex-col gap-2 ${className}`)}>
     {#if showHeading && headingId}
         <h2
-            class="px-0 text-xs font-semibold uppercase tracking-wider text-description"
+            class="px-0 text-xs font-medium text-description"
             id={headingId}
         >
             {trimmedTitle}

package/dist/molecules/SortableList.svelte

@@ -549,6 +549,7 @@
                     aria-label={text.handleLabel(label)}
                     aria-describedby={descriptionId}
                     disabled={rowDisabled}
+                    data-sheet-no-drag
                     data-sortable-handle
                     onpointerdown={(event) => handlePointerDown(event, entry)}
                     onclick={handleHandleClick}

package/dist/molecules/Stepper.svelte

@@ -6,6 +6,7 @@
     import type { HTMLAttributes } from "svelte/elements";
     import type { SizeVariant } from "../types/variants.js";
     import { cn } from "../util/cn.js";
+    import { inSkeletonGroup } from "../util/skeleton.js";
     import {
         STEPPER_STRINGS,
         clampStep,
@@ -100,6 +101,9 @@
         bodies[index]?.focus();
     }
 
+    /** Inside a `SkeletonGroup` the group is the one status; a second one in it would be a live region in a live region. */
+    const inGroup = inSkeletonGroup();
+
     /** Read out once when the current step changes, and never for the first render. */
     let announced = $state("");
     let previous: number | undefined;
@@ -202,7 +206,9 @@
                 {/if}
             </div>
         </div>
-        <span class="sr-only" role="status" data-stepper-status>{announced}</span>
+        {#if !inGroup}
+            <span class="sr-only" role="status" data-stepper-status>{announced}</span>
+        {/if}
     </nav>
 {/if}
 
@@ -375,8 +381,8 @@
     }
 
     /*
-     * Completed and current are filled, upcoming is an outline: a difference
-     * of shape. Completed has a check where the others have their number, and
+     * Completed and current are filled in the brand colour, upcoming is the
+     * lighter track: a difference of shape too. Completed has a check where the others have their number, and
      * the current one stands inside a ring of its own.
      */
     .stepper-marker {
@@ -419,11 +425,19 @@
         background-clip: content-box;
     }
 
-    /* The edge is all there is of an upcoming marker, so it is the control
-       boundary: 3:1 or better on every surface level of both themes. */
+    /*
+     * An upcoming marker is the progress track: a filled pill in the bar
+     * layout, with the track's own edge. An app that themes the progress
+     * track (an edgeless one that reaches 3:1 on its own) gets the same here.
+     * `--zabi-stepper-upcoming-fill` and `--zabi-stepper-upcoming-edge` are
+     * declared nowhere, so any ancestor can set them. The 8.1 look, a hollow
+     * outline, is
+     * `--zabi-stepper-upcoming-fill: transparent;
+     *  --zabi-stepper-upcoming-edge: var(--color-control-border);`
+     */
     .stepper-step[data-state="upcoming"] .stepper-marker {
-        border-color: var(--color-control-border);
-        background-color: transparent;
+        border-color: var(--zabi-stepper-upcoming-edge, var(--color-progress-track-border));
+        background-color: var(--zabi-stepper-upcoming-fill, var(--color-progress-track));
         color: var(--color-description);
     }
 

package/dist/molecules/StickyActionBar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type { HTMLAttributes } from "svelte/elements";
-    import { findScrollParent } from "../util/app-shell.js";
+    import { findScrollParent, getAppShell } from "../util/app-shell.js";
     import { cn } from "../util/cn.js";
     import { watchKeyboardInset } from "../util/keyboard-inset.js";
     import { reserveScrollPaddingBottom } from "../util/scroll-padding.js";
+    import { resolveScrolledUnder, watchScrollEdge, type ScrollEdgeMode } from "../util/scroll-edge.js";
 
     /**
      * Keeps a form's main button on screen: at the bottom of whatever
@@ -47,7 +48,12 @@
      *
      * In an `AppShell`, a screen with a form is a task of its own: leave the
      * tab bar out (no `footer`) and let this bar be the bottom of the screen.
-     * With a tab bar it sits directly above it.
+     * With a tab bar it sits directly above it: the shell's footer lies over
+     * the scroller, and the bar sticks to the footer's top edge, not under it.
+     *
+     * The bar is flush with the page and page-coloured while the form ends
+     * where the bar is; once content is under it, it turns to frosted glass
+     * with a hairline above it.
      *
      * `UnsavedChangesBar` is the other bar at the bottom of a form. That one
      * appears only while there is something to save, announces itself, and
@@ -60,6 +66,13 @@
          * says what the buttons belong to; without it, it is a plain box.
          */
         label?: string;
+        /**
+         * When the bar shows the glass and the hairline. `auto` follows the
+         * scroll position: flush at the end of the content, glass while
+         * content is under it. `always` is glass all the time, `never` flush
+         * all the time.
+         */
+        scrollEdge?: ScrollEdgeMode;
         class?: string;
         /** Added after the offset and margin the bar sets while the keyboard is up. */
         style?: string;
@@ -67,9 +80,35 @@
         children?: Snippet;
     };
 
-    let { label, class: className = "", style = "", children, ...restProps }: Props = $props();
+    let {
+        label,
+        scrollEdge = "auto",
+        class: className = "",
+        style = "",
+        children,
+        ...restProps
+    }: Props = $props();
 
     let host: HTMLDivElement | undefined = $state();
+
+    /**
+     * In a shell with a footer the footer lies over the bottom of the scroller
+     * by this much: the bar sticks above it, and the box it scrolls in
+     * extends under it.
+     */
+    const shell = getAppShell();
+    const underFooter = $derived(shell?.footerOverlays === true);
+    const footerHeight = $derived(shell?.footerHeight ?? 0);
+
+    /** Content is under the bar: from the shell if there is one, else from its own scroller. */
+    let ownScrolled = $state(false);
+    $effect(() => {
+        if (shell || scrollEdge !== "auto" || !host) return;
+        return watchScrollEdge(findScrollParent(host), (edge) => (ownScrolled = edge.bottom));
+    });
+    const scrolledUnder = $derived(
+        resolveScrolledUnder(scrollEdge, shell ? shell.scrolledBottom : ownScrolled),
+    );
     /** Height of the keyboard over the page, in px. 0 on the server and where the page shrinks by itself. */
     let keyboardInset = $state(0);
     /**
@@ -151,7 +190,9 @@
     $effect(() => {
         const bar = host;
         if (!bar) return;
-        const raised = lift;
+        // The bar's own offset from the bottom of the box: what the keyboard
+        // lifts it by, or the footer it sits above, whichever is more.
+        const raised = Math.max(lift, footerHeight);
         const container = findScrollParent(bar) ?? document.documentElement;
         const reservation = reserveScrollPaddingBottom(container);
         const reserve = () => {
@@ -168,6 +209,21 @@
     });
 
     const keyboardOpen = $derived(keyboardInset > 0);
+
+    /**
+     * Where it sticks. On its own the box ends at the bottom and the bar is
+     * lifted by `lift`. Over a footer it sticks above the footer, and the
+     * keyboard lifts it only as far as it reaches past the footer: the box
+     * extends under the footer, so `lift` counts from the box's bottom.
+     */
+    const offsetStyle = $derived.by(() => {
+        const overlay = "var(--app-shell-footer-overlay, 0px)";
+        if (!underFooter) return lift > 0 ? `bottom: ${lift}px; margin-bottom: ${lift}px;` : "";
+        if (lift > 0) {
+            return `bottom: max(${lift}px, ${overlay}); margin-bottom: max(0px, calc(${lift}px - ${overlay}));`;
+        }
+        return `bottom: ${overlay};`;
+    });
 </script>
 
 <!-- Nothing here takes focus by itself, and the bar never moves focus. -->
@@ -176,15 +232,18 @@
     role={label ? "group" : undefined}
     aria-label={label}
     data-keyboard-open={keyboardOpen ? "true" : undefined}
+    data-bar-edge="bottom"
+    data-scrolled-under={String(scrolledUnder)}
     class={cn(
         // `mt-auto`: in a column taller than its fields, the bar goes to the bottom.
-        "sticky bottom-0 z-sticky mt-auto flex flex-wrap items-center justify-end gap-[8px] border-t border-border-weak bg-surface-elevated pt-3",
+        "material-bar sticky bottom-0 z-sticky mt-auto flex flex-wrap items-center justify-end gap-[8px] pt-3",
         "pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))]",
-        // The home indicator is under the keyboard while that is up.
-        keyboardOpen ? "pb-3" : "pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+        // The home indicator is under the keyboard while that is up, and under
+        // the footer, which already clears it, when there is one.
+        keyboardOpen || underFooter ? "pb-3" : "pb-[max(0.75rem,env(safe-area-inset-bottom))]",
         className,
     )}
-    style="{lift > 0 ? `bottom: ${lift}px; margin-bottom: ${lift}px;` : ''} {style}"
+    style="{offsetStyle} {style}"
     {...restProps}
 >
     {@render children?.()}

package/dist/molecules/StickyActionBar.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import { type ScrollEdgeMode } from "../util/scroll-edge.js";
 /**
  * Keeps a form's main button on screen: at the bottom of whatever
  * scrolls, and above the on-screen keyboard when that is up.
@@ -41,7 +42,12 @@ import type { HTMLAttributes } from "svelte/elements";
  *
  * In an `AppShell`, a screen with a form is a task of its own: leave the
  * tab bar out (no `footer`) and let this bar be the bottom of the screen.
- * With a tab bar it sits directly above it.
+ * With a tab bar it sits directly above it: the shell's footer lies over
+ * the scroller, and the bar sticks to the footer's top edge, not under it.
+ *
+ * The bar is flush with the page and page-coloured while the form ends
+ * where the bar is; once content is under it, it turns to frosted glass
+ * with a hairline above it.
  *
  * `UnsavedChangesBar` is the other bar at the bottom of a form. That one
  * appears only while there is something to save, announces itself, and
@@ -54,6 +60,13 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> & {
      * says what the buttons belong to; without it, it is a plain box.
      */
     label?: string;
+    /**
+     * When the bar shows the glass and the hairline. `auto` follows the
+     * scroll position: flush at the end of the content, glass while
+     * content is under it. `always` is glass all the time, `never` flush
+     * all the time.
+     */
+    scrollEdge?: ScrollEdgeMode;
     class?: string;
     /** Added after the offset and margin the bar sets while the keyboard is up. */
     style?: string;

package/dist/molecules/Tabs.svelte

@@ -2,6 +2,12 @@
     import type { Snippet } from "svelte";
     import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
+    import {
+        afterFrame,
+        measureIndicator,
+        observeSizes,
+        type IndicatorBox,
+    } from "../util/sliding-indicator.js";
 
     interface Props {
         /** Extra classes for the host element. */
@@ -140,6 +146,50 @@
         return () => observer.disconnect();
     });
 
+    /**
+     * The sliding indicator: the underline, or the pill. Until a box has been
+     * measured (on the server, before hydration, with no layout) it is null and
+     * the selected tab draws its own mark; with a box, that mark moves to the
+     * indicator, which slides between tabs. It lives in the scrolling list and
+     * is placed against the list's content, so it stays on its tab as the list
+     * scrolls.
+     */
+    let indicator = $state<IndicatorBox | null>(null);
+    /** Off for the first placement, so the indicator appears in place and does not fly in. */
+    let indicatorMotion = $state(false);
+
+    function measure() {
+        const tab = tabElements[activeTab];
+        indicator = listElement && tab ? measureIndicator(listElement, tab) : null;
+    }
+
+    $effect(() => {
+        void [tabs, activeTab, variant, fullWidth, listElement];
+        measure();
+    });
+
+    // The tabs resize with a loaded font, zoomed text or a wider row.
+    $effect(() => {
+        const list = listElement;
+        void tabs.length;
+        if (!list) return;
+        return observeSizes([list, ...Object.values(tabElements)], measure);
+    });
+
+    $effect(() => {
+        if (!indicator || indicatorMotion) return;
+        return afterFrame(() => (indicatorMotion = true));
+    });
+
+    /** The underline is the bottom 2px of the tab's box; the pill is all of it. */
+    const indicatorStyle = $derived.by(() => {
+        if (!indicator) return "";
+        const { x, y, width, height } = indicator;
+        const line = variant === "pills" ? height : 2;
+        const top = variant === "pills" ? y : y + height - 2;
+        return `transform: translate(${x}px, ${top}px); width: ${width}px; height: ${line}px;`;
+    });
+
     /**
      * Arrow keys and Tab move focus to a tab that may be out of view. Keyboard
      * focus only: a press focuses the tab on the way down, and moving the list
@@ -211,7 +261,7 @@
     }
 
     const TAB_BASE =
-        "focus-ring cursor-pointer border-b-2 px-4 py-2 pointer-coarse:min-h-11 text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed";
+        "focus-ring relative cursor-pointer border-b-2 px-4 py-2 pointer-coarse:min-h-11 text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed";
     // A tab keeps its width and the list scrolls; sharing the row, it may shrink and its label wrap.
     const TAB_NATURAL = "shrink-0 whitespace-nowrap";
     // `min-w-min` is the tab's longest word: a label wraps between words, never
@@ -231,9 +281,20 @@
     const TAB_SELECTED_PILL =
         "border-brand-500 bg-action-primary-subtle text-link active:bg-action-primary-subtle-active";
 
+    // With the indicator the tab keeps its label colour and its pressed fill
+    // only. Forced colours drop backgrounds, so the underline of the tab itself
+    // stays there and the indicator is hidden.
+    const TAB_SELECTED_MOVED =
+        "border-brand-500 not-forced-colors:border-transparent text-body active:bg-surface-active";
+    const TAB_SELECTED_PILL_MOVED =
+        "border-brand-500 not-forced-colors:border-transparent text-link active:bg-action-primary-subtle-active";
+
     function tabClasses(tabId: string): string {
         const base = `${TAB_BASE} ${fullWidth ? TAB_SHARED : TAB_NATURAL}`;
         if (activeTab !== tabId) return `${base} ${TAB_IDLE}`;
+        if (indicator) {
+            return `${base} ${variant === "pills" ? TAB_SELECTED_PILL_MOVED : TAB_SELECTED_MOVED}`;
+        }
         return `${base} ${variant === "pills" ? TAB_SELECTED_PILL : TAB_SELECTED}`;
     }
 </script>
@@ -253,7 +314,7 @@
     <!-- `tabindex="-1"`: a scrolling box is otherwise a Tab stop of its own. -->
     <div
         bind:this={listElement}
-        class="tabs-list flex"
+        class="tabs-list relative flex"
         role="presentation"
         tabindex="-1"
         data-fade-left={fadeLeft ? "" : undefined}
@@ -261,6 +322,22 @@
         onfocusin={handleFocusIn}
         onscroll={updateFades}
     >
+        {#if indicator}
+            <!-- Under the tabs (they are positioned and come later), and never in their way. -->
+            <span
+                class={cn(
+                    "pointer-events-none absolute top-0 left-0 forced-colors:hidden",
+                    variant === "pills" ? "bg-action-primary-subtle border-b-2 border-brand-500" : "bg-brand-500",
+                    // The underline must not overshoot; the pill may spring.
+                    indicatorMotion &&
+                        "transition-[transform,width,height] duration-(--duration-moderate) motion-reduce:transition-none",
+                    indicatorMotion && (variant === "pills" ? "ease-spring" : "ease-standard"),
+                )}
+                aria-hidden="true"
+                data-indicator={variant}
+                style={indicatorStyle}
+            ></span>
+        {/if}
         {#each tabs as tab (tab.id)}
             <button
                 bind:this={tabElements[tab.id]}