@usefragments/ui 1.0.0

package/src/components/Table/index.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import * as React from "react";
+import styles from "./Table.module.scss";
+
+// ============================================
+// Types
+// ============================================
+
+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";
+  /** Show alternating row backgrounds */
+  striped?: boolean;
+  /** Wrap table in a bordered container */
+  bordered?: boolean;
+  /** Class applied to the outer wrapper element */
+  wrapperClassName?: string;
+  /** Props applied to the outer wrapper element */
+  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+  children?: React.ReactNode;
+}
+
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /** Mark row as selected */
+  selected?: boolean;
+  /** Explicit stripe band for virtualized or nested rows. Rows with the same
+   * band share the same background when the parent table is striped. */
+  band?: "default" | "alt";
+  children?: React.ReactNode;
+}
+
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** Use tabular (fixed-width) numerals so digits align in columns. Ideal
+   * for numeric columns that update — counts, timestamps, currency. */
+  tabularNums?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {
+  /** Scope for the header cell */
+  scope?: string;
+  children?: React.ReactNode;
+}
+
+export interface TableCaptionProps extends Omit<
+  React.HTMLAttributes<HTMLTableCaptionElement>,
+  "hidden"
+> {
+  /** Visually hide the caption (screen readers only) */
+  visuallyHidden?: boolean;
+  /** @deprecated Use visuallyHidden */
+  hidden?: boolean;
+  children?: React.ReactNode;
+}
+
+// ============================================
+// Sub-components
+// ============================================
+
+function TableHead({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead className={[styles.thead, className].filter(Boolean).join(" ")} {...props}>
+      {children}
+    </thead>
+  );
+}
+
+function TableBody({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tbody className={[styles.tbody, className].filter(Boolean).join(" ")} {...props}>
+      {children}
+    </tbody>
+  );
+}
+
+function TableFooter({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tfoot className={[styles.tfoot, className].filter(Boolean).join(" ")} {...props}>
+      {children}
+    </tfoot>
+  );
+}
+
+const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
+  { className, selected, band, children, ...props },
+  ref
+) {
+  return (
+    <tr
+      ref={ref}
+      className={[styles.row, selected && styles.selected, className].filter(Boolean).join(" ")}
+      data-band={band}
+      data-selected={selected || undefined}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+});
+
+function TableCell({ className, tabularNums, children, ...props }: TableCellProps) {
+  return (
+    <td
+      className={[styles.td, tabularNums && styles.tabular, className].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+}
+
+function TableHeaderCell({ className, scope = "col", children, ...props }: TableHeaderCellProps) {
+  return (
+    <th className={[styles.th, className].filter(Boolean).join(" ")} scope={scope} {...props}>
+      <div className={styles.headerContent}>{children}</div>
+    </th>
+  );
+}
+
+function TableCaption({
+  className,
+  visuallyHidden,
+  hidden,
+  children,
+  ...props
+}: TableCaptionProps) {
+  const useVisuallyHidden = visuallyHidden ?? hidden;
+  return (
+    <caption
+      className={[useVisuallyHidden ? styles.captionHidden : styles.caption, className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
+      {children}
+    </caption>
+  );
+}
+
+// ============================================
+// Root component
+// ============================================
+
+function TableRoot({
+  size = "md",
+  striped = false,
+  bordered = false,
+  wrapperClassName,
+  wrapperProps,
+  className,
+  children,
+  ...htmlProps
+}: TableProps) {
+  const tableClasses = [styles.table, styles[size], striped && styles.striped, className]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      {...wrapperProps}
+      className={[
+        styles.wrapper,
+        bordered && styles.bordered,
+        wrapperProps?.className,
+        wrapperClassName,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <table className={tableClasses} {...htmlProps}>
+        {children}
+      </table>
+    </div>
+  );
+}
+
+// ============================================
+// Compound export
+// ============================================
+
+export const Table = Object.assign(TableRoot, {
+  Root: TableRoot,
+  Head: TableHead,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  Cell: TableCell,
+  HeaderCell: TableHeaderCell,
+  Caption: TableCaption,
+});

package/src/components/TableOfContents/TableOfContents.contract.json

@@ -0,0 +1,165 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "TableOfContents",
+  "description": "Sticky sidebar navigation for long-form content or filterable lists. Renders heading links with a continuous hierarchy rail that branches in for nested groups and back out for parent items, with active-segment highlighting.",
+  "category": "navigation",
+  "tags": [
+    "toc",
+    "table-of-contents",
+    "navigation",
+    "sidebar",
+    "scroll-spy",
+    "headings",
+    "tree",
+    "hierarchy"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/TableOfContents/index.tsx",
+  "exportName": "TableOfContents",
+  "propsSummary": [
+    "children: node (required)",
+    "label: string (default: Table of contents)",
+    "title: string (default: On This Page)",
+    "hideTitle: boolean (default: false)"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "TableOfContents.Item or TableOfContents.Group elements",
+      "required": true
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible label for the nav landmark",
+      "default": "Table of contents",
+      "required": false
+    },
+    "title": {
+      "type": "string",
+      "description": "Visible title above the list",
+      "default": "On This Page",
+      "required": false
+    },
+    "hideTitle": {
+      "type": "boolean",
+      "description": "Hide the visible title",
+      "default": "false",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Long-form content pages (docs, blog posts, articles)",
+      "Component documentation with multiple sections",
+      "Filterable list sidebars where items are grouped by category",
+      "Any page with 3+ headings or nested sections that benefit from quick navigation"
+    ],
+    "whenNot": [
+      "Short pages with only 1-2 sections",
+      "Primary site navigation (use Sidebar or Header)",
+      "Step-by-step flows (use Stepper)"
+    ],
+    "guidelines": [
+      "Pair with a scroll spy hook (e.g., IntersectionObserver) to track active heading",
+      "Use TableOfContents.Group to nest items under a labeled, optionally-collapsible parent",
+      "The legacy `indent` boolean on Item is preserved for back-compat; prefer Group for new code",
+      "Place in a sticky aside for best UX",
+      "Heading IDs must match between TOC items and the actual DOM headings",
+      "TableOfContents.Item performs smooth scrolling by default; call event.preventDefault() in onClick to override",
+      "Group is uncontrolled (defaultOpen=true) by default; pass open + onOpenChange for controlled state"
+    ],
+    "accessibility": [
+      "Uses <nav aria-label=\"Table of contents\"> for landmark navigation",
+      "Active item is marked with aria-current=\"location\"",
+      "All items are links with smooth scroll behavior",
+      "Group toggle is a real <button> with aria-expanded reflecting open state",
+      "Focus-visible ring on keyboard navigation"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic table of contents with section links",
+      "code": "<TableOfContents>\n  <TableOfContents.Item id=\"introduction\">Introduction</TableOfContents.Item>\n  <TableOfContents.Item id=\"getting-started\">Getting Started</TableOfContents.Item>\n  <TableOfContents.Item id=\"installation\" indent>Installation</TableOfContents.Item>\n  <TableOfContents.Item id=\"configuration\" indent>Configuration</TableOfContents.Item>\n  <TableOfContents.Item id=\"api-reference\">API Reference</TableOfContents.Item>\n  <TableOfContents.Item id=\"examples\">Examples</TableOfContents.Item>\n</TableOfContents>"
+    },
+    {
+      "name": "Nested Groups",
+      "description": "Filterable list grouped by category — the hierarchy rail branches in for children and back out for the next parent item",
+      "code": "<TableOfContents title=\"Components\">\n  <TableOfContents.Item id=\"all\" active>All</TableOfContents.Item>\n  <TableOfContents.Group label=\"Primitives\" trailing={<span>3</span>}>\n    <TableOfContents.Item id=\"button\">Button</TableOfContents.Item>\n    <TableOfContents.Item id=\"card\">Card</TableOfContents.Item>\n    <TableOfContents.Item id=\"input\">Input</TableOfContents.Item>\n  </TableOfContents.Group>\n  <TableOfContents.Group label=\"Custom\" defaultOpen={false}>\n    <TableOfContents.Item id=\"features\">Features</TableOfContents.Item>\n    <TableOfContents.Item id=\"plans\">Plans</TableOfContents.Item>\n  </TableOfContents.Group>\n</TableOfContents>"
+    },
+    {
+      "name": "With Active Item",
+      "description": "Active state highlighting the current section",
+      "code": "<TableOfContents>\n  <TableOfContents.Item id=\"overview\">Overview</TableOfContents.Item>\n  <TableOfContents.Item id=\"setup\" active>Setup</TableOfContents.Item>\n  <TableOfContents.Item id=\"usage\" indent>Basic Usage</TableOfContents.Item>\n  <TableOfContents.Item id=\"advanced\" indent>Advanced</TableOfContents.Item>\n  <TableOfContents.Item id=\"props\">Props</TableOfContents.Item>\n  <TableOfContents.Item id=\"accessibility\">Accessibility</TableOfContents.Item>\n</TableOfContents>"
+    },
+    {
+      "name": "Custom Title",
+      "description": "Table of contents with a custom title",
+      "code": "<TableOfContents title=\"Contents\">\n  <TableOfContents.Item id=\"chapter-1\">Chapter 1: The Beginning</TableOfContents.Item>\n  <TableOfContents.Item id=\"chapter-2\">Chapter 2: The Middle</TableOfContents.Item>\n  <TableOfContents.Item id=\"chapter-3\">Chapter 3: The End</TableOfContents.Item>\n</TableOfContents>"
+    },
+    {
+      "name": "No Title",
+      "description": "Table of contents without a visible title",
+      "code": "<TableOfContents hideTitle>\n  <TableOfContents.Item id=\"section-a\">Section A</TableOfContents.Item>\n  <TableOfContents.Item id=\"section-b\" active>Section B</TableOfContents.Item>\n  <TableOfContents.Item id=\"section-c\">Section C</TableOfContents.Item>\n</TableOfContents>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Breadcrumbs",
+      "relationship": "complementary",
+      "note": "Breadcrumbs show hierarchy, TOC shows page sections"
+    },
+    {
+      "component": "Sidebar",
+      "relationship": "complementary",
+      "note": "Sidebar for site nav, TOC for in-page nav"
+    },
+    {
+      "component": "Tabs",
+      "relationship": "alternative",
+      "note": "Tabs for switching views, TOC for scrolling to sections"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "title: string - visible heading (default \"On This Page\")",
+      "hideTitle: boolean - hide the title",
+      "label: string - aria-label for nav landmark",
+      "TableOfContents.Item id: string - heading ID to link to",
+      "TableOfContents.Item active: boolean - highlight as current (also paints the rail segment in accent)",
+      "TableOfContents.Item indent: boolean - legacy depth=1 indent for flat lists; prefer Group for new code",
+      "TableOfContents.Item leading/trailing: node - optional adornments before/after the label",
+      "TableOfContents.Group label: node - header text for the group",
+      "TableOfContents.Group defaultOpen / open / onOpenChange - uncontrolled or controlled open state (default open)",
+      "TableOfContents.Group collapsible: boolean - render as a static label (default true)",
+      "TableOfContents.Group trailing/leading: node - optional adornments on the group header row",
+      "Forwards standard nav/anchor DOM props; TableOfContents.Item onClick can prevent default smooth scroll"
+    ],
+    "a11yRules": [
+      "A11Y_NAV_LANDMARK",
+      "A11Y_ARIA_CURRENT",
+      "A11Y_ARIA_EXPANDED"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Item",
+      "Group"
+    ],
+    "requiredChildren": [
+      "Item",
+      "Group"
+    ],
+    "commonPatterns": [
+      "<TableOfContents>{headings.map(h => <TableOfContents.Item key={h.id} id={h.id} active={activeId === h.id} indent={h.level === 3}>{h.text}</TableOfContents.Item>)}</TableOfContents>",
+      "<TableOfContents>{groups.map(g => <TableOfContents.Group key={g.label} label={g.label} trailing={g.count}>{g.items.map(i => <TableOfContents.Item key={i.id} id={i.id} active={activeId === i.id}>{i.label}</TableOfContents.Item>)}</TableOfContents.Group>)}</TableOfContents>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:04.685Z"
+  }
+}

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

@@ -0,0 +1,324 @@
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+
+// ============================================
+// Single-rail "snake" geometry
+// ============================================
+//
+// All <li>s are siblings in one flat <ul>. Each carries data-depth, which
+// sets the X of its per-row rail (drawn as `::before`). At depth-0 → depth-1
+// transitions an opening elbow is drawn via `::after` on the depth-1 item;
+// at depth-1 → depth-0 transitions a closing elbow is drawn via `::after`
+// on the depth-0 item. Active items paint their rail in accent; the curves
+// into and out of an active depth-1 also flip to accent so the section
+// reads as one continuous coloured snake.
+
+$rail-x-0: 7px;
+$rail-indent: 14px;
+$rail-x-1: 21px; // = $rail-x-0 + $rail-indent
+$rail-pad: 18px; // <ul> padding-left
+$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
+
+.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);
+  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);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: $rail-pad;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+// ============================================
+// Per-row rail
+// ============================================
+
+.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
+// ============================================
+
+.link {
+  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),
+    color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+// Depth-1 link sits to the right of the rail (which lives at x=3px from li edge).
+// Margin pushes the link's hover/active background past the rail so it doesn't
+// paint over the line. Reduced padding-left keeps the text in the same x-position.
+[data-depth="1"] .link {
+  margin-left: var(--fui-space-2, $fui-space-2);
+  padding-left: $rail-indent;
+}
+
+.linkLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.leading,
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.trailing {
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.active {
+  color: var(--fui-color-accent, $fui-color-accent);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+}
+
+// ============================================
+// Group header
+// ============================================
+
+.groupHeader {
+  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;
+  text-align: left;
+  font-family: inherit;
+  cursor: default;
+}
+
+.groupHeaderInteractive {
+  cursor: pointer;
+  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);
+    color: var(--fui-text-secondary, $fui-text-secondary);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+.groupHeaderActive {
+  color: var(--fui-color-accent, $fui-color-accent);
+}
+
+.groupChevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fui-icon-xs, $fui-icon-xs);
+  height: var(--fui-icon-xs, $fui-icon-xs);
+  color: inherit;
+  opacity: 0.7;
+  transition: transform var(--fui-transition-fast, $fui-transition-fast);
+
+  svg {
+    width: 10px;
+    height: 10px;
+  }
+
+  &[data-open] {
+    transform: rotate(90deg);
+  }
+}
+
+.groupLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .link,
+  .groupHeaderInteractive,
+  .groupChevron {
+    transition: none;
+  }
+
+  .item,
+  .groupHeaderRow {
+    &::before,
+    &::after {
+      transition: none;
+    }
+  }
+}