@usefragments/ui 1.6.0 → 2.0.0

package/src/components/TableOfContents/TableOfContents.module.scss

@@ -1,3 +1,4 @@
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/navigation" as navigation;
@@ -10,19 +11,24 @@
 }
 
 .title {
-  margin: 0 0 var(--fui-space-2, $fui-space-2);
-  padding: 0 var(--fui-space-2, $fui-space-2);
+  @include navigation.properties;
+
+  margin: 0 0 var(--fui-space-2, #{$fui-space-2});
+  // Same inline inset as `.link` (navigation.row) so the label and the index
+  // share one left edge — extra title padding made "On This Page" sit inward
+  // of the items below it.
+  padding-inline: var(--fui-navigation-inline-inset, #{navigation.gutter()});
 }
 
 // The quiet index is flush; links and group headers share the title inset.
 .list {
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--fui-stroke-hairline, 1px);
+  gap: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
 }
 
 // ============================================
@@ -48,7 +54,7 @@
     color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: var(--fui-bg-hover, #{$fui-bg-hover});
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
@@ -61,7 +67,7 @@
 // flush with the title and group headers.
 [data-depth="1"] .link {
   margin-left: var(--fui-space-2, $fui-space-2);
-  padding-inline-start: var(--fui-raw-space-16, 16px);
+  padding-inline-start: var(--fui-raw-space-16, #{measurements.raw-space(16)});
 }
 
 .linkLabel {
@@ -107,7 +113,6 @@
   width: 100%;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  text-transform: uppercase;
   background: transparent;
   border: 0;
   text-align: left;
@@ -122,7 +127,7 @@
     color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: var(--fui-bg-hover, #{$fui-bg-hover});
     color: var(--fui-text-secondary, $fui-text-secondary);
   }
 
@@ -142,12 +147,12 @@
   width: var(--fui-icon-xs, $fui-icon-xs);
   height: var(--fui-icon-xs, $fui-icon-xs);
   color: inherit;
-  opacity: 0.7;
+  opacity: var(--fui-opacity-muted, #{$fui-opacity-muted});
   transition: transform var(--fui-transition-fast, $fui-transition-fast);
 
   svg {
-    width: var(--fui-raw-space-10, 10px);
-    height: var(--fui-raw-space-10, 10px);
+    width: var(--fui-raw-space-10, #{measurements.raw-space(10)});
+    height: var(--fui-raw-space-10, #{measurements.raw-space(10)});
   }
 
   &[data-open] {
@@ -169,5 +174,4 @@
   .groupChevron {
     transition: none;
   }
-
 }

package/src/components/TableOfContents/index.tsx

@@ -16,6 +16,8 @@ export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement>
   title?: string;
   /** Hide the title */
   hideTitle?: boolean;
+  /** Hide indented items and nested groups. Defaults to false. */
+  hideSubItems?: boolean;
 }
 
 export interface TableOfContentsItemProps extends Omit<
@@ -63,9 +65,10 @@ export interface TableOfContentsGroupProps {
 
 interface TocContextValue {
   depth: number;
+  hideSubItems: boolean;
 }
 
-const TocContext = React.createContext<TocContextValue>({ depth: 0 });
+const TocContext = React.createContext<TocContextValue>({ depth: 0, hideSubItems: false });
 
 // ============================================
 // Icons
@@ -95,6 +98,7 @@ function TableOfContentsRoot({
   label = "Table of contents",
   title = "On This Page",
   hideTitle = false,
+  hideSubItems = false,
   className,
   "aria-label": ariaLabel,
   ...htmlProps
@@ -104,11 +108,11 @@ function TableOfContentsRoot({
   return (
     <nav {...htmlProps} aria-label={ariaLabel ?? label} className={classes}>
       {!hideTitle && (
-        <Text as="p" variant="section-label" className={styles.title}>
+        <Text as="p" role="section-label" className={styles.title}>
           {title}
         </Text>
       )}
-      <TocContext.Provider value={{ depth: 0 }}>
+      <TocContext.Provider value={{ depth: 0, hideSubItems }}>
         <ul className={styles.list}>{children}</ul>
       </TocContext.Provider>
     </nav>
@@ -124,22 +128,29 @@ function TableOfContentsItem({
   trailing,
   className,
   onClick,
-  href: _href,
+  href,
   ...htmlProps
 }: TableOfContentsItemProps) {
-  const { depth } = React.useContext(TocContext);
+  const { depth, hideSubItems } = React.useContext(TocContext);
   const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
 
+  if (hideSubItems && effectiveDepth > 0) return null;
+
   const linkClasses = [styles.link, active && styles.active, className].filter(Boolean).join(" ");
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     onClick?.(e);
-    if (e.defaultPrevented) return;
+    // An explicit href is a route, not an in-page anchor: let the browser
+    // (or a wrapping router link) own navigation.
+    if (e.defaultPrevented || href) return;
 
     e.preventDefault();
     const el = document.getElementById(id);
     if (el) {
-      el.scrollIntoView({ behavior: "smooth" });
+      const prefersReducedMotion =
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      el.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth" });
       window.history.replaceState(null, "", `#${id}`);
     }
   };
@@ -148,7 +159,7 @@ function TableOfContentsItem({
     <li className={styles.item} data-depth={effectiveDepth} data-active={active || undefined}>
       <a
         {...htmlProps}
-        href={`#${id}`}
+        href={href ?? `#${id}`}
         className={linkClasses}
         onClick={handleClick}
         aria-current={active ? "location" : undefined}
@@ -194,9 +205,11 @@ function TableOfContentsGroup({
   disabled = false,
   active = false,
 }: TableOfContentsGroupProps) {
-  const { depth } = React.useContext(TocContext);
+  const { depth, hideSubItems } = React.useContext(TocContext);
   const [open, setOpen] = useControlledOpen(controlledOpen, defaultOpen, onOpenChange);
 
+  if (hideSubItems) return null;
+
   const isToggleable = collapsible && !disabled;
   const isOpen = isToggleable ? open : true;
 
@@ -237,7 +250,11 @@ function TableOfContentsGroup({
           <div className={headerClasses}>{headerContent}</div>
         )}
       </li>
-      {isOpen && <TocContext.Provider value={{ depth: depth + 1 }}>{children}</TocContext.Provider>}
+      {isOpen && (
+        <TocContext.Provider value={{ depth: depth + 1, hideSubItems }}>
+          {children}
+        </TocContext.Provider>
+      )}
     </>
   );
 }

package/src/components/Tabs/Tabs.contract.json

@@ -1,14 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Tabs",
-  "description": "Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout.",
+  "description": "Swaps between sibling panels without leaving the page.",
   "category": "navigation",
-  "tags": [
-    "tabs",
-    "navigation",
-    "panels",
-    "content-switcher"
-  ],
+  "tags": ["tabs", "navigation", "panels", "content-switcher"],
   "status": "stable",
   "sourcePath": "src/components/Tabs/index.tsx",
   "exportName": "Tabs",
@@ -18,7 +13,7 @@
     "value: string",
     "onValueChange: function",
     "orientation: horizontal|vertical (default: horizontal)",
-    "variant: underline|pills (default: underline)"
+    "variant: ghost|soft (default: ghost)"
   ],
   "props": {
     "children": {
@@ -46,41 +41,35 @@
       "description": "Tab list orientation",
       "default": "horizontal",
       "required": false,
-      "values": [
-        "horizontal",
-        "vertical"
-      ]
+      "values": ["horizontal", "vertical"]
     },
     "variant": {
       "type": "enum",
-      "description": "Default visual style for Tabs.List (can be overridden on Tabs.List)",
-      "default": "underline",
+      "description": "Default chrome for Tabs.List (can be overridden on Tabs.List): ghost draws a rule under the active tab, soft is a filled rail with a selected segment",
+      "default": "ghost",
       "required": false,
-      "values": [
-        "underline",
-        "pills"
-      ]
+      "values": ["ghost", "soft"]
     }
   },
   "usage": {
     "when": [
-      "Organizing related content into sections",
-      "Reducing page scrolling by grouping content",
-      "Settings pages with multiple categories",
-      "Dashboard views with different data perspectives"
+      "Sibling sections of equal weight",
+      "Cutting scroll on a long page",
+      "Settings split by category",
+      "One data set seen several ways"
     ],
     "whenNot": [
-      "Primary navigation (use sidebar or header nav)",
-      "Sequential steps (use Stepper or wizard)",
-      "Comparing content side-by-side",
-      "Very long lists of options (use Select or Menu)"
+      "Moving between pages (use Sidebar or header navigation)",
+      "Steps in an order (use Stepper)",
+      "Content the user compares side by side",
+      "More options than fit in a row (use Select)"
     ],
     "guidelines": [
-      "Keep tab labels short (1-2 words)",
-      "Order tabs by usage frequency or logical sequence",
-      "Avoid more than 5-6 tabs; consider sub-navigation for more",
-      "Tab content should be roughly equivalent in scope",
-      "Use pills variant for contained sections, underline for page-level tabs"
+      "One or two words per label",
+      "Order by how often each panel is used",
+      "Past five or six tabs, split the page instead",
+      "Keep panels comparable in depth",
+      "Soft rails inside cards, ghost at page level"
     ],
     "accessibility": [
       "Keyboard navigation with arrow keys",
@@ -90,24 +79,24 @@
   },
   "examples": [
     {
-      "name": "Underline",
-      "description": "Default underline style tabs",
-      "code": "<Tabs defaultValue=\"overview\" variant=\"underline\">\n  <Tabs.List>\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"analytics\">Analytics</Tabs.Tab>\n    <Tabs.Tab value=\"settings\">Settings</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Overview content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"analytics\">\n    <p>Analytics content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"settings\">\n    <p>Settings content goes here.</p>\n  </Tabs.Panel>\n</Tabs>"
+      "name": "Ghost",
+      "description": "A rule tracks the active panel.",
+      "code": "<Tabs defaultValue=\"overview\" variant=\"ghost\">\n  <Tabs.List>\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"analytics\">Analytics</Tabs.Tab>\n    <Tabs.Tab value=\"settings\">Settings</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Overview content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"analytics\">\n    <p>Analytics content goes here.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"settings\">\n    <p>Settings content goes here.</p>\n  </Tabs.Panel>\n</Tabs>"
     },
     {
-      "name": "Pills",
-      "description": "Pill-style tabs for contained sections",
-      "code": "<Tabs defaultValue=\"all\" variant=\"pills\">\n  <Tabs.List>\n    <Tabs.Tab value=\"all\">All</Tabs.Tab>\n    <Tabs.Tab value=\"active\">Active</Tabs.Tab>\n    <Tabs.Tab value=\"archived\">Archived</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"all\">\n    <p>Showing all items.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"active\">\n    <p>Showing active items only.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"archived\">\n    <p>Showing archived items.</p>\n  </Tabs.Panel>\n</Tabs>"
+      "name": "Soft",
+      "description": "A filled rail suits panels inside a card.",
+      "code": "<Tabs defaultValue=\"all\" variant=\"soft\">\n  <Tabs.List>\n    <Tabs.Tab value=\"all\">All</Tabs.Tab>\n    <Tabs.Tab value=\"active\">Active</Tabs.Tab>\n    <Tabs.Tab value=\"archived\">Archived</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"all\">\n    <p>Showing all items.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"active\">\n    <p>Showing active items only.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"archived\">\n    <p>Showing archived items.</p>\n  </Tabs.Panel>\n</Tabs>"
     },
     {
       "name": "With Disabled",
-      "description": "Tabs with a disabled option",
-      "code": "<Tabs defaultValue=\"general\" variant=\"underline\">\n  <Tabs.List>\n    <Tabs.Tab value=\"general\">General</Tabs.Tab>\n    <Tabs.Tab value=\"security\">Security</Tabs.Tab>\n    <Tabs.Tab value=\"billing\" disabled>Billing</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"general\">\n    <p>General settings panel.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"security\">\n    <p>Security settings panel.</p>\n  </Tabs.Panel>\n</Tabs>"
+      "description": "An unavailable panel stays visible but unreachable.",
+      "code": "<Tabs defaultValue=\"general\" variant=\"ghost\">\n  <Tabs.List>\n    <Tabs.Tab value=\"general\">General</Tabs.Tab>\n    <Tabs.Tab value=\"security\">Security</Tabs.Tab>\n    <Tabs.Tab value=\"billing\" disabled>Billing</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"general\">\n    <p>General settings panel.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"security\">\n    <p>Security settings panel.</p>\n  </Tabs.Panel>\n</Tabs>"
     },
     {
       "name": "List Variant Override",
-      "description": "Tabs sets a default variant, and Tabs.List can override it per list",
-      "code": "<Tabs defaultValue=\"overview\" variant=\"pills\">\n  <Tabs.List variant=\"underline\">\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"activity\">Activity</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Root sets pills, but this list overrides to underline.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"activity\">\n    <p>Per-list variant override example.</p>\n  </Tabs.Panel>\n</Tabs>"
+      "description": "One list can opt out of the root's style.",
+      "code": "<Tabs defaultValue=\"overview\" variant=\"soft\">\n  <Tabs.List variant=\"ghost\">\n    <Tabs.Tab value=\"overview\">Overview</Tabs.Tab>\n    <Tabs.Tab value=\"activity\">Activity</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"overview\">\n    <p>Root sets soft, but this list overrides to ghost.</p>\n  </Tabs.Panel>\n  <Tabs.Panel value=\"activity\">\n    <p>Per-list variant override example.</p>\n  </Tabs.Panel>\n</Tabs>"
     }
   ],
   "relations": [
@@ -127,25 +116,15 @@
       "value: string - controlled active tab",
       "defaultValue: string - initial active tab",
       "onValueChange: (value) => void - tab change handler",
-      "variant: underline|pills - default style for Tabs.List",
-      "Tabs.List variant?: underline|pills - optional per-list override"
+      "variant: ghost|soft - default chrome for Tabs.List",
+      "Tabs.List variant?: ghost|soft - optional per-list override"
     ],
-    "a11yRules": [
-      "A11Y_TABS_KEYBOARD",
-      "A11Y_TABS_LABELS"
-    ]
+    "a11yRules": ["A11Y_TABS_KEYBOARD", "A11Y_TABS_LABELS"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "List",
-      "Tab",
-      "Panel"
-    ],
-    "requiredChildren": [
-      "List",
-      "Panel"
-    ],
+    "subComponents": ["List", "Tab", "Panel"],
+    "requiredChildren": ["List", "Panel"],
     "commonPatterns": [
       "<Tabs defaultValue=\"tab1\"><Tabs.List><Tabs.Tab value=\"tab1\">{label1}</Tabs.Tab><Tabs.Tab value=\"tab2\">{label2}</Tabs.Tab></Tabs.List><Tabs.Panel value=\"tab1\">{content1}</Tabs.Panel><Tabs.Panel value=\"tab2\">{content2}</Tabs.Panel></Tabs>"
     ]

package/src/components/Tabs/Tabs.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout";
 @use "../../recipes/segmented";
 
@@ -14,37 +15,39 @@
   }
 }
 
-// Tab list container
+// Tab list container (ghost: a rule under the row, the indicator tracks the active tab)
 .list {
   position: relative;
   display: flex;
   align-items: center;
   gap: layout.gap("xs");
-  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-border, $fui-border);
   padding-inline: layout.gap("xs");
 
   &[data-orientation="vertical"] {
     flex-direction: column;
     align-items: stretch;
     border-bottom: none;
-    border-right: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+    border-right: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+      var(--fui-border, $fui-border);
     padding-block: layout.gap("xs");
-    padding-inline: 0;
+    padding-inline: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   }
 }
 
-// Variant: pills (shadcn-style with background container)
-.listPills {
+// Variant: soft (filled rail with a selected segment)
+.listSoft {
   border-bottom: none;
   border: 0;
   background-color: var(
     --fui-tabs-pills-bg,
     color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent)
   );
-  border-radius: var(--fui-radius-lg, $fui-radius-lg);
-  padding: 0;
-  gap: 0;
-  box-shadow: inset 0 0 0 1px
+  border-radius: var(--fui-radius-l1, $fui-radius-l1);
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  gap: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline})
     var(
       --fui-tabs-pills-border,
       color-mix(in srgb, var(--fui-border, #{$fui-border}) 72%, transparent)
@@ -52,11 +55,6 @@
   width: fit-content;
 }
 
-// Variant: underline (default, with indicator line)
-.listUnderline {
-  // Default styles already applied to .list
-}
-
 // Individual tab button
 .tab {
   @include button-reset;
@@ -65,7 +63,7 @@
   position: relative;
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-radius-l3, $fui-radius-l3);
 
   &:hover:not([data-disabled]) {
     color: var(--fui-text-primary, $fui-text-primary);
@@ -105,18 +103,18 @@
   }
 }
 
-// Tab in underline variant
-.tabUnderline {
-  border-radius: 0;
+// Tab in the ghost variant: the indicator carries the selection, the tab stays flat
+.tabGhost {
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
 
   &:hover:not([data-disabled]) {
     background-color: transparent;
   }
 }
 
-// Tab in pills variant (shadcn-style)
-.tabPills {
-  border-radius: var(--fui-radius-md, $fui-radius-md);
+// Tab in the soft variant: a segment on the rail
+.tabSoft {
+  border-radius: var(--fui-radius-l2, $fui-radius-l2);
   transition:
     background-color var(--fui-transition-fast, $fui-transition-fast),
     color var(--fui-transition-fast, $fui-transition-fast),
@@ -128,18 +126,16 @@
   }
 
   &[data-active] {
-    background-color: var(--fui-tabs-pill-active-bg, var(--fui-bg-elevated, #{$fui-bg-elevated}));
-    color: var(--fui-text-primary, $fui-text-primary);
-    box-shadow: var(--fui-tabs-pill-active-shadow, none);
+    @include segmented-selection;
   }
 }
 
-// Animated indicator (underline variant)
+// Animated indicator (ghost variant)
 .indicator {
   position: absolute;
   bottom: 0;
   left: 0;
-  height: var(--fui-stroke-default, 2px);
+  height: var(--fui-stroke-default, #{$fui-stroke-default});
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 
@@ -155,7 +151,7 @@
     left: auto;
     right: 0;
     top: 0;
-    width: var(--fui-stroke-default, 2px);
+    width: var(--fui-stroke-default, #{$fui-stroke-default});
     height: var(--active-tab-height);
     transform: translateY(var(--active-tab-top));
   }
@@ -164,7 +160,7 @@
 // Tab panel content
 .panel {
   padding-block: layout.gap("sm");
-  padding-inline: 0;
+  padding-inline: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   outline: none;
 
   &[data-hidden] {
@@ -174,11 +170,11 @@
   // Focus visible for keyboard navigation
   &:focus-visible {
     @include focus-ring;
-    border-radius: var(--fui-radius-md, $fui-radius-md);
+    border-radius: var(--fui-radius-l2, $fui-radius-l2);
   }
 }
 
 // Panel with no padding (for custom layouts)
 .panelFlush {
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }

package/src/components/Tabs/index.tsx

@@ -10,6 +10,7 @@ import styles from "./Tabs.module.scss";
 // ============================================
 
 export type TabValue = string;
+export type TabsVariant = "ghost" | "soft";
 export type TabsChangeEventDetails = Parameters<
   NonNullable<React.ComponentProps<typeof BaseTabs.Root>["onValueChange"]>
 >[1];
@@ -29,19 +30,20 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "d
   /** Tab layout direction.
    * @default "horizontal" */
   orientation?: "horizontal" | "vertical";
-  /** Tab list visual style (default for Tabs.List).
-   * @default "underline" */
-  variant?: "underline" | "pills";
+  /** Tab list chrome (default for Tabs.List): `ghost` draws a rule under the
+   * active tab, `soft` is a filled rail with a selected segment.
+   * @default "ghost" */
+  variant?: TabsVariant;
   /** Tab control size. Defaults to the component-default control size. */
   size?: ControlSize;
 }
 
 export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Tab list visual style.
-   * @default "underline"
+  /** Tab list chrome.
+   * @default "ghost"
    * @see https://usefragments.com/components/tabs#variants */
-  variant?: "underline" | "pills";
+  variant?: TabsVariant;
   /** Tab control size. Defaults to the nearest Tabs root or provider default. */
   size?: ControlSize;
 }
@@ -64,7 +66,7 @@ export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 // Context for variant
 // ============================================
 
-const TabsVariantContext = React.createContext<"underline" | "pills">("underline");
+const TabsVariantContext = React.createContext<TabsVariant>("ghost");
 const TabsSizeContext = React.createContext<ControlSize>("md");
 
 // ============================================
@@ -77,7 +79,7 @@ function TabsRoot({
   value,
   onValueChange,
   orientation = "horizontal",
-  variant = "underline",
+  variant = "ghost",
   size: sizeProp,
   className,
   ...htmlProps
@@ -95,6 +97,7 @@ function TabsRoot({
           onValueChange={onValueChange}
           orientation={orientation}
           className={classes}
+          data-slot="tabs"
         >
           {children}
         </BaseTabs.Root>
@@ -108,15 +111,21 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
   const rootSize = React.useContext(TabsSizeContext);
   const size = sizeProp ?? rootSize;
   const resolvedVariant = variant ?? rootVariant;
-  const variantClass = resolvedVariant === "pills" ? styles.listPills : styles.listUnderline;
-  const classes = [styles.list, variantClass, className].filter(Boolean).join(" ");
+  const classes = [styles.list, resolvedVariant === "soft" && styles.listSoft, className]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <TabsVariantContext.Provider value={resolvedVariant}>
       <TabsSizeContext.Provider value={size}>
-        <BaseTabs.List {...htmlProps} className={classes}>
+        <BaseTabs.List
+          {...htmlProps}
+          className={classes}
+          data-slot="tabs-list"
+          data-variant={resolvedVariant}
+        >
           {children}
-          {resolvedVariant === "underline" && <BaseTabs.Indicator className={styles.indicator} />}
+          {resolvedVariant === "ghost" && <BaseTabs.Indicator className={styles.indicator} />}
         </BaseTabs.List>
       </TabsSizeContext.Provider>
     </TabsVariantContext.Provider>
@@ -126,12 +135,12 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
 function Tab({ children, value, disabled, className }: TabProps) {
   const variant = React.useContext(TabsVariantContext);
   const size = React.useContext(TabsSizeContext);
-  const variantClass = variant === "pills" ? styles.tabPills : styles.tabUnderline;
+  const variantClass = variant === "soft" ? styles.tabSoft : styles.tabGhost;
   const sizeClass = size === "sm" ? styles.tabSm : size === "lg" ? styles.tabLg : styles.tabMd;
   const classes = [styles.tab, sizeClass, variantClass, className].filter(Boolean).join(" ");
 
   return (
-    <BaseTabs.Tab value={value} disabled={disabled} className={classes}>
+    <BaseTabs.Tab value={value} disabled={disabled} className={classes} data-slot="tabs-tab">
       {children}
     </BaseTabs.Tab>
   );
@@ -148,7 +157,13 @@ function TabsPanel({
   const classes = [styles.panel, flush && styles.panelFlush, className].filter(Boolean).join(" ");
 
   return (
-    <BaseTabs.Panel {...htmlProps} value={value} keepMounted={keepMounted} className={classes}>
+    <BaseTabs.Panel
+      {...htmlProps}
+      value={value}
+      keepMounted={keepMounted}
+      className={classes}
+      data-slot="tabs-panel"
+    >
       {children}
     </BaseTabs.Panel>
   );