@usefragments/ui 1.7.0 → 2.0.1

package/src/components/Badge/Badge.contract.json

@@ -3,13 +3,20 @@
   "name": "Badge",
   "description": "Labels a status, count, or category without pulling focus.",
   "category": "display",
-  "tags": ["status", "label", "tag", "count", "chip"],
+  "tags": [
+    "status",
+    "label",
+    "tag",
+    "count",
+    "chip"
+  ],
   "status": "stable",
   "sourcePath": "src/components/Badge/index.tsx",
   "exportName": "Badge",
   "propsSummary": [
     "children: node (required)",
-    "variant: default|success|warning|error|info|outline|label|dim (default: default)",
+    "variant: soft|outline|ghost (default: soft)",
+    "tone: neutral|accent|info|success|warning|danger (default: neutral)",
     "size: sm|md|lg (default: md)",
     "dot: boolean (default: false)",
     "dotPulse: boolean (default: false)",
@@ -28,17 +35,39 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual style indicating severity or category. `label` is a hairline-bordered metadata pill (pair with dotColor); `dim` is transparent filter-pill chrome (pair with active).",
-      "default": "default",
+      "description": "Chrome family. `soft` is the tinted pill; `outline` is a hairline metadata pill (pair with dotColor); `ghost` is transparent filter chrome (pair with active).",
+      "default": "soft",
+      "required": false,
+      "values": [
+        "soft",
+        "outline",
+        "ghost"
+      ]
+    },
+    "tone": {
+      "type": "enum",
+      "description": "Colour on the shared status ramp; `neutral` is the plain badge.",
+      "default": "neutral",
       "required": false,
-      "values": ["default", "success", "warning", "error", "info", "outline", "label", "dim"]
+      "values": [
+        "neutral",
+        "accent",
+        "info",
+        "success",
+        "warning",
+        "danger"
+      ]
     },
     "size": {
       "type": "enum",
       "description": "Badge size",
       "default": "md",
       "required": false,
-      "values": ["sm", "md", "lg"]
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
     },
     "dot": {
       "type": "boolean",
@@ -54,7 +83,7 @@
     },
     "dotColor": {
       "type": "string",
-      "description": "Color for the leading status dot. Applies to variant=\"label\" (and the generic dot prop). Accepts any CSS color including CSS custom properties.",
+      "description": "Color for the leading status dot. Accepts any CSS color including CSS custom properties.",
       "required": false
     },
     "icon": {
@@ -64,7 +93,7 @@
     },
     "active": {
       "type": "boolean",
-      "description": "Marks variant=\"dim\" as the currently selected filter. Has no effect on other variants.",
+      "description": "Marks variant=\"ghost\" as the currently selected filter. Has no effect on other variants.",
       "default": "false",
       "required": false
     },
@@ -101,8 +130,8 @@
     "guidelines": [
       "Under 20 characters",
       "dot for live status; add dotPulse only while it is still changing",
-      "Semantic variants are borderless pills on shared status tokens",
-      "label pairs with dotColor; dim pairs with active for filter chrome",
+      "Semantic tones are borderless soft pills on shared status tokens",
+      "outline pairs with dotColor; ghost pairs with active for filter chrome",
       "onRemove for user-created tags only, never system labels"
     ],
     "accessibility": [
@@ -114,19 +143,19 @@
   },
   "examples": [
     {
-      "name": "Status Variants",
+      "name": "Tones",
       "description": "Neutral through info, on shared status tokens.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"default\">Default</Badge>\n  <Badge variant=\"success\">Active</Badge>\n  <Badge variant=\"warning\">Pending</Badge>\n  <Badge variant=\"error\">Failed</Badge>\n  <Badge variant=\"info\">New</Badge>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge>Neutral</Badge>\n  <Badge tone=\"success\">Active</Badge>\n  <Badge tone=\"warning\">Pending</Badge>\n  <Badge tone=\"danger\">Failed</Badge>\n  <Badge tone=\"info\">New</Badge>\n</Stack>"
     },
     {
       "name": "With Dot",
       "description": "Leading dot for live state; it breathes while still moving.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"success\" dot>Online</Badge>\n  <Badge variant=\"warning\" dot>Away</Badge>\n  <Badge variant=\"error\" dot>Offline</Badge>\n  <Badge variant=\"info\" dot dotPulse>Syncing</Badge>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge tone=\"success\" dot>Online</Badge>\n  <Badge tone=\"warning\" dot>Away</Badge>\n  <Badge tone=\"danger\" dot>Offline</Badge>\n  <Badge tone=\"info\" dot dotPulse>Syncing</Badge>\n</Stack>"
     },
     {
-      "name": "Label and Filter",
+      "name": "Outline and Ghost",
       "description": "Hairline metadata pill, and filter chrome that marks the active one.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"label\" dotColor=\"var(--fui-color-accent)\">Design</Badge>\n  <Badge variant=\"label\" dotColor=\"var(--fui-color-success)\">Shipped</Badge>\n  <Badge variant=\"dim\" active>All</Badge>\n  <Badge variant=\"dim\">Archived</Badge>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"outline\" dotColor=\"var(--fui-color-accent)\">Design</Badge>\n  <Badge variant=\"outline\" dotColor=\"var(--fui-color-success)\">Shipped</Badge>\n  <Badge variant=\"ghost\" active>All</Badge>\n  <Badge variant=\"ghost\">Archived</Badge>\n</Stack>"
     },
     {
       "name": "Outline",
@@ -136,17 +165,17 @@
     {
       "name": "Sizes",
       "description": "sm for dense tables, lg for reference status pills.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Badge variant=\"success\" size=\"sm\">Small</Badge>\n  <Badge variant=\"success\" size=\"md\">Medium</Badge>\n  <Badge variant=\"success\" size=\"lg\">Large</Badge>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Badge tone=\"success\" size=\"sm\">Small</Badge>\n  <Badge tone=\"success\" size=\"md\">Medium</Badge>\n  <Badge tone=\"success\" size=\"lg\">Large</Badge>\n</Stack>"
     },
     {
       "name": "Removable",
       "description": "Dismissible tags the user added themselves.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge variant=\"info\" onRemove={() => {}}>React</Badge>\n  <Badge variant=\"info\" onRemove={() => {}}>TypeScript</Badge>\n  <Badge variant=\"info\" onRemove={() => {}}>CSS</Badge>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Badge tone=\"info\" onRemove={() => {}}>React</Badge>\n  <Badge tone=\"info\" onRemove={() => {}}>TypeScript</Badge>\n  <Badge tone=\"info\" onRemove={() => {}}>CSS</Badge>\n</Stack>"
     },
     {
       "name": "Announced Status",
       "description": "Looks the same, but screen readers now hear the change.",
-      "code": "<Badge variant=\"success\" announce>Saved</Badge>"
+      "code": "<Badge tone=\"success\" announce>Saved</Badge>"
     }
   ],
   "relations": [
@@ -164,20 +193,27 @@
   "contract": {
     "propsSummary": [
       "children: ReactNode - badge label (required)",
-      "variant: default|success|warning|error|info|outline|label|dim - visual style",
+      "variant: soft|outline|ghost - chrome family",
+      "tone: neutral|accent|info|success|warning|danger - colour",
       "size: sm|md|lg - badge size",
       "dot: boolean - show status dot indicator",
       "dotPulse: boolean - breathe the dot for an in-progress state (respects prefers-reduced-motion)",
       "dotColor: string - color for the leading status dot",
-      "active: boolean - marks variant=\"dim\" as the selected filter",
+      "active: boolean - marks variant=\"ghost\" as the selected filter",
       "onRemove: () => void - makes badge removable",
       "announce: boolean - opt into role=\"status\" + auto status aria-label"
     ],
-    "a11yRules": ["A11Y_BADGE_CONTRAST", "A11Y_BADGE_DISMISS", "A11Y_TARGET_SIZE_MIN"]
+    "a11yRules": [
+      "A11Y_BADGE_CONTRAST",
+      "A11Y_BADGE_DISMISS",
+      "A11Y_TARGET_SIZE_MIN"
+    ]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": ["Root"]
+    "subComponents": [
+      "Root"
+    ]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Badge/Badge.module.scss

@@ -1,17 +1,24 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/representation" as representation;
 @use "../../recipes/target" as target;
 
+// Tone publishes three channels (tint, ink, line); the variant decides which
+// one paints the surface. Neutral is the absence of a tone class.
 .badge {
+  --_badge-tint: var(--fui-bg-tertiary, #{$fui-bg-tertiary});
+  --_badge-ink: var(--fui-text-secondary, #{$fui-text-secondary});
+  --_badge-line: var(--fui-border-strong, #{$fui-border-strong});
+
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
   inline-size: max-content;
-  gap: var(--fui-raw-space-4, 4px);
-  padding-block: 0;
-  border: 0;
+  gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  padding-block: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid transparent;
   border-radius: var(--fui-badge-radius, var(--fui-radius-lg, #{$fui-radius-lg}));
   white-space: nowrap;
 }
@@ -20,65 +27,84 @@
 .sm {
   @include representation.badge("sm");
 
-  padding-inline: var(--fui-raw-space-4, 4px);
+  padding-inline: var(--fui-raw-space-4, #{measurements.raw-space(4)});
 }
 
 .md {
   @include representation.badge("md");
 
-  padding-inline: var(--fui-raw-space-6, 6px);
+  padding-inline: var(--fui-raw-space-6, #{measurements.raw-space(6)});
 }
 
 .lg {
   @include representation.badge("lg");
 
-  padding-inline: var(--fui-raw-space-8, 8px);
+  padding-inline: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
-// Variants
-.default {
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-  color: var(--fui-text-secondary, $fui-text-secondary);
+// Tones. The semantic `-bg` tokens are panel tints (Alert, Toast: a large
+// area where 10–15% of the seed is right). A badge is a few glyphs wide and
+// is the one place a state becomes a colour, so its fill mixes the seed
+// itself, harder, and harder again in the dark where a faint tint sinks into
+// the page. The ink stays the contrast-derived text token.
+$_tint-light: 24%;
+$_tint-dark: 28%;
+
+@mixin _tint($seed-var, $seed) {
+  --_badge-tint: light-dark(
+    color-mix(in srgb, var(#{$seed-var}, #{$seed}) #{$_tint-light}, transparent),
+    color-mix(in srgb, var(#{$seed-var}, #{$seed}) #{$_tint-dark}, transparent)
+  );
 }
 
-.success {
-  background: var(--fui-color-success-bg, $fui-color-success-bg);
-  color: var(--fui-color-success-text, $fui-color-success-text);
+@mixin _tone($tone, $seed, $text, $border) {
+  @include _tint(--fui-color-#{$tone}, $seed);
+
+  --_badge-ink: var(--fui-color-#{$tone}-text, #{$text});
+  --_badge-line: var(--fui-color-#{$tone}-border, #{$border});
 }
 
-.warning {
-  background: var(--fui-color-warning-bg, $fui-color-warning-bg);
-  color: var(--fui-color-warning-text, $fui-color-warning-text);
+.toneAccent {
+  @include _tint(--fui-color-accent, $fui-color-accent);
+
+  --_badge-ink: var(--fui-color-accent, #{$fui-color-accent});
+  --_badge-line: color-mix(in srgb, var(--fui-color-accent, #{$fui-color-accent}) 48%, transparent);
 }
 
-.error {
-  background: var(--fui-color-danger-bg, $fui-color-danger-bg);
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
+.toneInfo {
+  @include _tone("info", $fui-color-info, $fui-color-info-text, $fui-color-info-border);
 }
 
-.info {
-  background: var(--fui-color-info-bg, $fui-color-info-bg);
-  color: var(--fui-color-info-text, $fui-color-info-text);
+.toneSuccess {
+  @include _tone("success", $fui-color-success, $fui-color-success-text, $fui-color-success-border);
 }
 
-.outline {
-  background-color: transparent;
-  color: var(--fui-text-primary, $fui-text-primary);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-strong, $fui-border-strong);
+.toneWarning {
+  @include _tone("warning", $fui-color-warning, $fui-color-warning-text, $fui-color-warning-border);
+}
+
+.toneDanger {
+  @include _tone("danger", $fui-color-danger, $fui-color-danger-text, $fui-color-danger-border);
 }
 
-.label {
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+// Variants
+.soft {
+  background-color: var(--_badge-tint, var(--fui-bg-tertiary, #{$fui-bg-tertiary}));
+  color: var(--_badge-ink, var(--fui-text-secondary, #{$fui-text-secondary}));
+}
+
+.outline {
   background-color: transparent;
-  color: var(--fui-text-secondary, $fui-text-secondary);
+  border-color: var(--_badge-line, var(--fui-border-strong, #{$fui-border-strong}));
+  color: var(--_badge-ink, var(--fui-text-secondary, #{$fui-text-secondary}));
 }
 
-.dim {
-  border: var(--fui-stroke-hairline, 1px) solid transparent;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+// Filter-pill chrome: transparent at rest, `active` wears the shared selected
+// surface. Tones colour the ink only.
+.ghost {
+  border-radius: var(--fui-radius-l3, #{$fui-radius-l3});
   background-color: transparent;
-  color: var(--fui-text-secondary, $fui-text-secondary);
+  color: var(--_badge-ink, var(--fui-text-secondary, #{$fui-text-secondary}));
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
     border-color var(--fui-transition-fast, $fui-transition-fast),
@@ -92,15 +118,15 @@
 }
 
 .dot {
-  inline-size: var(--fui-raw-space-6, 6px);
-  block-size: var(--fui-raw-space-6, 6px);
-  border-radius: 50%;
+  inline-size: var(--fui-raw-space-6, #{measurements.raw-space(6)});
+  block-size: var(--fui-raw-space-6, #{measurements.raw-space(6)});
+  border-radius: var(--fui-radius-full, #{$fui-radius-full});
   background-color: var(--fui-badge-dot-color, currentColor);
   flex-shrink: 0;
 
   .sm & {
-    inline-size: var(--fui-raw-space-4, 4px);
-    block-size: var(--fui-raw-space-4, 4px);
+    inline-size: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+    block-size: var(--fui-raw-space-4, #{measurements.raw-space(4)});
   }
 }
 
@@ -115,7 +141,7 @@
 
 @keyframes fui-badge-dot-pulse {
   50% {
-    opacity: 0.35;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
   }
 }
 
@@ -148,7 +174,7 @@
 }
 
 .badge:has(.remove) {
-  padding-inline-end: var(--fui-raw-space-4, 4px);
+  padding-inline-end: var(--fui-raw-space-4, #{measurements.raw-space(4)});
 }
 
 .remove {
@@ -158,22 +184,21 @@
 
   inline-size: 1em;
   block-size: 1em;
-  margin-inline-start: calc(-1 * var(--fui-raw-space-2, 2px));
-  padding: 0;
+  margin-inline-start: calc(-1 * var(--fui-raw-space-2, #{measurements.raw-space(2)}));
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   border: 0;
   background: transparent;
-  color: inherit;
-  opacity: 0.6;
+  color: color-mix(in srgb, currentColor 60%, transparent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   cursor: pointer;
 
   &:hover {
-    opacity: 1;
+    color: currentColor;
   }
 
   &:focus-visible {
     @include focus-ring;
 
-    opacity: 1;
+    color: currentColor;
   }
 }

package/src/components/Badge/index.tsx

@@ -8,19 +8,25 @@ import styles from "./Badge.module.scss";
  * Badge for status indicators, labels, and counts.
  * @see https://usefragments.com/components/badge
  */
+export type BadgeVariant = "soft" | "outline" | "ghost";
+export type BadgeTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
-  /** Visual style variant.
+  /** Chrome family.
    *
-   * - `default` / semantic / `outline`: pill-shaped status badges for
-   *   tags, counts, or state.
-   * - `label`: hairline-bordered label on the shared control floor for
-   *   metadata pills inside dense dashboard rows. Pair with `dotColor`.
-   * - `dim`: transparent 32px filter-pill chrome used
-   *   for toolbar filter chips. Pair with `active` to mark the selected one.
-   * @default "default"
+   * - `soft` (default): tinted pill for tags, counts, or state.
+   * - `outline`: hairline-bordered, transparent — metadata pills inside
+   *   dense rows. Pair with `dotColor`.
+   * - `ghost`: transparent filter-pill chrome for toolbar filters. Pair with
+   *   `active` to mark the selected one.
+   * @default "soft"
    * @see https://usefragments.com/components/badge#variants */
-  variant?: "default" | "success" | "warning" | "error" | "info" | "outline" | "label" | "dim";
+  variant?: BadgeVariant;
+  /** Colour. `neutral` is the plain badge; the semantic tones paint the
+   * shared status ramp.
+   * @default "neutral" */
+  tone?: BadgeTone;
   /** Badge size.
    * @default "md" */
   size?: "sm" | "md" | "lg";
@@ -29,13 +35,13 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /** Breathe the status dot, for a state that is still happening rather than
    * one that has settled. Respects `prefers-reduced-motion`. */
   dotPulse?: boolean;
-  /** Color for the leading status dot. Applies to `variant="label"` (and the
-   * generic `dot` prop). Accepts any CSS color including CSS custom properties. */
+  /** Color for the leading status dot. Accepts any CSS color including CSS
+   * custom properties. */
   dotColor?: string;
   /** Icon element rendered before the label */
   icon?: React.ReactNode;
-  /** Marks `variant="dim"` as the currently selected filter. Has no effect on
-   * other variants. */
+  /** Marks `variant="ghost"` as the currently selected filter. Has no effect
+   * on other variants. */
   active?: boolean;
   /** Makes the badge removable. Called when dismiss button is clicked. */
   onRemove?: () => void;
@@ -44,10 +50,20 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   announce?: boolean;
 }
 
+const TONE_CLASS: Record<BadgeTone, string | undefined> = {
+  neutral: undefined,
+  accent: styles.toneAccent,
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger,
+};
+
 const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   {
     children,
-    variant = "default",
+    variant = "soft",
+    tone = "neutral",
     size = "md",
     dot = false,
     dotPulse = false,
@@ -68,7 +84,8 @@ const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
     styles.badge,
     styles[size],
     styles[variant],
-    active && variant === "dim" && styles.active,
+    TONE_CLASS[tone],
+    active && variant === "ghost" && styles.active,
     className,
   ]
     .filter(Boolean)
@@ -81,8 +98,8 @@ const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   // For status badges, include the status in the aria-label if not provided
   const effectiveAriaLabel =
     ariaLabel ||
-    (announce && variant !== "default" && variant !== "outline"
-      ? `${variant}: ${typeof children === "string" ? children : ""}`
+    (announce && tone !== "neutral"
+      ? `${tone}: ${typeof children === "string" ? children : ""}`
       : undefined);
 
   return (

package/src/components/BentoGrid/BentoGrid.module.scss

@@ -83,8 +83,8 @@
   --_col-span: var(--bento-col-span, 1);
   --_row-span: var(--bento-row-span, 1);
 
-  grid-column: span var(--_col-span);
-  grid-row: span var(--_row-span);
+  grid-column: span var(--_col-span, var(--bento-col-span, 1));
+  grid-row: span var(--_row-span, var(--bento-row-span, 1));
 
   @include breakpoint-sm {
     --_col-span: var(--bento-col-span-sm, var(--bento-col-span, 1));
@@ -129,12 +129,8 @@
 // Accessibility: High Contrast Mode
 // ============================================
 
-@media (prefers-contrast: more) {
-  .item {
-    border-color: var(--fui-text-primary, $fui-text-primary);
-    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
-  }
+.item {
+  @include high-contrast-outline;
 }
 
 // ============================================

package/src/components/Box/Box.module.scss

@@ -1,5 +1,6 @@
 @use "../../recipes/layout";
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 
 .box {
   box-sizing: border-box;
@@ -181,7 +182,7 @@
 
 // Border radius
 .rounded-none {
-  border-radius: 0;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
 }
 .rounded-sm {
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
@@ -198,21 +199,21 @@
 
 // Border
 .border {
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 
 // Directional borders
 .borderTop {
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-top: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 .borderBottom {
-  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 .borderLeft {
-  border-left: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-left: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 .borderRight {
-  border-right: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border-right: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 }
 
 // Border color

package/src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -1,6 +1,8 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/action" as action;
+@use "../../recipes/layout" as layout;
 @use "../../recipes/target" as target;
 @use "../../recipes/typography" as typography;
 
@@ -16,8 +18,8 @@
   flex-wrap: wrap;
   gap: var(--fui-space-1, $fui-space-1);
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 // Individual breadcrumb item (li)
@@ -42,7 +44,7 @@
   text-overflow: ellipsis;
   // Intentional truncation width: one long crumb must not push the rest of the
   // trail off screen. Keep in sync with .current below.
-  max-width: 200px;
+  max-width: layout.measure("menu-min");
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
@@ -58,6 +60,14 @@
   }
 }
 
+// Plain item: a child that is its own control (menu trigger, picker)
+.content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fui-space-1, $fui-space-1);
+  min-width: 0;
+}
+
 // Current page (not a link)
 .current {
   display: inline-flex;
@@ -69,7 +79,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   // Intentional truncation width — matches .link above.
-  max-width: 200px;
+  max-width: layout.measure("menu-min");
 }
 
 // Separator between items
@@ -92,7 +102,7 @@
   align-items: center;
   justify-content: center;
   background: none;
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   cursor: pointer;

package/src/components/Breadcrumbs/index.tsx

@@ -171,9 +171,13 @@ function BreadcrumbsItem({
     );
   }
 
+  // Neither a link nor the current page: the child is its own control (a
+  // menu trigger, a picker). It gets the item's layout and nothing more — the
+  // link's hover and enlarged hit-area would sit over the child and take its
+  // clicks.
   return (
     <li className={classes} {...htmlProps}>
-      <span className={styles.link}>
+      <span className={styles.content}>
         {iconEl}
         {children}
       </span>