@usefragments/ui 1.6.0 → 1.7.0

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

@@ -10,8 +10,13 @@
 }
 
 .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));
 }
 
 // The quiet index is flush; links and group headers share the title inset.
@@ -40,6 +45,9 @@
 
   display: flex;
   align-items: center;
+  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);
   text-decoration: none;
@@ -48,7 +56,7 @@
     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);
   }
 
@@ -104,6 +112,9 @@
 
   display: flex;
   align-items: center;
+  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%;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -122,7 +133,7 @@
     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);
   }
 
@@ -169,5 +180,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
@@ -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

@@ -44,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)

package/src/components/Tabs/index.tsx

@@ -95,6 +95,7 @@ function TabsRoot({
           onValueChange={onValueChange}
           orientation={orientation}
           className={classes}
+          data-slot="tabs"
         >
           {children}
         </BaseTabs.Root>
@@ -114,7 +115,12 @@ function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }
   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} />}
         </BaseTabs.List>
@@ -131,7 +137,7 @@ function Tab({ children, value, disabled, className }: TabProps) {
   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 +154,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>
   );

package/src/components/Text/Text.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Text",
-  "description": "Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.",
+  "description": "Applies the type scale to any text element, without hand-rolling font rules.",
   "category": "display",
-  "tags": [
-    "text",
-    "typography",
-    "heading",
-    "paragraph",
-    "font"
-  ],
+  "tags": ["text", "typography", "heading", "paragraph", "font"],
   "status": "stable",
   "sourcePath": "src/components/Text/index.tsx",
   "exportName": "Text",
@@ -19,7 +13,7 @@
     "variant: section-label",
     "size: 2xs|xs|sm|base|md|lg|xl|2xl|3xl|4xl",
     "weight: normal|medium|semibold|bold (default: \"normal\")",
-    "color: primary|secondary|tertiary|muted|success|warning|danger (default: \"primary\")",
+    "color: primary|secondary|tertiary|muted|accent|success|warning|danger (default: \"primary\")",
     "font: sans|mono (default: sans)",
     "truncate: boolean",
     "lineClamp: number",
@@ -67,63 +61,34 @@
       "type": "enum",
       "description": "Preset text variant",
       "required": false,
-      "values": [
-        "section-label"
-      ]
+      "values": ["section-label", "eyebrow"]
     },
     "size": {
       "type": "enum",
       "description": "Font size. 2xs (10), xs (12), sm/base (14), md (15 prose body), lg (20), xl (24), 2xl (30), 3xl (36 page title), 4xl (48 hero).",
       "required": false,
-      "values": [
-        "2xs",
-        "xs",
-        "sm",
-        "base",
-        "md",
-        "lg",
-        "xl",
-        "2xl",
-        "3xl",
-        "4xl"
-      ]
+      "values": ["2xs", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl"]
     },
     "weight": {
       "type": "enum",
       "description": "Font weight",
       "default": "\"normal\"",
       "required": false,
-      "values": [
-        "normal",
-        "medium",
-        "semibold",
-        "bold"
-      ]
+      "values": ["normal", "medium", "semibold", "bold"]
     },
     "color": {
       "type": "enum",
-      "description": "Text color (muted is an alias for tertiary; success/warning/danger are for a run of text that carries a state on its own \u2014 prefer Badge or Alert when the state deserves a container)",
+      "description": "Text color (muted is an alias for tertiary; success/warning/danger are for a run of text that carries a state on its own — prefer Badge or Alert when the state deserves a container)",
       "default": "\"primary\"",
       "required": false,
-      "values": [
-        "primary",
-        "secondary",
-        "tertiary",
-        "muted",
-        "success",
-        "warning",
-        "danger"
-      ]
+      "values": ["primary", "secondary", "tertiary", "muted", "accent", "success", "warning", "danger"]
     },
     "font": {
       "type": "enum",
       "description": "Font family",
       "default": "sans",
       "required": false,
-      "values": [
-        "sans",
-        "mono"
-      ]
+      "values": ["sans", "mono"]
     },
     "truncate": {
       "type": "boolean",
@@ -143,57 +108,55 @@
   },
   "usage": {
     "when": [
-      "Displaying text with specific typography styles",
-      "Creating headings, paragraphs, or labels",
-      "Text that needs truncation or line clamping",
-      "Consistent typography across the application"
+      "Any text that should sit on the type scale",
+      "Headings and paragraphs that need real tags",
+      "Text that must truncate or clamp"
     ],
     "whenNot": [
-      "Complex rich text (use a rich text editor)",
-      "Code display (use CodeBlock)",
-      "Interactive text (use Link or Button)"
+      "Rich or authored content (use Markdown)",
+      "Code (use CodeBlock)",
+      "Anything clickable (use Link or Button)"
     ],
     "guidelines": [
-      "Use semantic elements (h1-h6, p) via the \"as\" prop",
-      "Maintain heading hierarchy for accessibility",
-      "Use color variants sparingly for visual hierarchy",
-      "Consider truncation for user-generated content"
+      "Pick the tag with as, the look with size — they are separate decisions",
+      "Never skip heading levels to get a smaller heading",
+      "Color is for hierarchy and state, not decoration",
+      "Truncated text needs the full string in title or a tooltip"
     ],
     "accessibility": [
-      "Use proper heading levels (h1-h6) for document structure",
-      "Semantic elements convey meaning to screen readers",
-      "Truncated text should have full content in title/tooltip"
+      "as keeps the document outline intact for screen readers",
+      "Clamped text still exposes its full content to assistive tech"
     ]
   },
   "examples": [
     {
       "name": "Sizes",
-      "description": "Different text sizes",
+      "description": "Ten steps from caption to hero, all on the same scale.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text size=\"2xs\">Extra extra small (2xs — 10px)</Text>\n  <Text size=\"xs\">Extra small (xs — 12px)</Text>\n  <Text size=\"sm\">Small (sm — 14px)</Text>\n  <Text size=\"base\">Base size (14px)</Text>\n  <Text size=\"md\">Medium prose body (md — 15px)</Text>\n  <Text size=\"lg\">Large (lg — 20px)</Text>\n  <Text size=\"xl\">Extra large (xl — 24px)</Text>\n  <Text size=\"2xl\">Extra extra large (2xl — 30px)</Text>\n  <Text size=\"3xl\">Page title (3xl — 36px)</Text>\n  <Text size=\"4xl\">Hero display (4xl — 48px)</Text>\n</div>"
     },
     {
       "name": "Weights",
-      "description": "Different font weights",
+      "description": "Four weights — reach past semibold only for real emphasis.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text weight=\"normal\">Normal weight</Text>\n  <Text weight=\"medium\">Medium weight</Text>\n  <Text weight=\"semibold\">Semibold weight</Text>\n  <Text weight=\"bold\">Bold weight</Text>\n</div>"
     },
     {
       "name": "Colors",
-      "description": "Different text colors",
+      "description": "Dimmer tones push text back; success and danger carry state.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text color=\"primary\">Primary color (default)</Text>\n  <Text color=\"secondary\">Secondary color</Text>\n  <Text color=\"tertiary\">Tertiary color</Text>\n  <Text color=\"muted\">Muted color (alias for tertiary)</Text>\n</div>"
     },
     {
       "name": "Semantic Elements",
-      "description": "Using appropriate HTML elements",
+      "description": "The as prop picks the tag, so the outline stays correct.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text as=\"h1\" size=\"3xl\" weight=\"semibold\">Heading 1</Text>\n  <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Heading 2</Text>\n  <Text as=\"h3\" size=\"lg\" weight=\"semibold\">Heading 3</Text>\n  <Text as=\"p\" size=\"md\" color=\"secondary\">\n    This is a paragraph of text that demonstrates the Text component\n    with semantic paragraph element.\n  </Text>\n</div>"
     },
     {
       "name": "Monospace",
-      "description": "Monospace font for code-like text",
+      "description": "Fixed width for IDs, keys, and anything meant to be compared.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n  <Text font=\"mono\" size=\"sm\">const greeting = \"Hello, World!\";</Text>\n  <Text font=\"mono\" size=\"sm\" color=\"secondary\">npm install @usefragments/ui</Text>\n</div>"
     },
     {
       "name": "Truncation",
-      "description": "Text truncation with ellipsis",
+      "description": "One line with an ellipsis, or clamp to a set number of lines.",
       "code": "<div style={{ width: '200px', display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Text truncate>\n    This is a very long text that will be truncated with an ellipsis when it overflows.\n  </Text>\n  <Text truncate lineClamp={2}>\n    This text will be clamped to two lines. Any content beyond two lines\n    will be hidden and replaced with an ellipsis at the end.\n  </Text>\n</div>"
     }
   ],
@@ -219,21 +182,16 @@
       "as: string - HTML element",
       "size: 2xs|xs|sm|base|md|lg|xl|2xl|3xl|4xl - font size (px: 10/12/14/14/15/20/24/30/36/48)",
       "weight: normal|medium|semibold|bold - font weight",
-      "color: primary|secondary|tertiary|muted|success|warning|danger - text color (muted = tertiary; semantic colours for inline state)",
+      "color: primary|secondary|tertiary|muted|accent|success|warning|danger - text color (muted = tertiary; accent = brand spend; semantic colours for inline state)",
       "font: sans|mono - font family",
       "truncate: boolean - enable truncation",
       "lineClamp: number - max lines"
     ],
-    "a11yRules": [
-      "A11Y_HEADING_HIERARCHY",
-      "A11Y_SEMANTIC_ELEMENTS"
-    ]
+    "a11yRules": ["A11Y_HEADING_HIERARCHY", "A11Y_SEMANTIC_ELEMENTS"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Text/Text.module.scss

@@ -13,6 +13,17 @@
   @include typography.role("ui-compact");
 }
 
+// Eyebrow: the small-caps label that names a surface above its statement
+// (page label, card section head). Always tertiary ink — it is never the
+// thing the reader is meant to look at.
+.variant-eyebrow {
+  @include typography.role("caption");
+  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;
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
 @each $role
   in (
     "caption",
@@ -23,6 +34,7 @@
     "title-sm",
     "title-md",
     "title-lg",
+    "display",
     "code"
   )
 {
@@ -107,22 +119,27 @@
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 }
 
+.color-accent {
+  color: var(--fui-color-accent, $fui-color-accent);
+}
+
 // Semantic colours, for a run of text that carries a state on its own — a
 // count going over budget, an inline "expired", a figure in the red. Where
 // there is a component for the job (Badge, Alert, Callout) use that instead:
 // this is for the cases where the state is one word inside a line, and
 // wrapping it in a box would be more chrome than the fact is worth. Colour is
-// never the only carrier — the words still have to say it.
+// never the only carrier — the words still have to say it. Text uses the
+// same *-text stop as Badge so inline ink and chips stay one family.
 .color-success {
-  color: var(--fui-color-success, $fui-color-success);
+  color: var(--fui-color-success-text, $fui-color-success-text);
 }
 
 .color-warning {
-  color: var(--fui-color-warning, $fui-color-warning);
+  color: var(--fui-color-warning-text, $fui-color-warning-text);
 }
 
 .color-danger {
-  color: var(--fui-color-danger, $fui-color-danger);
+  color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
 // Font family