From 2fd8b220182a99654cec0d0ba64f20f186ebf644 Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Fri, 17 Jul 2026 12:27:37 -0400
Subject: [PATCH 1/4] Enhance TabsField: dark bg support, SAIL spacing,
 full-width separator, align, nav-only mode

- Remove hard-coded bg-white on triggers; use bg-transparent + opacity for dark bg support
- Separator uses currentColor with opacity so it auto-adapts to any background
- Increase default tab padding to match SAIL (16px/20px), add density prop (STANDARD/DENSE)
- Add fullWidthSeparator prop for separator extending beyond tab content width
- Add align prop (START/CENTER/END) for vertical tab label alignment (#140)
- Make TabItem.content optional + add navigationOnly prop to suppress panels (#141)
- Trim stories to essential demonstrations

Closes #114, closes #140, closes #141
---
 src/components/Tabs/Tabs.stories.tsx | 227 ++++++++++++++++++----
 src/components/Tabs/TabsField.tsx    | 281 ++++++++++++++++++---------
 src/components/Tabs/index.ts         |   2 +-
 3 files changed, 382 insertions(+), 128 deletions(-)

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index f871c38..3b2b0eb 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -14,9 +14,13 @@ const meta = {
   argTypes: {
     variant: { control: 'select', options: ['UNDERLINE', 'PILL'] },
     size: { control: 'select', options: ['SMALL', 'STANDARD', 'MEDIUM', 'LARGE'] },
+    density: { control: 'select', options: ['STANDARD', 'DENSE'] },
     color: { control: 'text' },
     orientation: { control: 'select', options: ['HORIZONTAL', 'VERTICAL'] },
+    align: { control: 'select', options: ['START', 'CENTER', 'END'] },
     activationMode: { control: 'select', options: ['AUTOMATIC', 'MANUAL'] },
+    navigationOnly: { control: 'boolean' },
+    fullWidthSeparator: { control: 'boolean' },
   },
 } satisfies Meta<typeof TabsField>
 
@@ -193,49 +197,211 @@ export const VerticalOrientation: Story = {
   },
 }
 
-export const SizeSmall: Story = {
+export const NavigationOnly: Story = {
+  name: 'Navigation Only (No Content Panels)',
   args: {
-    tabs: [
-      { value: 'tab1', label: 'Tab 1', content: <p>Small tab content</p> },
-      { value: 'tab2', label: 'Tab 2', content: <p>Small tab content</p> },
-    ],
+    tabs: simpleTabs,
     defaultValue: 'tab1',
-    size: 'SMALL',
+  },
+  render: () => {
+    const [activeTab, setActiveTab] = useState('dashboard')
+
+    const navTabs: TabItem[] = [
+      { value: 'dashboard', label: 'Dashboard' },
+      { value: 'reports', label: 'Reports' },
+      { value: 'settings', label: 'Settings' },
+      { value: 'help', label: 'Help' },
+    ]
+
+    return (
+      <div style={{ width: 480 }}>
+        <TabsField
+          tabs={navTabs}
+          value={activeTab}
+          onValueChange={setActiveTab}
+          navigationOnly
+          size="STANDARD"
+          color="ACCENT"
+        />
+        <div className="mt-4 p-4 border border-gray-200 rounded-md">
+          <p className="text-base text-gray-700">
+            Active route: <strong>{activeTab}</strong>
+          </p>
+          <p className="text-sm text-gray-500 mt-1">
+            Content is rendered externally — no content panels in the tab component.
+          </p>
+        </div>
+      </div>
+    )
   },
 }
 
-export const SizeLarge: Story = {
+export const NavigationOnlyVertical: Story = {
+  name: 'Navigation Only — Vertical Sidebar',
   args: {
-    tabs: [
-      { value: 'tab1', label: 'Tab 1', content: <p>Large tab content</p> },
-      { value: 'tab2', label: 'Tab 2', content: <p>Large tab content</p> },
-    ],
+    tabs: simpleTabs,
+    defaultValue: 'tab1',
+  },
+  render: () => {
+    const [activeTab, setActiveTab] = useState('inbox')
+
+    const navTabs: TabItem[] = [
+      { value: 'inbox', label: 'Inbox' },
+      { value: 'drafts', label: 'Drafts' },
+      { value: 'sent', label: 'Sent' },
+      { value: 'archive', label: 'Archive' },
+      { value: 'trash', label: 'Trash' },
+    ]
+
+    return (
+      <div className="flex gap-4" style={{ width: 480 }}>
+        <TabsField
+          tabs={navTabs}
+          value={activeTab}
+          onValueChange={setActiveTab}
+          navigationOnly
+          orientation="VERTICAL"
+          align="START"
+          size="STANDARD"
+          color="ACCENT"
+        />
+        <div className="flex-1 p-4 border border-gray-200 rounded-md">
+          <p className="text-base text-gray-700">
+            Viewing: <strong>{activeTab}</strong>
+          </p>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const DensityComparison: Story = {
+  name: 'Density — STANDARD vs DENSE',
+  args: {
+    tabs: simpleTabs,
+    defaultValue: 'tab1',
+  },
+  render: () => {
+    const tabs: TabItem[] = [
+      { value: 'one', label: 'First Tab', content: <p className="text-base text-gray-700">Content for first tab.</p> },
+      { value: 'two', label: 'Second Tab', content: <p className="text-base text-gray-700">Content for second tab.</p> },
+      { value: 'three', label: 'Third Tab', content: <p className="text-base text-gray-700">Content for third tab.</p> },
+    ]
+
+    return (
+      <div className="space-y-8" style={{ width: 480 }}>
+        <div>
+          <p className="text-xs text-gray-500 mb-2 uppercase tracking-wide">Density: STANDARD (default)</p>
+          <TabsField tabs={tabs} defaultValue="one" density="STANDARD" />
+        </div>
+        <div>
+          <p className="text-xs text-gray-500 mb-2 uppercase tracking-wide">Density: DENSE</p>
+          <TabsField tabs={tabs} defaultValue="one" density="DENSE" />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const FullWidthSeparator: Story = {
+  name: 'Full-Width Separator',
+  args: {
+    tabs: simpleTabs,
+    defaultValue: 'tab1',
+  },
+  render: () => {
+    const tabs: TabItem[] = [
+      { value: 'overview', label: 'Overview', content: <p className="text-base text-gray-700">Overview content here.</p> },
+      { value: 'details', label: 'Details', content: <p className="text-base text-gray-700">Details content here.</p> },
+      { value: 'history', label: 'History', content: <p className="text-base text-gray-700">History content here.</p> },
+    ]
+
+    return (
+      <div className="border border-gray-200 rounded-md p-6" style={{ width: 600 }}>
+        <HeadingField text="Record Detail" size="MEDIUM" marginBelow="STANDARD" />
+        <TabsField
+          tabs={tabs}
+          defaultValue="overview"
+          fullWidthSeparator
+          size="STANDARD"
+          color="ACCENT"
+        />
+      </div>
+    )
+  },
+}
+
+export const LightBackground: Story = {
+  name: 'Light Background (Non-White)',
+  args: {
+    tabs: simpleTabs,
+    defaultValue: 'tab1',
+  },
+  render: () => {
+    const tabs: TabItem[] = [
+      { value: 'overview', label: 'Overview', content: <p className="text-gray-700">Overview content on light bg.</p> },
+      { value: 'details', label: 'Details', content: <p className="text-gray-700">Details content on light bg.</p> },
+      { value: 'history', label: 'History', content: <p className="text-gray-700">History content on light bg.</p> },
+    ]
+
+    return (
+      <div className="bg-gray-100 text-gray-800 p-6 rounded-md" style={{ width: 480 }}>
+        <TabsField
+          tabs={tabs}
+          defaultValue="overview"
+          size="STANDARD"
+          color="ACCENT"
+        />
+      </div>
+    )
+  },
+}
+
+export const DarkBackground: Story = {
+  name: 'Dark Background (Auto Separator)',
+  args: {
+    tabs: simpleTabs,
     defaultValue: 'tab1',
-    size: 'LARGE',
+  },
+  render: () => {
+    const tabs: TabItem[] = [
+      { value: 'overview', label: 'Overview', content: <p className="text-gray-200">Overview content on dark.</p> },
+      { value: 'details', label: 'Details', content: <p className="text-gray-200">Details content on dark.</p> },
+      { value: 'history', label: 'History', content: <p className="text-gray-200">History content on dark.</p> },
+    ]
+
+    return (
+      <div className="bg-gray-900 text-white p-6 rounded-md" style={{ width: 480 }}>
+        <TabsField
+          tabs={tabs}
+          defaultValue="overview"
+          size="STANDARD"
+          color="ACCENT"
+        />
+      </div>
+    )
   },
 }
 
-export const ColorPositive: Story = {
+export const SizeSmall: Story = {
   args: {
     tabs: [
-      { value: 'success', label: 'Success', content: <p className="text-base text-gray-700">Success content with positive color scheme.</p> },
-      { value: 'warning', label: 'Warning', content: <p className="text-base text-gray-700">Warning content with negative color scheme.</p> },
-      { value: 'info', label: 'Info', content: <p className="text-base text-gray-700">Info content with secondary color scheme.</p> },
+      { value: 'tab1', label: 'Tab 1', content: <p>Small tab content</p> },
+      { value: 'tab2', label: 'Tab 2', content: <p>Small tab content</p> },
     ],
-    defaultValue: 'success',
-    color: 'POSITIVE',
+    defaultValue: 'tab1',
+    size: 'SMALL',
   },
 }
 
-export const ColorNegative: Story = {
+export const SizeLarge: Story = {
   args: {
     tabs: [
-      { value: 'success', label: 'Success', content: <p className="text-base text-gray-700">Success content with positive color scheme.</p> },
-      { value: 'warning', label: 'Warning', content: <p className="text-base text-gray-700">Warning content with negative color scheme.</p> },
-      { value: 'info', label: 'Info', content: <p className="text-base text-gray-700">Info content with secondary color scheme.</p> },
+      { value: 'tab1', label: 'Tab 1', content: <p>Large tab content</p> },
+      { value: 'tab2', label: 'Tab 2', content: <p>Large tab content</p> },
     ],
-    defaultValue: 'warning',
-    color: 'NEGATIVE',
+    defaultValue: 'tab1',
+    size: 'LARGE',
   },
 }
 
@@ -251,19 +417,6 @@ export const ColorCustomHex: Story = {
   },
 }
 
-export const ManualActivation: Story = {
-  args: {
-    tabs: [
-      { value: 'manual1', label: 'Manual 1', content: <p>Manual activation tab 1</p> },
-      { value: 'manual2', label: 'Manual 2', content: <p>Manual activation tab 2</p> },
-      { value: 'manual3', label: 'Manual 3', content: <p>Manual activation tab 3</p> },
-    ],
-    defaultValue: 'manual1',
-    activationMode: 'MANUAL',
-  },
-}
-
-
 export const Pill: Story = {
   args: {
     tabs: [
diff --git a/src/components/Tabs/TabsField.tsx b/src/components/Tabs/TabsField.tsx
index 6f42db6..649bb74 100644
--- a/src/components/Tabs/TabsField.tsx
+++ b/src/components/Tabs/TabsField.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import * as Tabs from '@radix-ui/react-tabs'
-import type { SAILMarginSize, SAILSize, SAILColorInput } from '../../types/sail'
+import type { SAILMarginSize, SAILSize, SAILColorInput, SAILAlign } from '../../types/sail'
 import { isPaletteColor } from '../../utils/colorResolver'
 import { paletteColorMap } from '../../types/palette-colors.generated'
 import { mergeClasses } from '../../utils/classNames'
-import { marginAboveMap, marginBelowMap, buttonSizeMap } from '../../utils/sailMaps'
+import { marginAboveMap, marginBelowMap, paddingMap } from '../../utils/sailMaps'
 
 /**
  * Individual tab configuration
@@ -14,8 +14,8 @@ export interface TabItem {
   value: string
   /** Text to display on the tab trigger */
   label: string
-  /** Content to display when tab is active */
-  content: React.ReactNode
+  /** Content to display when tab is active (optional for navigation-only mode) */
+  content?: React.ReactNode
   /** Whether this tab is disabled */
   disabled?: boolean
 }
@@ -27,6 +27,13 @@ export interface TabItem {
  */
 export type TabsVariant = "UNDERLINE" | "PILL"
 
+/**
+ * Spacing density for tabs
+ * - STANDARD: Default spacing matching SAIL conventions (tighter padding)
+ * - DENSE: Even more compact spacing for space-constrained layouts
+ */
+export type TabsDensity = "STANDARD" | "DENSE"
+
 /**
  * Displays a set of layered sections of content (tab panels) that are displayed one at a time
  * Inspired by SAIL form field patterns (not an official SAIL component)
@@ -47,8 +54,12 @@ export interface TabsFieldProps {
   variant?: TabsVariant
   /** Orientation of the tabs (only applies to UNDERLINE variant) */
   orientation?: "HORIZONTAL" | "VERTICAL"
+  /** Alignment of tab labels in vertical orientation */
+  align?: SAILAlign
   /** Size of the tab triggers */
   size?: SAILSize
+  /** Spacing density for tab triggers */
+  density?: TabsDensity
   /** Whether tabs should loop when navigating with keyboard */
   loop?: boolean
   /** Determines whether component is displayed */
@@ -61,10 +72,43 @@ export interface TabsFieldProps {
   color?: "ACCENT" | "POSITIVE" | "NEGATIVE" | "SECONDARY" | SAILColorInput
   /** Activation mode - whether tabs activate on focus or click */
   activationMode?: "AUTOMATIC" | "MANUAL"
+  /** Whether to suppress rendering of the content panel (navigation-only mode) */
+  navigationOnly?: boolean
+  /** Determines the space between the tab edges and its contents (default: STANDARD) */
+  contentsPadding?: SAILMarginSize
+  /** Whether the separator line extends to the full width of the parent container */
+  fullWidthSeparator?: boolean
   /** Additional Tailwind classes for prototype-specific styling (not part of SAIL API) */
   className?: string
 }
 
+/** Size classes matching SAIL tab padding (16px vertical, 20px horizontal at STANDARD/14px) */
+const tabSizeMap: Record<SAILSize, Record<TabsDensity, string>> = {
+  SMALL: {
+    STANDARD: 'px-4 py-3 text-sm leading-none',
+    DENSE: 'px-3 py-2 text-sm leading-none',
+  },
+  STANDARD: {
+    STANDARD: 'px-5 py-4 text-base leading-none',
+    DENSE: 'px-4 py-2.5 text-base leading-none',
+  },
+  MEDIUM: {
+    STANDARD: 'px-6 py-5 text-lg leading-none',
+    DENSE: 'px-5 py-3 text-lg leading-none',
+  },
+  LARGE: {
+    STANDARD: 'px-7 py-6 text-xl leading-none',
+    DENSE: 'px-6 py-3.5 text-xl leading-none',
+  },
+}
+
+/** Alignment map for vertical tab triggers */
+const tabAlignMap: Record<SAILAlign, string> = {
+  START: 'justify-start',
+  CENTER: 'justify-center',
+  END: 'justify-end',
+}
+
 export const TabsField: React.FC<TabsFieldProps> = ({
   tabs,
   value,
@@ -72,13 +116,18 @@ export const TabsField: React.FC<TabsFieldProps> = ({
   onValueChange,
   variant = "UNDERLINE",
   orientation = "HORIZONTAL",
+  align = "CENTER",
   size = "STANDARD",
+  density = "STANDARD",
   loop = true,
   showWhen = true,
   marginAbove = "NONE",
   marginBelow = "STANDARD",
   color = "ACCENT",
   activationMode = "AUTOMATIC",
+  navigationOnly = false,
+  contentsPadding = "STANDARD",
+  fullWidthSeparator = false,
   className
 }) => {
   // Sliding indicator state
@@ -113,6 +162,9 @@ export const TabsField: React.FC<TabsFieldProps> = ({
   // Visibility control
   if (!showWhen) return null
 
+  // Determine if content panels should render
+  const hasContent = !navigationOnly && tabs.some(tab => tab.content != null)
+
   // Active indicator color
   const getIndicatorColor = (): string => {
     const semanticMap: Record<string, string> = {
@@ -131,6 +183,10 @@ export const TabsField: React.FC<TabsFieldProps> = ({
   }
   const indicatorColor = getIndicatorColor()
 
+  // Separator color — uses a lighter shade so it works on both light and dark backgrounds
+  const separatorColor = 'currentColor'
+  const separatorOpacity = '0.2'
+
   // PILL variant color helpers
   const getPillBgColor = (): string => {
     const semanticMap: Record<string, string> = {
@@ -162,11 +218,63 @@ export const TabsField: React.FC<TabsFieldProps> = ({
       ? "relative flex flex-col"
       : "relative flex"
 
-  const contentClasses = orientation === "VERTICAL" ? "pl-4 flex-1 p-4" : "p-4"
+  const contentClasses = orientation === "VERTICAL"
+    ? `flex-1 ${paddingMap[contentsPadding]}`
+    : paddingMap[contentsPadding]
   const rootClasses = orientation === "VERTICAL" ? "flex" : "block"
 
+  // Trigger size classes based on density
+  const triggerSizeClasses = tabSizeMap[size][density]
+
+  // Full-width separator: the separator extends to container edges while tabs stay content-width
+  const renderActiveIndicator = () => {
+    if (variant !== "UNDERLINE") return null
+
+    if (orientation === "HORIZONTAL") {
+      return (
+        <span
+          aria-hidden="true"
+          className="absolute bottom-0 h-[2px] rounded-full transition-all duration-300 ease-in-out pointer-events-none z-20"
+          style={{ ...indicatorStyle, backgroundColor: indicatorColor }}
+        />
+      )
+    }
+
+    // Vertical
+    return (
+      <span
+        aria-hidden="true"
+        className="absolute left-0 w-[2px] rounded-full transition-all duration-300 ease-in-out pointer-events-none z-20"
+        style={{ ...indicatorStyle, backgroundColor: indicatorColor }}
+      />
+    )
+  }
+
+  const renderSeparatorLine = () => {
+    if (variant !== "UNDERLINE") return null
+
+    if (orientation === "HORIZONTAL") {
+      return (
+        <span
+          aria-hidden="true"
+          className="absolute bottom-0 left-0 w-full h-[2px] pointer-events-none"
+          style={{ backgroundColor: separatorColor, opacity: separatorOpacity }}
+        />
+      )
+    }
+
+    // Vertical
+    return (
+      <span
+        aria-hidden="true"
+        className="absolute left-0 top-0 h-full w-[2px] pointer-events-none"
+        style={{ backgroundColor: separatorColor, opacity: separatorOpacity }}
+      />
+    )
+  }
+
   return (
-    <div className={containerClasses}>
+    <div className={mergeClasses(containerClasses, fullWidthSeparator ? 'relative' : undefined)}>
       <Tabs.Root
         value={value}
         defaultValue={defaultValue || tabs[0]?.value}
@@ -175,103 +283,96 @@ export const TabsField: React.FC<TabsFieldProps> = ({
         activationMode={activationMode.toLowerCase() as "automatic" | "manual"}
         className={rootClasses}
       >
-        <Tabs.List
-          ref={listRef}
-          className={listClasses}
-          loop={loop}
-        >
-          {tabs.map((tab) => {
-            if (variant === "PILL") {
-              const isActive = internalActive === tab.value
+        <div className="relative">
+          <Tabs.List
+            ref={listRef}
+            className={listClasses}
+            loop={loop}
+          >
+            {tabs.map((tab) => {
+              if (variant === "PILL") {
+                const isActive = internalActive === tab.value
+                return (
+                  <Tabs.Trigger
+                    key={tab.value}
+                    value={tab.value}
+                    disabled={tab.disabled}
+                    className={[
+                      'group relative',
+                      triggerSizeClasses,
+                      'rounded-sm transition-colors whitespace-nowrap cursor-pointer select-none outline-none border-0',
+                      isActive
+                        ? (!isHexColor ? `${getPillBgColor()} text-white` : '')
+                        : (!isHexColor ? getPillTextColor() : ''),
+                      !isActive ? 'hover:bg-gray-100' : '',
+                      'disabled:opacity-50 disabled:cursor-not-allowed',
+                      'focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2'
+                    ].filter(Boolean).join(' ')}
+                    style={
+                      isHexColor
+                        ? isActive
+                          ? { backgroundColor: color, color: '#ffffff' }
+                          : { color: color }
+                        : undefined
+                    }
+                  >
+                    {tab.label}
+                    {isActive && (
+                      <svg
+                        className={[
+                          'absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-1.5',
+                          !isHexColor ? getPillTextColor() : ''
+                        ].filter(Boolean).join(' ')}
+                        viewBox="0 0 12 6"
+                        aria-hidden="true"
+                      >
+                        <polygon
+                          points="6,6 0,0 12,0"
+                          fill={isHexColor ? color : 'currentColor'}
+                        />
+                      </svg>
+                    )}
+                  </Tabs.Trigger>
+                )
+              }
+
               return (
                 <Tabs.Trigger
                   key={tab.value}
                   value={tab.value}
                   disabled={tab.disabled}
                   className={[
-                    'group relative',
-                    buttonSizeMap[size],
-                    'rounded-sm transition-colors whitespace-nowrap cursor-pointer select-none outline-none border-0',
-                    isActive
-                      ? (!isHexColor ? `${getPillBgColor()} text-white` : '')
-                      : (!isHexColor ? getPillTextColor() : ''),
-                    !isActive ? 'hover:bg-gray-100' : '',
-                    'disabled:opacity-50 disabled:cursor-not-allowed',
-                    'focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2'
+                    triggerSizeClasses,
+                    'relative bg-transparent border-0 cursor-default select-none',
+                    'flex items-center outline-none font-medium opacity-70',
+                    orientation === "VERTICAL" ? tabAlignMap[align] : 'justify-center',
+                    orientation === "HORIZONTAL" && 'after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:z-10 after:rounded-full after:bg-transparent after:transition-colors after:duration-200 hover:after:bg-current/30 data-[state=active]:after:bg-transparent',
+                    orientation === "VERTICAL" && 'hover:bg-current/5 after:absolute after:left-0 after:top-0 after:h-full after:w-[2px] after:z-10 after:rounded-full after:bg-transparent after:transition-colors after:duration-200 hover:after:bg-current/30 data-[state=active]:after:bg-transparent',
+                    'data-[state=active]:font-semibold data-[state=active]:opacity-100',
+                    'disabled:opacity-30 disabled:cursor-not-allowed',
+                    'focus-visible:relative focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2'
                   ].filter(Boolean).join(' ')}
-                  style={
-                    isHexColor
-                      ? isActive
-                        ? { backgroundColor: color, color: '#ffffff' }
-                        : { color: color }
-                      : undefined
-                  }
                 >
                   {tab.label}
-                  {isActive && (
-                    <svg
-                      className={[
-                        'absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-1.5',
-                        !isHexColor ? getPillTextColor() : ''
-                      ].filter(Boolean).join(' ')}
-                      viewBox="0 0 12 6"
-                      aria-hidden="true"
-                    >
-                      <polygon
-                        points="6,6 0,0 12,0"
-                        fill={isHexColor ? color : 'currentColor'}
-                      />
-                    </svg>
-                  )}
                 </Tabs.Trigger>
               )
-            }
-
-            return (
-              <Tabs.Trigger
-                key={tab.value}
-                value={tab.value}
-                disabled={tab.disabled}
-                className={[
-                  buttonSizeMap[size],
-                  'relative bg-white text-gray-700 border-0 cursor-default select-none',
-                  'flex items-center justify-center outline-none font-medium',
-                  orientation === "HORIZONTAL" && 'after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:z-10 after:rounded-full after:bg-transparent after:transition-colors after:duration-200 hover:after:bg-gray-500 data-[state=active]:after:bg-transparent',
-                  orientation === "VERTICAL" && 'hover:bg-gray-50 after:absolute after:left-0 after:top-0 after:h-full after:w-[2px] after:z-10 after:rounded-full after:bg-transparent after:transition-colors after:duration-200 hover:after:bg-gray-500 data-[state=active]:after:bg-transparent',
-                  'data-[state=active]:font-semibold data-[state=active]:text-gray-900',
-                  'disabled:opacity-50 disabled:cursor-not-allowed',
-                  'focus-visible:relative focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-blue-500'
-                ].filter(Boolean).join(' ')}
-              >
-                {tab.label}
-              </Tabs.Trigger>
-            )
-          })}
+            })}
 
-          {/* Sliding indicators — UNDERLINE variant only */}
-          {variant === "UNDERLINE" && orientation === "HORIZONTAL" && (
-            <span aria-hidden="true" className="absolute bottom-0 left-0 w-full h-[2px] bg-gray-300 pointer-events-none" />
-          )}
-          {variant === "UNDERLINE" && orientation === "HORIZONTAL" && (
-            <span
-              aria-hidden="true"
-              className="absolute bottom-0 h-[2px] rounded-full transition-all duration-300 ease-in-out pointer-events-none z-20"
-              style={{ ...indicatorStyle, backgroundColor: indicatorColor }}
-            />
-          )}
-          {variant === "UNDERLINE" && orientation === "VERTICAL" && (
-            <span aria-hidden="true" className="absolute left-0 top-0 h-full w-[2px] bg-gray-300 pointer-events-none" />
-          )}
-          {variant === "UNDERLINE" && orientation === "VERTICAL" && (
-            <span
-              aria-hidden="true"
-              className="absolute left-0 w-[2px] rounded-full transition-all duration-300 ease-in-out pointer-events-none z-20"
-              style={{ ...indicatorStyle, backgroundColor: indicatorColor }}
-            />
-          )}
-        </Tabs.List>
+            {/* Sliding indicators — UNDERLINE variant only (non-full-width mode) */}
+            {!fullWidthSeparator && renderSeparatorLine()}
+            {renderActiveIndicator()}
+          </Tabs.List>
+        </div>
+        {/* Full-width separator: spans the full TabsField width */}
+        {fullWidthSeparator && variant === "UNDERLINE" && orientation === "HORIZONTAL" && (
+          <div
+            aria-hidden="true"
+            className="h-[2px] -mt-[2px] pointer-events-none"
+            style={{ backgroundColor: separatorColor, opacity: separatorOpacity }}
+          />
+        )}
 
-        {tabs.map((tab) => (
+        {hasContent && tabs.map((tab) => (
           <Tabs.Content
             key={tab.value}
             value={tab.value}
diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts
index c924c2d..e873388 100644
--- a/src/components/Tabs/index.ts
+++ b/src/components/Tabs/index.ts
@@ -1,2 +1,2 @@
 export { TabsField } from './TabsField'
-export type { TabsFieldProps, TabItem, TabsVariant } from './TabsField'
+export type { TabsFieldProps, TabItem, TabsVariant, TabsDensity } from './TabsField'

From 7eb25c169d3cb1ecadaa0b1b845f1196697666b5 Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Fri, 17 Jul 2026 13:26:07 -0400
Subject: [PATCH 2/4] Fix vertical fullWidthSeparator and add contentsPadding
 control

- Keep inline separator for VERTICAL orientation when fullWidthSeparator
  is set (the full-width replacement is horizontal-only)
- Add contentsPadding to Storybook argTypes for autodocs parity

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/Tabs/Tabs.stories.tsx | 1 +
 src/components/Tabs/TabsField.tsx    | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 3b2b0eb..11e67b2 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -18,6 +18,7 @@ const meta = {
     color: { control: 'text' },
     orientation: { control: 'select', options: ['HORIZONTAL', 'VERTICAL'] },
     align: { control: 'select', options: ['START', 'CENTER', 'END'] },
+    contentsPadding: { control: 'select', options: ['NONE', 'EVEN_LESS', 'LESS', 'STANDARD', 'MORE', 'EVEN_MORE'] },
     activationMode: { control: 'select', options: ['AUTOMATIC', 'MANUAL'] },
     navigationOnly: { control: 'boolean' },
     fullWidthSeparator: { control: 'boolean' },
diff --git a/src/components/Tabs/TabsField.tsx b/src/components/Tabs/TabsField.tsx
index 649bb74..75f334e 100644
--- a/src/components/Tabs/TabsField.tsx
+++ b/src/components/Tabs/TabsField.tsx
@@ -358,8 +358,10 @@ export const TabsField: React.FC<TabsFieldProps> = ({
               )
             })}
 
-            {/* Sliding indicators — UNDERLINE variant only (non-full-width mode) */}
-            {!fullWidthSeparator && renderSeparatorLine()}
+            {/* Sliding indicators — UNDERLINE variant only.
+                The inline separator is suppressed only when the full-width separator
+                replaces it (horizontal only); vertical always keeps its inline line. */}
+            {!(fullWidthSeparator && orientation === "HORIZONTAL") && renderSeparatorLine()}
             {renderActiveIndicator()}
           </Tabs.List>
         </div>

From 8128ce3d6706a47755f3af6ddd7ef6533f0cb1d9 Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Fri, 17 Jul 2026 14:21:51 -0400
Subject: [PATCH 3/4] Revert "Fix vertical fullWidthSeparator and add
 contentsPadding control"

This reverts commit 7eb25c169d3cb1ecadaa0b1b845f1196697666b5.
---
 src/components/Tabs/Tabs.stories.tsx | 1 -
 src/components/Tabs/TabsField.tsx    | 6 ++----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 11e67b2..3b2b0eb 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -18,7 +18,6 @@ const meta = {
     color: { control: 'text' },
     orientation: { control: 'select', options: ['HORIZONTAL', 'VERTICAL'] },
     align: { control: 'select', options: ['START', 'CENTER', 'END'] },
-    contentsPadding: { control: 'select', options: ['NONE', 'EVEN_LESS', 'LESS', 'STANDARD', 'MORE', 'EVEN_MORE'] },
     activationMode: { control: 'select', options: ['AUTOMATIC', 'MANUAL'] },
     navigationOnly: { control: 'boolean' },
     fullWidthSeparator: { control: 'boolean' },
diff --git a/src/components/Tabs/TabsField.tsx b/src/components/Tabs/TabsField.tsx
index 75f334e..649bb74 100644
--- a/src/components/Tabs/TabsField.tsx
+++ b/src/components/Tabs/TabsField.tsx
@@ -358,10 +358,8 @@ export const TabsField: React.FC<TabsFieldProps> = ({
               )
             })}
 
-            {/* Sliding indicators — UNDERLINE variant only.
-                The inline separator is suppressed only when the full-width separator
-                replaces it (horizontal only); vertical always keeps its inline line. */}
-            {!(fullWidthSeparator && orientation === "HORIZONTAL") && renderSeparatorLine()}
+            {/* Sliding indicators — UNDERLINE variant only (non-full-width mode) */}
+            {!fullWidthSeparator && renderSeparatorLine()}
             {renderActiveIndicator()}
           </Tabs.List>
         </div>

From 6f26b9ad2787b2e86333de24e2c504d1372e0790 Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Fri, 17 Jul 2026 14:26:54 -0400
Subject: [PATCH 4/4] Fix fullWidthSeparator for vertical orientation

Add full-height separator line for vertical tabs when fullWidthSeparator
is enabled. The separator extends the full height of the component.

contentsPadding prop remains functional in the component but is not
exposed in story argTypes to avoid a Storybook rendering issue.
---
 src/components/Tabs/TabsField.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/Tabs/TabsField.tsx b/src/components/Tabs/TabsField.tsx
index 649bb74..86d216d 100644
--- a/src/components/Tabs/TabsField.tsx
+++ b/src/components/Tabs/TabsField.tsx
@@ -371,6 +371,14 @@ export const TabsField: React.FC<TabsFieldProps> = ({
             style={{ backgroundColor: separatorColor, opacity: separatorOpacity }}
           />
         )}
+        {/* Full-height separator for vertical: spans the full TabsField height */}
+        {fullWidthSeparator && variant === "UNDERLINE" && orientation === "VERTICAL" && (
+          <div
+            aria-hidden="true"
+            className="absolute left-0 top-0 bottom-0 w-[2px] pointer-events-none"
+            style={{ backgroundColor: separatorColor, opacity: separatorOpacity }}
+          />
+        )}
 
         {hasContent && tabs.map((tab) => (
           <Tabs.Content