[spike] Tabbed SelectPanel with correct ARIA on the stable API (forced rebuild)

packages/react/src/SelectPanel/examples/RefPickerV1Correct.data.ts

@@ -0,0 +1,52 @@
+// Mock data for the RefPickerV1Correct example. Not part of the component's
+// product logic — supplied to the component as props in the Storybook story.
+
+export const branches: string[] = [
+  'main',
+  'develop',
+  'release/2.0',
+  'release/1.9',
+  'feature/select-panel-tabs',
+  'feature/ref-picker',
+  'feature/virtualized-list',
+  'feature/a11y-audit',
+  'fix/overlay-focus-trap',
+  'fix/listbox-aria',
+  'fix/keyboard-nav',
+  'chore/bump-deps',
+  'chore/storybook-9',
+  'docs/contributing',
+  'docs/adr-overlay',
+  'experiment/css-modules',
+  'experiment/sx-removal',
+  'hotfix/prod-regression',
+  'wip/design-tokens',
+  'wip/theme-refactor',
+  'renovate/octicons',
+  'renovate/typescript-5',
+  'dependabot/npm/react-19',
+  'gh-pages',
+]
+
+export const tags: string[] = [
+  'v2.0.0',
+  'v1.9.4',
+  'v1.9.3',
+  'v1.9.2',
+  'v1.9.1',
+  'v1.9.0',
+  'v1.8.0',
+  'v1.7.2',
+  'v1.7.1',
+  'v1.7.0',
+  'v1.6.0',
+  'v1.5.0',
+  'v1.4.0',
+  'v1.0.0',
+  'v0.9.0-rc.2',
+  'v0.9.0-rc.1',
+  'nightly-2024-06-01',
+  'nightly-2024-05-15',
+  'release-candidate',
+  'stable',
+]

packages/react/src/SelectPanel/examples/RefPickerV1Correct.module.css

@@ -0,0 +1,140 @@
+.Panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+}
+
+.Header {
+  padding: var(--base-size-12, var(--base-size-12)) var(--base-size-12, var(--base-size-12))
+    var(--base-size-8, var(--base-size-8));
+}
+
+.Title {
+  font-size: var(--text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+  margin: 0;
+}
+
+.Search {
+  padding: 0 var(--base-size-12, var(--base-size-12)) var(--base-size-8, var(--base-size-8));
+}
+
+.TabList {
+  display: flex;
+  gap: var(--base-size-4, 4px);
+  padding: 0 var(--base-size-12, var(--base-size-12));
+  border-bottom: var(--borderWidth-thin, var(--borderWidth-thin)) solid var(--borderColor-default, #d1d9e0);
+}
+
+.Tab {
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-bottom: var(--borderWidth-thick) solid transparent;
+  margin-bottom: -1px;
+  padding: var(--base-size-8, var(--base-size-8)) var(--base-size-8, var(--base-size-8));
+  font: inherit;
+  font-size: var(--text-body-size-small, 12px);
+  color: var(--fgColor-muted, #59636e);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-4, 4px);
+  border-radius: var(--borderRadius-medium, var(--borderRadius-default))
+    var(--borderRadius-medium, var(--borderRadius-default)) 0 0;
+}
+
+.Tab:hover {
+  color: var(--fgColor-default, #1f2328);
+}
+
+.Tab[aria-selected='true'] {
+  color: var(--fgColor-default, #1f2328);
+  border-bottom-color: var(--underlineNav-borderColor-active, #fd8c73);
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.Tab:focus-visible {
+  outline: 2px solid var(--focus-outlineColor, #0969da);
+  outline-offset: -2px;
+}
+
+.Count {
+  color: var(--fgColor-muted, #59636e);
+  font-weight: var(--base-text-weight-normal, 400);
+}
+
+.TabPanel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.TabPanel:focus-visible {
+  outline: none;
+}
+
+.ListContainer {
+  overflow-y: auto;
+  max-height: 280px;
+  padding: var(--base-size-8, var(--base-size-8));
+}
+
+.Listbox {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.Option {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8, 8px);
+  padding: var(--base-size-6, var(--base-size-6)) var(--base-size-8, var(--base-size-8));
+  border-radius: var(--borderRadius-medium, var(--borderRadius-default));
+  cursor: pointer;
+  color: var(--fgColor-default, #1f2328);
+  font-size: var(--text-body-size-medium, 14px);
+  user-select: none;
+}
+
+.Option:hover {
+  background-color: var(--control-transparent-bgColor-hover, rgb(101 108 133 / 0.08));
+}
+
+.Option[data-is-active-descendant] {
+  background-color: var(--control-transparent-bgColor-active, rgb(101 108 133 / 0.14));
+}
+
+.OptionLeading {
+  display: inline-flex;
+  color: var(--fgColor-muted, #59636e);
+  flex-shrink: 0;
+}
+
+.OptionText {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.OptionCheck {
+  display: inline-flex;
+  color: var(--fgColor-accent, #0969da);
+  flex-shrink: 0;
+  visibility: hidden;
+}
+
+.Option[aria-selected='true'] .OptionCheck {
+  visibility: visible;
+}
+
+.Empty {
+  padding: var(--base-size-16, var(--base-size-16));
+  text-align: center;
+  color: var(--fgColor-muted, #59636e);
+  font-size: var(--text-body-size-small, 12px);
+}

packages/react/src/SelectPanel/examples/RefPickerV1Correct.stories.tsx

@@ -0,0 +1,24 @@
+import type {Meta, StoryObj} from '@storybook/react-vite'
+import {RefPickerV1Correct} from './RefPickerV1Correct'
+import {branches, tags} from './RefPickerV1Correct.data'
+
+const meta = {
+  title: 'Components/SelectPanel/Examples/RefPickerV1Correct',
+  component: RefPickerV1Correct,
+  args: {
+    branches,
+    tags,
+  },
+} satisfies Meta<typeof RefPickerV1Correct>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithInitialSelection: Story = {
+  args: {
+    initialSelected: {kind: 'branches', name: 'main'},
+  },
+}