@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Box/index.tsx

@@ -1,26 +1,26 @@
-import * as React from 'react';
-import styles from './Box.module.scss';
+import * as React from "react";
+import styles from "./Box.module.scss";
 
-export interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+export interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
   children?: React.ReactNode;
   /** HTML element to render */
-  as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'span';
+  as?: "div" | "section" | "article" | "aside" | "main" | "header" | "footer" | "nav" | "span";
   /** Padding on all sides */
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  padding?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
   /** Horizontal padding (overrides padding) */
-  paddingX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  paddingX?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
   /** Vertical padding (overrides padding) */
-  paddingY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  paddingY?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
   /** Margin on all sides */
-  margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  margin?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "auto";
   /** Horizontal margin (overrides margin) */
-  marginX?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  marginX?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "auto";
   /** Vertical margin (overrides margin) */
-  marginY?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
+  marginY?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "auto";
   /** Background color */
-  background?: 'none' | 'primary' | 'secondary' | 'tertiary' | 'elevated';
+  background?: "none" | "primary" | "secondary" | "tertiary" | "elevated";
   /** Border radius */
-  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
   /** Border */
   border?: boolean;
   /** Top border */
@@ -32,15 +32,15 @@ export interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color
   /** Right border */
   borderRight?: boolean;
   /** Border color variant */
-  borderColor?: 'default' | 'strong' | 'accent' | 'danger';
+  borderColor?: "default" | "strong" | "accent" | "danger";
   /** Box shadow */
-  shadow?: 'sm' | 'md' | 'lg' | 'none';
+  shadow?: "sm" | "md" | "lg" | "none";
   /** Overflow behavior */
-  overflow?: 'hidden' | 'auto' | 'scroll' | 'visible';
+  overflow?: "hidden" | "auto" | "scroll" | "visible";
   /** Text color */
-  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'inverse';
+  color?: "primary" | "secondary" | "tertiary" | "accent" | "inverse";
   /** Display type */
-  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
+  display?: "block" | "inline" | "inline-block" | "flex" | "inline-flex" | "grid" | "none";
   /** Width (CSS value, e.g. "100%", "300px", 200) */
   width?: string | number;
   /** Min width */
@@ -61,93 +61,86 @@ export interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color
 
 /** Convert string | number to CSS value */
 function toCss(value: string | number): string {
-  return typeof value === 'number' ? `${value}px` : value;
+  return typeof value === "number" ? `${value}px` : value;
 }
 
-const BoxRoot = React.forwardRef<HTMLElement, BoxProps>(
-  function Box(
-    {
-      children,
-      as: Component = 'div',
-      padding,
-      paddingX,
-      paddingY,
-      margin,
-      marginX,
-      marginY,
-      background,
-      rounded,
-      border,
-      borderTop,
-      borderBottom,
-      borderLeft,
-      borderRight,
-      borderColor,
-      shadow,
-      overflow,
-      color,
-      display,
-      width,
-      minWidth,
-      maxWidth,
-      height,
-      minHeight,
-      maxHeight,
-      className,
-      style,
-      ...htmlProps
-    },
-    ref
-  ) {
-    const classes = [
-      styles.box,
-      padding && styles[`p-${padding}`],
-      paddingX && styles[`px-${paddingX}`],
-      paddingY && styles[`py-${paddingY}`],
-      margin && styles[`m-${margin}`],
-      marginX && styles[`mx-${marginX}`],
-      marginY && styles[`my-${marginY}`],
-      background && styles[`bg-${background}`],
-      rounded && styles[`rounded-${rounded}`],
-      border && styles.border,
-      borderTop && styles.borderTop,
-      borderBottom && styles.borderBottom,
-      borderLeft && styles.borderLeft,
-      borderRight && styles.borderRight,
-      borderColor && styles[`borderColor-${borderColor}`],
-      shadow && styles[`shadow-${shadow}`],
-      overflow && styles[`overflow-${overflow}`],
-      color && styles[`color-${color}`],
-      display && styles[`display-${display}`],
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
+const BoxRoot = React.forwardRef<HTMLElement, BoxProps>(function Box(
+  {
+    children,
+    as: Component = "div",
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    background,
+    rounded,
+    border,
+    borderTop,
+    borderBottom,
+    borderLeft,
+    borderRight,
+    borderColor,
+    shadow,
+    overflow,
+    color,
+    display,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    className,
+    style,
+    ...htmlProps
+  },
+  ref
+) {
+  const classes = [
+    styles.box,
+    padding && styles[`p-${padding}`],
+    paddingX && styles[`px-${paddingX}`],
+    paddingY && styles[`py-${paddingY}`],
+    margin && styles[`m-${margin}`],
+    marginX && styles[`mx-${marginX}`],
+    marginY && styles[`my-${marginY}`],
+    background && styles[`bg-${background}`],
+    rounded && styles[`rounded-${rounded}`],
+    border && styles.border,
+    borderTop && styles.borderTop,
+    borderBottom && styles.borderBottom,
+    borderLeft && styles.borderLeft,
+    borderRight && styles.borderRight,
+    borderColor && styles[`borderColor-${borderColor}`],
+    shadow && styles[`shadow-${shadow}`],
+    overflow && styles[`overflow-${overflow}`],
+    color && styles[`color-${color}`],
+    display && styles[`display-${display}`],
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
-    // Build sizing styles only when props are provided
-    const sizingStyle: React.CSSProperties = {};
-    if (width != null) sizingStyle.width = toCss(width);
-    if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);
-    if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);
-    if (height != null) sizingStyle.height = toCss(height);
-    if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);
-    if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);
+  // Build sizing styles only when props are provided
+  const sizingStyle: React.CSSProperties = {};
+  if (width != null) sizingStyle.width = toCss(width);
+  if (minWidth != null) sizingStyle.minWidth = toCss(minWidth);
+  if (maxWidth != null) sizingStyle.maxWidth = toCss(maxWidth);
+  if (height != null) sizingStyle.height = toCss(height);
+  if (minHeight != null) sizingStyle.minHeight = toCss(minHeight);
+  if (maxHeight != null) sizingStyle.maxHeight = toCss(maxHeight);
 
-    const hasSizing = Object.keys(sizingStyle).length > 0;
-    const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;
+  const hasSizing = Object.keys(sizingStyle).length > 0;
+  const mergedStyle = hasSizing ? { ...sizingStyle, ...style } : style;
 
-    return (
-      <Component
-        ref={ref as React.Ref<never>}
-        {...htmlProps}
-        className={classes}
-        style={mergedStyle}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
+  return (
+    <Component ref={ref as React.Ref<never>} {...htmlProps} className={classes} style={mergedStyle}>
+      {children}
+    </Component>
+  );
+});
 
 export const Box = Object.assign(BoxRoot, {
   Root: BoxRoot,

package/src/components/Breadcrumbs/Breadcrumbs.contract.json

@@ -1,14 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Breadcrumbs",
-  "description": "Breadcrumb navigation showing the current page location within a hierarchy. Helps users navigate back through parent pages.",
+  "description": "Shows where the user is and links back up the hierarchy.",
   "category": "navigation",
-  "tags": [
-    "breadcrumbs",
-    "navigation",
-    "hierarchy",
-    "wayfinding"
-  ],
+  "tags": ["breadcrumbs", "navigation", "hierarchy", "wayfinding"],
   "status": "stable",
   "sourcePath": "src/components/Breadcrumbs/index.tsx",
   "exportName": "Breadcrumbs",
@@ -44,21 +39,22 @@
   },
   "usage": {
     "when": [
-      "Showing hierarchical page location (e.g., Home > Category > Product)",
-      "Allowing quick navigation to parent pages",
-      "Multi-level content structures like documentation or e-commerce"
+      "Nested content more than two levels deep",
+      "Jumping back to a parent in one click",
+      "Documentation and catalogue hierarchies"
     ],
     "whenNot": [
-      "Flat navigation with no hierarchy (use Tabs or Header nav)",
-      "Step-by-step wizards (use Stepper)",
+      "Flat structures with no parents (use Tabs or header navigation)",
+      "Steps in an order (use Stepper)",
       "Primary navigation (use Sidebar or Header)"
     ],
     "guidelines": [
-      "Always include the current page as the last, non-linked item",
-      "Keep labels short and descriptive",
-      "Use maxItems to collapse long paths, keeping first and last visible",
-      "The separator defaults to \"/\" but can be customized",
-      "Use the label prop to customize the nav landmark name (defaults to \"Breadcrumb\")"
+      "End on the current page, unlinked",
+      "Short labels — the trail is a path, not a summary",
+      "Set maxItems to fold long paths, keeping first and last",
+      "The separator defaults to a slash and takes any node",
+      "Set label to rename the landmark (defaults to \"Breadcrumb\")",
+      "Crumbs truncate at 200px so one long title cannot push the rest out"
     ],
     "accessibility": [
       "Uses <nav aria-label=\"Breadcrumb\"> for landmark navigation",
@@ -70,27 +66,27 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic breadcrumb navigation",
+      "description": "Each ancestor links; the last one does not.",
       "code": "<Breadcrumbs>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Products</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"
     },
     {
       "name": "With Icons",
-      "description": "Breadcrumbs with icons on items",
+      "description": "Glyphs mark what kind of thing each level is.",
       "code": "<Breadcrumbs>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M8 1.25l-7 6v7.5c0 .138.112.25.25.25H5.5V10h5v5h4.25a.25.25 0 0 0 .25-.25v-7.5l-7-6z\" />\n      </svg>\n    }\n  >\n    Home\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item\n    href=\"#\"\n    icon={\n      <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n        <path d=\"M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z\" />\n      </svg>\n    }\n  >\n    Documents\n  </Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Report.pdf</Breadcrumbs.Item>\n</Breadcrumbs>"
     },
     {
       "name": "Collapsed",
-      "description": "Long breadcrumb trail collapsed with ellipsis",
+      "description": "Middle levels fold behind an ellipsis.",
       "code": "<Breadcrumbs maxItems={3}>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Category</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Subcategory</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Section</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>\n</Breadcrumbs>"
     },
     {
       "name": "Custom Separator",
-      "description": "Breadcrumbs with a custom chevron separator",
+      "description": "Any node can replace the slash.",
       "code": "<Breadcrumbs\n  separator={\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n      <path fillRule=\"evenodd\" d=\"M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06z\" />\n    </svg>\n  }\n>\n  <Breadcrumbs.Item href=\"#\">Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Settings</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Profile</Breadcrumbs.Item>\n</Breadcrumbs>"
     },
     {
       "name": "Custom Landmark Label",
-      "description": "Override the nav landmark label for screen readers",
+      "description": "Renames the landmark screen readers announce.",
       "code": "<Breadcrumbs label=\"Documentation breadcrumbs\">\n  <Breadcrumbs.Item href=\"#\">Docs</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"#\">Components</Breadcrumbs.Item>\n  <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>\n</Breadcrumbs>"
     }
   ],
@@ -115,21 +111,12 @@
       "Breadcrumbs.Item current: boolean - marks current page",
       "Breadcrumbs.Item icon: ReactNode - icon before label"
     ],
-    "a11yRules": [
-      "A11Y_NAV_LANDMARK",
-      "A11Y_ARIA_CURRENT",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_NAV_LANDMARK", "A11Y_ARIA_CURRENT", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Item",
-      "Separator"
-    ],
-    "requiredChildren": [
-      "Item"
-    ],
+    "subComponents": ["Item", "Separator"],
+    "requiredChildren": ["Item"],
     "commonPatterns": [
       "<Breadcrumbs><Breadcrumbs.Item href=\"/\">Home</Breadcrumbs.Item><Breadcrumbs.Item href=\"/products\">Products</Breadcrumbs.Item><Breadcrumbs.Item current>Widget</Breadcrumbs.Item></Breadcrumbs>"
     ]

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

@@ -1,8 +1,10 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
-@use '../../recipes/action' as action;
-@use '../../recipes/target' as target;
-@use '../../recipes/typography' as typography;
+@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;
 
 // Root nav wrapper
 .root {
@@ -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)
@@ -40,9 +42,12 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 200px;
+  // Intentional truncation width: one long crumb must not push the rest of the
+  // trail off screen. Keep in sync with .current below.
+  max-width: layout.measure("menu-min");
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  transition: color var(--fui-transition-fast, $fui-transition-fast),
+  transition:
+    color var(--fui-transition-fast, $fui-transition-fast),
     background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
@@ -55,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;
@@ -65,7 +78,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 200px;
+  // Intentional truncation width — matches .link above.
+  max-width: layout.measure("menu-min");
 }
 
 // Separator between items
@@ -88,11 +102,12 @@
   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;
-  transition: color var(--fui-transition-fast, $fui-transition-fast),
+  transition:
+    color var(--fui-transition-fast, $fui-transition-fast),
     background-color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {

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>