teksilo_widgets/styles/

recipe_tab_style.rs

// SPDX-License-Identifier: MPL-2.0
// SPDX-FileCopyrightText: 2026 FernTech

//! Default `TabStyle` impl driven by paint-recipe data.
//!
//! `RecipeTabStyle` ships the IntUI editor-tab look: an accent
//! indicator on the active tab's outside edge (top for horizontal
//! bars, leading for vertical bars), plus a keyboard focus ring
//! inset from the tab's bounds.
//!
//! The tab's own per-state background (selected / hover / idle,
//! controlled by `TabBar::tab_background` and the per-state overrides)
//! is painted by the surrounding `TabHeader` as separate RectWidget
//! siblings — the trait config doesn't carry the tab-surface roles
//! through the cfg, and pulling them through every consumer would be
//! more disruptive than letting the widget keep those rects.
//!
//! `TabStyle` carries two methods. `make_body` wraps a single tab
//! header: a leaf `TabBodyPainter` (accent indicator + focus ring)
//! sits behind the label / leading / trailing slot composition in a
//! `ZStack`. `make_bar` wraps the whole strip: a `TabBarChrome`
//! container stacks an optional backdrop `RectWidget`, a
//! `TabBarChromePainter` leaf (content-pane separator +
//! drag-reorder drop indicator), and the bar content — sizing to the
//! content under the real proposal so its inner `Expand` fills the
//! bar. Neither painter has an intrinsic size; each fills the bounds
//! its parent hands it.

use teksilo_canvas::{Canvas, Rect, SizeProposal};
use teksilo_core::accessibility::AccessNodeBuilder;
use teksilo_core::binding::BindingLevel;
use teksilo_core::build_context::BuildContext;
use teksilo_core::signal::Signal;
use teksilo_core::styles::{
    FocusRingStroke, SharedTabStyle, TabBarChromeConfig, TabBarOrientation, TabIndicatorPosition,
    TabStyle, TabStyleConfig,
};
use teksilo_core::widget::{LayoutContext, LayoutResponse, PaintContext, Widget, WidgetPlacement};
use teksilo_core::widget_id::WidgetId;
use teksilo_tokens::{CornerRadius, InputTokens, TargetRole};

use crate::primitives::{HStack, RectWidget, ZStack};
use teksilo_core::styles::density::{dp, spacing};

// IntUI design tokens for Tab. The recipe and parent TabHeader own
// their own dimensions.
pub const TAB_EDITOR_HEIGHT: f32 = 50.0;
pub const TAB_PADDING_HORIZONTAL: f32 = 12.0;
pub const TAB_UNDERLINE_ACTIVE: f32 = 2.0;
pub const TAB_UNDERLINE_HOVER: f32 = 2.0;
pub const TAB_CLOSE_BUTTON_SIZE: f32 = 16.0;
/// Thickness of the drag-reorder drop-indicator line.
const DROP_INDICATOR_WIDTH: f32 = 2.0;

/// Dimension recipe for [`RecipeTabStyle`].
///
/// All fields default to the corresponding `TAB_*` constants so that
/// [`RecipeTabStyle::default()`] reproduces the built-in IntUI look.
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct TabRecipe {
    /// The outer height of one tab header: the strip height of a horizontal
    /// bar, the pill height of a vertical one. Read through
    /// [`TabStyle::editor_height`].
    pub editor_height: f32,
    /// The gap between a tab header's edges and its content along the bar's
    /// main axis. Read through [`TabStyle::padding_horizontal`].
    pub padding_horizontal: f32,
    pub underline_active: f32,
    pub underline_hover: f32,
    pub close_button_size: f32,
}

impl TabRecipe {
    /// This recipe's dimensions resolved against a density's [`InputTokens`].
    ///
    /// [`Default`] is `for_tokens(&InputTokens::default())` — the Compact
    /// ladder — so the shipped values below are the Compact column by
    /// construction and cannot drift from it.
    pub fn for_tokens(tokens: &InputTokens) -> Self {
        Self {
            editor_height: dp(TAB_EDITOR_HEIGHT, TargetRole::Target, tokens),
            padding_horizontal: spacing(TAB_PADDING_HORIZONTAL, tokens),
            underline_active: TAB_UNDERLINE_ACTIVE,
            underline_hover: TAB_UNDERLINE_HOVER,
            close_button_size: TAB_CLOSE_BUTTON_SIZE,
        }
    }
}

impl Default for TabRecipe {
    fn default() -> Self {
        Self::for_tokens(&InputTokens::default())
    }
}

/// Default `TabStyle` shipped with Teksilo.
#[derive(Debug, Default, Clone, Copy)]
pub struct RecipeTabStyle {
    pub recipe: TabRecipe,
}

impl RecipeTabStyle {
    pub fn new(recipe: TabRecipe) -> Self {
        Self { recipe }
    }

    /// This style with every dimension resolved against a density's
    /// [`InputTokens`], as `RecipeTabStyle::for_tokens(&ctx.theme().input)` at
    /// the widget's own build site.
    ///
    /// [`Default`] is the `TargetDensity::Compact` projection, so a Compact
    /// tree gets exactly the values this module documents.
    pub fn for_tokens(tokens: &InputTokens) -> Self {
        Self {
            recipe: TabRecipe::for_tokens(tokens),
        }
    }
}

impl TabStyle for RecipeTabStyle {
    fn make_body(&self, cfg: &TabStyleConfig, ctx: &mut BuildContext) -> WidgetId {
        // Leaf painter for the chrome bits that live at the bounds
        // edges: accent indicator and focus ring.
        let painter = ctx.add(TabBodyPainter {
            is_active: cfg.is_active.clone(),
            is_focused: cfg.is_focused.clone(),
            is_disabled: cfg.is_disabled.clone(),
            orientation: cfg.orientation,
            indicator_position: cfg.indicator_position,
            recipe: self.recipe,
        });

        // Compose the slots. The widget today bundles everything into
        // `label` and passes None for leading/trailing — but custom
        // impls may use the three slots directly, so we honour them.
        let mut row = HStack::new();
        if let Some(id) = cfg.leading {
            row = row.child(id);
        }
        row = row.child(cfg.label);
        if let Some(id) = cfg.trailing {
            row = row.child(id);
        }
        let row_id = ctx.add(row);

        ctx.add(ZStack::new().child(painter).child(row_id))
    }

    fn make_bar(&self, cfg: &TabBarChromeConfig, ctx: &mut BuildContext) -> WidgetId {
        // Bar chrome z-order (back → front): optional backdrop fill,
        // the separator + drop-indicator leaf painter, then the bar
        // content. This mirrors the old `TabBar::paint` order, where
        // the widget painted backdrop/separator/indicator before its
        // children drew on top.
        //
        // A plain `ZStack` won't do here: it sizes itself by querying
        // children with an *unspecified* proposal, which collapses the
        // content's inner `Expand` to zero width. `TabBarChrome`
        // instead sizes to the content child under the *real*
        // proposal and places every layer at the full bar bounds.
        let painter = ctx.add(TabBarChromePainter {
            orientation: cfg.orientation,
            show_separator: cfg.show_separator,
            drop_indicator: cfg.drop_indicator.clone(),
        });

        let mut layers = Vec::with_capacity(3);
        if let Some(role) = &cfg.surface_role {
            // A `RectWidget` (not a painted fill in the leaf) so the
            // backdrop tracks `ColorProp` bindings — static role,
            // `Signal<Color>`, or `Signal<Role>` — correctly.
            let backdrop = ctx.add(RectWidget::new().background(role.clone()));
            layers.push(backdrop);
        }
        layers.push(painter);
        layers.push(cfg.content);

        ctx.add(TabBarChrome {
            layers,
            content: cfg.content,
        })
    }

    /// This style's own tab height, so a preset's header (macOS's 26 dp
    /// `NSTabView` strip, Fluent's 32 dp `TabViewItem`) is the one a bar lays
    /// out. `tokens` is unused: the recipe was already resolved against a
    /// density when the style was made (`for_tokens`, or a preset's own
    /// factory), and a second projection would apply the ladder twice.
    fn editor_height(&self, _tokens: &InputTokens) -> f32 {
        self.recipe.editor_height
    }

    /// This style's own header padding. See
    /// [`editor_height`](Self::editor_height) for why `tokens` is unused.
    fn padding_horizontal(&self, _tokens: &InputTokens) -> f32 {
        self.recipe.padding_horizontal
    }
}

/// The `TabStyle` a `TabBar` and its headers build against: the bar's
/// per-call `.style(..)` if it has one, else the theme-wide `style_slots.tab`
/// an app or a preset installed, else this module's default resolved against
/// the active density.
///
/// Shared by the bar and every header it hosts, so the strip height the bar
/// reserves and the height each header measures come from one style.
pub(crate) fn resolve_tab_style(
    style_override: Option<&SharedTabStyle>,
    ctx: &BuildContext,
) -> SharedTabStyle {
    style_override
        .cloned()
        .or_else(|| ctx.theme().style_slots.tab.clone())
        .unwrap_or_else(|| {
            std::rc::Rc::new(RecipeTabStyle::for_tokens(&ctx.theme().input)) as SharedTabStyle
        })
}

/// The tab height `style` declares at `tokens`, or the shipped recipe's when
/// no style has been resolved yet (a header measured before its first build).
pub(crate) fn tab_editor_height(style: Option<&SharedTabStyle>, tokens: &InputTokens) -> f32 {
    match style {
        Some(style) => style.editor_height(tokens),
        None => TabRecipe::for_tokens(tokens).editor_height,
    }
}

/// The header padding `style` declares at `tokens`, or the shipped recipe's
/// when no style has been resolved yet.
pub(crate) fn tab_padding_horizontal(style: Option<&SharedTabStyle>, tokens: &InputTokens) -> f32 {
    match style {
        Some(style) => style.padding_horizontal(tokens),
        None => TabRecipe::for_tokens(tokens).padding_horizontal,
    }
}

/// Bar-chrome container produced by [`RecipeTabStyle::make_bar`].
/// Stacks the backdrop / chrome-painter / content layers at the full
/// bar bounds, but — unlike `ZStack` — sizes itself to the content
/// child under the real layout proposal so the content's inner
/// `Expand` fills the bar instead of collapsing to zero.
#[derive(Debug)]
struct TabBarChrome {
    /// Back-to-front: `[backdrop?, painter, content]`.
    layers: Vec<WidgetId>,
    /// The layer that drives the bar's size.
    content: WidgetId,
}

impl Widget for TabBarChrome {
    fn build(&mut self, _ctx: &mut BuildContext) -> Vec<WidgetId> {
        self.layers.clone()
    }

    fn layout_response(&self, proposal: SizeProposal, ctx: &LayoutContext) -> LayoutResponse {
        ctx.child_size(self.content, proposal)
            .unwrap_or_else(|| proposal.resolve(0.0, 0.0))
            .into()
    }

    fn place_children(
        &self,
        bounds: Rect,
        _proposal: SizeProposal,
        children: &mut [WidgetPlacement],
        _ctx: &LayoutContext,
    ) {
        for child in children.iter_mut() {
            child.origin = bounds.origin();
            child.size = bounds.size();
        }
    }

    fn accessibility(&self, builder: &mut AccessNodeBuilder) {
        builder.set_role(teksilo_core::accesskit::Role::GenericContainer);
    }

    fn children(&self) -> Vec<WidgetId> {
        self.layers.clone()
    }
}

/// Internal leaf widget that paints the bar-level chrome at the
/// strip's bounds: the content-pane separator and the drag-reorder
/// drop indicator. The backdrop fill is a sibling `RectWidget`, not
/// painted here, so `ColorProp` bindings resolve correctly.
struct TabBarChromePainter {
    orientation: TabBarOrientation,
    show_separator: bool,
    drop_indicator: Signal<Option<f32>>,
}

impl std::fmt::Debug for TabBarChromePainter {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("TabBarChromePainter")
            .field("orientation", &self.orientation)
            .field("show_separator", &self.show_separator)
            .finish()
    }
}

impl Widget for TabBarChromePainter {
    fn build(&mut self, ctx: &mut BuildContext) -> Vec<WidgetId> {
        self.drop_indicator.bind_to(
            ctx.self_id(),
            ctx.binding_registry(),
            BindingLevel::RepaintOnly,
        );
        vec![]
    }

    fn layout_response(&self, proposal: SizeProposal, _ctx: &LayoutContext) -> LayoutResponse {
        // Leaf painter — no intrinsic size, so accept whatever the
        // parent proposes. ZStack/TabBarChrome propose the full bar
        // bounds, then use the returned size as the placement. If we
        // returned ZERO here, the painter would be placed at zero
        // bounds and the separator + drop indicator would never show.
        proposal.resolve(0.0, 0.0).into()
    }

    fn place_children(
        &self,
        _bounds: Rect,
        _proposal: SizeProposal,
        _children: &mut [WidgetPlacement],
        _ctx: &LayoutContext,
    ) {
    }

    fn paint(&self, bounds: Rect, canvas: &mut Canvas, ctx: &PaintContext) {
        if self.show_separator {
            // 1 dp separator: bottom in horizontal mode, trailing
            // edge (right) in vertical mode. Painted *inside* the
            // focus-ring envelope reserved by each header so the
            // selected header's `surface_content` fill overpaints
            // the separator in its own column (the "tab merges into
            // content pane" effect).
            let border_width = ctx.theme.shape.border_width;
            let envelope = ctx.theme.shape.focus_ring_envelope();
            let separator = match self.orientation {
                TabBarOrientation::Horizontal => Rect::new(
                    bounds.x,
                    (bounds.bottom() - envelope - border_width).max(bounds.y),
                    bounds.width,
                    border_width,
                ),
                TabBarOrientation::Vertical => Rect::new(
                    (bounds.right() - envelope - border_width).max(bounds.x),
                    bounds.y,
                    border_width,
                    bounds.height,
                ),
            };
            canvas.fill_rect(separator, ctx.theme.colors.border);
        }

        // Drop indicator: a vertical accent-color line at the
        // would-be insertion x in horizontal mode, a horizontal line
        // at the insertion y in vertical mode. The position is the
        // layout-axis offset stored in bar-local coords by the bar's
        // `on_drag_hover` handler.
        if let Some(local_pos) = self.drop_indicator.get() {
            let indicator = match self.orientation {
                TabBarOrientation::Horizontal => {
                    let world_x = bounds.x + local_pos;
                    Rect::new(
                        (world_x - DROP_INDICATOR_WIDTH * 0.5).max(bounds.x),
                        bounds.y,
                        DROP_INDICATOR_WIDTH,
                        bounds.height,
                    )
                }
                TabBarOrientation::Vertical => {
                    let world_y = bounds.y + local_pos;
                    Rect::new(
                        bounds.x,
                        (world_y - DROP_INDICATOR_WIDTH * 0.5).max(bounds.y),
                        bounds.width,
                        DROP_INDICATOR_WIDTH,
                    )
                }
            };
            canvas.fill_rect(indicator, ctx.theme.colors.accent);
        }
    }

    fn accessibility(&self, builder: &mut AccessNodeBuilder) {
        // Presentational only — the parent TabBar carries Role::TabList.
        builder.set_hidden();
    }
}

/// Internal leaf widget that paints the per-state chrome bits at the
/// edges of the tab's bounds. Not exposed publicly because custom
/// `TabStyle` impls compose their own body.
struct TabBodyPainter {
    is_active: Signal<bool>,
    is_focused: Signal<bool>,
    is_disabled: Signal<bool>,
    orientation: TabBarOrientation,
    indicator_position: TabIndicatorPosition,
    recipe: TabRecipe,
}

impl std::fmt::Debug for TabBodyPainter {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("TabBodyPainter")
            .field("orientation", &self.orientation)
            .field("indicator_position", &self.indicator_position)
            .finish()
    }
}

impl TabBodyPainter {
    /// The active-tab highlight rect for a tab at `bounds`, given the bar
    /// orientation, the configured indicator edge, and the layout
    /// direction (for the RTL-dependent vertical edges).
    ///
    /// Horizontal: `OuterEdge` → top, `InnerEdge` → bottom (RTL-invariant).
    /// Vertical: `OuterEdge` → leading, `InnerEdge` → trailing — leading is
    /// the left edge in LTR and the right edge in RTL.
    fn indicator_rect(&self, bounds: Rect, thickness: f32, rtl: bool) -> Rect {
        match self.orientation {
            TabBarOrientation::Horizontal => match self.indicator_position {
                TabIndicatorPosition::OuterEdge => {
                    Rect::new(bounds.x, bounds.y, bounds.width, thickness)
                }
                TabIndicatorPosition::InnerEdge => Rect::new(
                    bounds.x,
                    bounds.bottom() - thickness,
                    bounds.width,
                    thickness,
                ),
            },
            TabBarOrientation::Vertical => {
                // Leading edge = left in LTR / right in RTL; trailing is the
                // opposite. OuterEdge hugs leading, InnerEdge hugs trailing.
                let on_left = match self.indicator_position {
                    TabIndicatorPosition::OuterEdge => !rtl,
                    TabIndicatorPosition::InnerEdge => rtl,
                };
                let x = if on_left {
                    bounds.x
                } else {
                    bounds.right() - thickness
                };
                Rect::new(x, bounds.y, thickness, bounds.height)
            }
        }
    }
}

impl Widget for TabBodyPainter {
    fn build(&mut self, ctx: &mut BuildContext) -> Vec<WidgetId> {
        let id = ctx.self_id();
        let registry = ctx.binding_registry();
        self.is_active
            .bind_to(id, registry, BindingLevel::RepaintOnly);
        self.is_focused
            .bind_to(id, registry, BindingLevel::RepaintOnly);
        self.is_disabled
            .bind_to(id, registry, BindingLevel::RepaintOnly);
        vec![]
    }

    fn layout_response(&self, proposal: SizeProposal, _ctx: &LayoutContext) -> LayoutResponse {
        // Leaf painter — no intrinsic size, so accept whatever the
        // parent ZStack proposes. ZStack proposes the full tab
        // bounds, then uses the returned size as the placement. If we
        // returned ZERO here, the painter would be placed at zero
        // bounds and both the accent indicator and the focus ring
        // would never show.
        proposal.resolve(0.0, 0.0).into()
    }

    fn place_children(
        &self,
        _bounds: Rect,
        _proposal: SizeProposal,
        _children: &mut [WidgetPlacement],
        _ctx: &LayoutContext,
    ) {
    }

    fn paint(&self, bounds: Rect, canvas: &mut Canvas, ctx: &PaintContext) {
        let colors = &ctx.theme.colors;
        let shape = &ctx.theme.shape;
        let active = self.is_active.get();
        let focused = self.is_focused.get();
        let disabled = self.is_disabled.get();

        // Accent indicator on the selected, enabled tab. The edge is
        // chosen by `indicator_position` (default `OuterEdge`):
        //   - Horizontal bar → TOP for OuterEdge (browser-tab look, the
        //     selected tab "merges" into the content panel below) or
        //     BOTTOM for InnerEdge (the indicator sits below the label).
        //   - Vertical bar → LEADING edge for OuterEdge (IDE perspective
        //     look) or TRAILING for InnerEdge. Leading/trailing follow the
        //     layout direction.
        let indicator_thickness = self.recipe.underline_active;
        if active && !disabled {
            let rtl = matches!(
                ctx.layout_direction,
                teksilo_core::environment::LayoutDirection::RightToLeft
            );
            let indicator = self.indicator_rect(bounds, indicator_thickness, rtl);
            canvas.fill_rect(indicator, colors.accent);
        }

        // Focus ring — keyboard focus only. Drawn inside `bounds`
        // (see `focus_ring_rect`) so adjacent tabs aren't visually
        // overlapped by the ring.
        if focused {
            canvas.stroke_rounded_rect(
                focus_ring_rect(bounds, shape),
                CornerRadius::uniform(shape.radius_control),
                colors.focus_ring,
                shape.focus_ring_width,
            );
        }
    }

    fn accessibility(&self, builder: &mut AccessNodeBuilder) {
        // The parent TabHeader carries the Role::Tab. This painter is
        // presentational only.
        builder.set_hidden();
    }
}

/// The centre line of a tab's focus ring: `bounds` inset by
/// `focus_ring_width / 2 + focus_ring_offset`.
///
/// Tabs sit flush against each other, so the ring never leaves `bounds`:
/// a negative `focus_ring_offset` brings it out to the tab's edge and no
/// further (the inset is floored at half the stroke), and the rectangle
/// never inverts on a tab narrower than the inset.
fn focus_ring_rect(bounds: Rect, shape: &teksilo_tokens::ShapeTokens) -> Rect {
    let half_stroke = shape.focus_ring_width * 0.5;
    let inset = (half_stroke + shape.focus_ring_offset).max(half_stroke);
    FocusRingStroke::at_distance(bounds, 0.0, -inset).rect
}

#[cfg(test)]
mod tests {
    use super::*;

    fn painter(
        orientation: TabBarOrientation,
        indicator_position: TabIndicatorPosition,
    ) -> TabBodyPainter {
        TabBodyPainter {
            is_active: Signal::new(true),
            is_focused: Signal::new(false),
            is_disabled: Signal::new(false),
            orientation,
            indicator_position,
            recipe: TabRecipe::default(),
        }
    }

    // 100×40 tab, 3 dp indicator.
    const B: Rect = Rect {
        x: 10.0,
        y: 20.0,
        width: 100.0,
        height: 40.0,
    };
    const T: f32 = TAB_UNDERLINE_ACTIVE;

    #[test]
    fn horizontal_outer_edge_is_top_and_rtl_invariant() {
        let p = painter(
            TabBarOrientation::Horizontal,
            TabIndicatorPosition::OuterEdge,
        );
        let expected = Rect::new(B.x, B.y, B.width, T);
        assert_eq!(p.indicator_rect(B, T, false), expected);
        assert_eq!(
            p.indicator_rect(B, T, true),
            expected,
            "top edge is RTL-invariant"
        );
    }

    #[test]
    fn horizontal_inner_edge_is_bottom() {
        let p = painter(
            TabBarOrientation::Horizontal,
            TabIndicatorPosition::InnerEdge,
        );
        let expected = Rect::new(B.x, B.bottom() - T, B.width, T);
        assert_eq!(p.indicator_rect(B, T, false), expected);
        assert_eq!(p.indicator_rect(B, T, true), expected);
    }

    #[test]
    fn vertical_outer_edge_is_leading() {
        let p = painter(TabBarOrientation::Vertical, TabIndicatorPosition::OuterEdge);
        // LTR leading = left, RTL leading = right.
        assert_eq!(
            p.indicator_rect(B, T, false),
            Rect::new(B.x, B.y, T, B.height)
        );
        assert_eq!(
            p.indicator_rect(B, T, true),
            Rect::new(B.right() - T, B.y, T, B.height)
        );
    }

    #[test]
    fn vertical_inner_edge_is_trailing() {
        let p = painter(TabBarOrientation::Vertical, TabIndicatorPosition::InnerEdge);
        // LTR trailing = right, RTL trailing = left.
        assert_eq!(
            p.indicator_rect(B, T, false),
            Rect::new(B.right() - T, B.y, T, B.height)
        );
        assert_eq!(
            p.indicator_rect(B, T, true),
            Rect::new(B.x, B.y, T, B.height)
        );
    }

    fn shape(offset: f32) -> teksilo_tokens::ShapeTokens {
        teksilo_tokens::ShapeTokens {
            focus_ring_offset: offset,
            focus_ring_width: 2.0,
            ..teksilo_tokens::ShapeTokens::default()
        }
    }

    #[test]
    fn the_focus_ring_follows_the_offset_inside_the_tab() {
        // Offset 2: 3 dp in from the tab edge.
        assert_eq!(
            focus_ring_rect(B, &shape(2.0)),
            Rect::new(13.0, 23.0, 94.0, 34.0)
        );
        // Offset 0: flush with the tab edge.
        assert_eq!(
            focus_ring_rect(B, &shape(0.0)),
            Rect::new(11.0, 21.0, 98.0, 38.0)
        );
    }

    #[test]
    fn a_negative_focus_ring_offset_keeps_the_ring_inside_the_tab() {
        for offset in [-1.0, -5.0, -100.0] {
            let ring = focus_ring_rect(B, &shape(offset));
            // Outer edge of the 2 dp stroke stays on or inside `bounds`.
            assert!(
                ring.x - 1.0 >= B.x && ring.y - 1.0 >= B.y,
                "{offset}: {ring:?}"
            );
            assert!(ring.right() + 1.0 <= B.right(), "{offset}: {ring:?}");
            assert!(ring.bottom() + 1.0 <= B.bottom(), "{offset}: {ring:?}");
        }
    }

    /// The clamp is deliberate: below zero the offset no longer moves a
    /// tab's ring, which stays flush with the tab edge rather than spilling
    /// into the neighbouring tab.
    #[test]
    fn every_offset_at_or_below_zero_draws_the_same_tab_ring() {
        let flush = focus_ring_rect(B, &shape(0.0));
        for offset in [-1.0, -5.0, -100.0] {
            assert_eq!(focus_ring_rect(B, &shape(offset)), flush, "{offset}");
        }
    }

    #[test]
    fn the_focus_ring_never_inverts_on_a_narrow_tab() {
        let narrow = Rect::new(0.0, 0.0, 4.0, 3.0);
        for offset in [-1.0, 2.0, 50.0] {
            let ring = focus_ring_rect(narrow, &shape(offset));
            assert!(
                ring.width >= 0.0 && ring.height >= 0.0,
                "{offset}: {ring:?}"
            );
        }
    }
}