@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Table/Table.module.scss

@@ -1,135 +1,72 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/table-chrome" as table-chrome;
 
 .wrapper {
+  min-inline-size: 0;
+  max-inline-size: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .table {
-  width: 100%;
-  border-collapse: collapse;
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  @include table-chrome.root;
+
+  @each $density in ("compact", "regular", "relaxed") {
+    &[data-density="#{$density}"] {
+      @include table-chrome.density($density);
+    }
+  }
 }
 
-// Caption for accessibility
 .caption {
-  padding: var(--fui-space-3, $fui-space-3) 0;
-  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);
-  text-align: left;
-  caption-side: top;
+  @include table-chrome.caption;
 }
 
-// Visually hidden caption (screen readers only)
 .captionHidden {
   @include visually-hidden;
 }
 
-// Size variants
-.sm {
-  .th,
-  .td {
-    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  }
-}
-
-.md {
-  .th,
-  .td {
-    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
-    font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  }
-}
-
-// Dashboard-dense rows — 36px tall, 14px horizontal padding, 12px text.
-// Hairline dividers only; no striping. Header sits flush on the same rail
-// as rows so it reads as part of the list, not a separate band.
-.compact {
-  .th,
-  .td {
-    padding: 0 var(--fui-space-2, $fui-space-2);
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-    height: 2.571rem; // 36px
-    line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-  }
-
-  .th {
-    font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
-    color: var(--fui-text-tertiary, $fui-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: var(--fui-letter-spacing-wide, $fui-letter-spacing-wide);
-    font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  }
-}
-
-// Tabular numerals on a cell — digits align in columns so updating numbers
-// don't jitter. Essential for numeric columns, timestamps, currencies.
 .tabular {
   font-variant-numeric: tabular-nums;
 }
 
-// Header
 .thead {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: 1;
 
   > tr {
-    border-bottom: 1px solid var(--fui-table-header-border, var(--fui-border, #{$fui-border}));
+    @include table-chrome.row;
   }
 }
 
 .th {
-  text-align: left;
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  white-space: nowrap;
-  vertical-align: middle;
+  @include table-chrome.header-cell;
 
-  &:first-child {
-    border-top-left-radius: var(--fui-radius-md, $fui-radius-md);
-  }
-
-  &:last-child {
-    border-top-right-radius: var(--fui-radius-md, $fui-radius-md);
-  }
+  white-space: nowrap;
 }
 
 .headerContent {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-}
-
-// Body
-.tbody {
-  .td {
-    padding-top: var(--fui-space-2, $fui-space-2);
-    padding-bottom: var(--fui-space-2, $fui-space-2);
-  }
+  gap: var(--fui-raw-space-4);
 }
 
 .row {
+  @include table-chrome.row;
+
   --fui-table-row-base-bg: var(
     --fui-table-bg,
     var(--fui-main-bg, var(--fui-bg-primary, #{$fui-bg-primary}))
   );
   --fui-table-row-bg: var(--fui-table-row-base-bg);
 
-  border-bottom: 1px solid var(--fui-table-border, var(--fui-border, #{$fui-border}));
-  background-color: var(
-    --fui-table-row-bg,
-    var(--fui-table-row-base-bg, var(--fui-bg-primary, #{$fui-bg-primary}))
-  );
+  background-color: var(--fui-table-row-bg);
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:last-child {
-    border-bottom: none;
+    border-block-end: 0;
   }
 
   &:hover {
@@ -137,39 +74,32 @@
   }
 }
 
+.td {
+  @include table-chrome.body-cell;
+}
+
 .selected {
   --fui-table-row-bg: var(
     --fui-table-row-selected-bg,
     color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 8%, transparent)
   );
-  box-shadow: inset 1px 0 0
-    var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
 
-  &:hover {
-    --fui-table-row-bg: var(
-      --fui-table-row-selected-bg,
-      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 10%, transparent)
-    );
+  .td:first-child {
+    box-shadow: inset var(--fui-table-divider-size) 0 0
+      var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
   }
-}
 
-.td {
-  color: var(--fui-text-primary, $fui-text-primary);
-  vertical-align: middle;
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+  &:dir(rtl) .td:first-child {
+    box-shadow: inset calc(-1 * var(--fui-table-divider-size)) 0 0
+      var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
+  }
 }
 
-// Footer
 .tfoot {
-  border-top: 1px solid var(--fui-table-header-border, var(--fui-border, #{$fui-border}));
-
-  .td,
-  .th {
-    font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  }
+  border-block-start: var(--fui-table-divider-size) solid
+    var(--fui-table-header-border, var(--fui-border, #{$fui-border}));
 }
 
-// Striped rows
 .striped {
   .tbody .row:nth-child(even),
   .tbody .row[data-band="alt"] {
@@ -181,41 +111,20 @@
   }
 }
 
-// Bordered
 .bordered {
-  border: 1px solid var(--fui-table-border, var(--fui-border, #{$fui-border}));
-  border-radius: var(--fui-radius-md, $fui-radius-md);
   overflow: hidden;
+  border: var(--fui-table-divider-size, var(--fui-stroke-hairline)) solid
+    var(--fui-table-border, var(--fui-border, #{$fui-border}));
+  border-radius: var(--fui-radius-md, $fui-radius-md);
 }
 
-// Responsive: allow horizontal scroll on small screens
-@include below-sm {
-  .wrapper {
-    margin-left: calc(-1 * var(--fui-space-4, $fui-space-4));
-    margin-right: calc(-1 * var(--fui-space-4, $fui-space-4));
-    padding-left: var(--fui-space-4, $fui-space-4);
-    padding-right: var(--fui-space-4, $fui-space-4);
-  }
-}
-
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
 @media (prefers-contrast: more) {
+  .row,
   .thead > tr {
-    border-bottom-width: 2px;
-  }
-
-  .row {
-    border-bottom-width: 2px;
+    border-block-end-color: CanvasText;
   }
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
   .row {
     transition: none;

package/src/components/Table/index.tsx

@@ -1,6 +1,11 @@
 "use client";
 
 import * as React from "react";
+import {
+  resolveTableDensity,
+  type LegacyTableSize,
+  type TableDensity,
+} from "../../recipes/table-chrome";
 import styles from "./Table.module.scss";
 
 // ============================================
@@ -8,10 +13,10 @@ import styles from "./Table.module.scss";
 // ============================================
 
 export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
-  /** Size variant. `compact` gives dense 36px-row dashboard lists with 12px
-   * text and hairline dividers — use when the table is a status surface,
-   * not a reading experience. */
-  size?: "sm" | "md" | "compact";
+  /** Canonical row density. */
+  density?: TableDensity;
+  /** @deprecated Use density. Retained until the next major-version review. */
+  size?: LegacyTableSize;
   /** Show alternating row backgrounds */
   striped?: boolean;
   /** Wrap table in a bordered container */
@@ -158,6 +163,7 @@ function TableCaption({
 
 function TableRoot({
   size = "md",
+  density,
   striped = false,
   bordered = false,
   wrapperClassName,
@@ -166,7 +172,8 @@ function TableRoot({
   children,
   ...htmlProps
 }: TableProps) {
-  const tableClasses = [styles.table, styles[size], striped && styles.striped, className]
+  const resolvedDensity = resolveTableDensity({ density, size });
+  const tableClasses = [styles.table, striped && styles.striped, className]
     .filter(Boolean)
     .join(" ");
 
@@ -182,7 +189,7 @@ function TableRoot({
         .filter(Boolean)
         .join(" ")}
     >
-      <table className={tableClasses} {...htmlProps}>
+      <table className={tableClasses} {...htmlProps} data-density={resolvedDensity}>
         {children}
       </table>
     </div>

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

@@ -1,37 +1,11 @@
 @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);
 }
 
@@ -40,9 +14,7 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
   padding: 0 var(--fui-space-2, $fui-space-2);
 }
 
-// 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,149 +22,26 @@ $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);
   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),
@@ -212,7 +61,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 +79,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 +100,13 @@ $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);
   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;
@@ -296,8 +146,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] {
@@ -320,11 +170,4 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
     transition: none;
   }
 
-  .item,
-  .groupHeaderRow {
-    &::before,
-    &::after {
-      transition: none;
-    }
-  }
 }

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;
   }
 }
 
@@ -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] {