@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/navigation/Tabs.d.ts

@@ -0,0 +1,113 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ElementType, type ReactElement, type ReactNode, type RefAttributes } from "react";
+import { Orientation } from "../theme/enums.js";
+/** Mode (Constitution V-A local mode set: Tabs UNDERLINE / PILL; declared in scripts/lint-dls.ts MODE_SETS). */
+export declare enum TabsVariant {
+    /** Tabs on a hairline; the selected tab has a `text.primary` indicator on the edge facing the panel. The default. */
+    UNDERLINE = "UNDERLINE",
+    /** No hairline; the selected tab is a filled pill. For a second level of tabs. */
+    PILL = "PILL"
+}
+/**
+ * Canonical rungs, subset: the label and icon size, and the tab height. `PILL` tabs and vertical
+ * tabs are one rung tall (24 / 32 / 36px); a horizontal `UNDERLINE` row is taller (at least
+ * 32 / 40 / 44px) so the label has room above the indicator.
+ */
+export declare enum TabsSize {
+    /** body_sm labels, 12px icons; 24px tabs (a 32px `UNDERLINE` row). Dense panels and cards. */
+    SMALL = "SMALL",
+    /** body_md labels, 14px icons; 32px tabs (a 40px `UNDERLINE` row). The default. */
+    MEDIUM = "MEDIUM",
+    /** body_lg labels, 14px icons; 36px tabs (a 44px `UNDERLINE` row). Page headers. */
+    LARGE = "LARGE"
+}
+/** Fields shared by panel tabs and link tabs. */
+interface TabItemBase<TId extends string = string> {
+    /** Identifies the tab; `value` and `onChange` use it. Unique within `items`. */
+    id: TId;
+    /** Visible tab text, one short word or two. Also the overflow menu row's label. */
+    label: string;
+    /** Phosphor icon component (`GitBranchIcon`, not `<GitBranchIcon />`), before the label. */
+    icon?: PhosphorIcon;
+    /** Number after the label, as a count `Chip` (0 or less is hidden; above 99 shows "99+"). */
+    count?: number;
+    /** The tab cannot be selected; arrow keys skip it. */
+    isDisabled?: boolean;
+}
+/** A tab that shows a panel under (or beside) the tab list. */
+export interface TabItem<TId extends string = string> extends TabItemBase<TId> {
+    /** Content shown while this tab is selected, inside a `role="tabpanel"`. Omit it when the app renders the view itself. */
+    panel?: ReactNode;
+    /** Panel tabs never navigate. */
+    href?: undefined;
+}
+/** A tab that is a link: the router shows the page; Tabs only marks the current one. */
+export interface TabLinkItem<TId extends string = string> extends TabItemBase<TId> {
+    /** Destination, rendered through `as`. */
+    href: string;
+    /** Link tabs have no panel. */
+    panel?: undefined;
+}
+export interface TabsProps<TId extends string = string> extends AriaAttributes {
+    /** The tabs, in order. Either all panel tabs (`panel`, optional) or all link tabs (`href`). */
+    items: TabItem<TId>[] | TabLinkItem<TId>[];
+    /** Controlled selection: the selected tab's `id`, or `null` for none. Pass it with `onChange`. For link tabs, the tab of the current route. */
+    value?: TId | null;
+    /**
+     * Initial selection while uncontrolled.
+     * @default the first enabled item's id
+     */
+    defaultValue?: TId | null;
+    /** Called with the tab's `id` when the user selects a different tab (click, arrow keys, Home / End, the overflow menu). Link tabs call it before navigating. */
+    onChange?: (value: TId) => void;
+    /**
+     * `UNDERLINE` for page-level sections; `PILL` for a second level inside a section or a card.
+     * @default TabsVariant.UNDERLINE
+     */
+    variant?: TabsVariant;
+    /**
+     * Tab rung: 24 / 32 / 36px tall, with matching type, icon and count sizes. A horizontal `UNDERLINE` row is at least 32 / 40 / 44px, and as tall as a flex row that stretches it.
+     * @default TabsSize.MEDIUM
+     */
+    size?: TabsSize;
+    /**
+     * `HORIZONTAL`: a row above the panel. `VERTICAL`: a column beside the panel (settings pages); never overflows.
+     * @default Orientation.HORIZONTAL
+     */
+    orientation?: Orientation;
+    /**
+     * Horizontal only: the row spans its parent and every tab takes an equal share; labels truncate instead of overflowing into a menu.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Controls at the end of the tab row (or the bottom of the column), outside the tablist, usually `Button`s one rung smaller. */
+    actions?: ReactNode;
+    /**
+     * Router link component that renders link tabs (`href`). It receives `href` and must forward its `ref`. Ignored for panel tabs.
+     * @default "a"
+     */
+    as?: ElementType;
+    /** Accessible name of the tablist (or of the `nav` for link tabs). Pass it unless a visible heading names the tabs (`aria-labelledby`). */
+    ariaLabel?: string;
+    /** DOM id of the tablist (or the `nav` for link tabs). */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the tablist (or the `nav` for link tabs). */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/**
+ * The public, generic call signature (`TId` inferred from `items`). Never called: it only types
+ * the default export. An arrow function rather than a type literal, so react-docgen-typescript
+ * reads the props for the Docs tab.
+ */
+declare const TABS_SIGNATURE: <TId extends string = string>(_props: TabsProps<TId> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+/**
+ * Tabs that switch between peer views of one place; the value is the selected tab's id. A
+ * horizontal row centers its labels on the height it gets and keeps the `UNDERLINE` indicator on
+ * its bottom edge, so in a stretching header row the labels line up with the row's other content.
+ */
+declare const Tabs: typeof TABS_SIGNATURE;
+export default Tabs;

package/dist/navigation/Tabs.js

@@ -0,0 +1,543 @@
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { Orientation, Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Chip, { ChipSize, ChipVariant } from "../chips/Chip.js";
+import Menu, { MenuItem, MenuSize } from "../menu/Menu.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { CaretDownIcon } from "@phosphor-icons/react";
+//#region src/navigation/Tabs.tsx
+/**
+* Switches between peer views of one place: Canvas / History / Settings of a pipeline, Overview /
+* Logs of a run. A row (or a column) of labelled tabs marks the selected one and either renders
+* the selected item's `panel` beside it or, when the items are links (`href` + a router `as`),
+* navigates. Each tab can show an icon and a count `Chip`. `UNDERLINE` is the page-level mode (a
+* hairline with a `text.primary` indicator under the selected tab); `PILL` is a quieter second level (the
+* selected tab is a filled pill). Horizontal tabs that do not fit collapse into a "More" menu at
+* the end of the row, so the row never wraps or scrolls.
+*
+* Height: a horizontal row takes the height it is given. Alone it is its rung tall; stretched by
+* a taller flex row (the default `align-items: stretch`, e.g. a 48px app header) it fills that
+* height, centers its labels, icons, counts, "More" and `actions` on it (so they line up with the
+* other centered content in the row) and draws the `UNDERLINE` hairline and indicator on the
+* row's bottom edge. In an `align-items: center` row it keeps its own height. No prop, no context.
+*
+* Panel tabs follow the WAI-ARIA tabs pattern (one tab stop, arrows move and select); link tabs
+* are a `nav` of links with `aria-current="page"`. Not a segmented control (`ToggleInput`), not
+* site navigation (`SidebarNav`), not a progress sequence (`Stepper`).
+*
+* SSR: every tab renders on the server (clipped while unmeasured); measurement and the
+* `ResizeObserver` start in an effect. Nothing touches `window` or `document` at module scope.
+*/
+/** Mode (Constitution V-A local mode set: Tabs UNDERLINE / PILL; declared in scripts/lint-dls.ts MODE_SETS). */
+var TabsVariant = /* @__PURE__ */ function(TabsVariant) {
+	/** Tabs on a hairline; the selected tab has a `text.primary` indicator on the edge facing the panel. The default. */
+	TabsVariant["UNDERLINE"] = "UNDERLINE";
+	/** No hairline; the selected tab is a filled pill. For a second level of tabs. */
+	TabsVariant["PILL"] = "PILL";
+	return TabsVariant;
+}({});
+/**
+* Canonical rungs, subset: the label and icon size, and the tab height. `PILL` tabs and vertical
+* tabs are one rung tall (24 / 32 / 36px); a horizontal `UNDERLINE` row is taller (at least
+* 32 / 40 / 44px) so the label has room above the indicator.
+*/
+var TabsSize = /* @__PURE__ */ function(TabsSize) {
+	/** body_sm labels, 12px icons; 24px tabs (a 32px `UNDERLINE` row). Dense panels and cards. */
+	TabsSize["SMALL"] = "SMALL";
+	/** body_md labels, 14px icons; 32px tabs (a 40px `UNDERLINE` row). The default. */
+	TabsSize["MEDIUM"] = "MEDIUM";
+	/** body_lg labels, 14px icons; 36px tabs (a 44px `UNDERLINE` row). Page headers. */
+	TabsSize["LARGE"] = "LARGE";
+	return TabsSize;
+}({});
+/** The hairline width; written out because the bar draws one edge only. */
+/** Sub-pixel slack when comparing measured widths. */
+var FIT_EPSILON_PX = .5;
+/** The root block: bar, then panel (a horizontal bar with no panel fills the root's height). */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Tabs-r1fvk33l",
+	propsAsIs: false
+});
+/** Holds the tab list (or nav), the overflow trigger and `actions` in one line. */
+var Bar = /*#__PURE__*/ styled("div")({
+	name: "Bar",
+	class: "gx-Tabs-Bar-b18rczus",
+	propsAsIs: false
+});
+/** The link tabs' landmark. */
+var Nav = /*#__PURE__*/ styled("nav")({
+	name: "Nav",
+	class: "gx-Tabs-Nav-n1mwnohx",
+	propsAsIs: false
+});
+/** The tablist (a `ul` inside `Nav` for link tabs). */
+var List = /*#__PURE__*/ styled("div")({
+	name: "List",
+	class: "gx-Tabs-List-lr7z9la",
+	propsAsIs: false
+});
+/** A link tab's list item. */
+var ListItem = /*#__PURE__*/ styled("li")({
+	name: "ListItem",
+	class: "gx-Tabs-ListItem-l352qes",
+	propsAsIs: false
+});
+/** One tab: a `button role="tab"`, or the router link / `a` for link tabs. */
+var Tab = /*#__PURE__*/ styled("button")({
+	name: "Tab",
+	class: "gx-Tabs-Tab-t1ynoa32",
+	propsAsIs: false
+});
+/** Controls after the tabs (or under the column). */
+var Actions = /*#__PURE__*/ styled("div")({
+	name: "Actions",
+	class: "gx-Tabs-Actions-a1ecacuu",
+	propsAsIs: false
+});
+/** The selected panel tab's content. */
+var Panel = /*#__PURE__*/ styled("div")({
+	name: "Panel",
+	class: "gx-Tabs-Panel-p1hrazk9",
+	propsAsIs: false
+});
+var TABS_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o1r67x9f",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o2dkvh9"
+};
+/** Horizontal `fillWidth`: the row spans its parent and every tab takes an equal share. */
+var FILL_WIDTH_CSS = "gx-Tabs-FILL_WIDTH_CSS-fs6iug3";
+var TABS_ORIENTATION_TO_BAR_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-ovxftzj",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-oduyhd6"
+};
+/**
+* The hairline on the edge facing the panel (`UNDERLINE` only). A horizontal row draws it as an
+* overlay on its bottom edge (a border, so it lands on a whole device pixel inside the row) and
+* the selected tab's 2px indicator covers it; neither takes layout space. The tabs and the "More"
+* trigger stretch to the row's height (at least the `UNDERLINE` row height) with the label
+* centered on the full height, so the row can stretch with its parent; `actions` center too.
+*/
+var TABS_VARIANT_TO_BAR_CSS_MAP = {
+	["UNDERLINE"]: {
+		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-oux4b2d",
+		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o6lhzlg"
+	},
+	["PILL"]: {
+		[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-otj50wv",
+		[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o1wa4rz3"
+	}
+};
+var TABS_ORIENTATION_TO_LIST_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o19ax5w1",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o6on29c"
+};
+/** While unmeasured (server, first paint, after items change): every tab renders, clipped. */
+var MEASURING_CSS = "gx-Tabs-MEASURING_CSS-m1cleozi";
+/** The overflow trigger copy that is only measured. */
+var MEASURING_TRIGGER_CSS = "gx-Tabs-MEASURING_TRIGGER_CSS-mfzxznm";
+/**
+* Height, padding and icon-label gap per rung (custom properties on `Bar`). `--gx-tabs-row-height`
+* is the horizontal `UNDERLINE` row's minimum: the label centered with 8 / 12 / 12px above and
+* below it, the 2px indicator drawn over the bottom of that space.
+*/
+var TABS_SIZE_TO_CSS_MAP = {
+	["SMALL"]: "gx-Tabs-SMALL-s10e4gpz",
+	["MEDIUM"]: "gx-Tabs-MEDIUM-m1k4ei2n",
+	["LARGE"]: "gx-Tabs-LARGE-l1fu2ke2"
+};
+/** Shape per mode (every tab and the overflow trigger). */
+var TABS_VARIANT_TO_TAB_CSS_MAP = {
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-u1q90ijz",
+	["PILL"]: "gx-Tabs-PILL-p1xzvabb"
+};
+/** Hover and press on an enabled, unselected tab (and the overflow trigger). */
+var TABS_VARIANT_TO_INTERACTIVE_CSS_MAP = {
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-uxgth9d",
+	["PILL"]: "gx-Tabs-PILL-p15kodi3"
+};
+var TABS_VARIANT_TO_SELECTED_CSS_MAP = {
+	["UNDERLINE"]: "gx-Tabs-UNDERLINE-uhu3rsh",
+	["PILL"]: "gx-Tabs-PILL-p1nmauec"
+};
+/** The `UNDERLINE` indicator's edge: always the one facing the panel, over the bar hairline. */
+var TABS_ORIENTATION_TO_INDICATOR_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-Tabs-Orientation_HORIZONTAL-o14ug43i",
+	[Orientation.VERTICAL]: "gx-Tabs-Orientation_VERTICAL-o1qvds3x"
+};
+var TAB_DISABLED_CSS = "gx-Tabs-TAB_DISABLED_CSS-ta8x8b6";
+/** Tab icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
+var TABS_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14
+};
+/** The "More" caret: 12px, 10px on the 24px rung (the collapsible Widget's caret). */
+var TABS_SIZE_TO_CARET_PX_MAP = {
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 12
+};
+var TABS_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG
+};
+var TABS_SIZE_TO_CHIP_SIZE_MAP = {
+	["SMALL"]: ChipSize.X_SMALL,
+	["MEDIUM"]: ChipSize.SMALL,
+	["LARGE"]: ChipSize.SMALL
+};
+var TABS_SIZE_TO_MENU_SIZE_MAP = {
+	["SMALL"]: MenuSize.SMALL,
+	["MEDIUM"]: MenuSize.MEDIUM,
+	["LARGE"]: MenuSize.MEDIUM
+};
+/** "More" + caret: looks like one more tab, but is a plain button outside the tablist. */
+var OverflowTrigger = forwardRef(function OverflowTrigger({ size, variant, className, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs(Tab, {
+		type: "button",
+		"aria-label": "More tabs",
+		...rest,
+		ref,
+		className: cx(TABS_VARIANT_TO_TAB_CSS_MAP[variant], TABS_VARIANT_TO_INTERACTIVE_CSS_MAP[variant], className),
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: TABS_SIZE_TO_TEXT_SIZE_MAP[size],
+			weight: TextWeight.MEDIUM,
+			variant: TextVariant.INHERIT,
+			children: "More"
+		}), /* @__PURE__ */ jsx(Icon, {
+			component: CaretDownIcon,
+			size: TABS_SIZE_TO_CARET_PX_MAP[size],
+			variant: IconVariant.INHERIT
+		})]
+	});
+});
+OverflowTrigger.displayName = "TabsOverflowTrigger";
+/** The parts of `items` that change a tab's width, plus the rung and mode. */
+function measurementSignature(items, size, variant) {
+	return `${size}\u0001${variant}\u0001${items.map((item) => `${item.id}\u0000${item.label}\u0000${item.count ?? ""}\u0000${item.icon === void 0 ? 0 : 1}`).join("
")}`;
+}
+/** A CSS length in px, or 0. */
+function pxOf(value) {
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+/**
+* Indexes of the tabs shown in the row: the largest prefix that fits (plus the trigger when some
+* are hidden), with the selected tab pinned into the last slot when it would be hidden.
+*/
+function fitVisibleIndexes(count, selectedIndex, measurement, available) {
+	const { tabWidths, triggerWidth, listGap } = measurement;
+	const indexesFor = (k) => {
+		const prefix = Array.from({ length: k }, (_, index) => index);
+		if (selectedIndex < k || selectedIndex < 0) return prefix;
+		return [...prefix.slice(0, k - 1), selectedIndex];
+	};
+	const widthOf = (indexes) => indexes.reduce((sum, index) => sum + (tabWidths[index] ?? 0), 0) + Math.max(0, indexes.length - 1) * listGap;
+	if (widthOf(indexesFor(count)) <= available + FIT_EPSILON_PX) return indexesFor(count);
+	for (let k = count - 1; k > 1; k -= 1) {
+		const indexes = indexesFor(k);
+		if (widthOf(indexes) + listGap + triggerWidth <= available + FIT_EPSILON_PX) return indexes;
+	}
+	return indexesFor(Math.min(1, count));
+}
+/** Tabs and their panel; the value is the selected tab's id. */
+function TabsImpl(props, ref) {
+	const { items, value, defaultValue, onChange, variant = "UNDERLINE", size = "MEDIUM", orientation = Orientation.HORIZONTAL, fillWidth = false, actions, as, ariaLabel, id, className, style, ...rest } = props;
+	const list = items;
+	const isLinks = list.some((item) => item.href !== void 0);
+	const isHorizontal = orientation === Orientation.HORIZONTAL;
+	const isOverflowMode = isHorizontal && !fillWidth;
+	const firstEnabledId = list.find((item) => item.isDisabled !== true)?.id ?? null;
+	const handleChange = useCallback((next) => {
+		if (next !== null) onChange?.(next);
+	}, [onChange]);
+	const [selected, setSelected] = useControlledState({
+		value,
+		defaultValue: defaultValue === void 0 ? firstEnabledId : defaultValue,
+		onChange: handleChange
+	});
+	const selectedIndex = list.findIndex((item) => item.id === selected);
+	const selectedItem = selectedIndex >= 0 ? list[selectedIndex] : void 0;
+	const baseId = useId();
+	const tabId = (index) => `${baseId}-tab-${index}`;
+	const panelId = (index) => `${baseId}-panel-${index}`;
+	const barRef = useRef(null);
+	const listRef = useRef(null);
+	const actionsRef = useRef(null);
+	const measureTriggerRef = useRef(null);
+	const tabRefs = useRef(/* @__PURE__ */ new Map());
+	const signature = measurementSignature(list, size, variant);
+	const [measurement, setMeasurement] = useState(null);
+	const [available, setAvailable] = useState(null);
+	const isMeasuring = isOverflowMode && (measurement === null || measurement.signature !== signature);
+	const hasActions = actions !== void 0 && actions !== null && actions !== false;
+	/** The row's width for tabs and the trigger: the bar minus `actions` and its gap. */
+	const readAvailable = useCallback(() => {
+		const bar = barRef.current;
+		if (bar === null) return;
+		let width = bar.getBoundingClientRect().width;
+		const actionsElement = actionsRef.current;
+		if (actionsElement !== null) width -= actionsElement.getBoundingClientRect().width + pxOf(getComputedStyle(bar).columnGap);
+		setAvailable((current) => current === width ? current : width);
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		if (!isMeasuring) return;
+		const listElement = listRef.current;
+		setMeasurement({
+			signature,
+			tabWidths: list.map((item) => tabRefs.current.get(item.id)?.getBoundingClientRect().width ?? 0),
+			triggerWidth: measureTriggerRef.current?.getBoundingClientRect().width ?? 0,
+			listGap: listElement === null ? 0 : pxOf(getComputedStyle(listElement).columnGap)
+		});
+		readAvailable();
+	});
+	useEffect(() => {
+		if (!isOverflowMode) return;
+		const bar = barRef.current;
+		if (bar === null || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(readAvailable);
+		observer.observe(bar);
+		const actionsElement = hasActions ? actionsRef.current : null;
+		if (actionsElement !== null) observer.observe(actionsElement);
+		return () => observer.disconnect();
+	}, [
+		isOverflowMode,
+		hasActions,
+		readAvailable
+	]);
+	useEffect(() => {
+		if (!isOverflowMode) return;
+		let isCancelled = false;
+		document.fonts?.ready.then(() => {
+			if (!isCancelled) setMeasurement(null);
+		});
+		return () => {
+			isCancelled = true;
+		};
+	}, [isOverflowMode]);
+	const allIndexes = list.map((_, index) => index);
+	const visibleIndexes = !isOverflowMode || isMeasuring || measurement === null || available === null ? allIndexes : fitVisibleIndexes(list.length, selectedIndex, measurement, available);
+	const visibleSet = new Set(visibleIndexes);
+	const hiddenIndexes = isMeasuring ? [] : allIndexes.filter((index) => !visibleSet.has(index));
+	const isEnabled = (index) => list[index]?.isDisabled !== true;
+	const enabledVisible = visibleIndexes.filter(isEnabled);
+	const tabStopIndex = selectedIndex >= 0 && visibleSet.has(selectedIndex) && isEnabled(selectedIndex) ? selectedIndex : enabledVisible[0] ?? -1;
+	const pendingFocusId = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const pending = pendingFocusId.current;
+		if (pending === null) return;
+		const element = tabRefs.current.get(pending);
+		if (element !== void 0) {
+			pendingFocusId.current = null;
+			queueMicrotask(() => {
+				if (element.isConnected) element.focus();
+			});
+		}
+	});
+	const select = (index) => {
+		const item = list[index];
+		if (item === void 0 || item.isDisabled === true) return;
+		if (item.id !== selected) setSelected(item.id);
+	};
+	/** Roving focus over the enabled visible tabs: arrows wrap, Home / End jump; focus selects. */
+	const handleKeyDown = (event) => {
+		if (isLinks || enabledVisible.length === 0) return;
+		let current = -1;
+		for (const index of visibleIndexes) {
+			const item = list[index];
+			if (item !== void 0 && tabRefs.current.get(item.id) === event.target) current = index;
+		}
+		if (current === -1) return;
+		const previousKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+		const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+		const position = enabledVisible.indexOf(current);
+		const order = visibleIndexes.indexOf(current);
+		let target;
+		switch (event.key) {
+			case nextKey:
+				target = position === -1 ? visibleIndexes.slice(order + 1).find(isEnabled) ?? enabledVisible[0] : enabledVisible[(position + 1) % enabledVisible.length];
+				break;
+			case previousKey:
+				target = position === -1 ? visibleIndexes.slice(0, order).reverse().find(isEnabled) ?? enabledVisible[enabledVisible.length - 1] : enabledVisible[(position - 1 + enabledVisible.length) % enabledVisible.length];
+				break;
+			case "Home":
+				target = enabledVisible[0];
+				break;
+			case "End":
+				target = enabledVisible[enabledVisible.length - 1];
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		const item = target === void 0 ? void 0 : list[target];
+		if (target === void 0 || item === void 0) return;
+		tabRefs.current.get(item.id)?.focus();
+		select(target);
+	};
+	const setTabRef = (itemId) => (element) => {
+		if (element === null) tabRefs.current.delete(itemId);
+		else tabRefs.current.set(itemId, element);
+	};
+	const renderTab = (index) => {
+		const item = list[index];
+		if (item === void 0) return null;
+		const isSelected = index === selectedIndex;
+		const isItemDisabled = item.isDisabled === true;
+		const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			item.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+				component: item.icon,
+				size: TABS_SIZE_TO_ICON_PX_MAP[size],
+				variant: IconVariant.INHERIT
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: TABS_SIZE_TO_TEXT_SIZE_MAP[size],
+				weight: TextWeight.MEDIUM,
+				variant: TextVariant.INHERIT,
+				lineClamp: 1,
+				shouldTooltipOnOverflow: fillWidth && isHorizontal,
+				children: item.label
+			}),
+			item.count !== void 0 && /* @__PURE__ */ jsx(Chip, {
+				count: item.count,
+				size: TABS_SIZE_TO_CHIP_SIZE_MAP[size],
+				variant: ChipVariant.SECONDARY
+			})
+		] });
+		const tabClassName = cx(TABS_VARIANT_TO_TAB_CSS_MAP[variant], !isSelected && !isItemDisabled && TABS_VARIANT_TO_INTERACTIVE_CSS_MAP[variant], isSelected && TABS_VARIANT_TO_SELECTED_CSS_MAP[variant], isSelected && variant === "UNDERLINE" && TABS_ORIENTATION_TO_INDICATOR_CSS_MAP[orientation], isItemDisabled && TAB_DISABLED_CSS);
+		if (item.href !== void 0) return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Tab, {
+			...isItemDisabled ? {
+				as: "a",
+				role: "link",
+				"aria-disabled": true
+			} : {
+				as: as ?? "a",
+				href: item.href,
+				onClick: () => select(index)
+			},
+			ref: setTabRef(item.id),
+			id: tabId(index),
+			"aria-current": isSelected ? "page" : void 0,
+			className: tabClassName,
+			children: content
+		}) }, item.id);
+		return /* @__PURE__ */ jsx(Tab, {
+			ref: setTabRef(item.id),
+			type: "button",
+			role: "tab",
+			id: tabId(index),
+			"aria-selected": isSelected,
+			"aria-controls": isSelected && item.panel !== void 0 ? panelId(index) : void 0,
+			"aria-disabled": isItemDisabled || void 0,
+			tabIndex: index === tabStopIndex ? 0 : -1,
+			onClick: () => select(index),
+			className: tabClassName,
+			children: content
+		}, item.id);
+	};
+	const listClassName = cx(TABS_ORIENTATION_TO_LIST_CSS_MAP[orientation], isMeasuring && MEASURING_CSS);
+	const name = ariaLabel || rest["aria-label"] || void 0;
+	const tabs = isLinks ? /* @__PURE__ */ jsx(Nav, {
+		...rest,
+		"aria-label": name,
+		id,
+		children: /* @__PURE__ */ jsx(List, {
+			as: "ul",
+			ref: listRef,
+			className: listClassName,
+			children: visibleIndexes.map(renderTab)
+		})
+	}) : /* @__PURE__ */ jsx(List, {
+		role: "tablist",
+		"aria-orientation": isHorizontal ? "horizontal" : "vertical",
+		...rest,
+		"aria-label": name,
+		id,
+		ref: listRef,
+		className: listClassName,
+		onKeyDown: handleKeyDown,
+		children: visibleIndexes.map(renderTab)
+	});
+	const selectedPanel = selectedItem !== void 0 && selectedItem.href === void 0 ? selectedItem.panel : void 0;
+	return /* @__PURE__ */ jsxs(Root, {
+		ref,
+		className: cx(TABS_ORIENTATION_TO_CSS_MAP[orientation], fillWidth && isHorizontal && FILL_WIDTH_CSS, className),
+		style,
+		children: [/* @__PURE__ */ jsxs(Bar, {
+			ref: barRef,
+			className: cx(TABS_SIZE_TO_CSS_MAP[size], TABS_VARIANT_TO_BAR_CSS_MAP[variant][orientation], TABS_ORIENTATION_TO_BAR_CSS_MAP[orientation]),
+			children: [
+				tabs,
+				isMeasuring && /* @__PURE__ */ jsx(OverflowTrigger, {
+					ref: measureTriggerRef,
+					size,
+					variant,
+					tabIndex: -1,
+					"aria-hidden": true,
+					className: MEASURING_TRIGGER_CSS
+				}),
+				hiddenIndexes.length > 0 && /* @__PURE__ */ jsx(Menu, {
+					trigger: /* @__PURE__ */ jsx(OverflowTrigger, {
+						size,
+						variant
+					}),
+					size: TABS_SIZE_TO_MENU_SIZE_MAP[size],
+					placement: Placement.BOTTOM_END,
+					children: hiddenIndexes.map((index) => {
+						const item = list[index];
+						if (item === void 0) return null;
+						const trailing = item.count !== void 0 && item.count > 0 ? /* @__PURE__ */ jsx(Chip, {
+							count: item.count,
+							size: ChipSize.X_SMALL,
+							variant: ChipVariant.SECONDARY
+						}) : void 0;
+						const target = item.href !== void 0 ? {
+							href: item.href,
+							as: as ?? "a",
+							onSelect: () => select(index)
+						} : { onSelect: () => {
+							pendingFocusId.current = item.id;
+							select(index);
+						} };
+						return /* @__PURE__ */ jsx(MenuItem, {
+							label: item.label,
+							...item.icon === void 0 ? {} : { icon: item.icon },
+							...trailing === void 0 ? {} : { trailing },
+							isDisabled: item.isDisabled === true,
+							...target
+						}, item.id);
+					})
+				}),
+				hasActions && /* @__PURE__ */ jsx(Actions, {
+					ref: actionsRef,
+					children: actions
+				})
+			]
+		}), selectedPanel !== void 0 && selectedIndex >= 0 && /* @__PURE__ */ jsx(Panel, {
+			role: "tabpanel",
+			id: panelId(selectedIndex),
+			"aria-labelledby": tabId(selectedIndex),
+			tabIndex: 0,
+			children: selectedPanel
+		})]
+	});
+}
+var TabsBase = forwardRef(TabsImpl);
+TabsBase.displayName = "Tabs";
+/**
+* Tabs that switch between peer views of one place; the value is the selected tab's id. A
+* horizontal row centers its labels on the height it gets and keeps the `UNDERLINE` indicator on
+* its bottom edge, so in a stretching header row the labels line up with the row's other content.
+*/
+var Tabs = TabsBase;
+//#endregion
+export { TabsSize, TabsVariant, Tabs as default };

package/dist/navigation/Topbar.d.ts

@@ -0,0 +1,20 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface TopbarProps extends AriaAttributes {
+    /** The main content, after `leading`: `Breadcrumbs` or the page title. It takes the remaining width and truncates. A string renders as a medium `body_md` `Text`. */
+    children?: ReactNode;
+    /** Content at the start: a sidebar toggle, a back `Button`, a brand mark. Does not shrink. */
+    leading?: ReactNode;
+    /** Controls at the end: search, `Button`s, the account `Avatar`. Use `SMALL` controls. Does not shrink. */
+    actions?: ReactNode;
+    /** DOM id on the root `<header>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<header>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<header>`. */
+    className?: string;
+    /** Inline style on the root `<header>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The page bar: `leading`, the title or breadcrumbs, and `actions` at the end. */
+declare const Topbar: import("react").ForwardRefExoticComponent<TopbarProps & import("react").RefAttributes<HTMLElement>>;
+export default Topbar;