@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/ui': patch
+---
+
+Self-serve SSO: restore keyboard-accessible provider selection, mark configuration wizard steps complete based on connection state rather than position, and fix the organization Security page loading state.
@@ -20,13 +20,25 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config
 
   const steps = React.useMemo<WizardStepConfig[]>(
     () => [
-      { id: 'verify-domain', label: 'Domains' },
-      // `select-provider` now lives inside `configure` as its first sub-step, so
-      // reaching `configure` only requires verified domains (fresh start) or an
-      // existing connection (resume / change-provider).
-      { id: 'configure', label: 'Connection', guard: () => allDomainsVerified || c.hasConnection },
-      { id: 'test', label: 'Test', guard: () => c.hasMinimumConfiguration || c.isActive },
-      { id: 'activate', label: 'Activate', guard: () => c.hasSuccessfulTestRun || c.isActive },
+      { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified },
+      {
+        id: 'configure',
+        label: 'Connection',
+        isReachable: () => allDomainsVerified || c.hasConnection,
+        isComplete: () => c.hasMinimumConfiguration || c.isActive,
+      },
+      {
+        id: 'test',
+        label: 'Test',
+        isReachable: () => c.hasMinimumConfiguration || c.isActive,
+        isComplete: () => c.hasSuccessfulTestRun || c.isActive,
+      },
+      {
+        id: 'activate',
+        label: 'Activate',
+        isReachable: () => c.hasSuccessfulTestRun || c.isActive,
+        isComplete: () => c.isActive,
+      },
     ],
     [c, allDomainsVerified],
   );
 
@@ -267,4 +267,58 @@ describe('ConfigureSSO wizard navigation (integration)', () => {
     expect(getByText('Test')).toBeInTheDocument();
     expect(getByText('Activate')).toBeInTheDocument();
   });
+
+  // Completion is guard-driven, not positional: re-entering an ACTIVE connection
+  // shows every stepper step ticked even after navigating BACK to an earlier step.
+  // A completed bullet renders a checkmark regardless of whether it is also the
+  // current step — so for a fully active connection all four bullets show checkmarks
+  // and zero show a digit. Under the old positional logic the steps AFTER current
+  // would lose their tick and show their numbers again, so this asserts the fix directly.
+  it('re-entering an active connection keeps every step completed after navigating back', async () => {
+    const { wrapper, fixtures } = await createFixtures(withAdminOrgUser);
+
+    fixtures.clerk.organization?.getEnterpriseConnections.mockResolvedValue([
+      { ...configuredConnection, id: 'ent_active', active: true } as any,
+    ]);
+    fixtures.clerk.organization?.getEnterpriseConnectionTestRuns.mockResolvedValue({
+      data: [],
+      total_count: 0,
+    } as any);
+    mockVerifiedDomains(fixtures);
+
+    const { container, findByText, userEvent } = render(<ConfigureSSO />, { wrapper });
+
+    // Mounts on the activate step (active connection short-circuits to it).
+    await findByText(/sso connection is active/i);
+
+    const stepper = () => container.querySelector('.cl-configureSSOStepper') as HTMLElement;
+    const bulletDigitCount = () =>
+      Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemBullet')).filter(el =>
+        /\d/.test(el.textContent ?? ''),
+      ).length;
+    const stepperLabels = () =>
+      Array.from(stepper().querySelectorAll('.cl-configureSSOStepperItemLabel')).map(el => el.textContent);
+    const stepperButton = (label: string) =>
+      Array.from(stepper().querySelectorAll<HTMLButtonElement>('.cl-configureSSOStepperItem')).find(
+        btn => btn.textContent?.trim() === label,
+      )!;
+
+    // The breadcrumb carries all four labels.
+    expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+
+    // On the terminal step all four steps are complete, so all four bullets show
+    // checkmarks — including the current 'Activate' step — and zero show a digit.
+    expect(bulletDigitCount()).toBe(0);
+
+    // Navigate BACK to the first step via the breadcrumb. Every step's guard still
+    // holds for an active connection, so 'Domains' is reachable.
+    await userEvent.click(stepperButton('Domains'));
+
+    // Positional completion would now un-tick Connection/Test/Activate (they sit
+    // AFTER current) and show their numbers. Guard-driven completion keeps them
+    // ticked. 'Domains' is also completed, so its bullet shows a checkmark too —
+    // zero bullets show a digit.
+    expect(bulletDigitCount()).toBe(0);
+    expect(stepperLabels()).toEqual(['Domains', 'Connection', 'Test', 'Activate']);
+  });
 });
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Box, descriptors, Flex, Icon, SimpleButton, Text, Span } from '@/customizables';
-import { ChevronRight, Checkmark } from '@/icons';
+import { Box, descriptors, Flex, Icon, SimpleButton, Span, Text } from '@/customizables';
+import { Checkmark, ChevronRight } from '@/icons';
 
 import type { StepperItemProps, StepperProps } from './types';
 
@@ -75,14 +75,14 @@ const Item = ({
           width: theme.sizes.$4,
           height: theme.sizes.$4,
           borderRadius: theme.radii.$circle,
-          backgroundColor: isCurrent
-            ? theme.colors.$colorForeground
-            : isCompleted
-              ? theme.colors.$success500
+          backgroundColor: isCompleted
+            ? theme.colors.$success500
+            : isCurrent
+              ? theme.colors.$colorForeground
               : theme.colors.$colorMutedForeground,
         })}
       >
-        {isCompleted && !isCurrent ? (
+        {isCompleted ? (
           <Icon
             icon={Checkmark}
             size='sm'
 
@@ -8,7 +8,7 @@ import { useWizard, WizardContext } from './WizardContext';
 interface WizardProps {
   /** The step graph (see the component doc below). The array IS the graph. */
   steps: WizardStepConfig[];
-  /** Mount here instead of the guard-derived initial step (nested resume). */
+  /** Mount here instead of the reachability-derived initial step (nested resume). */
   initialStepId?: string;
   children?: React.ReactNode;
 }
@@ -17,19 +17,20 @@ interface WizardProps {
  * Generic, declarative, UI-less wizard primitive.
  *
  * Steps are a body-less config array (`steps`): each entry is one navigable
- * position with an `id` + optional inline `guard` / `label`. The graph IS the
- * array — known synchronously, no `React.Children` walking, no effect-timed
+ * position with an `id` + optional inline `isReachable` / `label`. The graph IS
+ * the array — known synchronously, no `React.Children` walking, no effect-timed
  * registration — and feeds a domain-agnostic machine in the same render pass.
  * Rendering lives in `children`: chrome is a normal child, each step body is a
  * render-only `<Wizard.Match id>`.
  *
  * The machine is hidden behind `useWizard()`. Conditional flow is expressed by
- * each step's inline `guard` (applied uniformly by init / nav / stepper); steps
- * are never added or removed, only gated. Inner sub-flows nest another `<Wizard>`
- * whose forward boundary falls through to the parent (a nested last-step `goNext`
- * advances the parent). A guard-blocked mid-flow `goNext` does not hard-stop: it
- * parks a deferred advance that resolves once the next guard becomes satisfied
- * while still on the step (abandoned by an explicit `goPrev`/`goToStep`).
+ * each step's inline `isReachable` (applied uniformly by init / nav / stepper);
+ * steps are never added or removed, only gated. Inner sub-flows nest another
+ * `<Wizard>` whose forward boundary falls through to the parent (a nested
+ * last-step `goNext` advances the parent). An isReachable-blocked mid-flow
+ * `goNext` does not hard-stop: it parks a deferred advance that resolves once
+ * the next step becomes reachable while still on the step (abandoned by an
+ * explicit `goPrev`/`goToStep`).
  */
 const WizardRoot = ({ steps, initialStepId, children }: WizardProps): JSX.Element => {
   const parentWizard = React.useContext(WizardContext);
 
@@ -28,7 +28,7 @@ const NavButtons = (): JSX.Element => {
 
 describe('<Wizard> + <Wizard.Match>', () => {
   it('renders only the active step body and advances on goNext', () => {
-    const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => true }];
+    const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => true }];
 
     render(
       <Wizard
@@ -56,7 +56,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
   });
 
   it('a nested sub-flow terminal goNext advances the PARENT wizard', () => {
-    const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', guard: () => true }];
+    const outer: WizardStepConfig[] = [{ id: 'outer-1' }, { id: 'outer-2', isReachable: () => true }];
     // Single inner step => inner is immediately terminal; its goNext bubbles.
     const inner: WizardStepConfig[] = [{ id: 'inner-only' }];
 
@@ -99,7 +99,7 @@ describe('<Wizard> + <Wizard.Match>', () => {
   });
 
   it('a guard-blocked top-level goNext is a hard stop (no advance)', () => {
-    const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', guard: () => false }];
+    const steps: WizardStepConfig[] = [{ id: 'a' }, { id: 'b', isReachable: () => false }];
 
     render(
       <Wizard
 
@@ -1,41 +1,41 @@
 import { describe, expect, it } from 'vitest';
 
-import { guardHolds, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
+import { isStepReachable, initialState, reduce, type WizardConfig, type WizardState } from '../reducer';
 import type { WizardStepDescriptor } from '../types';
 
 const cfg = (descriptors: WizardStepDescriptor[]): WizardConfig => ({ descriptors });
 
 /**
- * A representative monotonic guard set over 4 steps:
- *   a — entry (no guard, always enterable)
- *   b — guard: g1
- *   c — guard: g2
- *   d — guard: g3
+ * A representative monotonic reachability set over 4 steps:
+ *   a — entry (no isReachable, always enterable)
+ *   b — isReachable: g1
+ *   c — isReachable: g2
+ *   d — isReachable: g3
  * Toggling g1..g3 from all-false to all-true walks the furthest-reachable
  * boundary one step at a time. Monotonic by construction (g3 ⇒ g2 ⇒ g1).
  */
 const monotonic = (g1: boolean, g2: boolean, g3: boolean): WizardStepDescriptor[] => [
   { id: 'a' },
-  { id: 'b', guard: () => g1 },
-  { id: 'c', guard: () => g2 },
-  { id: 'd', guard: () => g3 },
+  { id: 'b', isReachable: () => g1 },
+  { id: 'c', isReachable: () => g2 },
+  { id: 'd', isReachable: () => g3 },
 ];
 
 const at = (current: string): WizardState => ({ current, direction: 0, hasNavigated: false });
 
-describe('guardHolds', () => {
-  it('resolves TRUE when no guard (entry step default flip)', () => {
-    expect(guardHolds({ id: 'a' })).toBe(true);
+describe('isStepReachable', () => {
+  it('resolves TRUE when no isReachable (entry step default)', () => {
+    expect(isStepReachable({ id: 'a' })).toBe(true);
   });
 
   it('delegates to the inline predicate', () => {
-    expect(guardHolds({ id: 'b', guard: () => true })).toBe(true);
-    expect(guardHolds({ id: 'b', guard: () => false })).toBe(false);
+    expect(isStepReachable({ id: 'b', isReachable: () => true })).toBe(true);
+    expect(isStepReachable({ id: 'b', isReachable: () => false })).toBe(false);
   });
 });
 
 describe('initialState — furthest contiguously-reachable step', () => {
-  it('all guards false but entry → step 0', () => {
+  it('all isReachable false but entry → step 0', () => {
     expect(initialState(cfg(monotonic(false, false, false))).current).toBe('a');
   });
 
@@ -51,7 +51,7 @@ describe('initialState — furthest contiguously-reachable step', () => {
     expect(initialState(cfg(monotonic(true, true, true))).current).toBe('d');
   });
 
-  it('stops at the first gate (does not jump a closed guard)', () => {
+  it('stops at the first gate (does not jump a closed isReachable)', () => {
     // b open, c closed, d open: contiguous run stops at b.
     expect(initialState(cfg(monotonic(true, false, true))).current).toBe('b');
   });
@@ -80,9 +80,9 @@ describe('reduce — referential identity on every no-op path', () => {
     expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, true, true)))).toBe(s);
   });
 
-  it('NEXT blocked by next guard → same ref', () => {
+  it('NEXT blocked by next isReachable → same ref', () => {
     const s = at('a');
-    // b's guard is false → cannot advance.
+    // b's isReachable is false → cannot advance.
     expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(false, false, false)))).toBe(s);
   });
 
@@ -96,12 +96,12 @@ describe('reduce — referential identity on every no-op path', () => {
     expect(reduce(s, { type: 'PREV' }, cfg(monotonic(true, true, true)))).toBe(s);
   });
 
-  it('PREV blocked by predecessor guard → same ref', () => {
-    // Non-monotonic on purpose: at c, b's guard is false.
+  it('PREV blocked by predecessor isReachable → same ref', () => {
+    // Non-monotonic on purpose: at c, b's isReachable is false.
     const steps: WizardStepDescriptor[] = [
       { id: 'a' },
-      { id: 'b', guard: () => false },
-      { id: 'c', guard: () => true },
+      { id: 'b', isReachable: () => false },
+      { id: 'c', isReachable: () => true },
     ];
     const s = at('c');
     expect(reduce(s, { type: 'PREV' }, cfg(steps))).toBe(s);
@@ -117,9 +117,9 @@ describe('reduce — referential identity on every no-op path', () => {
     expect(reduce(s, { type: 'GOTO', step: 'a' }, cfg(monotonic(true, true, true)))).toBe(s);
   });
 
-  it('GOTO blocked by target guard → same ref', () => {
+  it('GOTO blocked by target isReachable → same ref', () => {
     const s = at('a');
-    // d's guard is false → cannot jump.
+    // d's isReachable is false → cannot jump.
     expect(reduce(s, { type: 'GOTO', step: 'd' }, cfg(monotonic(true, true, false)))).toBe(s);
   });
 
@@ -130,8 +130,8 @@ describe('reduce — referential identity on every no-op path', () => {
   });
 });
 
-describe('reduce — NEXT sequential + guard-gated', () => {
-  it('advances exactly one slot when the next guard holds', () => {
+describe('reduce — NEXT sequential + isReachable-gated', () => {
+  it('advances exactly one slot when the next isReachable holds', () => {
     const next = reduce(at('a'), { type: 'NEXT' }, cfg(monotonic(true, false, false)));
     expect(next.current).toBe('b');
     expect(next.direction).toBe(1);
@@ -144,14 +144,14 @@ describe('reduce — NEXT sequential + guard-gated', () => {
     expect(next.current).toBe('b');
   });
 
-  it('a hard stop mid-flow does not skip ahead to a later open guard', () => {
+  it('a hard stop mid-flow does not skip ahead to a later open isReachable', () => {
     // b open, c closed, d open. From b, NEXT targets c (closed) → no-op.
     const s = at('b');
     expect(reduce(s, { type: 'NEXT' }, cfg(monotonic(true, false, true)))).toBe(s);
   });
 });
 
-describe('reduce — PREV positional + guard-gated', () => {
+describe('reduce — PREV positional + isReachable-gated', () => {
   it('walks exactly one declaration slot back', () => {
     const prev = reduce(at('c'), { type: 'PREV' }, cfg(monotonic(true, true, true)));
     expect(prev.current).toBe('b');
@@ -165,7 +165,7 @@ describe('reduce — PREV positional + guard-gated', () => {
   });
 });
 
-describe('reduce — GOTO guard-gated', () => {
+describe('reduce — GOTO isReachable-gated', () => {
   it('jumps to a reachable target', () => {
     const goto = reduce(at('a'), { type: 'GOTO', step: 'c' }, cfg(monotonic(true, true, true)));
     expect(goto.current).toBe('c');