@usefragments/ui 1.0.2 → 1.2.0

package/src/components/RadioGroup/RadioGroup.contract.json

@@ -3,12 +3,7 @@
   "name": "RadioGroup",
   "description": "Single selection from a list of mutually exclusive options",
   "category": "forms",
-  "tags": [
-    "form",
-    "radio",
-    "selection",
-    "options"
-  ],
+  "tags": ["form", "radio", "selection", "options"],
   "status": "stable",
   "sourcePath": "src/components/RadioGroup/index.tsx",
   "exportName": "RadioGroup",
@@ -26,6 +21,7 @@
     "size: sm|md|lg (default: md)",
     "wrapperClassName: string",
     "groupClassName: string",
+    "groupId: string",
     "children: node (required)"
   ],
   "props": {
@@ -54,10 +50,7 @@
       "description": "Layout orientation",
       "default": "vertical",
       "required": false,
-      "values": [
-        "horizontal",
-        "vertical"
-      ]
+      "values": ["horizontal", "vertical"]
     },
     "disabled": {
       "type": "boolean",
@@ -90,21 +83,14 @@
       "description": "Size variant",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "variant": {
       "type": "enum",
       "description": "Visual variant. 'default' is the inline radio, 'card' renders each item as a full-width clickable card with the radio tucked inside.",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "card"
-      ]
+      "values": ["default", "card"]
     },
     "wrapperClassName": {
       "type": "string",
@@ -116,6 +102,11 @@
       "description": "Class name for the inner radio group element",
       "required": false
     },
+    "groupId": {
+      "type": "string",
+      "description": "ID for the inner element with role=radiogroup; the inherited id remains on the outer field wrapper",
+      "required": false
+    },
     "children": {
       "type": "node",
       "description": "RadioGroup.Item elements",
@@ -213,19 +204,14 @@
       "error: boolean | string - error styling and message",
       "disabled: boolean - disable all options",
       "wrapperClassName/groupClassName - explicit styling targets for wrapper and group",
+      "groupId: string - ID forwarded to the inner radiogroup while id remains on the wrapper",
       "RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling"
     ],
-    "a11yRules": [
-      "A11Y_RADIO_GROUP",
-      "A11Y_LABEL_REQUIRED",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_RADIO_GROUP", "A11Y_LABEL_REQUIRED", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Item"
-    ]
+    "subComponents": ["Item"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/RadioGroup/index.tsx

@@ -61,6 +61,8 @@ export interface RadioGroupProps extends Omit<
   wrapperClassName?: string;
   /** Class applied to the inner radio group container */
   groupClassName?: string;
+  /** ID applied to the inner element with `role="radiogroup"`. The inherited `id` remains on the outer field wrapper for compatibility. */
+  groupId?: string;
   /** Children (Radio.Item components) */
   children: React.ReactNode;
 }
@@ -216,6 +218,7 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
     variant = "default",
     wrapperClassName,
     groupClassName,
+    groupId,
     children,
     className,
     "aria-label": ariaLabel,
@@ -252,6 +255,7 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
             </span>
           )}
           <BaseRadioGroup
+            id={groupId}
             value={value}
             defaultValue={defaultValue}
             onValueChange={handleValueChange}

package/src/components/Select/Select.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
 
 // Form field wrapper (label + helper + error)
 @include form-field-wrapper;
@@ -10,7 +10,7 @@
   @include interactive-base;
   @include text-base;
   @include field-shell;
-  @include control-size('md', 'input');
+  @include control-size("md", "input");
 
   display: inline-flex;
   align-items: center;
@@ -27,11 +27,11 @@
 
 // Trigger size variants
 .triggerSm {
-  @include control-size('sm', 'input');
+  @include control-size("sm", "input");
 }
 
 .triggerLg {
-  @include control-size('lg', 'input');
+  @include control-size("lg", "input");
 }
 
 // Value display
@@ -86,17 +86,18 @@
   border-color: var(--fui-form-group-border, $fui-border);
 
   // Item height derived from text-base font + vertical padding
-  --_item-h: calc(
-    var(--fui-font-size-sm, #{$fui-font-size-sm}) * var(--fui-line-height-normal, #{$fui-line-height-normal}) +
-    var(--fui-space-2, #{$fui-space-2}) * 2
+  --_select-item-h: calc(
+    var(--fui-font-size-sm, #{$fui-font-size-sm}) *
+      var(--fui-line-height-normal, #{$fui-line-height-normal}) +
+      var(--fui-space-2, #{$fui-space-2}) * 2
   );
 
   min-width: var(--anchor-width);
   // Show N items + half-peek scroll hint (default 4.5 items)
   // !important needed to override Base UI's inline max-height: 100%
   max-height: calc(
-    var(--_item-h) * var(--fui-select-max-items, 4.5) +
-    var(--fui-space-1, #{$fui-space-1}) * 2
+    var(--_select-item-h) * var(--fui-select-max-items, 4.5) + var(--fui-space-1, #{$fui-space-1}) *
+      2
   ) !important;
   overflow-y: auto !important;
 
@@ -214,12 +215,12 @@
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
   border: 1px solid var(--fui-border, $fui-border);
 
-  &[data-side='top'] {
+  &[data-side="top"] {
     border-top: none;
     border-left: none;
   }
 
-  &[data-side='bottom'] {
+  &[data-side="bottom"] {
     border-bottom: none;
     border-right: none;
   }

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

@@ -108,14 +108,24 @@
 
 // Body
 .tbody {
+  .td {
+    padding-top: var(--fui-space-2, $fui-space-2);
+    padding-bottom: var(--fui-space-2, $fui-space-2);
+  }
 }
 
 .row {
-  --fui-table-row-base-bg: var(--fui-table-bg, var(--fui-main-bg, var(--fui-bg-primary, #{$fui-bg-primary})));
+  --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);
+  background-color: var(
+    --fui-table-row-bg,
+    var(--fui-table-row-base-bg, var(--fui-bg-primary, #{$fui-bg-primary}))
+  );
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:last-child {
@@ -128,11 +138,18 @@
 }
 
 .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}));
+  --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));
+    --fui-table-row-bg: var(
+      --fui-table-row-selected-bg,
+      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 10%, transparent)
+    );
   }
 }
 

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

@@ -1,7 +1,7 @@
 {
   "$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.",
+  "description": "Sticky sidebar navigation for long-form content or filterable lists. Renders a quiet, flush index with nested indentation and an ink-weight active state.",
   "category": "navigation",
   "tags": [
     "toc",
@@ -84,7 +84,7 @@
     },
     {
       "name": "Nested Groups",
-      "description": "Filterable list grouped by category — the hierarchy rail branches in for children and back out for the next parent item",
+      "description": "Filterable list grouped by category with clear nested indentation",
       "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>"
     },
     {
@@ -126,7 +126,7 @@
       "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 active: boolean - highlight the current item with ink and weight",
       "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",
@@ -135,22 +135,12 @@
       "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"
-    ]
+    "a11yRules": ["A11Y_NAV_LANDMARK", "A11Y_ARIA_CURRENT", "A11Y_ARIA_EXPANDED"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Item",
-      "Group"
-    ],
-    "requiredChildren": [
-      "Item",
-      "Group"
-    ],
+    "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>"

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

@@ -2,21 +2,17 @@
 @use "../../tokens/mixins" as *;
 
 // ============================================
-// Single-rail "snake" geometry
+// Dormant single-rail 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.
+// 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; // <ul> padding-left
+$rail-pad: 18px; // optional rail inset; never default <ul> padding
 $rail-curve: 14px;
 $rail-thickness: 1px;
 $rail-active-thickness: 1px;
@@ -44,11 +40,13 @@ $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.
 .list {
   list-style: none;
   margin: 0;
   padding: 0;
-  padding-left: $rail-pad;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -176,6 +174,15 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
 // 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 {
   display: flex;
   align-items: center;
@@ -201,9 +208,8 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
   }
 }
 
-// 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.
+// Depth-1 links carry the hierarchy indent while the top-level index remains
+// flush with the title and group headers.
 [data-depth="1"] .link {
   margin-left: var(--fui-space-2, $fui-space-2);
   padding-left: $rail-indent;
@@ -231,7 +237,7 @@ $rail-from-item-1: $rail-x-1 - $rail-pad; //  3px
 }
 
 .active {
-  color: var(--fui-color-accent, $fui-color-accent);
+  color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 }
 

package/src/components/TableOfContents/index.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './TableOfContents.module.scss';
-import { Text } from '../Text';
+import * as React from "react";
+import styles from "./TableOfContents.module.scss";
+import { Text } from "../Text";
 
 // ============================================
 // Types
@@ -18,7 +18,10 @@ export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement>
   hideTitle?: boolean;
 }
 
-export interface TableOfContentsItemProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+export interface TableOfContentsItemProps extends Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "children"
+> {
   children: React.ReactNode;
   /** The heading ID to link to */
   id: string;
@@ -89,14 +92,14 @@ function ChevronIcon() {
 
 function TableOfContentsRoot({
   children,
-  label = 'Table of contents',
-  title = 'On This Page',
+  label = "Table of contents",
+  title = "On This Page",
   hideTitle = false,
   className,
-  'aria-label': ariaLabel,
+  "aria-label": ariaLabel,
   ...htmlProps
 }: TableOfContentsProps) {
-  const classes = [styles.root, className].filter(Boolean).join(' ');
+  const classes = [styles.root, className].filter(Boolean).join(" ");
 
   return (
     <nav {...htmlProps} aria-label={ariaLabel ?? label} className={classes}>
@@ -127,11 +130,7 @@ function TableOfContentsItem({
   const { depth } = React.useContext(TocContext);
   const effectiveDepth = depth > 0 ? depth : indent ? 1 : 0;
 
-  const linkClasses = [
-    styles.link,
-    active && styles.active,
-    className,
-  ].filter(Boolean).join(' ');
+  const linkClasses = [styles.link, active && styles.active, className].filter(Boolean).join(" ");
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     onClick?.(e);
@@ -140,23 +139,19 @@ function TableOfContentsItem({
     e.preventDefault();
     const el = document.getElementById(id);
     if (el) {
-      el.scrollIntoView({ behavior: 'smooth' });
-      window.history.replaceState(null, '', `#${id}`);
+      el.scrollIntoView({ behavior: "smooth" });
+      window.history.replaceState(null, "", `#${id}`);
     }
   };
 
   return (
-    <li
-      className={styles.item}
-      data-depth={effectiveDepth}
-      data-active={active || undefined}
-    >
+    <li className={styles.item} data-depth={effectiveDepth} data-active={active || undefined}>
       <a
         {...htmlProps}
         href={`#${id}`}
         className={linkClasses}
         onClick={handleClick}
-        aria-current={active ? 'location' : undefined}
+        aria-current={active ? "location" : undefined}
       >
         {leading != null && <span className={styles.leading}>{leading}</span>}
         <span className={styles.linkLabel}>{children}</span>
@@ -169,7 +164,7 @@ function TableOfContentsItem({
 function useControlledOpen(
   controlled: boolean | undefined,
   defaultValue: boolean,
-  onChange: ((open: boolean) => void) | undefined,
+  onChange: ((open: boolean) => void) | undefined
 ): [boolean, (next: boolean) => void] {
   const [internal, setInternal] = React.useState(defaultValue);
   const isControlled = controlled !== undefined;
@@ -179,14 +174,14 @@ function useControlledOpen(
       if (!isControlled) setInternal(next);
       onChange?.(next);
     },
-    [isControlled, onChange],
+    [isControlled, onChange]
   );
   return [value, setValue];
 }
 
-// Group renders a Fragment: its header <li> and its children become direct
-// siblings in the parent <ul>, which lets CSS adjacency selectors detect
-// depth transitions and draw the opening/closing elbows.
+// Group renders a Fragment so its header <li> and children remain direct
+// siblings in the parent <ul>. This preserves list semantics and depth-based
+// indentation without adding a nested list inset.
 function TableOfContentsGroup({
   children,
   label,
@@ -209,7 +204,9 @@ function TableOfContentsGroup({
     styles.groupHeader,
     isToggleable && styles.groupHeaderInteractive,
     active && styles.groupHeaderActive,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   const headerContent = (
     <>
@@ -226,11 +223,7 @@ function TableOfContentsGroup({
 
   return (
     <>
-      <li
-        className={styles.groupHeaderRow}
-        data-depth={depth}
-        data-active={active || undefined}
-      >
+      <li className={styles.groupHeaderRow} data-depth={depth} data-active={active || undefined}>
         {isToggleable ? (
           <button
             type="button"
@@ -244,11 +237,7 @@ 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 }}>{children}</TocContext.Provider>}
     </>
   );
 }

package/src/components/Toast/Toast.module.scss

@@ -63,7 +63,9 @@
 
 .toast {
   display: flex;
-  align-items: flex-start;
+  // Single-line toasts (title only) read best vertically centered; toasts
+  // with a description are multi-line and top-align — see `:has(.description)`.
+  align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
   padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
@@ -76,6 +78,12 @@
   animation: toastEnter var(--fui-transition-normal, $fui-transition-normal);
 }
 
+// With a description the toast is multi-line: top-align icon/close to the
+// first line rather than the block centre.
+.toast:has(.description) {
+  align-items: flex-start;
+}
+
 @keyframes toastEnter {
   from {
     opacity: 0;
@@ -177,7 +185,6 @@
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
-  margin-top: 1px;
 
   svg {
     width: 100%;
@@ -185,6 +192,12 @@
   }
 }
 
+// Nudge the icon to meet the first line only in multi-line toasts; centered
+// single-line toasts need no offset.
+.toast:has(.description) .icon {
+  margin-top: 1px;
+}
+
 .content {
   flex: 1;
   min-width: 0;

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -37,7 +37,10 @@
   .item {
     background-color: transparent;
     border: 1px solid transparent;
-    border-radius: var(--fui-radius-sm, $fui-radius-sm);
+    // Match the container's radius (form-group-surface = --fui-radius-lg),
+    // less its 1px inset border, so the selected fill nests inside the
+    // container corners instead of poking past them.
+    border-radius: calc(var(--fui-radius-lg, #{$fui-radius-lg}) - 1px);
 
     &.selected {
       background-color: var(--fui-toggle-group-selected-bg, var(--fui-bg-hover, #{$fui-bg-hover}));

package/src/index.ts

@@ -389,6 +389,9 @@ export {
   type ResponsiveGap,
 } from "./components/Stack";
 
+// Main
+export { Main, type MainProps, type MainRegionProps, type MainMeasure } from "./components/Main";
+
 // Text
 export { Text, type TextProps } from "./components/Text";
 
@@ -579,6 +582,7 @@ export {
 
 // Assets
 export { FragmentsLogo, fragmentsLogoSvg, type FragmentsLogoProps } from "./assets/fragments-logo";
+export { FragmentsWordmark, type FragmentsWordmarkProps } from "./assets/fragments-wordmark";
 
 // NavigationMenu
 export {

package/src/styles/globals.scss

@@ -24,14 +24,17 @@
 // Consumers set these via @use ... with().
 // Values are forwarded to the seed/token chain below.
 
-$fui-brand: #18181b !default;
-$fui-neutral: "stone" !default;
+$fui-brand: #006b57 !default;
+$fui-neutral: "carbon" !default;
 $fui-density: "default" !default;
 $fui-radius-style: "default" !default;
-$fui-danger: #ef4444 !default;
-$fui-success: #22c55e !default;
-$fui-warning: #f59e0b !default;
-$fui-info: #3b82f6 !default;
+// Status seeds tuned to sit in one family with the sage brand (see
+// tokens/_seeds.scss): danger is sage's warm complement, warning its
+// split-complement, info a cool teal-adjacent slate — all muted to match.
+$fui-danger: #d97066 !default;
+$fui-success: #7fc9b3 !default;
+$fui-warning: #e0aa5c !default;
+$fui-info: #7fa6c4 !default;
 
 // Configure seeds BEFORE loading variables.
 // Sass module singleton: once configured here, every subsequent
@@ -137,7 +140,7 @@ $fui-info: #3b82f6 !default;
   ::selection {
     background-color: var(
       --fui-selection-bg,
-      color-mix(in srgb, var(--fui-button-primary-base, #0a84ff) 18%, transparent)
+      color-mix(in srgb, var(--fui-color-accent, #7fc9b3) 18%, transparent)
     );
     color: var(--fui-selection-color, var(--fui-text-primary, #171717));
   }
@@ -197,11 +200,11 @@ $fui-info: #3b82f6 !default;
   }
 
   :where(:focus-visible) {
-    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #18181b) 24%, transparent);
+    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 24%, transparent);
     outline-offset: var(--fui-focus-ring-offset, 2px);
     box-shadow:
       0 0 0 calc(var(--fui-focus-ring-width, 2px) + 1px)
-        color-mix(in srgb, var(--fui-focus-ring-color, #18181b) 10%, transparent),
-      0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #18181b) 18%, transparent);
+        color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 10%, transparent),
+      0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #006b57) 18%, transparent);
   }
 }

package/src/tokens/_component-properties.scss

@@ -0,0 +1,26 @@
+// Component-scoped custom-property contract.
+//
+// These properties are authored on component instances from public props or
+// measured Base UI state. The mixin is intentionally not emitted at :root:
+// doing so would override each component's fallback/inheritance behavior.
+// Governance reads this file as the explicit vocabulary for dynamic values.
+@mixin fui-component-property-contract {
+  --fui-checkbox-radius: 0.25rem;
+  --fui-grid-min-child-width: 16rem;
+  --fui-line-clamp: 2;
+  --fui-navmenu-viewport-height: 0px;
+  --fui-navmenu-viewport-left: 0px;
+  --fui-navmenu-viewport-width: 0px;
+  --fui-prompt-inset-left: 0px;
+  --fui-select-max-items: 4.5;
+  --fui-stack-direction: column;
+  --fui-stack-direction-sm: var(--fui-stack-direction);
+  --fui-stack-direction-md: var(--fui-stack-direction-sm);
+  --fui-stack-direction-lg: var(--fui-stack-direction-md);
+  --fui-stack-direction-xl: var(--fui-stack-direction-lg);
+  --fui-stack-gap: 0;
+  --fui-stack-gap-sm: var(--fui-stack-gap);
+  --fui-stack-gap-md: var(--fui-stack-gap-sm);
+  --fui-stack-gap-lg: var(--fui-stack-gap-md);
+  --fui-stack-gap-xl: var(--fui-stack-gap-lg);
+}