@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Tooltip/Tooltip.contract.json

@@ -140,7 +140,7 @@
     {
       "name": "Positions",
       "description": "Four sides; it flips if the edge is too close.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Tooltip content=\"Top tooltip\" side=\"top\">\n    <Button variant=\"secondary\">Top</Button>\n  </Tooltip>\n  <Tooltip content=\"Bottom tooltip\" side=\"bottom\">\n    <Button variant=\"secondary\">Bottom</Button>\n  </Tooltip>\n  <Tooltip content=\"Left tooltip\" side=\"left\">\n    <Button variant=\"secondary\">Left</Button>\n  </Tooltip>\n  <Tooltip content=\"Right tooltip\" side=\"right\">\n    <Button variant=\"secondary\">Right</Button>\n  </Tooltip>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"md\" align=\"center\" wrap>\n  <Tooltip content=\"Top tooltip\" side=\"top\">\n    <Button variant=\"soft\">Top</Button>\n  </Tooltip>\n  <Tooltip content=\"Bottom tooltip\" side=\"bottom\">\n    <Button variant=\"soft\">Bottom</Button>\n  </Tooltip>\n  <Tooltip content=\"Left tooltip\" side=\"left\">\n    <Button variant=\"soft\">Left</Button>\n  </Tooltip>\n  <Tooltip content=\"Right tooltip\" side=\"right\">\n    <Button variant=\"soft\">Right</Button>\n  </Tooltip>\n</Stack>"
     },
     {
       "name": "With Shortcut",
@@ -150,12 +150,12 @@
     {
       "name": "No Arrow",
       "description": "Drops the pointer for tooltips packed into dense chrome.",
-      "code": "<Tooltip content=\"No arrow on this one\" arrow={false}>\n  <Button variant=\"secondary\">Arrowless</Button>\n</Tooltip>"
+      "code": "<Tooltip content=\"No arrow on this one\" arrow={false}>\n  <Button variant=\"soft\">Arrowless</Button>\n</Tooltip>"
     },
     {
       "name": "With Content Props",
       "description": "contentProps lands on the popup element itself.",
-      "code": "<Tooltip\n  content=\"Styled through contentProps\"\n  contentProps={{ id: 'custom-tooltip-popup' }}\n>\n  <Button variant=\"secondary\">Custom popup</Button>\n</Tooltip>"
+      "code": "<Tooltip\n  content=\"Styled through contentProps\"\n  contentProps={{ id: 'custom-tooltip-popup' }}\n>\n  <Button variant=\"soft\">Custom popup</Button>\n</Tooltip>"
     }
   ],
   "relations": [

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,18 +1,15 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/overlay" as overlay;
 
 .positioner {
-  z-index: var(--fui-overlay-layer-tooltip, 60);
+  z-index: var(--fui-overlay-layer-tooltip, #{$fui-overlay-layer-tooltip});
   pointer-events: none;
 }
 
 .popup {
   @include overlay.tooltip;
 
-  color: var(--fui-text-inverse, $fui-text-inverse);
-  background-color: var(--fui-bg-inverse, $fui-bg-inverse);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   overflow-wrap: break-word;
   opacity: 0;
   transform: scale(0.95);
@@ -41,22 +38,31 @@
   @include overlay.arrow-box;
 
   background-color: var(--fui-bg-inverse, $fui-bg-inverse);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-bg-inverse, $fui-bg-inverse);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-bg-inverse, $fui-bg-inverse);
 
   &[data-side="top"] {
-    bottom: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    bottom: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 
   &[data-side="bottom"] {
-    top: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    top: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 
   &[data-side="left"] {
-    right: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    right: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 
   &[data-side="right"] {
-    left: calc(var(--fui-overlay-arrow-size, var(--fui-raw-space-10, 10px)) / -2);
+    left: calc(
+      var(--fui-overlay-arrow-size, var(--fui-raw-space-10, #{measurements.raw-space(10)})) / -2
+    );
   }
 }
 

package/src/components/VisuallyHidden/VisuallyHidden.module.scss

@@ -1,16 +1,6 @@
-// Screen reader only - hides content visually but keeps it accessible
-// Based on the widely-used sr-only pattern
+@use "../../tokens/mixins" as *;
+
+// Screen reader only - hides content visually but keeps it accessible.
 .visuallyHidden {
-  position: absolute;
-  /* fragments-allow FUI2004 reason="Accessibility clipping box must remain exactly one CSS pixel" expires="2027-08-01" */
-  width: 1px;
-  /* fragments-allow FUI2004 reason="Accessibility clipping box must remain exactly one CSS pixel" expires="2027-08-01" */
-  height: 1px;
-  padding: 0;
-  /* fragments-allow FUI2004 reason="Negative offset keeps the clipping box outside visual layout" expires="2027-08-01" */
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+  @include visually-hidden;
 }

package/src/index.ts

@@ -41,7 +41,7 @@ export {
   AlertAction,
   AlertClose,
   type AlertProps,
-  type AlertSeverity,
+  type AlertTone,
   type AlertIconProps,
   type AlertBodyProps,
   type AlertTitleProps,
@@ -50,7 +50,7 @@ export {
   type AlertActionProps,
   type AlertCloseProps,
 } from "./components/Alert";
-export { Badge, type BadgeProps } from "./components/Badge";
+export { Badge, type BadgeProps, type BadgeTone, type BadgeVariant } from "./components/Badge";
 export { IconButton, type IconButtonProps } from "./components/IconButton";
 export {
   ComponentDefaultsProvider,
@@ -216,7 +216,7 @@ export {
   Skeleton,
   type SkeletonProps,
   type SkeletonTextProps,
-  type SkeletonVariant,
+  type SkeletonShape,
   type SkeletonSize,
 } from "./components/Skeleton";
 
@@ -228,7 +228,7 @@ export {
   LoadingScreen,
   type LoadingProps,
   type LoadingSize,
-  type LoadingVariant,
+  type LoadingKind,
   type LoadingInlineProps,
   type LoadingScreenProps,
 } from "./components/Loading";
@@ -289,7 +289,7 @@ export {
   type ToastProps,
   type ToastProviderProps,
   type ToastData,
-  type ToastVariant,
+  type ToastTone,
   type ToastPosition,
 } from "./components/Toast";
 
@@ -344,15 +344,16 @@ export {
   Theme,
   ThemeProvider,
   ThemeToggle,
+  ThemeButton,
   useTheme,
   configureTheme,
   type ThemeProviderProps,
   type ThemeToggleProps,
+  type ThemeButtonProps,
   type ThemeMode,
   type UseThemeReturn,
   type ConfigureThemeOptions,
   type NeutralPalette,
-  type DensityPreset,
   type RadiusStyle,
 } from "./components/Theme";
 
@@ -559,7 +560,7 @@ export {
   ThinkingStep,
   useThinkingIndicatorContext,
   type ThinkingIndicatorProps,
-  type ThinkingVariant,
+  type ThinkingKind,
   type ThinkingStep as ThinkingStepType,
   type StepStatus,
   type ThinkingStepsProps,
@@ -584,6 +585,12 @@ export {
 // Assets
 export { FragmentsLogo, fragmentsLogoSvg, type FragmentsLogoProps } from "./assets/fragments-logo";
 export { FragmentsWordmark, type FragmentsWordmarkProps } from "./assets/fragments-wordmark";
+export {
+  NavGlyph,
+  NAV_GLYPH_NAMES,
+  type NavGlyphName,
+  type NavGlyphProps,
+} from "./assets/nav-glyph";
 
 // NavigationMenu
 export {
@@ -728,6 +735,3 @@ export {
   type ThemeConfig,
   type PresetDefinition,
 } from "./utils/theme-presets";
-
-// Legacy aliases (deprecated)
-export { Switch as Toggle, type SwitchProps as ToggleProps } from "./components/Switch";

package/src/measurements/MeasurementTargets.module.scss

@@ -30,21 +30,20 @@
 }
 
 .eyebrow {
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-tertiary, #{tokens.$fui-text-tertiary});
-  text-transform: uppercase;
 }
 
 .title {
   @include typography.role("title-lg");
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 .description {
   @include typography.role("body-compact");
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
 }
 
@@ -78,7 +77,7 @@
 .sectionTitle {
   @include typography.role("title-sm");
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 .specimenList {
@@ -99,7 +98,7 @@
 
 .specimenName,
 .specimenValue {
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 .specimenName {
@@ -188,7 +187,7 @@
 }
 
 .typographySample {
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   overflow-wrap: anywhere;
 }
 

package/src/measurements/generated.ts

@@ -1,98 +1,30 @@
 // This file is generated by scripts/generate-measurements.mjs. Do not edit.
-// Source SHA-256: deb4b375de296c627460bd2d99618182ae0fa21768c26b2037d549cd84a7a0c8
+// Source SHA-256: 2783cbbef495c746894385914699542d96008deb952c3f3ab6adf84bf3fac80d
 
 export const MEASUREMENT_PROFILES = {
-  density: {
-    compact: {
-      baseUnit: "6px",
-      baseFontSize: "14px",
-      spacingMultipliers: {
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12,
-        px: "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-      },
-      controlHeight: {
-        xs: "32px",
-        sm: "32px",
-        md: "32px",
-        lg: "36px",
-      },
-      touch: {
-        sm: "32px",
-        md: "32px",
-        lg: "40px",
-      },
-      sidebarItemHeight: "32px",
+  spacing: {
+    baseUnit: "7px",
+    baseFontSize: "14px",
+    multipliers: {
+      "1": 1,
+      "2": 2,
+      "3": 3,
+      "4": 4,
+      "5": 5,
+      "6": 6,
+      "8": 8,
+      "10": 10,
+      "12": 12,
+      px: "1px",
+      "0-5": 0.3,
+      "0-75": 0.43,
     },
-    default: {
-      baseUnit: "7px",
-      baseFontSize: "14px",
-      spacingMultipliers: {
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12,
-        px: "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-      },
-      controlHeight: {
-        xs: "32px",
-        sm: "32px",
-        md: "40px",
-        lg: "44px",
-      },
-      touch: {
-        sm: "32px",
-        md: "32px",
-        lg: "44px",
-      },
-      sidebarItemHeight: "32px",
-    },
-    relaxed: {
-      baseUnit: "8px",
-      baseFontSize: "14px",
-      spacingMultipliers: {
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12,
-        px: "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-      },
-      controlHeight: {
-        xs: "32px",
-        sm: "32px",
-        md: "44px",
-        lg: "48px",
-      },
-      touch: {
-        sm: "32px",
-        md: "40px",
-        lg: "48px",
-      },
-      sidebarItemHeight: "36px",
+    touch: {
+      sm: "32px",
+      md: "32px",
+      lg: "44px",
     },
+    sidebarItemHeight: "32px",
   },
   radius: {
     sharp: {
@@ -187,6 +119,21 @@ export const MEASUREMENT_PROFILES = {
       "composer-item": "210px",
       "page-narrow": "800px",
     },
+    overlay: {
+      "popover-min": "192px",
+      "popover-sm": "256px",
+      "popover-md": "384px",
+      "popover-lg": "512px",
+      "tooltip-max": "320px",
+      "dialog-sm": "384px",
+      "dialog-md": "448px",
+      "dialog-lg": "576px",
+      "dialog-xl": "768px",
+      "drawer-sm": "320px",
+      "drawer-md": "384px",
+      "drawer-lg": "512px",
+      "drawer-xl": "768px",
+    },
   },
   typography: {
     caption: {
@@ -261,11 +208,9 @@ export const MEASUREMENT_PROFILES = {
   },
 } as const;
 
-export type MeasurementDensity = keyof typeof MEASUREMENT_PROFILES.density;
 export type MeasurementRadiusStyle = keyof typeof MEASUREMENT_PROFILES.radius;
 
 export type MeasurementSelection = Readonly<{
-  density?: MeasurementDensity;
   radiusStyle?: MeasurementRadiusStyle;
 }>;
 
@@ -280,7 +225,7 @@ export function measurementPx(value: string, path = "measurement"): number {
   return pixels;
 }
 
-type MeasurementAttribute = "data-fui-density" | "data-fui-radius-style";
+type MeasurementAttribute = "data-fui-radius-style";
 
 function setRestorableAttribute(
   element: HTMLElement,
@@ -306,9 +251,6 @@ export function applyMeasurementSelection(
 ): () => void {
   const restore: Array<() => void> = [];
 
-  if (selection.density !== undefined) {
-    restore.push(setRestorableAttribute(element, "data-fui-density", selection.density));
-  }
   if (selection.radiusStyle !== undefined) {
     restore.push(setRestorableAttribute(element, "data-fui-radius-style", selection.radiusStyle));
   }

package/src/measurements/index.ts

@@ -2,7 +2,6 @@ export {
   MEASUREMENT_PROFILES,
   applyMeasurementSelection,
   measurementPx,
-  type MeasurementDensity,
   type MeasurementRadiusStyle,
   type MeasurementSelection,
 } from "./generated";

package/src/measurements/measurements.json

@@ -1,97 +1,29 @@
 {
   "$schema": "https://usefragments.com/schemas/ui-measurements.v1.json",
   "schemaVersion": 1,
-  "density": {
-    "compact": {
-      "baseUnit": "6px",
-      "baseFontSize": "14px",
-      "spacingMultipliers": {
-        "px": "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12
-      },
-      "controlHeight": {
-        "xs": "32px",
-        "sm": "32px",
-        "md": "32px",
-        "lg": "36px"
-      },
-      "touch": {
-        "sm": "32px",
-        "md": "32px",
-        "lg": "40px"
-      },
-      "sidebarItemHeight": "32px"
+  "spacing": {
+    "baseUnit": "7px",
+    "baseFontSize": "14px",
+    "multipliers": {
+      "px": "1px",
+      "0-5": 0.3,
+      "0-75": 0.43,
+      "1": 1,
+      "2": 2,
+      "3": 3,
+      "4": 4,
+      "5": 5,
+      "6": 6,
+      "8": 8,
+      "10": 10,
+      "12": 12
     },
-    "default": {
-      "baseUnit": "7px",
-      "baseFontSize": "14px",
-      "spacingMultipliers": {
-        "px": "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12
-      },
-      "controlHeight": {
-        "xs": "32px",
-        "sm": "32px",
-        "md": "40px",
-        "lg": "44px"
-      },
-      "touch": {
-        "sm": "32px",
-        "md": "32px",
-        "lg": "44px"
-      },
-      "sidebarItemHeight": "32px"
+    "touch": {
+      "sm": "32px",
+      "md": "32px",
+      "lg": "44px"
     },
-    "relaxed": {
-      "baseUnit": "8px",
-      "baseFontSize": "14px",
-      "spacingMultipliers": {
-        "px": "1px",
-        "0-5": 0.3,
-        "0-75": 0.43,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "8": 8,
-        "10": 10,
-        "12": 12
-      },
-      "controlHeight": {
-        "xs": "32px",
-        "sm": "32px",
-        "md": "44px",
-        "lg": "48px"
-      },
-      "touch": {
-        "sm": "32px",
-        "md": "40px",
-        "lg": "48px"
-      },
-      "sidebarItemHeight": "36px"
-    }
+    "sidebarItemHeight": "32px"
   },
   "radius": {
     "sharp": {
@@ -185,6 +117,21 @@
       "grid-cell": "224px",
       "composer-item": "210px",
       "page-narrow": "800px"
+    },
+    "overlay": {
+      "popover-min": "192px",
+      "popover-sm": "256px",
+      "popover-md": "384px",
+      "popover-lg": "512px",
+      "tooltip-max": "320px",
+      "dialog-sm": "384px",
+      "dialog-md": "448px",
+      "dialog-lg": "576px",
+      "dialog-xl": "768px",
+      "drawer-sm": "320px",
+      "drawer-md": "384px",
+      "drawer-lg": "512px",
+      "drawer-xl": "768px"
     }
   },
   "typography": {
@@ -302,32 +249,6 @@
       "sidebarRail": "2px",
       "sidebarLabelOffset": "1px",
       "sidebarCollapsedWidth": "56px"
-    },
-    "docsDensity": {
-      "compact": {
-        "baseUnit": 6,
-        "baseFontSize": 14,
-        "buttonHeights": [24, 30, 36],
-        "inputHeights": [24, 32, 36],
-        "touchTargets": [24, 28, 38],
-        "sidebarItemHeight": 30
-      },
-      "default": {
-        "baseUnit": 7,
-        "baseFontSize": 14,
-        "buttonHeights": [28, 36, 44],
-        "inputHeights": [28, 40, 44],
-        "touchTargets": [24, 32, 44],
-        "sidebarItemHeight": 35
-      },
-      "relaxed": {
-        "baseUnit": 8,
-        "baseFontSize": 14,
-        "buttonHeights": [32, 40, 48],
-        "inputHeights": [32, 44, 48],
-        "touchTargets": [28, 36, 48],
-        "sidebarItemHeight": 38
-      }
     }
   },
   "compatibility": {
@@ -338,7 +259,7 @@
         "finalOwner": "22"
       },
       {
-        "id": "legacy-density-spacing",
+        "id": "legacy-spacing",
         "patterns": ["--fui-space-*"],
         "finalOwner": "22"
       },

package/src/recipes/_action.scss

@@ -118,9 +118,9 @@
 @mixin icon-only($role) {
   @include size($role);
 
-  inline-size: var(--_fui-action-track);
-  block-size: var(--_fui-action-track);
-  min-block-size: var(--_fui-action-track);
+  inline-size: var(--_fui-action-track, #{track($role)});
+  block-size: var(--_fui-action-track, #{track($role)});
+  min-block-size: var(--_fui-action-track, #{track($role)});
   padding-inline: 0;
 }
 
@@ -132,7 +132,7 @@
 
 @mixin inline {
   min-block-size: auto;
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   font: inherit;
   letter-spacing: inherit;
 }

package/src/recipes/_boolean-range.scss

@@ -78,8 +78,8 @@
   );
 
   display: grid;
-  grid-template-columns: var(--_fui-boolean-mark-size) minmax(0, 1fr);
-  column-gap: var(--_fui-boolean-label-gap);
+  grid-template-columns: var(--_fui-boolean-mark-size, #{mark-size($size)}) minmax(0, 1fr);
+  column-gap: var(--_fui-boolean-label-gap, #{label-gap($size)});
   align-items: start;
   @include typography.role($type-role);
 }
@@ -89,9 +89,13 @@
   block-size: mark-size($size);
 }
 
+// A bordered surface reads as a card, not a field row: the same inset on
+// every side, so a two-line item (label + helper) breathes as much above and
+// below as it does at its edges. The field track still sets the floor so a
+// one-line card sits level with an input beside it.
 @mixin card($size) {
   min-block-size: card-track($size);
-  padding-inline: field.inline-inset($size);
+  padding: field.inline-inset($size);
   box-sizing: border-box;
 }
 
@@ -102,8 +106,8 @@
   --_fui-switch-inset: var(--fui-stroke-default, #{measurements.target-value("stroke", "default")});
   --_fui-switch-travel: calc(var(--_fui-switch-inline-size) - var(--_fui-switch-block-size));
 
-  inline-size: var(--_fui-switch-inline-size);
-  block-size: var(--_fui-switch-block-size);
+  inline-size: var(--_fui-switch-inline-size, #{switch-inline-size($size)});
+  block-size: var(--_fui-switch-block-size, #{switch-block-size($size)});
 }
 
 @mixin slider-track {