From a064741adb3b93bbab6ab98b02f399759eb9f88d Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 13:04:18 +0800
Subject: [PATCH 01/14] feat(ui): tabs components

---
 packages/styles/dist/gitlab-ui.css          | 231 ++++++
 packages/styles/src/components.css          |   2 +
 packages/styles/src/tabs/bootstrap-tabs.css |  33 +
 packages/ui/src/base/tabs/tab.tsx           |  59 ++
 packages/ui/src/base/tabs/tabs.css          | 193 +++++
 packages/ui/src/base/tabs/tabs.stories.tsx  | 247 +++++++
 packages/ui/src/base/tabs/tabs.test.tsx     | 247 +++++++
 packages/ui/src/base/tabs/tabs.tsx          | 755 ++++++++++++++++++++
 packages/ui/src/index.ts                    |  20 +
 9 files changed, 1787 insertions(+)
 create mode 100644 packages/styles/src/tabs/bootstrap-tabs.css
 create mode 100644 packages/ui/src/base/tabs/tab.tsx
 create mode 100644 packages/ui/src/base/tabs/tabs.css
 create mode 100644 packages/ui/src/base/tabs/tabs.stories.tsx
 create mode 100644 packages/ui/src/base/tabs/tabs.test.tsx
 create mode 100644 packages/ui/src/base/tabs/tabs.tsx

diff --git a/packages/styles/dist/gitlab-ui.css b/packages/styles/dist/gitlab-ui.css
index 418043b..4bdd67c 100644
--- a/packages/styles/dist/gitlab-ui.css
+++ b/packages/styles/dist/gitlab-ui.css
@@ -3693,6 +3693,32 @@ textarea.gl-form-textarea {
     box-shadow: none;
   }
 }
+/*!
+ * Bootstrap navigation compatibility required by GlTabs.
+ *
+ * Ported from Bootstrap v4.6's _nav.scss as vendored by GitLab UI. Rules are
+ * scoped to the React component marker so unrelated consumer navigation is not
+ * affected.
+ */
+.gl-tabs .nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+.gl-tabs .nav-link {
+  display: block;
+  text-decoration: none;
+}
+.gl-tabs .nav-link:hover, .gl-tabs .nav-link:focus-visible {
+  text-decoration: none;
+}
+.gl-tabs .nav-justified > .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
 .gl-table-responsive {
   container-type: inline-size;
   display: block;
@@ -6505,6 +6531,211 @@ table.gl-table:is( .b-table-stacked, .b-table-stacked-sm, .b-table-stacked-md, .
 table.gl-table.table-borderless tr > :is(th, td) {
   border: 0;
 }
+.gl-tabs-wrapper {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: var(--gl-border-color-default);
+}
+.gl-tabs-nav {
+  flex-grow: 1;
+  min-width: 0;
+}
+.gl-tab-nav-item {
+  position: relative;
+  padding-inline: var(--gl-spacing-scale-4);
+  padding-block: var(--gl-spacing-scale-5);
+  --tw-leading: 1rem;
+  line-height: 1rem;
+  font-size: var(--gl-font-size-base);
+  display: flex;
+  justify-content: center;
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--gl-border-color-default);
+  height: 100%;
+  color: var(--gl-action-neutral-foreground-color-default);
+  background-color: var(--gl-action-neutral-background-color-default);
+  border-color: var(--gl-action-neutral-border-color-default);
+}
+.gl-tab-nav-item:hover {
+    color: var(--gl-action-neutral-foreground-color-hover);
+    background-color: var(--gl-action-neutral-background-color-hover);
+    border-color: var(--gl-action-neutral-border-color-hover);
+  }
+.gl-tab-nav-item:focus-visible {
+    color: var(--gl-action-neutral-foreground-color-focus);
+    background-color: var(--gl-action-neutral-background-color-focus);
+    border-color: var(--gl-action-neutral-border-color-focus);
+  }
+.gl-tab-nav-item:active {
+    color: var(--gl-action-neutral-foreground-color-active);
+    background-color: var(--gl-action-neutral-background-color-active);
+    border-color: var(--gl-action-neutral-border-color-active);
+  }
+.gl-tab-nav-item{
+  font-family: inherit;
+  text-align: inherit;
+  transition: box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.gl-tab-nav-item::before {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-bottom: 2px solid transparent;
+  content: "";
+  translate: 0 2px;
+  transition: border-bottom 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .gl-tab-nav-item, .gl-tab-nav-item::before {
+    transition-duration: 0.01ms;
+  }
+}
+.gl-tab-nav-item:hover:not(.gl-tab-nav-item-active)::before {
+  border-bottom-color: var(--gl-border-color-strong);
+  translate: 0;
+}
+.gl-tab-nav-item:focus-visible {
+  border-radius: var(--gl-border-radius-default);
+}
+.gl-tab-nav-item.disabled {
+  pointer-events: auto;
+  cursor: not-allowed;
+  color: var(--gl-action-disabled-foreground-color);
+}
+.gl-tab-nav-item.disabled:hover {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.gl-tab-nav-item > .gl-tab-counter-badge {
+  font-weight: inherit;
+  margin-left: var(--gl-spacing-scale-2);
+}
+.gl-tab-content {
+  padding-block: var(--gl-spacing-scale-3);
+  font-size: var(--gl-font-size-base);
+  --tw-leading: 1rem;
+  line-height: 1rem;
+  color: var(--gl-text-color-default);
+}
+.gl-tab-nav-item-active {
+  --tw-font-weight: var(--gl-font-weight-bold);
+  font-weight: var(--gl-font-weight-bold);
+  z-index: 1;
+}
+.gl-tab-nav-item-active:active, .gl-tab-nav-item-active:focus-visible, .gl-tab-nav-item-active:focus-visible:active {
+  box-shadow: inset 0 0 0 1px var(--gl-action-neutral-border-color-active), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color);
+  outline: none;
+}
+.gl-scrollable-tabs-nav .gl-tab-nav-item-active:active, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible:active {
+  box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color), inset 0 0 0 3px var(--gl-focus-ring-inner-color), inset 0 0 0 1px var(--gl-focus-ring-inner-color);
+}
+.gl-scrollable-tabs-nav .gl-tab-nav-item-active:active::before, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible::before, .gl-scrollable-tabs-nav .gl-tab-nav-item-active:focus-visible:active::before {
+  right: 3px;
+  bottom: 3px;
+  left: 3px;
+  border-radius: 0 0 1px 1px;
+}
+.gl-tab-nav-item-active:active::before, .gl-tab-nav-item-active:focus-visible::before, .gl-tab-nav-item-active:focus-visible:active::before {
+  right: 0;
+  left: 0;
+  border-radius: 0 0 2px 2px;
+}
+.gl-tab-nav-item-active::before {
+  border-bottom-color: var(--gl-tab-selected-indicator-color-default);
+  translate: 0;
+}
+.gl-tabs-before, .gl-tabs-after {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--gl-spacing-scale-3);
+}
+.gl-tabs-after {
+  justify-content: flex-end;
+}
+.gl-tab-actions {
+  order: -1;
+  margin-top: var(--gl-spacing-scale-3);
+  margin-bottom: var(--gl-spacing-scale-3);
+  display: flex;
+  width: 100%;
+  flex-grow: 0;
+  flex-direction: column;
+  gap: var(--gl-spacing-scale-3);
+}
+@media (min-width: 768px) {
+  .gl-tab-actions {
+    order: 0;
+    margin: var(--gl-spacing-scale-0);
+    width: auto;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+.gl-tabs-fade {
+  position: absolute;
+  top: var(--gl-spacing-scale-0);
+  bottom: var(--gl-spacing-scale-0);
+  z-index: var(--gl-zindex-2);
+  width: var(--gl-spacing-scale-8);
+  padding: var(--gl-spacing-scale-2);
+  display: flex;
+}
+.gl-tabs-fade-left {
+  left: var(--gl-spacing-scale-0);
+  background-image: linear-gradient( to left, rgba(255, 255, 255, 0), var(--gl-background-color-default) 33% );
+}
+.gl-tabs-fade-right {
+  right: var(--gl-spacing-scale-0);
+  justify-content: flex-end;
+  background-image: linear-gradient( to right, rgba(255, 255, 255, 0), var(--gl-background-color-default) 33% );
+}
+.gl-tabs-fade-icon-button {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--gl-border-color-default);
+  color: var(--gl-action-neutral-foreground-color-default);
+  background-color: var(--gl-action-neutral-background-color-default);
+  border-color: var(--gl-action-neutral-border-color-default);
+}
+.gl-tabs-fade-icon-button:hover {
+    color: var(--gl-action-neutral-foreground-color-hover);
+    background-color: var(--gl-action-neutral-background-color-hover);
+    border-color: var(--gl-action-neutral-border-color-hover);
+  }
+.gl-tabs-fade-icon-button:focus-visible {
+    color: var(--gl-action-neutral-foreground-color-focus);
+    background-color: var(--gl-action-neutral-background-color-focus);
+    border-color: var(--gl-action-neutral-border-color-focus);
+  }
+.gl-tabs-fade-icon-button:active {
+    color: var(--gl-action-neutral-foreground-color-active);
+    background-color: var(--gl-action-neutral-background-color-active);
+    border-color: var(--gl-action-neutral-border-color-active);
+  }
+.gl-tabs-fade-icon-button{
+  padding: var(--gl-spacing-scale-0);
+  height: 100%;
+}
+.gl-tabs .gl-scrollable-tabs-nav {
+  overflow: hidden;
+  position: relative;
+  flex-wrap: nowrap;
+}
+@media (forced-colors: active) {
+  .gl-tab-nav-item-active:active, .gl-tab-nav-item-active:focus-visible, .gl-tab-nav-item-active:focus-visible:active {
+    outline: 2px solid LinkText;
+  }
+}
 .gl-toggle-wrapper {
   --tw-leading: 1rem;
   line-height: 1rem;
diff --git a/packages/styles/src/components.css b/packages/styles/src/components.css
index 99051f9..c9aef38 100644
--- a/packages/styles/src/components.css
+++ b/packages/styles/src/components.css
@@ -1,5 +1,6 @@
 @import "./forms/index.css";
 @import "./dropdowns/new-dropdown.css";
+@import "./tabs/bootstrap-tabs.css";
 @import "./tables/bootstrap-tables.css";
 @import "../../ui/src/base/accordion/accordion.css";
 @import "../../ui/src/base/alert/alert.css";
@@ -29,5 +30,6 @@
 @import "../../ui/src/base/progress-bar/progress-bar.css";
 @import "../../ui/src/base/skeleton-loader/skeleton-loader.css";
 @import "../../ui/src/base/table/table.css";
+@import "../../ui/src/base/tabs/tabs.css";
 @import "../../ui/src/base/toggle/toggle.css";
 @import "../../ui/src/base/tooltip/tooltip.css";
diff --git a/packages/styles/src/tabs/bootstrap-tabs.css b/packages/styles/src/tabs/bootstrap-tabs.css
new file mode 100644
index 0000000..88ce093
--- /dev/null
+++ b/packages/styles/src/tabs/bootstrap-tabs.css
@@ -0,0 +1,33 @@
+/*!
+ * Bootstrap navigation compatibility required by GlTabs.
+ *
+ * Ported from Bootstrap v4.6's _nav.scss as vendored by GitLab UI. Rules are
+ * scoped to the React component marker so unrelated consumer navigation is not
+ * affected.
+ */
+
+.gl-tabs {
+  .nav {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+  .nav-link {
+    display: block;
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: none;
+    }
+  }
+
+  .nav-justified > .nav-item {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+}
diff --git a/packages/ui/src/base/tabs/tab.tsx b/packages/ui/src/base/tabs/tab.tsx
new file mode 100644
index 0000000..cc17b5d
--- /dev/null
+++ b/packages/ui/src/base/tabs/tab.tsx
@@ -0,0 +1,59 @@
+/**
+ * Ported from GitLab UI:
+ * packages/gitlab-ui/src/components/base/tabs/tab/tab.vue
+ *
+ * GlTab is a declarative child of GlTabs. GlTabs reads its props to render the
+ * corresponding Base UI tab trigger and panel in their required DOM regions.
+ */
+
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
+import type { ClassValue } from "cn";
+
+export type GlTabButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children" | "className" | "disabled" | "role" | "type"
+>;
+
+export type GlTabPanelProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children" | "className" | "hidden" | "role"
+>;
+
+export type GlTabProps = {
+  /** The content rendered in this tab's panel. */
+  children?: ReactNode;
+  /** Prevents the tab from being selected. */
+  disabled?: boolean;
+  /** Mounts the panel only while it is active. Overrides GlTabs.lazy. */
+  lazy?: boolean;
+  /** Additional attributes applied to the tab panel. */
+  panelProps?: GlTabPanelProps;
+  /** Additional clsx-compatible classes applied to the tab panel. */
+  panelClassName?: ClassValue;
+  /** Query string value used when GlTabs synchronizes selection with the URL. */
+  queryParamValue?: string | null;
+  /** Numeric badge displayed after the tab title. Negative values are hidden. */
+  tabCount?: number | null;
+  /** Screen-reader context for tabCount, for example "15 open issues". */
+  tabCountSrText?: string | null;
+  /** Additional attributes applied to the tab button. */
+  tabProps?: GlTabButtonProps;
+  /** The accessible and visible tab title. */
+  title: ReactNode;
+  /** Additional clsx-compatible classes applied to the tab list item. */
+  titleItemClassName?: ClassValue;
+  /** Additional clsx-compatible classes applied to the tab button. */
+  titleClassName?: ClassValue;
+};
+
+/**
+ * Declarative tab descriptor. It is consumed by GlTabs and does not render on
+ * its own.
+ */
+export default function GlTab(_: GlTabProps) {
+  return null;
+}
diff --git a/packages/ui/src/base/tabs/tabs.css b/packages/ui/src/base/tabs/tabs.css
new file mode 100644
index 0000000..362baae
--- /dev/null
+++ b/packages/ui/src/base/tabs/tabs.css
@@ -0,0 +1,193 @@
+/**
+ * Ported from GitLab UI:
+ * packages/gitlab-ui/src/components/base/tabs/tabs/tabs.scss
+ *
+ * GlTabsBefore, GlTabsAfter, and the single-DOM GlTabActions layout are React
+ * adaptations of the upstream toolbar slots and action regions.
+ */
+
+.gl-tabs-wrapper {
+  @apply gl-border-b gl-relative gl-flex gl-flex-wrap;
+}
+
+.gl-tabs-nav {
+  @apply gl-grow;
+  min-width: 0;
+}
+
+.gl-tab-nav-item {
+  position: relative;
+  @apply gl-px-4;
+  @apply gl-py-5;
+  @apply gl-leading-normal;
+  @apply gl-text-base;
+  @apply gl-flex;
+  @apply gl-justify-center;
+  @apply gl-border;
+  @apply gl-h-full;
+  @apply gl-action-neutral-colors;
+  font-family: inherit;
+  text-align: inherit;
+  transition:
+    box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+    background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+    border-radius 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
+
+  &::before {
+    position: absolute;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    border-bottom: 2px solid transparent;
+    content: "";
+    translate: 0 2px;
+    transition:
+      border-bottom 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+      translate 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &::before {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  &:hover:not(.gl-tab-nav-item-active)::before {
+    border-bottom-color: var(--gl-border-color-strong);
+    translate: 0;
+  }
+
+  &:focus-visible {
+    @apply gl-rounded-default;
+  }
+
+  &.disabled {
+    @apply gl-pointer-events-auto;
+    @apply gl-cursor-not-allowed;
+    color: var(--gl-action-disabled-foreground-color);
+
+    &:hover {
+      @apply gl-shadow-none;
+    }
+  }
+
+  > .gl-tab-counter-badge {
+    font-weight: inherit;
+    @apply gl-ml-2;
+  }
+}
+
+.gl-tab-content {
+  @apply gl-py-3;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
+  @apply gl-text-default;
+}
+
+.gl-tab-nav-item-active {
+  @apply gl-font-bold;
+  z-index: 1;
+
+  &:active,
+  &:focus-visible,
+  &:focus-visible:active {
+    box-shadow:
+      inset 0 0 0 1px var(--gl-action-neutral-border-color-active),
+      0 0 0 1px var(--gl-focus-ring-inner-color),
+      0 0 0 3px var(--gl-focus-ring-outer-color);
+    outline: none;
+
+    .gl-scrollable-tabs-nav & {
+      box-shadow:
+        inset 0 0 0 2px var(--gl-focus-ring-outer-color),
+        inset 0 0 0 3px var(--gl-focus-ring-inner-color),
+        inset 0 0 0 1px var(--gl-focus-ring-inner-color);
+
+      &::before {
+        right: 3px;
+        bottom: 3px;
+        left: 3px;
+        border-radius: 0 0 1px 1px;
+      }
+    }
+
+    &::before {
+      right: 0;
+      left: 0;
+      border-radius: 0 0 2px 2px;
+    }
+  }
+
+  &::before {
+    border-bottom-color: var(--gl-tab-selected-indicator-color-default);
+    translate: 0;
+  }
+}
+
+.gl-tabs-before,
+.gl-tabs-after {
+  @apply gl-flex gl-shrink-0 gl-items-center gl-gap-3;
+}
+
+.gl-tabs-after {
+  @apply gl-justify-end;
+}
+
+.gl-tab-actions {
+  order: -1;
+  @apply gl-mt-3 gl-mb-3 gl-flex gl-w-full gl-grow-0 gl-flex-col gl-gap-3;
+}
+
+@media (min-width: 768px) {
+  .gl-tab-actions {
+    order: 0;
+    @apply gl-m-0 gl-w-auto gl-flex-row gl-items-center gl-justify-end;
+  }
+}
+
+.gl-tabs-fade {
+  @apply gl-absolute gl-bottom-0 gl-top-0 gl-z-2;
+  @apply gl-w-8;
+  @apply gl-p-2;
+  @apply gl-flex;
+}
+
+.gl-tabs-fade-left {
+  @apply gl-left-0;
+  background-image: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 0),
+    var(--gl-background-color-default) 33%
+  );
+}
+
+.gl-tabs-fade-right {
+  @apply gl-right-0 gl-justify-end;
+  background-image: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0),
+    var(--gl-background-color-default) 33%
+  );
+}
+
+.gl-tabs-fade-icon-button {
+  @apply gl-border;
+  @apply gl-action-neutral-colors;
+  @apply gl-p-0;
+  @apply gl-h-full;
+}
+
+.gl-tabs .gl-scrollable-tabs-nav {
+  @apply gl-overflow-hidden;
+  position: relative;
+  @apply gl-flex-nowrap;
+}
+
+@media (forced-colors: active) {
+  .gl-tab-nav-item-active:active,
+  .gl-tab-nav-item-active:focus-visible,
+  .gl-tab-nav-item-active:focus-visible:active {
+    outline: 2px solid LinkText;
+  }
+}
diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
new file mode 100644
index 0000000..bf8b762
--- /dev/null
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
+import GlButton from "../button/button";
+import GlTab from "./tab";
+import GlTabs, {
+  GlScrollableTabs,
+  GlTabActions,
+  GlTabsAfter,
+  GlTabsBefore,
+  type GlTabsProps,
+} from "./tabs";
+
+const meta = {
+  title: "UI/Base/Tabs",
+  component: GlTabs,
+  args: {
+    defaultValue: 0,
+    justified: false,
+    lazy: false,
+    onValueChange: fn(),
+    queryParamName: "tab",
+    syncActiveTabWithQueryParams: false,
+  },
+  argTypes: {
+    children: { control: false },
+    contentClassName: { control: false },
+    empty: { control: false },
+    navClassName: { control: false },
+    value: { control: false },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "See the [Pajamas tabs documentation](https://design.gitlab.com/components/tabs) for usage and implementation guidance.",
+      },
+    },
+  },
+  render: (args) => (
+    <GlTabs {...args}>
+      <GlTab title="Overview">Overview panel</GlTab>
+      <GlTab title="Activity">Activity panel</GlTab>
+      <GlTab title="Members">Members panel</GlTab>
+    </GlTabs>
+  ),
+} satisfies Meta<typeof GlTabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ args, canvas }) => {
+    const user = userEvent.setup();
+    const [overview, activity, members] = canvas.getAllByRole("tab");
+
+    await expect(overview).toHaveAttribute("aria-selected", "true");
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Overview panel");
+
+    await user.pointer({ keys: "[MouseLeft>]", target: activity });
+    await expect(activity).toHaveFocus();
+    await expect(overview).toHaveAttribute("aria-selected", "true");
+    await expect(activity).toHaveAttribute("aria-selected", "false");
+
+    await user.pointer({ keys: "[/MouseLeft]", target: activity });
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(1);
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Activity panel");
+
+    activity.focus();
+    await user.keyboard("{ArrowRight}");
+    await expect(members).toHaveFocus();
+    await expect(members).toHaveAttribute("aria-selected", "true");
+
+    await user.keyboard("{ArrowRight}");
+    await expect(members).toHaveFocus();
+  },
+};
+
+function ControlledTabsExample(props: GlTabsProps) {
+  const [value, setValue] = useState(1);
+  return (
+    <>
+      <GlButton onClick={() => setValue(0)}>Select overview</GlButton>
+      <GlTabs
+        {...props}
+        onValueChange={(nextValue) => {
+          setValue(nextValue);
+          props.onValueChange?.(nextValue);
+        }}
+        value={value}>
+        <GlTab title="Overview">Overview panel</GlTab>
+        <GlTab title="Activity">Activity panel</GlTab>
+      </GlTabs>
+    </>
+  );
+}
+
+export const Controlled: Story = {
+  render: (args) => <ControlledTabsExample {...args} />,
+  play: async ({ canvas }) => {
+    const overview = canvas.getByRole("tab", { name: "Overview" });
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    await userEvent.click(canvas.getByRole("button", { name: "Select overview" }));
+    await expect(overview).toHaveAttribute("aria-selected", "true");
+  },
+};
+
+export const Justified: Story = {
+  args: { justified: true },
+};
+
+export const CountsAndDisabled: Story = {
+  render: (args) => (
+    <GlTabs {...args}>
+      <GlTab tabCount={42} tabCountSrText="42 issues" title="All">
+        All issues
+      </GlTab>
+      <GlTab tabCount={15} tabCountSrText="15 open issues" title="Open">
+        Open issues
+      </GlTab>
+      <GlTab disabled title="Closed">Closed issues</GlTab>
+    </GlTabs>
+  ),
+  play: async ({ canvas }) => {
+    const all = canvas.getByRole("tab", { name: /All 42 issues/ });
+    const open = canvas.getByRole("tab", { name: /Open 15 open issues/ });
+    const closed = canvas.getByRole("tab", { name: "Closed" });
+
+    await expect(all).toBeInTheDocument();
+    await expect(closed).toBeDisabled();
+
+    all.focus();
+    await userEvent.keyboard("{End}");
+    await expect(open).toHaveFocus();
+    await expect(open).toHaveAttribute("aria-selected", "true");
+
+    await userEvent.keyboard("{ArrowRight}");
+    await expect(open).toHaveFocus();
+  },
+};
+
+export const Empty: Story = {
+  args: { children: null, empty: "No tabs are available." },
+  render: (args) => <GlTabs {...args} />,
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("No tabs are available.")).toBeInTheDocument();
+    await expect(canvas.queryByRole("tab")).not.toBeInTheDocument();
+  },
+};
+
+export const RegionsAndActions: Story = {
+  render: (args) => (
+    <GlTabs {...args}>
+      <GlTabsBefore>
+        <GlButton aria-label="Refresh issues" category="tertiary" icon="retry" />
+      </GlTabsBefore>
+      <GlTab title="All">All issues</GlTab>
+      <GlTab title="Open">Open issues</GlTab>
+      <GlTabsAfter>
+        <GlButton category="tertiary">Export</GlButton>
+      </GlTabsAfter>
+      <GlTabActions aria-label="Issue actions">
+        <GlButton category="secondary">Cancel</GlButton>
+        <GlButton variant="confirm">Save changes</GlButton>
+      </GlTabActions>
+    </GlTabs>
+  ),
+  play: async ({ canvas }) => {
+    const tablist = canvas.getByRole("tablist");
+    const before = canvas.getByRole("button", { name: "Refresh issues" });
+    const after = canvas.getByRole("button", { name: "Export" });
+
+    await expect(tablist.contains(before)).toBe(false);
+    await expect(tablist.contains(after)).toBe(false);
+    await expect(canvas.getAllByRole("button", { name: "Save changes" })).toHaveLength(1);
+    await expect(canvas.getByRole("toolbar", { name: "Issue actions" })).toBeInTheDocument();
+  },
+};
+
+function QuerySyncTabs(props: GlTabsProps) {
+  const [value, setValue] = useState(0);
+  useState(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("gl-tabs-story-view", "open");
+    window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+  });
+
+  return (
+    <GlTabs
+      {...props}
+      onValueChange={(nextValue) => {
+        setValue(nextValue);
+        props.onValueChange?.(nextValue);
+      }}
+      queryParamName="gl-tabs-story-view"
+      syncActiveTabWithQueryParams
+      value={value}>
+      <GlTab queryParamValue="all" title="All">All issues</GlTab>
+      <GlTab queryParamValue="open" title="Open">Open issues</GlTab>
+    </GlTabs>
+  );
+}
+
+export const QuerySynchronization: Story = {
+  render: (args) => <QuerySyncTabs {...args} />,
+  play: async ({ canvas }) => {
+    const all = canvas.getByRole("tab", { name: "All" });
+    const open = canvas.getByRole("tab", { name: "Open" });
+
+    await waitFor(() => expect(open).toHaveAttribute("aria-selected", "true"));
+    const url = new URL(window.location.href);
+    url.searchParams.set("gl-tabs-story-view", "all");
+    window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+    await waitFor(() => expect(all).toHaveAttribute("aria-selected", "true"));
+  },
+};
+
+export const LazyPanels: Story = {
+  args: { lazy: true },
+};
+
+export const Scrollable: Story = {
+  render: () => (
+    <div style={{ maxWidth: "40rem" }}>
+      <GlScrollableTabs>
+        {Array.from({ length: 30 }, (_, index) => (
+          <GlTab key={index} title={`Tab ${index + 1}`}>
+            Panel {index + 1}
+          </GlTab>
+        ))}
+      </GlScrollableTabs>
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const tablist = canvas.getByRole("tablist");
+    const scrollRight = await canvas.findByRole("button", { name: "Scroll right" });
+
+    await waitFor(() => expect(tablist.scrollWidth).toBeGreaterThan(tablist.clientWidth));
+    await userEvent.click(scrollRight);
+    await waitFor(() => expect(tablist.scrollLeft).toBeGreaterThan(0));
+    await expect(canvas.getByRole("button", { name: "Scroll left" })).toBeInTheDocument();
+  },
+};
diff --git a/packages/ui/src/base/tabs/tabs.test.tsx b/packages/ui/src/base/tabs/tabs.test.tsx
new file mode 100644
index 0000000..00a5075
--- /dev/null
+++ b/packages/ui/src/base/tabs/tabs.test.tsx
@@ -0,0 +1,247 @@
+import { Fragment, type ComponentProps, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import GlButton from "../button/button";
+import GlTab from "./tab";
+import GlTabs, {
+  GlScrollableTabs,
+  GlTabActions,
+  GlTabsAfter,
+  GlTabsBefore,
+} from "./tabs";
+
+vi.mock("@gitlab/svgs/dist/icons.svg", () => ({ default: "/path/to/icons.svg" }));
+
+const defaultTabs = (
+  <>
+    <GlTab title="First">First panel</GlTab>
+    <GlTab title="Second">Second panel</GlTab>
+  </>
+);
+
+function renderTabs(
+  props: Partial<ComponentProps<typeof GlTabs>> = {},
+  children: ReactNode = defaultTabs,
+) {
+  return renderToStaticMarkup(<GlTabs {...props}>{children}</GlTabs>);
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("GlTabs", () => {
+  it("renders the GitLab tab structure and forwards root attributes", () => {
+    const markup = renderTabs({ className: "custom-root", title: "Example tabs" });
+
+    expect(markup).toMatch(/^<div[^>]*class="tabs gl-tabs custom-root"/);
+    expect(markup).toMatch(/<div[^>]*class="gl-tabs-wrapper"/);
+    expect(markup).toMatch(/<ul[^>]*role="tablist"/);
+    expect(markup).toMatch(/<ul[^>]*class="nav gl-tabs-nav"/);
+    expect(markup).toContain("title=\"Example tabs\"");
+    expect(markup.match(/role="tab"/g)).toHaveLength(2);
+    expect(markup.match(/role="tabpanel"/g)).toHaveLength(2);
+    expect(markup).toContain("gl-tab-nav-item-active");
+    expect(markup).toContain("aria-selected=\"true\"");
+    expect(markup).toContain("aria-setsize=\"2\"");
+    expect(markup).toContain("aria-posinset=\"1\"");
+  });
+
+  it("applies navigation, content, title item, title, and panel classes", () => {
+    const markup = renderTabs(
+      {
+        contentClassName: ["custom-content", { "conditional-content": true }],
+        navClassName: ["custom-nav", { "conditional-nav": true }],
+      },
+      <GlTab
+        panelClassName={["custom-panel", { "conditional-panel": true }]}
+        title="First"
+        titleClassName={["custom-title", { "conditional-title": true }]}
+        titleItemClassName={["custom-item", { "conditional-item": true }]}>
+        First panel
+      </GlTab>,
+    );
+
+    for(const className of [
+      "custom-content",
+      "conditional-content",
+      "custom-nav",
+      "conditional-nav",
+      "custom-panel",
+      "conditional-panel",
+      "custom-title",
+      "conditional-title",
+      "custom-item",
+      "conditional-item",
+    ]) {
+      expect(markup).toContain(className);
+    }
+  });
+
+  it("renders justified tabs", () => {
+    expect(renderTabs({ justified: true })).toContain("nav-justified");
+  });
+
+  it("forwards restricted attributes to the tab and panel", () => {
+    const markup = renderTabs({}, (
+      <GlTab
+        panelProps={{ id: "first-panel", title: "Panel title" }}
+        tabProps={{ id: "first-tab", title: "Tab title" }}
+        title="First">
+        First panel
+      </GlTab>
+    ));
+
+    expect(markup).toMatch(/<button[^>]*id="first-tab"[^>]*title="Tab title"/);
+    expect(markup).toMatch(/<div[^>]*id="first-panel"[^>]*title="Panel title"/);
+  });
+
+  describe("tab counts", () => {
+    it("renders zero with hidden badge text and visible screen-reader context", () => {
+      const markup = renderTabs({}, (
+        <GlTab tabCount={0} tabCountSrText="No issues" title="Issues">
+          Issue panel
+        </GlTab>
+      ));
+
+      expect(markup).toContain("gl-tab-counter-badge");
+      expect(markup).toContain("aria-hidden=\"true\"");
+      expect(markup).toContain("No issues");
+    });
+
+    it.each([-1, null, undefined])("does not render a badge for %s", (tabCount) => {
+      expect(renderTabs({}, (
+        <GlTab tabCount={tabCount} title="Issues">Issue panel</GlTab>
+      ))).not.toContain("gl-tab-counter-badge");
+    });
+
+    it("warns when a displayed count has no screen-reader context", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+      renderTabs({}, <GlTab tabCount={5} title="Issues">Issue panel</GlTab>);
+
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining("[GlTab]"));
+    });
+  });
+
+  it("keeps inactive panels mounted unless lazy is enabled", () => {
+    expect(renderTabs()).toContain("Second panel");
+    expect(renderTabs({ lazy: true })).not.toContain("Second panel");
+  });
+
+  it("allows a tab to override root lazy behavior", () => {
+    const markup = renderTabs({ lazy: true }, (
+      <>
+        <GlTab title="First">First panel</GlTab>
+        <GlTab lazy={false} title="Second">Second panel</GlTab>
+      </>
+    ));
+
+    expect(markup).toContain("Second panel");
+  });
+
+  it("renders empty content when there are no tabs", () => {
+    const markup = renderTabs({ empty: "No tabs available" }, null);
+
+    expect(markup).toContain("<div class=\"tab-pane active\">No tabs available</div>");
+    expect(markup).not.toContain("role=\"tab\"");
+  });
+
+  it("renders regions outside the tablist in fixed order and actions only once", () => {
+    const markup = renderTabs({}, (
+      <>
+        <GlTabsAfter><GlButton>After</GlButton></GlTabsAfter>
+        <GlTab title="First">First panel</GlTab>
+        <GlTabActions aria-label="Tab actions"><GlButton>Save</GlButton></GlTabActions>
+        <GlTabsBefore><GlButton>Before</GlButton></GlTabsBefore>
+      </>
+    ));
+    const beforeIndex = markup.indexOf("gl-tabs-before");
+    const tablistIndex = markup.indexOf("role=\"tablist\"");
+    const afterIndex = markup.indexOf("gl-tabs-after");
+    const actionsIndex = markup.indexOf("gl-tab-actions");
+
+    expect(beforeIndex).toBeLessThan(tablistIndex);
+    expect(tablistIndex).toBeLessThan(afterIndex);
+    expect(afterIndex).toBeLessThan(actionsIndex);
+    expect(markup.match(/>Save</g)).toHaveLength(1);
+    expect(markup).toContain("role=\"toolbar\"");
+
+    const tablistEndIndex = markup.indexOf("</ul>", tablistIndex);
+    expect(beforeIndex).toBeLessThan(tablistIndex);
+    expect(afterIndex).toBeGreaterThan(tablistEndIndex);
+  });
+
+  it("supports arrays, fragments, and conditional children", () => {
+    const showSecond = true;
+    const markup = renderTabs({}, [
+      <GlTab key="first" title="First">First panel</GlTab>,
+      <Fragment key="fragment">
+        {showSecond ? <GlTab title="Second">Second panel</GlTab> : null}
+      </Fragment>,
+    ]);
+
+    expect(markup.match(/role="tab"/g)).toHaveLength(2);
+  });
+
+  it.each([
+    ["GlTabsBefore", <><GlTabsBefore /><GlTabsBefore /></>],
+    ["GlTabsAfter", <><GlTabsAfter /><GlTabsAfter /></>],
+    ["GlTabActions", <><GlTabActions /><GlTabActions /></>],
+  ])("rejects duplicate %s regions", (regionName, children) => {
+    expect(() => renderTabs({}, children)).toThrow(`at most one ${regionName}`);
+  });
+
+  it("rejects opaque wrapper children", () => {
+    function WrappedTab() {
+      return <GlTab title="Wrapped">Wrapped panel</GlTab>;
+    }
+
+    expect(() => renderTabs({}, <WrappedTab />)).toThrow("only accepts GlTab");
+  });
+});
+
+describe("GlScrollableTabs", () => {
+  it("adds the scrollable list and hidden labeled controls", () => {
+    const markup = renderToStaticMarkup(
+      <GlScrollableTabs scrollLeftLabel="Previous tabs" scrollRightLabel="Next tabs">
+        {defaultTabs}
+      </GlScrollableTabs>,
+    );
+
+    expect(markup).toContain("gl-scrollable-tabs-nav");
+    expect(markup).toMatch(/<div hidden="" class="gl-tabs-fade gl-tabs-fade-left"/);
+    expect(markup).toContain("aria-label=\"Previous tabs\"");
+    expect(markup).toContain("aria-label=\"Next tabs\"");
+  });
+
+  it("warns for and ignores each custom region", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const markup = renderToStaticMarkup(
+      <GlScrollableTabs>
+        <GlTabsBefore>Before</GlTabsBefore>
+        <GlTab title="First">First panel</GlTab>
+        <GlTabsAfter>After</GlTabsAfter>
+        <GlTabActions>Actions</GlTabActions>
+      </GlScrollableTabs>,
+    );
+
+    expect(warn).toHaveBeenCalledTimes(3);
+    expect(markup).not.toContain("gl-tabs-before");
+    expect(markup).not.toContain("gl-tabs-after");
+    expect(markup).not.toContain("gl-tab-actions");
+  });
+
+  it("warns for and ignores repeated unsupported regions", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    expect(() => renderToStaticMarkup(
+      <GlScrollableTabs>
+        <GlTabsBefore>First</GlTabsBefore>
+        <GlTabsBefore>Second</GlTabsBefore>
+        <GlTab title="Tab">Panel</GlTab>
+      </GlScrollableTabs>,
+    )).not.toThrow();
+    expect(warn).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
new file mode 100644
index 0000000..97e016e
--- /dev/null
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -0,0 +1,755 @@
+/**
+ * Ported from GitLab UI:
+ * packages/gitlab-ui/src/components/base/tabs/tabs/tabs.vue
+ * packages/gitlab-ui/src/components/base/tabs/tabs/scrollable_tabs.vue
+ *
+ * Adaptations:
+ * - Base UI supplies tab semantics, focus management, and keyboard behavior.
+ * - Vue's numeric v-model maps to value/defaultValue/onValueChange.
+ * - Action configuration props are replaced by the compositional
+ *   GlTabActions, GlTabsBefore, and GlTabsAfter components.
+ */
+
+import {
+  Children,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { clsx, type ClassValue } from "cn";
+import GlBadge from "../badge/badge";
+import GlIcon from "../icon/icon";
+import GlTab, { type GlTabProps } from "./tab";
+
+type TabsRootElementProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children" | "className" | "defaultValue"
+>;
+
+export type GlTabsProps = TabsRootElementProps & {
+  /** GlTab children and optional GlTabsBefore, GlTabsAfter, and GlTabActions regions. */
+  children?: ReactNode;
+  className?: string;
+  /** Additional clsx-compatible classes applied to the panel container. */
+  contentClassName?: ClassValue;
+  /** Initial selected tab index for an uncontrolled component. */
+  defaultValue?: number;
+  /** Content shown when no GlTab children exist. */
+  empty?: ReactNode;
+  /** Makes each tab consume an equal share of the available navigation width. */
+  justified?: boolean;
+  /** Mounts tab panels only while they are active. */
+  lazy?: boolean;
+  /** Additional clsx-compatible classes applied to the tab list. */
+  navClassName?: ClassValue;
+  /** Called when user interaction or URL synchronization requests a new index. */
+  onValueChange?: (index: number) => void;
+  /** Query string parameter name used for URL synchronization. */
+  queryParamName?: string;
+  /** Synchronizes the selected tab with the browser query string. */
+  syncActiveTabWithQueryParams?: boolean;
+  /** Selected tab index for a controlled component. */
+  value?: number;
+};
+
+export type GlScrollableTabsProps = GlTabsProps & {
+  /** Accessible label for the button that scrolls the tab list left. */
+  scrollLeftLabel?: string;
+  /** Accessible label for the button that scrolls the tab list right. */
+  scrollRightLabel?: string;
+};
+
+type TabsRegionProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children" | "className" | "role"
+> & {
+  children?: ReactNode;
+  className?: string;
+};
+
+export type GlTabsBeforeProps = TabsRegionProps;
+export type GlTabsAfterProps = TabsRegionProps;
+export type GlTabActionsProps = TabsRegionProps;
+
+type GlTabElement = ReactElement<GlTabProps, typeof GlTab>;
+type GlTabsBeforeElement = ReactElement<GlTabsBeforeProps, typeof GlTabsBefore>;
+type GlTabsAfterElement = ReactElement<GlTabsAfterProps, typeof GlTabsAfter>;
+type GlTabActionsElement = ReactElement<GlTabActionsProps, typeof GlTabActions>;
+
+type ParsedTabsChildren = {
+  actions: GlTabActionsElement | null;
+  after: GlTabsAfterElement | null;
+  before: GlTabsBeforeElement | null;
+  tabs: GlTabElement[];
+};
+
+type ScrollMetrics = {
+  clientWidth: number;
+  scrollLeft: number;
+  scrollWidth: number;
+};
+
+type TabsImplementationProps = GlScrollableTabsProps & {
+  scrollable: boolean;
+};
+
+const tabsVariants = cva(["tabs", "gl-tabs"]);
+const tabsWrapperVariants = cva("gl-tabs-wrapper");
+const tabsBeforeVariants = cva("gl-tabs-before");
+const tabsAfterVariants = cva("gl-tabs-after");
+const tabActionsVariants = cva("gl-tab-actions");
+const tabsNavVariants = cva(["nav", "gl-tabs-nav"], {
+  variants: {
+    justified: {
+      false: null,
+      true: "nav-justified",
+    },
+    scrollable: {
+      false: null,
+      true: "gl-scrollable-tabs-nav",
+    },
+  },
+  defaultVariants: {
+    justified: false,
+    scrollable: false,
+  },
+});
+const tabItemVariants = cva("nav-item");
+const tabButtonVariants = cva(["nav-link", "gl-tab-nav-item"], {
+  variants: {
+    active: {
+      false: null,
+      true: "gl-tab-nav-item-active",
+    },
+    disabled: {
+      false: null,
+      true: "disabled",
+    },
+    justified: {
+      false: null,
+      true: "gl-w-full",
+    },
+  },
+  defaultVariants: {
+    active: false,
+    disabled: false,
+    justified: false,
+  },
+});
+const tabContentVariants = cva(["tab-content", "gl-tab-content"]);
+const tabPanelVariants = cva("tab-pane", {
+  variants: {
+    active: {
+      false: null,
+      true: "active",
+    },
+  },
+  defaultVariants: {
+    active: false,
+  },
+});
+
+const EMPTY_SCROLL_METRICS: ScrollMetrics = {
+  clientWidth: 0,
+  scrollLeft: 0,
+  scrollWidth: 0,
+};
+
+function assignRegion<T extends ReactElement>(
+  current: T | null,
+  next: T,
+  ownerName: string,
+  regionName: string,
+): T {
+  if(current) {
+    throw new Error(`${ownerName} accepts at most one ${regionName} child.`);
+  }
+  return next;
+}
+
+function warnAboutIgnoredScrollableRegion(regionName: string) {
+  const environment = typeof process === "undefined" ? undefined : process.env.NODE_ENV;
+  if(environment !== "production") {
+    console.warn(`[GlScrollableTabs] ${regionName} children are not supported and were ignored.`);
+  }
+}
+
+function parseTabsChildren(children: ReactNode, ownerName: string): ParsedTabsChildren {
+  const result: ParsedTabsChildren = {
+    actions: null,
+    after: null,
+    before: null,
+    tabs: [],
+  };
+
+  const visit = (nodes: ReactNode) => {
+    Children.forEach(nodes, (child) => {
+      if(child === null || child === undefined || typeof child === "boolean") return;
+
+      if(isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment) {
+        visit(child.props.children);
+        return;
+      }
+
+      if(isValidElement<GlTabProps>(child) && child.type === GlTab) {
+        result.tabs.push(child as GlTabElement);
+        return;
+      }
+
+      if(isValidElement<GlTabsBeforeProps>(child) && child.type === GlTabsBefore) {
+        if(ownerName === "GlScrollableTabs") {
+          warnAboutIgnoredScrollableRegion("GlTabsBefore");
+          return;
+        }
+        result.before = assignRegion(
+          result.before,
+          child as GlTabsBeforeElement,
+          ownerName,
+          "GlTabsBefore",
+        );
+        return;
+      }
+
+      if(isValidElement<GlTabsAfterProps>(child) && child.type === GlTabsAfter) {
+        if(ownerName === "GlScrollableTabs") {
+          warnAboutIgnoredScrollableRegion("GlTabsAfter");
+          return;
+        }
+        result.after = assignRegion(
+          result.after,
+          child as GlTabsAfterElement,
+          ownerName,
+          "GlTabsAfter",
+        );
+        return;
+      }
+
+      if(isValidElement<GlTabActionsProps>(child) && child.type === GlTabActions) {
+        if(ownerName === "GlScrollableTabs") {
+          warnAboutIgnoredScrollableRegion("GlTabActions");
+          return;
+        }
+        result.actions = assignRegion(
+          result.actions,
+          child as GlTabActionsElement,
+          ownerName,
+          "GlTabActions",
+        );
+        return;
+      }
+
+      throw new Error(
+        `${ownerName} only accepts GlTab, GlTabsBefore, GlTabsAfter, and `
+        + "GlTabActions as direct children. Arrays, Fragments, and conditional children "
+        + "are supported.",
+      );
+    });
+  };
+
+  visit(children);
+  return result;
+}
+
+function queryValueForTab(tab: GlTabElement, index: number): string {
+  return tab.props.queryParamValue || index.toString();
+}
+
+function firstEnabledTabIndex(tabs: GlTabElement[]): number | null {
+  const index = tabs.findIndex((tab) => !tab.props.disabled);
+  return index === -1 ? null : index;
+}
+
+function selectableTabIndex(index: number, tabs: GlTabElement[]): number | null {
+  if(Number.isInteger(index) && index >= 0 && index < tabs.length && !tabs[index].props.disabled) {
+    return index;
+  }
+  return firstEnabledTabIndex(tabs);
+}
+
+function queryTabIndex(
+  tabs: GlTabElement[],
+  queryParamName: string,
+  location: Location,
+): number | null {
+  const queryValue = new URLSearchParams(location.search).get(queryParamName);
+  const requestedIndex = queryValue === null
+    ? 0
+    : tabs.findIndex((tab, index) => queryValueForTab(tab, index) === queryValue);
+
+  return selectableTabIndex(requestedIndex === -1 ? 0 : requestedIndex, tabs);
+}
+
+function setQueryTabIndex(
+  tabs: GlTabElement[],
+  queryParamName: string,
+  index: number,
+) {
+  if(typeof window === "undefined") return;
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const currentQueryValue = searchParams.get(queryParamName);
+  const nextQueryValue = queryValueForTab(tabs[index], index);
+
+  if((index === 0 && !currentQueryValue) || currentQueryValue === nextQueryValue) return;
+
+  searchParams.set(queryParamName, nextQueryValue);
+  const search = searchParams.toString();
+  const nextUrl = `${window.location.pathname}${search ? `?${search}` : ""}${window.location.hash}`;
+  window.history.pushState({}, "", nextUrl);
+}
+
+function TabsImplementation({
+  children,
+  className,
+  contentClassName,
+  defaultValue = 0,
+  empty,
+  justified = false,
+  lazy = false,
+  navClassName,
+  onValueChange,
+  queryParamName = "tab",
+  scrollable,
+  scrollLeftLabel = "Scroll left",
+  scrollRightLabel = "Scroll right",
+  syncActiveTabWithQueryParams = false,
+  value,
+  forwardedRef,
+  ...elementProps
+}: TabsImplementationProps & { forwardedRef: Ref<HTMLDivElement> }) {
+  const parsedChildren = parseTabsChildren(
+    children,
+    scrollable ? "GlScrollableTabs" : "GlTabs",
+  );
+
+  const tabs = parsedChildren.tabs;
+  const before = scrollable ? null : parsedChildren.before;
+  const after = scrollable ? null : parsedChildren.after;
+  const actions = scrollable ? null : parsedChildren.actions;
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const requestedValue = isControlled ? value : uncontrolledValue;
+  const firstEnabledIndex = firstEnabledTabIndex(tabs);
+  const requestedValueIsSelectable = Number.isInteger(requestedValue)
+    && requestedValue >= 0
+    && requestedValue < tabs.length
+    && !tabs[requestedValue].props.disabled;
+  const selectedValue = requestedValueIsSelectable
+    ? requestedValue
+    : isControlled
+      ? requestedValue
+      : firstEnabledIndex;
+  const tabsStateSignature = JSON.stringify(tabs.map((tab, index) => ({
+    disabled: Boolean(tab.props.disabled),
+    key: tab.key ?? index,
+    queryParamValue: queryValueForTab(tab, index),
+  })));
+  const onValueChangeRef = useRef(onValueChange);
+  const isControlledRef = useRef(isControlled);
+  const selectedValueRef = useRef<number | null>(selectedValue);
+  const queryHistoryReadyRef = useRef(false);
+  const fallbackRequestRef = useRef<string | null>(null);
+  onValueChangeRef.current = onValueChange;
+  isControlledRef.current = isControlled;
+  selectedValueRef.current = selectedValue;
+
+  const navRef = useRef<HTMLDivElement>(null);
+  const [scrollMetrics, setScrollMetrics] = useState<ScrollMetrics>(EMPTY_SCROLL_METRICS);
+  const updateScrollMetrics = useCallback(() => {
+    const navElement = navRef.current;
+    if(!scrollable || !navElement) return;
+
+    const nextMetrics = {
+      clientWidth: navElement.clientWidth,
+      scrollLeft: navElement.scrollLeft,
+      scrollWidth: navElement.scrollWidth,
+    };
+    setScrollMetrics((currentMetrics) => (
+      currentMetrics.clientWidth === nextMetrics.clientWidth
+      && currentMetrics.scrollLeft === nextMetrics.scrollLeft
+      && currentMetrics.scrollWidth === nextMetrics.scrollWidth
+        ? currentMetrics
+        : nextMetrics
+    ));
+  }, [scrollable]);
+
+  useEffect(() => {
+    if(!scrollable) return;
+
+    const navElement = navRef.current;
+    if(!navElement) return;
+
+    updateScrollMetrics();
+    navElement.addEventListener("scroll", updateScrollMetrics);
+    window.addEventListener("resize", updateScrollMetrics);
+
+    const resizeObserver = typeof ResizeObserver === "undefined"
+      ? null
+      : new ResizeObserver(updateScrollMetrics);
+    resizeObserver?.observe(navElement);
+
+    const mutationObserver = typeof MutationObserver === "undefined"
+      ? null
+      : new MutationObserver(updateScrollMetrics);
+    mutationObserver?.observe(navElement, {
+      characterData: true,
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
+      navElement.removeEventListener("scroll", updateScrollMetrics);
+      window.removeEventListener("resize", updateScrollMetrics);
+    };
+  }, [scrollable, updateScrollMetrics]);
+
+  // Keep externally changed controlled values reflected in the URL. This
+  // effect intentionally runs before the query-listener effect so the first
+  // client render never overwrites a deep link before it has been read.
+  useEffect(() => {
+    if(
+      !syncActiveTabWithQueryParams
+      || !queryHistoryReadyRef.current
+      || selectedValue === null
+      || !requestedValueIsSelectable
+    ) return;
+
+    setQueryTabIndex(tabs, queryParamName, selectedValue);
+  }, [
+    queryParamName,
+    requestedValueIsSelectable,
+    selectedValue,
+    syncActiveTabWithQueryParams,
+    tabs,
+    tabsStateSignature,
+  ]);
+
+  useEffect(() => {
+    if(!syncActiveTabWithQueryParams) {
+      queryHistoryReadyRef.current = false;
+      return;
+    }
+
+    const updateFromLocation = () => {
+      const nextValue = queryTabIndex(tabs, queryParamName, window.location);
+      if(nextValue === null || nextValue === selectedValueRef.current) return;
+
+      if(!isControlledRef.current) setUncontrolledValue(nextValue);
+      onValueChangeRef.current?.(nextValue);
+    };
+
+    updateFromLocation();
+    queryHistoryReadyRef.current = true;
+    window.addEventListener("popstate", updateFromLocation);
+
+    return () => window.removeEventListener("popstate", updateFromLocation);
+  }, [queryParamName, syncActiveTabWithQueryParams, tabs, tabsStateSignature]);
+
+  useEffect(() => {
+    if(requestedValueIsSelectable || firstEnabledIndex === null) {
+      fallbackRequestRef.current = null;
+      return;
+    }
+
+    if(syncActiveTabWithQueryParams && typeof window !== "undefined") {
+      const locationValue = queryTabIndex(tabs, queryParamName, window.location);
+      if(locationValue !== null && locationValue !== requestedValue) return;
+    }
+
+    const requestKey = `${requestedValue}:${firstEnabledIndex}:${tabsStateSignature}`;
+    if(fallbackRequestRef.current === requestKey) return;
+    fallbackRequestRef.current = requestKey;
+
+    if(!isControlled) setUncontrolledValue(firstEnabledIndex);
+    onValueChangeRef.current?.(firstEnabledIndex);
+  }, [
+    firstEnabledIndex,
+    isControlled,
+    queryParamName,
+    requestedValue,
+    requestedValueIsSelectable,
+    syncActiveTabWithQueryParams,
+    tabs,
+    tabsStateSignature,
+  ]);
+
+  const handleValueChange = (nextValue: unknown) => {
+    if(typeof nextValue !== "number") return;
+
+    if(!isControlled) setUncontrolledValue(nextValue);
+    if(syncActiveTabWithQueryParams) setQueryTabIndex(tabs, queryParamName, nextValue);
+    onValueChange?.(nextValue);
+  };
+
+  const moveFocusToEnabledTab = (
+    event: ReactKeyboardEvent<HTMLElement>,
+    currentIndex: number,
+  ) => {
+    if(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+
+    const navElement = navRef.current;
+    if(!navElement) return;
+
+    let nextIndex = currentIndex;
+    if(event.key === "Home") {
+      nextIndex = firstEnabledTabIndex(tabs) ?? currentIndex;
+    } else if(event.key === "End") {
+      for(let index = tabs.length - 1; index >= 0; index -= 1) {
+        if(!tabs[index].props.disabled) {
+          nextIndex = index;
+          break;
+        }
+      }
+    } else if(event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      const isRtl = getComputedStyle(navElement).direction === "rtl";
+      const forwardKey = isRtl ? "ArrowLeft" : "ArrowRight";
+      const step = event.key === forwardKey ? 1 : -1;
+      let candidateIndex = currentIndex + step;
+
+      while(candidateIndex >= 0 && candidateIndex < tabs.length) {
+        if(!tabs[candidateIndex].props.disabled) {
+          nextIndex = candidateIndex;
+          break;
+        }
+        candidateIndex += step;
+      }
+    } else {
+      return;
+    }
+
+    // Base UI keeps disabled tabs focusable. Pajamas tabs skip them, so handle
+    // the horizontal composite keys here and stop Base UI's list handler.
+    event.preventDefault();
+    event.stopPropagation();
+    if(nextIndex === currentIndex) return;
+
+    navElement.querySelectorAll<HTMLElement>("[role=\"tab\"]")[nextIndex]?.focus();
+    handleValueChange(nextIndex);
+  };
+
+  const scrollTabs = (direction: -1 | 1) => {
+    const navElement = navRef.current;
+    if(!navElement) return;
+
+    const maxScrollLeft = Math.max(0, navElement.scrollWidth - navElement.clientWidth);
+    const nextScrollLeft = Math.min(
+      maxScrollLeft,
+      Math.max(0, navElement.scrollLeft + direction * navElement.clientWidth),
+    );
+    navElement.scrollTo({ behavior: "smooth", left: nextScrollLeft });
+    setScrollMetrics({
+      clientWidth: navElement.clientWidth,
+      scrollLeft: nextScrollLeft,
+      scrollWidth: navElement.scrollWidth,
+    });
+  };
+
+  const showScrollLeft = scrollable
+    && scrollMetrics.scrollWidth > scrollMetrics.clientWidth
+    && scrollMetrics.scrollLeft > 0;
+  const showScrollRight = scrollable
+    && scrollMetrics.scrollWidth > scrollMetrics.clientWidth
+    && Math.ceil(scrollMetrics.scrollLeft + scrollMetrics.clientWidth)
+      < scrollMetrics.scrollWidth;
+
+  return (
+    <BaseTabs.Root
+      {...elementProps}
+      ref={forwardedRef}
+      className={tabsVariants({ className })}
+      onValueChange={handleValueChange}
+      value={selectedValue}>
+      <div className={tabsWrapperVariants()}>
+        {before}
+        {scrollable ? (
+          <div hidden={!showScrollLeft} className="gl-tabs-fade gl-tabs-fade-left">
+            <button
+              aria-label={scrollLeftLabel}
+              className="gl-tabs-fade-icon-button"
+              onClick={() => scrollTabs(-1)}
+              type="button">
+              <GlIcon name="chevron-lg-left" size={16} />
+            </button>
+          </div>
+        ) : null}
+        <BaseTabs.List
+          ref={navRef}
+          className={tabsNavVariants({
+            className: clsx(navClassName),
+            justified,
+            scrollable,
+          })}
+          loopFocus={false}
+          render={<ul />}>
+          {tabs.map((tab, index) => {
+            const {
+              disabled = false,
+              tabCount,
+              tabCountSrText,
+              tabProps,
+              title,
+              titleClassName,
+              titleItemClassName,
+            } = tab.props;
+            const hasTabCount = tabCount !== null && tabCount !== undefined && tabCount >= 0;
+            const environment = typeof process === "undefined"
+              ? undefined
+              : process.env.NODE_ENV;
+            if(environment !== "production" && hasTabCount && !tabCountSrText) {
+              console.warn(
+                "[GlTab] When using tabCount, provide tabCountSrText so screen readers "
+                + "receive the count's context.",
+              );
+            }
+
+            return (
+              <li
+                key={tab.key ?? index}
+                className={tabItemVariants({ className: clsx(titleItemClassName) })}
+                role="presentation">
+                <BaseTabs.Tab
+                  {...tabProps}
+                  aria-posinset={index + 1}
+                  aria-setsize={tabs.length}
+                  className={(state) => tabButtonVariants({
+                    active: state.active,
+                    className: clsx(titleClassName),
+                    disabled: state.disabled,
+                    justified,
+                  })}
+                  disabled={disabled}
+                  nativeButton
+                  onKeyDown={(event) => {
+                    tabProps?.onKeyDown?.(
+                      event as ReactKeyboardEvent<HTMLButtonElement>,
+                    );
+                    if(!event.defaultPrevented) moveFocusToEnabledTab(event, index);
+                  }}
+                  value={index}>
+                  {title}
+                  {hasTabCount ? (
+                    <>
+                      <GlBadge
+                        aria-hidden
+                        className="gl-tab-counter-badge"
+                        data-testid="tab-counter-badge"
+                        variant="neutral">
+                        {tabCount}
+                      </GlBadge>
+                      {tabCountSrText ? (
+                        <span className="gl-sr-only">{tabCountSrText}</span>
+                      ) : null}
+                    </>
+                  ) : null}
+                </BaseTabs.Tab>
+              </li>
+            );
+          })}
+        </BaseTabs.List>
+        {scrollable ? (
+          <div hidden={!showScrollRight} className="gl-tabs-fade gl-tabs-fade-right">
+            <button
+              aria-label={scrollRightLabel}
+              className="gl-tabs-fade-icon-button"
+              onClick={() => scrollTabs(1)}
+              type="button">
+              <GlIcon name="chevron-lg-right" size={16} />
+            </button>
+          </div>
+        ) : null}
+        {after}
+        {actions}
+      </div>
+      <div className={tabContentVariants({ className: clsx(contentClassName) })}>
+        {tabs.length === 0 ? <div className="tab-pane active">{empty}</div> : null}
+        {tabs.map((tab, index) => {
+          const {
+            children: panelContent,
+            lazy: tabLazy,
+            panelClassName,
+            panelProps,
+          } = tab.props;
+
+          return (
+            <BaseTabs.Panel
+              {...panelProps}
+              key={tab.key ?? index}
+              className={(state) => tabPanelVariants({
+                active: !state.hidden,
+                className: clsx(panelClassName),
+              })}
+              keepMounted={!(tabLazy ?? lazy)}
+              value={index}>
+              {panelContent}
+            </BaseTabs.Panel>
+          );
+        })}
+      </div>
+    </BaseTabs.Root>
+  );
+}
+
+export const GlTabsBefore = forwardRef<HTMLDivElement, GlTabsBeforeProps>(
+  function GlTabsBefore({ children, className, ...elementProps }, forwardedRef) {
+    return (
+      <div
+        {...elementProps}
+        ref={forwardedRef}
+        className={tabsBeforeVariants({ className })}>
+        {children}
+      </div>
+    );
+  },
+);
+
+export const GlTabsAfter = forwardRef<HTMLDivElement, GlTabsAfterProps>(
+  function GlTabsAfter({ children, className, ...elementProps }, forwardedRef) {
+    return (
+      <div
+        {...elementProps}
+        ref={forwardedRef}
+        className={tabsAfterVariants({ className })}>
+        {children}
+      </div>
+    );
+  },
+);
+
+export const GlTabActions = forwardRef<HTMLDivElement, GlTabActionsProps>(
+  function GlTabActions({ children, className, ...elementProps }, forwardedRef) {
+    return (
+      <div
+        {...elementProps}
+        ref={forwardedRef}
+        className={tabActionsVariants({ className })}
+        role="toolbar">
+        {children}
+      </div>
+    );
+  },
+);
+
+const GlTabs = forwardRef<HTMLDivElement, GlTabsProps>(function GlTabs(props, forwardedRef) {
+  return <TabsImplementation {...props} forwardedRef={forwardedRef} scrollable={false} />;
+});
+
+export const GlScrollableTabs = forwardRef<HTMLDivElement, GlScrollableTabsProps>(
+  function GlScrollableTabs(props, forwardedRef) {
+    return <TabsImplementation {...props} forwardedRef={forwardedRef} scrollable />;
+  },
+);
+
+export default GlTabs;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 04cacf1..99a059f 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -254,6 +254,26 @@ export { default as GlSkeletonLoader } from "./base/skeleton-loader/skeleton-loa
 export type {
   GlSkeletonLoaderProps,
 } from "./base/skeleton-loader/skeleton-loader";
+export {
+  default as GlTabs,
+  GlScrollableTabs,
+  GlTabActions,
+  GlTabsAfter,
+  GlTabsBefore,
+} from "./base/tabs/tabs";
+export type {
+  GlScrollableTabsProps,
+  GlTabActionsProps,
+  GlTabsAfterProps,
+  GlTabsBeforeProps,
+  GlTabsProps,
+} from "./base/tabs/tabs";
+export { default as GlTab } from "./base/tabs/tab";
+export type {
+  GlTabButtonProps,
+  GlTabPanelProps,
+  GlTabProps,
+} from "./base/tabs/tab";
 export { default as GlToggle } from "./base/toggle/toggle";
 export type {
   GlToggleLabelPosition,

From a78c0054b03760a4289de9dd518eea0b4e78bda1 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 13:25:37 +0800
Subject: [PATCH 02/14] fix(test): test failure

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index bf8b762..6e3421a 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -65,7 +65,8 @@ export const Default: Story = {
     await user.pointer({ keys: "[/MouseLeft]", target: activity });
     await expect(args.onValueChange).toHaveBeenLastCalledWith(1);
     await expect(activity).toHaveAttribute("aria-selected", "true");
-    await expect(canvas.getByRole("tabpanel")).toHaveTextContent("Activity panel");
+    await expect(canvas.getByRole("tabpanel", { name: "Activity" }))
+      .toHaveTextContent("Activity panel");
 
     activity.focus();
     await user.keyboard("{ArrowRight}");
@@ -130,7 +131,7 @@ export const CountsAndDisabled: Story = {
     const closed = canvas.getByRole("tab", { name: "Closed" });
 
     await expect(all).toBeInTheDocument();
-    await expect(closed).toBeDisabled();
+    await expect(closed).toHaveAttribute("aria-disabled", "true");
 
     all.focus();
     await userEvent.keyboard("{End}");

From 02f85a59ab759ce7fcb9428a161a0349324c51c1 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 14:00:29 +0800
Subject: [PATCH 03/14] fix(tabs): fallback to first available tab if specified
 tab is invalid

---
 packages/ui/src/base/tabs/tabs.test.tsx | 30 +++++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx      |  4 +---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.test.tsx b/packages/ui/src/base/tabs/tabs.test.tsx
index 00a5075..a81b0e3 100644
--- a/packages/ui/src/base/tabs/tabs.test.tsx
+++ b/packages/ui/src/base/tabs/tabs.test.tsx
@@ -140,6 +140,36 @@ describe("GlTabs", () => {
     expect(markup).toContain("Second panel");
   });
 
+  it.each([
+    ["a disabled tab", 0],
+    ["a negative out-of-range tab", -1],
+    ["a positive out-of-range tab", 2],
+  ])("falls back to the first enabled tab when controlled value points to %s", (_, value) => {
+    const markup = renderTabs({ value }, (
+      <>
+        <GlTab disabled tabProps={{ id: "disabled-tab" }} title="Disabled">
+          Disabled panel
+        </GlTab>
+        <GlTab
+          panelProps={{ id: "enabled-panel" }}
+          tabProps={{ id: "enabled-tab" }}
+          title="Enabled">
+          Enabled panel
+        </GlTab>
+      </>
+    ));
+
+    expect(markup).toMatch(
+      /<button(?=[^>]*id="disabled-tab")(?=[^>]*aria-selected="false")[^>]*>/,
+    );
+    expect(markup).toMatch(
+      /<button(?=[^>]*id="enabled-tab")(?=[^>]*aria-selected="true")[^>]*>/,
+    );
+    expect(markup).toMatch(
+      /<div(?=[^>]*id="enabled-panel")(?=[^>]*class="[^"]*\bactive\b)[^>]*>/,
+    );
+  });
+
   it("renders empty content when there are no tabs", () => {
     const markup = renderTabs({ empty: "No tabs available" }, null);
 
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 97e016e..93d01ec 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -347,9 +347,7 @@ function TabsImplementation({
     && !tabs[requestedValue].props.disabled;
   const selectedValue = requestedValueIsSelectable
     ? requestedValue
-    : isControlled
-      ? requestedValue
-      : firstEnabledIndex;
+    : firstEnabledIndex;
   const tabsStateSignature = JSON.stringify(tabs.map((tab, index) => ({
     disabled: Boolean(tab.props.disabled),
     key: tab.key ?? index,

From c46c93f00f87162451e444604b58145d27c21af5 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 14:37:22 +0800
Subject: [PATCH 04/14] fix(tabs): recompute overflow after the change of class
 or style

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 34 ++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         |  2 ++
 2 files changed, 36 insertions(+)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index 6e3421a..6dc1edb 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -246,3 +246,37 @@ export const Scrollable: Story = {
     await expect(canvas.getByRole("button", { name: "Scroll left" })).toBeInTheDocument();
   },
 };
+
+function ScrollableLayoutChangeExample() {
+  const [wideTabs, setWideTabs] = useState(false);
+  return (
+    <div style={{ maxWidth: "100%", width: "30rem" }}>
+      <GlButton onClick={() => setWideTabs(true)}>Widen tabs</GlButton>
+      <GlScrollableTabs>
+        {["Overview", "Activity", "Members"].map((title) => (
+          <GlTab
+            key={title}
+            tabProps={{ style: { minWidth: wideTabs ? "20rem" : undefined } }}
+            title={title}>
+            {title} panel
+          </GlTab>
+        ))}
+      </GlScrollableTabs>
+    </div>
+  );
+}
+
+export const ScrollableLayoutChanges: Story = {
+  render: () => <ScrollableLayoutChangeExample />,
+  play: async ({ canvas }) => {
+    const tablist = canvas.getByRole("tablist");
+
+    await waitFor(() => expect(tablist.scrollWidth).toBeLessThanOrEqual(tablist.clientWidth));
+    await expect(canvas.queryByRole("button", { name: "Scroll right" })).not.toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("button", { name: "Widen tabs" }));
+
+    await waitFor(() => expect(tablist.scrollWidth).toBeGreaterThan(tablist.clientWidth));
+    await expect(canvas.getByRole("button", { name: "Scroll right" })).toBeInTheDocument();
+  },
+};
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 93d01ec..4a7fe43 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -401,6 +401,8 @@ function TabsImplementation({
       ? null
       : new MutationObserver(updateScrollMetrics);
     mutationObserver?.observe(navElement, {
+      attributes: true,
+      attributeFilter: ["class", "style"],
       characterData: true,
       childList: true,
       subtree: true,

From b44398acf596fe88d4a2ed93d7f4fa5f1348518c Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 14:47:31 +0800
Subject: [PATCH 05/14] fix(tabs): defer query updates until controlled change
 is accepted

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 49 ++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         |  6 ++-
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index 6dc1edb..cc311c1 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -220,6 +220,55 @@ export const QuerySynchronization: Story = {
   },
 };
 
+function ControlledQuerySyncTabs(props: GlTabsProps) {
+  const [acceptChanges, setAcceptChanges] = useState(false);
+  const [value, setValue] = useState(0);
+  useState(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("gl-tabs-controlled-story-view", "all");
+    window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+  });
+
+  return (
+    <>
+      <GlButton onClick={() => setAcceptChanges(true)}>Allow tab changes</GlButton>
+      <GlTabs
+        {...props}
+        onValueChange={(nextValue) => {
+          if(acceptChanges) setValue(nextValue);
+          props.onValueChange?.(nextValue);
+        }}
+        queryParamName="gl-tabs-controlled-story-view"
+        syncActiveTabWithQueryParams
+        value={value}>
+        <GlTab queryParamValue="all" title="All">All issues</GlTab>
+        <GlTab queryParamValue="open" title="Open">Open issues</GlTab>
+      </GlTabs>
+    </>
+  );
+}
+
+export const ControlledQuerySynchronization: Story = {
+  render: (args) => <ControlledQuerySyncTabs {...args} />,
+  play: async ({ args, canvas }) => {
+    const all = canvas.getByRole("tab", { name: "All" });
+    const open = canvas.getByRole("tab", { name: "Open" });
+    const queryValue = () => new URL(window.location.href)
+      .searchParams.get("gl-tabs-controlled-story-view");
+
+    await waitFor(() => expect(queryValue()).toBe("all"));
+    await userEvent.click(open);
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(1);
+    await expect(all).toHaveAttribute("aria-selected", "true");
+    await expect(queryValue()).toBe("all");
+
+    await userEvent.click(canvas.getByRole("button", { name: "Allow tab changes" }));
+    await userEvent.click(open);
+    await waitFor(() => expect(open).toHaveAttribute("aria-selected", "true"));
+    await waitFor(() => expect(queryValue()).toBe("open"));
+  },
+};
+
 export const LazyPanels: Story = {
   args: { lazy: true },
 };
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 4a7fe43..315e717 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -489,8 +489,10 @@ function TabsImplementation({
   const handleValueChange = (nextValue: unknown) => {
     if(typeof nextValue !== "number") return;
 
-    if(!isControlled) setUncontrolledValue(nextValue);
-    if(syncActiveTabWithQueryParams) setQueryTabIndex(tabs, queryParamName, nextValue);
+    if(!isControlled) {
+      setUncontrolledValue(nextValue);
+      if(syncActiveTabWithQueryParams) setQueryTabIndex(tabs, queryParamName, nextValue);
+    }
     onValueChange?.(nextValue);
   };
 

From 24211fedd88463f252154a59a4cbbab1b77d1ef4 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 14:58:45 +0800
Subject: [PATCH 06/14] fix(tabs): keep selected tab stable when children
 reorder

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 51 ++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         | 69 ++++++++++++++++++++--
 2 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index cc311c1..81da9b8 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -109,6 +109,57 @@ export const Controlled: Story = {
   },
 };
 
+function KeyedTabsExample(props: GlTabsProps) {
+  const [tabs, setTabs] = useState([
+    { id: "overview", title: "Overview" },
+    { id: "activity", title: "Activity" },
+    { id: "members", title: "Members" },
+  ]);
+
+  return (
+    <>
+      <GlButton
+        onClick={() => setTabs((currentTabs) => [
+          { id: "new", title: "New" },
+          ...currentTabs,
+        ])}>
+        Insert first tab
+      </GlButton>
+      <GlButton
+        onClick={() => setTabs((currentTabs) => {
+          const activity = currentTabs.find((tab) => tab.id === "activity");
+          if(!activity) return currentTabs;
+          return [activity, ...currentTabs.filter((tab) => tab !== activity)];
+        })}>
+        Move activity first
+      </GlButton>
+      <GlTabs {...props} defaultValue={1}>
+        {tabs.map((tab) => (
+          <GlTab key={tab.id} title={tab.title}>{tab.title} panel</GlTab>
+        ))}
+      </GlTabs>
+    </>
+  );
+}
+
+export const KeyedChildrenReordering: Story = {
+  render: (args) => <KeyedTabsExample {...args} />,
+  play: async ({ args, canvas }) => {
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    await userEvent.click(canvas.getByRole("button", { name: "Insert first tab" }));
+    await waitFor(() => expect(activity).toHaveAttribute("aria-selected", "true"));
+    await expect(canvas.getByRole("tabpanel", { name: "Activity" }))
+      .toHaveTextContent("Activity panel");
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(2);
+
+    await userEvent.click(canvas.getByRole("button", { name: "Move activity first" }));
+    await waitFor(() => expect(activity).toHaveAttribute("aria-selected", "true"));
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(0);
+  },
+};
+
 export const Justified: Story = {
   args: { justified: true },
 };
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 315e717..6c097bf 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -100,6 +100,11 @@ type ScrollMetrics = {
   scrollWidth: number;
 };
 
+type UncontrolledSelection = {
+  key: string | null;
+  value: number;
+};
+
 type TabsImplementationProps = GlScrollableTabsProps & {
   scrollable: boolean;
 };
@@ -277,6 +282,12 @@ function selectableTabIndex(index: number, tabs: GlTabElement[]): number | null
   return firstEnabledTabIndex(tabs);
 }
 
+function tabKeyAtIndex(tabs: GlTabElement[], index: number): string | null {
+  return Number.isInteger(index) && index >= 0 && index < tabs.length
+    ? tabs[index].key
+    : null;
+}
+
 function queryTabIndex(
   tabs: GlTabElement[],
   queryParamName: string,
@@ -338,7 +349,20 @@ function TabsImplementation({
   const after = scrollable ? null : parsedChildren.after;
   const actions = scrollable ? null : parsedChildren.actions;
   const isControlled = value !== undefined;
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  // Explicit keys preserve the active tab instance across child insertion and
+  // reordering. Unkeyed tabs intentionally retain numeric index semantics.
+  const [uncontrolledSelection, setUncontrolledSelection] = useState<UncontrolledSelection>(
+    () => ({
+      key: tabKeyAtIndex(tabs, defaultValue),
+      value: defaultValue,
+    }),
+  );
+  const trackedUncontrolledIndex = uncontrolledSelection.key === null
+    ? -1
+    : tabs.findIndex((tab) => tab.key === uncontrolledSelection.key);
+  const uncontrolledValue = trackedUncontrolledIndex >= 0
+    ? trackedUncontrolledIndex
+    : uncontrolledSelection.value;
   const requestedValue = isControlled ? value : uncontrolledValue;
   const firstEnabledIndex = firstEnabledTabIndex(tabs);
   const requestedValueIsSelectable = Number.isInteger(requestedValue)
@@ -348,6 +372,11 @@ function TabsImplementation({
   const selectedValue = requestedValueIsSelectable
     ? requestedValue
     : firstEnabledIndex;
+  const selectedTabKey = selectedValue === null ? null : tabs[selectedValue].key;
+  const trackedUncontrolledTabMoved = !isControlled
+    && uncontrolledSelection.key !== null
+    && trackedUncontrolledIndex >= 0
+    && trackedUncontrolledIndex !== uncontrolledSelection.value;
   const tabsStateSignature = JSON.stringify(tabs.map((tab, index) => ({
     disabled: Boolean(tab.props.disabled),
     key: tab.key ?? index,
@@ -362,6 +391,25 @@ function TabsImplementation({
   isControlledRef.current = isControlled;
   selectedValueRef.current = selectedValue;
 
+  useEffect(() => {
+    if(isControlled || selectedValue === null || !requestedValueIsSelectable) return;
+    if(
+      uncontrolledSelection.value === selectedValue
+      && uncontrolledSelection.key === selectedTabKey
+    ) return;
+
+    setUncontrolledSelection({ key: selectedTabKey, value: selectedValue });
+    if(trackedUncontrolledTabMoved) onValueChangeRef.current?.(selectedValue);
+  }, [
+    isControlled,
+    requestedValueIsSelectable,
+    selectedTabKey,
+    selectedValue,
+    trackedUncontrolledTabMoved,
+    uncontrolledSelection.key,
+    uncontrolledSelection.value,
+  ]);
+
   const navRef = useRef<HTMLDivElement>(null);
   const [scrollMetrics, setScrollMetrics] = useState<ScrollMetrics>(EMPTY_SCROLL_METRICS);
   const updateScrollMetrics = useCallback(() => {
@@ -447,7 +495,12 @@ function TabsImplementation({
       const nextValue = queryTabIndex(tabs, queryParamName, window.location);
       if(nextValue === null || nextValue === selectedValueRef.current) return;
 
-      if(!isControlledRef.current) setUncontrolledValue(nextValue);
+      if(!isControlledRef.current) {
+        setUncontrolledSelection({
+          key: tabKeyAtIndex(tabs, nextValue),
+          value: nextValue,
+        });
+      }
       onValueChangeRef.current?.(nextValue);
     };
 
@@ -473,7 +526,12 @@ function TabsImplementation({
     if(fallbackRequestRef.current === requestKey) return;
     fallbackRequestRef.current = requestKey;
 
-    if(!isControlled) setUncontrolledValue(firstEnabledIndex);
+    if(!isControlled) {
+      setUncontrolledSelection({
+        key: tabKeyAtIndex(tabs, firstEnabledIndex),
+        value: firstEnabledIndex,
+      });
+    }
     onValueChangeRef.current?.(firstEnabledIndex);
   }, [
     firstEnabledIndex,
@@ -490,7 +548,10 @@ function TabsImplementation({
     if(typeof nextValue !== "number") return;
 
     if(!isControlled) {
-      setUncontrolledValue(nextValue);
+      setUncontrolledSelection({
+        key: tabKeyAtIndex(tabs, nextValue),
+        value: nextValue,
+      });
       if(syncActiveTabWithQueryParams) setQueryTabIndex(tabs, queryParamName, nextValue);
     }
     onValueChange?.(nextValue);

From 44a8501b2dba8c1da0c5e6f67a106a61d1f6dfe6 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 15:07:38 +0800
Subject: [PATCH 07/14] test(tabs): use unique keys in reordering story

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 24 +++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index 81da9b8..3e59f91 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -119,10 +119,15 @@ function KeyedTabsExample(props: GlTabsProps) {
   return (
     <>
       <GlButton
-        onClick={() => setTabs((currentTabs) => [
-          { id: "new", title: "New" },
-          ...currentTabs,
-        ])}>
+        onClick={() => setTabs((currentTabs) => {
+          const newTabNumber = currentTabs
+            .filter((tab) => tab.id.startsWith("new-"))
+            .length + 1;
+          return [
+            { id: `new-${newTabNumber}`, title: `New ${newTabNumber}` },
+            ...currentTabs,
+          ];
+        })}>
         Insert first tab
       </GlButton>
       <GlButton
@@ -148,7 +153,9 @@ export const KeyedChildrenReordering: Story = {
     const activity = canvas.getByRole("tab", { name: "Activity" });
 
     await expect(activity).toHaveAttribute("aria-selected", "true");
-    await userEvent.click(canvas.getByRole("button", { name: "Insert first tab" }));
+    const insertButton = canvas.getByRole("button", { name: "Insert first tab" });
+    await userEvent.click(insertButton);
+    const firstInsertedTab = canvas.getByRole("tab", { name: "New 1" });
     await waitFor(() => expect(activity).toHaveAttribute("aria-selected", "true"));
     await expect(canvas.getByRole("tabpanel", { name: "Activity" }))
       .toHaveTextContent("Activity panel");
@@ -157,6 +164,13 @@ export const KeyedChildrenReordering: Story = {
     await userEvent.click(canvas.getByRole("button", { name: "Move activity first" }));
     await waitFor(() => expect(activity).toHaveAttribute("aria-selected", "true"));
     await expect(args.onValueChange).toHaveBeenLastCalledWith(0);
+
+    await userEvent.click(insertButton);
+    await userEvent.click(firstInsertedTab);
+    await expect(firstInsertedTab).toHaveAttribute("aria-selected", "true");
+    await expect(canvas.getByRole("tabpanel", { name: "New 1" }))
+      .toHaveTextContent("New 1 panel");
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(2);
   },
 };
 

From 1dcb3e30ce5e2f66eb404cda8361237977a065d2 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 15:44:20 +0800
Subject: [PATCH 08/14] fix(tabs): prevent repeated rejected query selection
 requests

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 59 ++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         | 14 +++--
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index 3e59f91..6656115 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -334,6 +334,65 @@ export const ControlledQuerySynchronization: Story = {
   },
 };
 
+function RejectedQuerySelectionTabs(props: GlTabsProps) {
+  const [parentRenderCount, setParentRenderCount] = useState(0);
+  const [selectionRequestCount, setSelectionRequestCount] = useState(0);
+  useState(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("gl-tabs-rejected-story-view", "all");
+    window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+  });
+
+  return (
+    <>
+      <GlButton onClick={() => setParentRenderCount((count) => count + 1)}>
+        Rerender parent ({parentRenderCount})
+      </GlButton>
+      <div>Selection requests: {selectionRequestCount}</div>
+      <GlTabs
+        {...props}
+        onValueChange={(nextValue) => {
+          setSelectionRequestCount((count) => count + 1);
+          props.onValueChange?.(nextValue);
+        }}
+        queryParamName="gl-tabs-rejected-story-view"
+        syncActiveTabWithQueryParams
+        value={0}>
+        <GlTab queryParamValue="all" title="All">All issues</GlTab>
+        <GlTab queryParamValue="open" title="Open">Open issues</GlTab>
+      </GlTabs>
+    </>
+  );
+}
+
+export const RejectedControlledQuerySelection: Story = {
+  render: (args) => <RejectedQuerySelectionTabs {...args} />,
+  play: async ({ args, canvas }) => {
+    const all = canvas.getByRole("tab", { name: "All" });
+    const open = canvas.getByRole("tab", { name: "Open" });
+    const queryValue = () => new URL(window.location.href)
+      .searchParams.get("gl-tabs-rejected-story-view");
+
+    await waitFor(() => expect(queryValue()).toBe("all"));
+    const url = new URL(window.location.href);
+    url.searchParams.set("gl-tabs-rejected-story-view", "open");
+    window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+
+    await waitFor(() => {
+      expect(canvas.getByText("Selection requests: 1")).toBeInTheDocument();
+    });
+    await userEvent.click(canvas.getByRole("button", { name: "Rerender parent (0)" }));
+
+    await expect(args.onValueChange).toHaveBeenCalledTimes(1);
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(1);
+    await expect(canvas.getByText("Selection requests: 1")).toBeInTheDocument();
+    await expect(all).toHaveAttribute("aria-selected", "true");
+    await expect(open).toHaveAttribute("aria-selected", "false");
+    await expect(queryValue()).toBe("open");
+  },
+};
+
 export const LazyPanels: Story = {
   args: { lazy: true },
 };
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 6c097bf..bd1fac4 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -382,11 +382,15 @@ function TabsImplementation({
     key: tab.key ?? index,
     queryParamValue: queryValueForTab(tab, index),
   })));
+  // parseTabsChildren returns a new array on every render. Query synchronization
+  // reads the latest tabs through this ref and reacts only to semantic changes.
+  const tabsRef = useRef(tabs);
   const onValueChangeRef = useRef(onValueChange);
   const isControlledRef = useRef(isControlled);
   const selectedValueRef = useRef<number | null>(selectedValue);
   const queryHistoryReadyRef = useRef(false);
   const fallbackRequestRef = useRef<string | null>(null);
+  tabsRef.current = tabs;
   onValueChangeRef.current = onValueChange;
   isControlledRef.current = isControlled;
   selectedValueRef.current = selectedValue;
@@ -475,13 +479,12 @@ function TabsImplementation({
       || !requestedValueIsSelectable
     ) return;
 
-    setQueryTabIndex(tabs, queryParamName, selectedValue);
+    setQueryTabIndex(tabsRef.current, queryParamName, selectedValue);
   }, [
     queryParamName,
     requestedValueIsSelectable,
     selectedValue,
     syncActiveTabWithQueryParams,
-    tabs,
     tabsStateSignature,
   ]);
 
@@ -492,12 +495,13 @@ function TabsImplementation({
     }
 
     const updateFromLocation = () => {
-      const nextValue = queryTabIndex(tabs, queryParamName, window.location);
+      const currentTabs = tabsRef.current;
+      const nextValue = queryTabIndex(currentTabs, queryParamName, window.location);
       if(nextValue === null || nextValue === selectedValueRef.current) return;
 
       if(!isControlledRef.current) {
         setUncontrolledSelection({
-          key: tabKeyAtIndex(tabs, nextValue),
+          key: tabKeyAtIndex(currentTabs, nextValue),
           value: nextValue,
         });
       }
@@ -509,7 +513,7 @@ function TabsImplementation({
     window.addEventListener("popstate", updateFromLocation);
 
     return () => window.removeEventListener("popstate", updateFromLocation);
-  }, [queryParamName, syncActiveTabWithQueryParams, tabs, tabsStateSignature]);
+  }, [queryParamName, syncActiveTabWithQueryParams, tabsStateSignature]);
 
   useEffect(() => {
     if(requestedValueIsSelectable || firstEnabledIndex === null) {

From 07adf887fddf00288acc37d94d85e9fbb943749a Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 16:07:10 +0800
Subject: [PATCH 09/14] fix(tabs): commit fallback when active tab becomes
 disabled

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 52 ++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         |  4 +-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index 6656115..93851db 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -393,6 +393,58 @@ export const RejectedControlledQuerySelection: Story = {
   },
 };
 
+function DisabledActiveQueryTab(props: GlTabsProps) {
+  const [openDisabled, setOpenDisabled] = useState(false);
+  useState(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("gl-tabs-disabled-story-view", "open");
+    window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+  });
+
+  return (
+    <>
+      <GlButton onClick={() => setOpenDisabled(true)}>Disable open tab</GlButton>
+      <GlButton onClick={() => setOpenDisabled(false)}>Enable open tab</GlButton>
+      <GlTabs
+        {...props}
+        defaultValue={1}
+        queryParamName="gl-tabs-disabled-story-view"
+        syncActiveTabWithQueryParams>
+        <GlTab queryParamValue="all" title="All">All issues</GlTab>
+        <GlTab disabled={openDisabled} queryParamValue="open" title="Open">
+          Open issues
+        </GlTab>
+      </GlTabs>
+    </>
+  );
+}
+
+export const DisabledActiveTabFallback: Story = {
+  render: (args) => <DisabledActiveQueryTab {...args} />,
+  play: async ({ args, canvas }) => {
+    const all = canvas.getByRole("tab", { name: "All" });
+    const open = canvas.getByRole("tab", { name: "Open" });
+    const queryValue = () => new URL(window.location.href)
+      .searchParams.get("gl-tabs-disabled-story-view");
+
+    await waitFor(() => expect(open).toHaveAttribute("aria-selected", "true"));
+    await expect(queryValue()).toBe("open");
+
+    await userEvent.click(canvas.getByRole("button", { name: "Disable open tab" }));
+
+    await waitFor(() => expect(all).toHaveAttribute("aria-selected", "true"));
+    await expect(args.onValueChange).toHaveBeenCalledTimes(1);
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(0);
+    await waitFor(() => expect(queryValue()).toBe("all"));
+
+    await userEvent.click(canvas.getByRole("button", { name: "Enable open tab" }));
+
+    await expect(all).toHaveAttribute("aria-selected", "true");
+    await expect(open).toHaveAttribute("aria-selected", "false");
+    await expect(queryValue()).toBe("all");
+  },
+};
+
 export const LazyPanels: Story = {
   args: { lazy: true },
 };
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index bd1fac4..201ff13 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -523,7 +523,9 @@ function TabsImplementation({
 
     if(syncActiveTabWithQueryParams && typeof window !== "undefined") {
       const locationValue = queryTabIndex(tabs, queryParamName, window.location);
-      if(locationValue !== null && locationValue !== requestedValue) return;
+      // A URL target that normalizes to this fallback is not a competing
+      // selection. Commit it so re-enabling the invalid tab cannot restore it.
+      if(locationValue !== null && locationValue !== firstEnabledIndex) return;
     }
 
     const requestKey = `${requestedValue}:${firstEnabledIndex}:${tabsStateSignature}`;

From 3396e18f99c6926bb8ce22780e185b9b39c7a035 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 16:21:39 +0800
Subject: [PATCH 10/14] fix(tabs): select previous tab after removing active
 last tab

Match upstream behavior by falling back to the last enabled remaining tab
when an uncontrolled active tail tab is removed.
---
 packages/ui/src/base/tabs/tabs.stories.tsx | 36 ++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         | 36 +++++++++++++++++-----
 2 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index 93851db..2e413ff 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -174,6 +174,42 @@ export const KeyedChildrenReordering: Story = {
   },
 };
 
+function RemovableLastTabExample(props: GlTabsProps) {
+  const [showMembers, setShowMembers] = useState(true);
+
+  return (
+    <>
+      <GlButton onClick={() => setShowMembers(false)}>Remove members</GlButton>
+      <GlTabs {...props} defaultValue={2}>
+        <GlTab key="overview" title="Overview">Overview panel</GlTab>
+        <GlTab key="activity" title="Activity">Activity panel</GlTab>
+        {showMembers ? (
+          <GlTab key="members" title="Members">Members panel</GlTab>
+        ) : null}
+      </GlTabs>
+    </>
+  );
+}
+
+export const ActiveLastTabRemoval: Story = {
+  render: (args) => <RemovableLastTabExample {...args} />,
+  play: async ({ args, canvas }) => {
+    const overview = canvas.getByRole("tab", { name: "Overview" });
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+    const members = canvas.getByRole("tab", { name: "Members" });
+
+    await expect(members).toHaveAttribute("aria-selected", "true");
+    await userEvent.click(canvas.getByRole("button", { name: "Remove members" }));
+
+    await waitFor(() => expect(activity).toHaveAttribute("aria-selected", "true"));
+    await expect(overview).toHaveAttribute("aria-selected", "false");
+    await expect(canvas.getByRole("tabpanel", { name: "Activity" }))
+      .toHaveTextContent("Activity panel");
+    await expect(args.onValueChange).toHaveBeenCalledTimes(1);
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(1);
+  },
+};
+
 export const Justified: Story = {
   args: { justified: true },
 };
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 201ff13..0f72fbd 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -275,6 +275,13 @@ function firstEnabledTabIndex(tabs: GlTabElement[]): number | null {
   return index === -1 ? null : index;
 }
 
+function lastEnabledTabIndex(tabs: GlTabElement[]): number | null {
+  for(let index = tabs.length - 1; index >= 0; index -= 1) {
+    if(!tabs[index].props.disabled) return index;
+  }
+  return null;
+}
+
 function selectableTabIndex(index: number, tabs: GlTabElement[]): number | null {
   if(Number.isInteger(index) && index >= 0 && index < tabs.length && !tabs[index].props.disabled) {
     return index;
@@ -364,14 +371,23 @@ function TabsImplementation({
     ? trackedUncontrolledIndex
     : uncontrolledSelection.value;
   const requestedValue = isControlled ? value : uncontrolledValue;
+  const previousTabsLengthRef = useRef(tabs.length);
   const firstEnabledIndex = firstEnabledTabIndex(tabs);
   const requestedValueIsSelectable = Number.isInteger(requestedValue)
     && requestedValue >= 0
     && requestedValue < tabs.length
     && !tabs[requestedValue].props.disabled;
+  // Upstream keeps selection adjacent when removing the active tail tab.
+  // Other invalid values continue to fall back to the first enabled tab.
+  const activeLastTabWasRemoved = !isControlled
+    && tabs.length < previousTabsLengthRef.current
+    && requestedValue >= tabs.length;
+  const fallbackIndex = activeLastTabWasRemoved
+    ? lastEnabledTabIndex(tabs)
+    : firstEnabledIndex;
   const selectedValue = requestedValueIsSelectable
     ? requestedValue
-    : firstEnabledIndex;
+    : fallbackIndex;
   const selectedTabKey = selectedValue === null ? null : tabs[selectedValue].key;
   const trackedUncontrolledTabMoved = !isControlled
     && uncontrolledSelection.key !== null
@@ -395,6 +411,10 @@ function TabsImplementation({
   isControlledRef.current = isControlled;
   selectedValueRef.current = selectedValue;
 
+  useEffect(() => {
+    previousTabsLengthRef.current = tabs.length;
+  }, [tabs.length]);
+
   useEffect(() => {
     if(isControlled || selectedValue === null || !requestedValueIsSelectable) return;
     if(
@@ -516,7 +536,7 @@ function TabsImplementation({
   }, [queryParamName, syncActiveTabWithQueryParams, tabsStateSignature]);
 
   useEffect(() => {
-    if(requestedValueIsSelectable || firstEnabledIndex === null) {
+    if(requestedValueIsSelectable || fallbackIndex === null) {
       fallbackRequestRef.current = null;
       return;
     }
@@ -525,22 +545,22 @@ function TabsImplementation({
       const locationValue = queryTabIndex(tabs, queryParamName, window.location);
       // A URL target that normalizes to this fallback is not a competing
       // selection. Commit it so re-enabling the invalid tab cannot restore it.
-      if(locationValue !== null && locationValue !== firstEnabledIndex) return;
+      if(locationValue !== null && locationValue !== fallbackIndex) return;
     }
 
-    const requestKey = `${requestedValue}:${firstEnabledIndex}:${tabsStateSignature}`;
+    const requestKey = `${requestedValue}:${fallbackIndex}:${tabsStateSignature}`;
     if(fallbackRequestRef.current === requestKey) return;
     fallbackRequestRef.current = requestKey;
 
     if(!isControlled) {
       setUncontrolledSelection({
-        key: tabKeyAtIndex(tabs, firstEnabledIndex),
-        value: firstEnabledIndex,
+        key: tabKeyAtIndex(tabs, fallbackIndex),
+        value: fallbackIndex,
       });
     }
-    onValueChangeRef.current?.(firstEnabledIndex);
+    onValueChangeRef.current?.(fallbackIndex);
   }, [
-    firstEnabledIndex,
+    fallbackIndex,
     isControlled,
     queryParamName,
     requestedValue,

From fc22bbab8cf54ffbf7bec68398d8dd47b57862be Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 16:27:55 +0800
Subject: [PATCH 11/14] feat(tabs): support ArrowUp and ArrowDown tab
 navigation

---
 packages/ui/src/base/tabs/tabs.stories.tsx |  8 ++++++++
 packages/ui/src/base/tabs/tabs.tsx         | 20 ++++++++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index 2e413ff..ea6a077 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -75,6 +75,14 @@ export const Default: Story = {
 
     await user.keyboard("{ArrowRight}");
     await expect(members).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}");
+    await expect(activity).toHaveFocus();
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+
+    await user.keyboard("{ArrowDown}");
+    await expect(members).toHaveFocus();
+    await expect(members).toHaveAttribute("aria-selected", "true");
   },
 };
 
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 0f72fbd..6d92dc2 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -602,10 +602,18 @@ function TabsImplementation({
           break;
         }
       }
-    } else if(event.key === "ArrowLeft" || event.key === "ArrowRight") {
-      const isRtl = getComputedStyle(navElement).direction === "rtl";
-      const forwardKey = isRtl ? "ArrowLeft" : "ArrowRight";
-      const step = event.key === forwardKey ? 1 : -1;
+    } else if(
+      event.key === "ArrowLeft"
+      || event.key === "ArrowRight"
+      || event.key === "ArrowUp"
+      || event.key === "ArrowDown"
+    ) {
+      let step = event.key === "ArrowDown" ? 1 : -1;
+      if(event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        const isRtl = getComputedStyle(navElement).direction === "rtl";
+        const forwardKey = isRtl ? "ArrowLeft" : "ArrowRight";
+        step = event.key === forwardKey ? 1 : -1;
+      }
       let candidateIndex = currentIndex + step;
 
       while(candidateIndex >= 0 && candidateIndex < tabs.length) {
@@ -619,8 +627,8 @@ function TabsImplementation({
       return;
     }
 
-    // Base UI keeps disabled tabs focusable. Pajamas tabs skip them, so handle
-    // the horizontal composite keys here and stop Base UI's list handler.
+    // Base UI keeps disabled tabs focusable and ignores vertical arrows for a
+    // horizontal list. Handle Pajamas' composite keys and stop its list handler.
     event.preventDefault();
     event.stopPropagation();
     if(nextIndex === currentIndex) return;

From 1c6cca22cc6b208dc1e547c56870bc37ef0f8247 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 16:42:52 +0800
Subject: [PATCH 12/14] fix(tabs): stop event propagation if the keydown event
 is default prevented

---
 packages/ui/src/base/tabs/tabs.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 6d92dc2..991ad3f 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -733,7 +733,12 @@ function TabsImplementation({
                     tabProps?.onKeyDown?.(
                       event as ReactKeyboardEvent<HTMLButtonElement>,
                     );
-                    if(!event.defaultPrevented) moveFocusToEnabledTab(event, index);
+                    if(event.defaultPrevented) {
+                      event.stopPropagation();
+                      return;
+                    }
+
+                    moveFocusToEnabledTab(event, index);
                   }}
                   value={index}>
                   {title}

From f845dd73ed23ccb2c60926e22a0d43e346a1433c Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 17:14:26 +0800
Subject: [PATCH 13/14] fix(tabs): reset selection when all tabs are removed

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 70 ++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         | 12 ++++
 2 files changed, 82 insertions(+)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index ea6a077..c5a1757 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -218,6 +218,76 @@ export const ActiveLastTabRemoval: Story = {
   },
 };
 
+function RemovableAllTabsExample(props: GlTabsProps) {
+  const [showTabs, setShowTabs] = useState(true);
+
+  return (
+    <>
+      <GlButton onClick={() => setShowTabs(false)}>Remove all tabs</GlButton>
+      <GlButton onClick={() => setShowTabs(true)}>Restore tabs</GlButton>
+      <GlTabs {...props} defaultValue={1} empty="No tabs available">
+        {showTabs ? (
+          <>
+            <GlTab key="overview" title="Overview">Overview panel</GlTab>
+            <GlTab key="activity" title="Activity">Activity panel</GlTab>
+          </>
+        ) : null}
+      </GlTabs>
+    </>
+  );
+}
+
+export const AllTabsRemoval: Story = {
+  render: (args) => <RemovableAllTabsExample {...args} />,
+  play: async ({ args, canvas }) => {
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    await userEvent.click(canvas.getByRole("button", { name: "Remove all tabs" }));
+    await expect(canvas.queryByRole("tab")).not.toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("button", { name: "Restore tabs" }));
+
+    const overview = await canvas.findByRole("tab", { name: "Overview" });
+    const restoredActivity = canvas.getByRole("tab", { name: "Activity" });
+    await waitFor(() => expect(overview).toHaveAttribute("aria-selected", "true"));
+    await expect(restoredActivity).toHaveAttribute("aria-selected", "false");
+    await expect(args.onValueChange).toHaveBeenCalledTimes(1);
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(0);
+  },
+};
+
+function InitiallyEmptyTabsExample(props: GlTabsProps) {
+  const [showTabs, setShowTabs] = useState(false);
+
+  return (
+    <>
+      <GlButton onClick={() => setShowTabs(true)}>Load tabs</GlButton>
+      <GlTabs {...props} defaultValue={1} empty="No tabs available">
+        {showTabs ? (
+          <>
+            <GlTab key="overview" title="Overview">Overview panel</GlTab>
+            <GlTab key="activity" title="Activity">Activity panel</GlTab>
+          </>
+        ) : null}
+      </GlTabs>
+    </>
+  );
+}
+
+export const InitiallyEmptyTabs: Story = {
+  render: (args) => <InitiallyEmptyTabsExample {...args} />,
+  play: async ({ args, canvas }) => {
+    await expect(canvas.queryByRole("tab")).not.toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("button", { name: "Load tabs" }));
+
+    const activity = await canvas.findByRole("tab", { name: "Activity" });
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    await expect(args.onValueChange).not.toHaveBeenCalled();
+  },
+};
+
 export const Justified: Story = {
   args: { justified: true },
 };
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 991ad3f..502e782 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -377,6 +377,11 @@ function TabsImplementation({
     && requestedValue >= 0
     && requestedValue < tabs.length
     && !tabs[requestedValue].props.disabled;
+  // Preserve `defaultValue` while initially empty, but clear a committed
+  // selection when a previously populated list loses every tab.
+  const allTabsWereRemoved = !isControlled
+    && tabs.length === 0
+    && previousTabsLengthRef.current > 0;
   // Upstream keeps selection adjacent when removing the active tail tab.
   // Other invalid values continue to fall back to the first enabled tab.
   const activeLastTabWasRemoved = !isControlled
@@ -536,6 +541,12 @@ function TabsImplementation({
   }, [queryParamName, syncActiveTabWithQueryParams, tabsStateSignature]);
 
   useEffect(() => {
+    if(allTabsWereRemoved) {
+      fallbackRequestRef.current = null;
+      setUncontrolledSelection({ key: null, value: -1 });
+      return;
+    }
+
     if(requestedValueIsSelectable || fallbackIndex === null) {
       fallbackRequestRef.current = null;
       return;
@@ -560,6 +571,7 @@ function TabsImplementation({
     }
     onValueChangeRef.current?.(fallbackIndex);
   }, [
+    allTabsWereRemoved,
     fallbackIndex,
     isControlled,
     queryParamName,

From 2cbb219acd8f2e1e8c818a6238428d85c6e9ddca Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sat, 5 Sep 2026 17:31:30 +0800
Subject: [PATCH 14/14] fix(tabs): preserve adjacent selection after
 query-synced removal

---
 packages/ui/src/base/tabs/tabs.stories.tsx | 54 ++++++++++++++++++++++
 packages/ui/src/base/tabs/tabs.tsx         | 18 ++++++--
 2 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/base/tabs/tabs.stories.tsx b/packages/ui/src/base/tabs/tabs.stories.tsx
index c5a1757..83c958e 100644
--- a/packages/ui/src/base/tabs/tabs.stories.tsx
+++ b/packages/ui/src/base/tabs/tabs.stories.tsx
@@ -218,6 +218,60 @@ export const ActiveLastTabRemoval: Story = {
   },
 };
 
+function QuerySyncedRemovableLastTabExample(props: GlTabsProps) {
+  const [showMembers, setShowMembers] = useState(true);
+  useState(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("gl-tabs-removal-story-view", "members");
+    window.history.replaceState({}, "", `${url.pathname}${url.search}${url.hash}`);
+  });
+
+  return (
+    <>
+      <GlButton onClick={() => setShowMembers(false)}>Remove members</GlButton>
+      <GlTabs
+        {...props}
+        defaultValue={2}
+        queryParamName="gl-tabs-removal-story-view"
+        syncActiveTabWithQueryParams>
+        <GlTab key="overview" queryParamValue="overview" title="Overview">
+          Overview panel
+        </GlTab>
+        <GlTab key="activity" queryParamValue="activity" title="Activity">
+          Activity panel
+        </GlTab>
+        {showMembers ? (
+          <GlTab key="members" queryParamValue="members" title="Members">
+            Members panel
+          </GlTab>
+        ) : null}
+      </GlTabs>
+    </>
+  );
+}
+
+export const QuerySyncedActiveLastTabRemoval: Story = {
+  render: (args) => <QuerySyncedRemovableLastTabExample {...args} />,
+  play: async ({ args, canvas }) => {
+    const overview = canvas.getByRole("tab", { name: "Overview" });
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+    const members = canvas.getByRole("tab", { name: "Members" });
+    const queryValue = () => new URL(window.location.href)
+      .searchParams.get("gl-tabs-removal-story-view");
+
+    await expect(members).toHaveAttribute("aria-selected", "true");
+    await expect(queryValue()).toBe("members");
+
+    await userEvent.click(canvas.getByRole("button", { name: "Remove members" }));
+
+    await waitFor(() => expect(activity).toHaveAttribute("aria-selected", "true"));
+    await expect(overview).toHaveAttribute("aria-selected", "false");
+    await waitFor(() => expect(queryValue()).toBe("activity"));
+    await expect(args.onValueChange).toHaveBeenCalledTimes(1);
+    await expect(args.onValueChange).toHaveBeenLastCalledWith(1);
+  },
+};
+
 function RemovableAllTabsExample(props: GlTabsProps) {
   const [showTabs, setShowTabs] = useState(true);
 
diff --git a/packages/ui/src/base/tabs/tabs.tsx b/packages/ui/src/base/tabs/tabs.tsx
index 502e782..6d17f2b 100644
--- a/packages/ui/src/base/tabs/tabs.tsx
+++ b/packages/ui/src/base/tabs/tabs.tsx
@@ -533,12 +533,19 @@ function TabsImplementation({
       onValueChangeRef.current?.(nextValue);
     };
 
-    updateFromLocation();
+    // A removed active tail can leave the URL pointing at the removed tab.
+    // Commit the adjacent fallback before reading that stale value again.
+    if(!activeLastTabWasRemoved) updateFromLocation();
     queryHistoryReadyRef.current = true;
     window.addEventListener("popstate", updateFromLocation);
 
     return () => window.removeEventListener("popstate", updateFromLocation);
-  }, [queryParamName, syncActiveTabWithQueryParams, tabsStateSignature]);
+  }, [
+    activeLastTabWasRemoved,
+    queryParamName,
+    syncActiveTabWithQueryParams,
+    tabsStateSignature,
+  ]);
 
   useEffect(() => {
     if(allTabsWereRemoved) {
@@ -552,7 +559,11 @@ function TabsImplementation({
       return;
     }
 
-    if(syncActiveTabWithQueryParams && typeof window !== "undefined") {
+    if(
+      syncActiveTabWithQueryParams
+      && typeof window !== "undefined"
+      && !activeLastTabWasRemoved
+    ) {
       const locationValue = queryTabIndex(tabs, queryParamName, window.location);
       // A URL target that normalizes to this fallback is not a competing
       // selection. Commit it so re-enabling the invalid tab cannot restore it.
@@ -571,6 +582,7 @@ function TabsImplementation({
     }
     onValueChangeRef.current?.(fallbackIndex);
   }, [
+    activeLastTabWasRemoved,
     allTabsWereRemoved,
     fallbackIndex,
     isControlled,