@usefragments/ui 1.5.4 → 1.7.0

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

@@ -1,48 +1,25 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// ============================================
-// Dormant single-rail geometry
-// ============================================
-//
-// The public default is the quiet, flush index disabled below. These values
-// retain the existing optional rail geometry without making its inset part of
-// the default list contract.
-
-$rail-x-0: 7px;
-$rail-indent: 14px;
-$rail-x-1: 21px; // = $rail-x-0 + $rail-indent
-$rail-pad: 18px; // optional rail inset; never default <ul> padding
-$rail-curve: 14px;
-$rail-thickness: 1px;
-$rail-active-thickness: 1px;
-
-$rail-from-item-0: $rail-x-0 - $rail-pad; // -11px
-$rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
+@use "../../recipes/navigation" as navigation;
+@use "../../recipes/typography" as typography;
 
 .root {
-  // Solid rail color that adapts to light/dark and tracks the page background.
-  // 18% mix gives clearly-visible contrast against bg-primary at 1px width
-  // (subtler --fui-bg-tertiary blends into the bg at this thickness).
-  --toc-rail: color-mix(
-    in srgb,
-    var(--fui-bg-primary, #{$fui-bg-primary}),
-    var(--fui-text-primary, #{$fui-text-primary}) 18%
-  );
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+  @include navigation.properties;
+  @include typography.role("body-compact");
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
 .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-toc-title-gap, 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-toc-inline-inset, var(--fui-navigation-inline-inset));
 }
 
-// Plain index (the design-system default, see below) draws no rail, so the
-// list is flush — its links/group headers share the same inline inset as
-// .title. A future rail variant must reinstate its own $rail-pad inset.
+// The quiet index is flush; links and group headers share the title inset.
 .list {
   list-style: none;
   margin: 0;
@@ -50,156 +27,36 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--fui-stroke-hairline, 1px);
 }
 
 // ============================================
-// Per-row rail
+// Item link
 // ============================================
 
 .item,
 .groupHeaderRow {
   position: relative;
   list-style: none;
-
-  // Fade rail + elbows when [data-active] moves between items so the accent
-  // colour hands off smoothly rather than snapping as the user scrolls.
-  &::before,
-  &::after {
-    transition:
-      background-color var(--fui-transition-normal, $fui-transition-normal),
-      border-color var(--fui-transition-normal, $fui-transition-normal);
-  }
-}
-
-[data-depth="0"]::before {
-  content: "";
-  position: absolute;
-  left: $rail-from-item-0;
-  top: 0;
-  // Extend 1px past the bottom so the rail spans the 1px list gap between
-  // adjacent items, preserving a continuous rail under `gap: 1px` on .list.
-  bottom: -1px;
-  width: $rail-thickness;
-  background-color: var(--toc-rail);
-  pointer-events: none;
-}
-
-[data-depth="1"]::before {
-  content: "";
-  position: absolute;
-  left: $rail-from-item-1;
-  top: 0;
-  bottom: -1px;
-  width: $rail-thickness;
-  background-color: var(--toc-rail);
-  pointer-events: none;
-}
-
-// First depth-1 after a depth-0: shorten rail at top so opening curve has
-// a clean run-in.
-[data-depth="0"] + [data-depth="1"]::before {
-  top: $rail-curve;
-}
-
-// Last depth-1 before a depth-0: shorten rail at bottom so closing curve
-// has a clean run-out.
-[data-depth="1"]:has(+ [data-depth="0"])::before {
-  bottom: $rail-curve;
-}
-
-// ============================================
-// Opening elbow (depth-0 → depth-1)
-// ============================================
-
-[data-depth="0"] + [data-depth="1"]::after {
-  content: "";
-  position: absolute;
-  left: $rail-from-item-0;
-  top: 0;
-  width: $rail-curve;
-  height: $rail-curve;
-  border-left: $rail-thickness solid var(--toc-rail);
-  border-bottom: $rail-thickness solid var(--toc-rail);
-  pointer-events: none;
-}
-
-// ============================================
-// Closing elbow (depth-1 → depth-0)
-// ============================================
-
-[data-depth="1"] + [data-depth="0"]::after {
-  content: "";
-  position: absolute;
-  left: $rail-from-item-0;
-  // Start 1px higher to bridge the `gap: 1px` between depth-1 and depth-0 so
-  // the elbow's vertical stem meets the depth-1 rail end without a break.
-  top: calc(-#{$rail-curve} - 1px);
-  width: $rail-curve;
-  height: calc(#{$rail-curve} + 1px);
-  border-right: $rail-thickness solid var(--toc-rail);
-  border-bottom: $rail-thickness solid var(--toc-rail);
-  pointer-events: none;
-}
-
-// ============================================
-// Active state — paint rail + adjacent curves in accent
-// ============================================
-
-[data-active]::before {
-  background-color: var(--fui-color-accent, $fui-color-accent);
-  width: $rail-active-thickness;
-}
-
-[data-depth="0"]:has(+ [data-depth="1"][data-active])::before {
-  background-color: var(--fui-color-accent, $fui-color-accent);
-  width: $rail-active-thickness;
-}
-
-[data-depth="0"] + [data-depth="1"][data-active]::after {
-  border-left-color: var(--fui-color-accent, $fui-color-accent);
-  border-bottom-color: var(--fui-color-accent, $fui-color-accent);
-  border-left-width: $rail-active-thickness;
-  border-bottom-width: $rail-active-thickness;
-}
-
-[data-depth="1"][data-active] + [data-depth="0"]::after {
-  border-right-color: var(--fui-color-accent, $fui-color-accent);
-  border-bottom-color: var(--fui-color-accent, $fui-color-accent);
-  border-right-width: $rail-active-thickness;
-  border-bottom-width: $rail-active-thickness;
-}
-
-// ============================================
-// Item link
-// ============================================
-
-// ── Plain index (design-system default) ──────────────────────────────────────
-// The "on this page" index reads as a quiet list — the active row is signalled
-// by ink + medium weight (see .active), not a coloured rail. Drop the per-row
-// rail and elbow pseudo-elements the snake geometry above would otherwise draw.
-.root [data-depth]::before,
-.root [data-depth]::after {
-  content: none;
 }
 
 .link {
+  @include navigation.row;
+
   display: flex;
   align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: 0 var(--fui-space-2, $fui-space-2);
-  min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
+  min-block-size: var(--fui-toc-row-track, var(--fui-navigation-row-track));
+  padding-inline: var(--fui-toc-inline-inset, var(--fui-navigation-inline-inset));
+  gap: var(--fui-toc-content-gap, var(--fui-navigation-content-gap));
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
-  letter-spacing: var(--fui-letter-spacing-tight, $fui-letter-spacing-tight);
   text-decoration: none;
   transition:
     background-color var(--fui-transition-fast, $fui-transition-fast),
     color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: var(--fui-toc-hover-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
@@ -212,7 +69,7 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
 // flush with the title and group headers.
 [data-depth="1"] .link {
   margin-left: var(--fui-space-2, $fui-space-2);
-  padding-left: $rail-indent;
+  padding-inline-start: var(--fui-raw-space-16, 16px);
 }
 
 .linkLabel {
@@ -230,9 +87,14 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
   flex-shrink: 0;
 }
 
+.leading {
+  @include navigation.leading;
+}
+
 .trailing {
+  @include typography.role("caption");
+
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
   font-variant-numeric: tabular-nums;
 }
 
@@ -246,17 +108,16 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
 // ============================================
 
 .groupHeader {
+  @include navigation.section-row;
+
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
+  min-block-size: var(--fui-toc-section-track, var(--fui-navigation-section-track));
+  padding-inline: var(--fui-toc-inline-inset, var(--fui-navigation-inline-inset));
+  gap: var(--fui-toc-content-gap, var(--fui-navigation-content-gap));
   width: 100%;
-  padding: 0 var(--fui-space-2, $fui-space-2);
-  min-height: 32px;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
-  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-  letter-spacing: var(--fui-letter-spacing-wide, $fui-letter-spacing-wide);
   text-transform: uppercase;
   background: transparent;
   border: 0;
@@ -272,7 +133,7 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
     color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: var(--fui-toc-hover-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
     color: var(--fui-text-secondary, $fui-text-secondary);
   }
 
@@ -296,8 +157,8 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
   transition: transform var(--fui-transition-fast, $fui-transition-fast);
 
   svg {
-    width: 10px;
-    height: 10px;
+    width: var(--fui-raw-space-10, 10px);
+    height: var(--fui-raw-space-10, 10px);
   }
 
   &[data-open] {
@@ -319,12 +180,4 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
   .groupChevron {
     transition: none;
   }
-
-  .item,
-  .groupHeaderRow {
-    &::before,
-    &::after {
-      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
@@ -108,7 +112,7 @@ function TableOfContentsRoot({
           {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",
@@ -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",
       "required": false,
-      "values": [
-        "underline",
-        "pills"
-      ]
+      "values": ["underline", "pills"]
     }
   },
   "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",
+      "Pills inside cards, underline at page level"
     ],
     "accessibility": [
       "Keyboard navigation with arrow keys",
@@ -91,22 +80,22 @@
   "examples": [
     {
       "name": "Underline",
-      "description": "Default underline style tabs",
+      "description": "A rule tracks the active panel.",
       "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": "Pills",
-      "description": "Pill-style tabs for contained sections",
+      "description": "A filled track suits panels inside a card.",
       "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": "With Disabled",
-      "description": "Tabs with a disabled option",
+      "description": "An unavailable panel stays visible but unreachable.",
       "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>"
     },
     {
       "name": "List Variant Override",
-      "description": "Tabs sets a default variant, and Tabs.List can override it per list",
+      "description": "One list can opt out of the root's style.",
       "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>"
     }
   ],
@@ -130,22 +119,12 @@
       "variant: underline|pills - default style for Tabs.List",
       "Tabs.List variant?: underline|pills - 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,7 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/layout";
+@use "../../recipes/segmented";
 
 // Root container
 .root {
@@ -17,16 +19,17 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  border-bottom: 1px solid var(--fui-border, $fui-border);
-  padding: 0 var(--fui-space-1, $fui-space-1);
+  gap: layout.gap("xs");
+  border-bottom: var(--fui-stroke-hairline, 1px) 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: 1px solid var(--fui-border, $fui-border);
-    padding: var(--fui-space-1, $fui-space-1) 0;
+    border-right: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+    padding-block: layout.gap("xs");
+    padding-inline: 0;
   }
 }
 
@@ -41,7 +44,7 @@
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   padding: 0;
   gap: 0;
-  box-shadow: inset 0 0 0 1px
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
     var(
       --fui-tabs-pills-border,
       color-mix(in srgb, var(--fui-border, #{$fui-border}) 72%, transparent)
@@ -60,12 +63,6 @@
   @include interactive-base;
 
   position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
@@ -85,25 +82,32 @@
 }
 
 .tabSm {
-  min-height: var(--fui-button-height-sm, $fui-button-height-sm);
-  padding: 0 var(--fui-space-2, $fui-space-2);
+  @include segmented.item("sm");
+
+  svg {
+    @include segmented.glyph("sm");
+  }
 }
 
 .tabMd {
-  min-height: var(--fui-button-height-md, $fui-button-height-md);
-  padding: 0 var(--fui-space-3, $fui-space-3);
+  @include segmented.item("md");
+
+  svg {
+    @include segmented.glyph("md");
+  }
 }
 
 .tabLg {
-  min-height: var(--fui-button-height-lg, $fui-button-height-lg);
-  padding: 0 var(--fui-space-4, $fui-space-4);
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
+  @include segmented.item("lg");
+
+  svg {
+    @include segmented.glyph("lg");
+  }
 }
 
 // Tab in underline variant
 .tabUnderline {
   border-radius: 0;
-  margin-bottom: -1px;
 
   &:hover:not([data-disabled]) {
     background-color: transparent;
@@ -135,7 +139,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 2px;
+  height: var(--fui-stroke-default, 2px);
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 
@@ -151,7 +155,7 @@
     left: auto;
     right: 0;
     top: 0;
-    width: 2px;
+    width: var(--fui-stroke-default, 2px);
     height: var(--active-tab-height);
     transform: translateY(var(--active-tab-top));
   }
@@ -159,7 +163,8 @@
 
 // Tab panel content
 .panel {
-  padding: var(--fui-space-2, $fui-space-2) 0;
+  padding-block: layout.gap("sm");
+  padding-inline: 0;
   outline: none;
 
   &[data-hidden] {