@usefragments/ui 1.7.0 → 2.0.0

package/src/recipes/_popup.scss

@@ -1,52 +1,60 @@
 @use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as tokens;
+@use "../tokens/mixins" as mixins;
+@use "overlay";
 @use "typography";
 
+$_container-inset: measurements.raw-space(4);
+$_row-pitch: measurements.raw-space(32);
+$_row-inset: measurements.raw-space(8);
+$_separator-size: measurements.target-value("stroke", "hairline");
+$_separator-gap: measurements.raw-space(4);
+/// Rows visible before the viewport scrolls (the half row signals overflow).
+$_viewport-rows: 4.5;
+
 @mixin properties {
-  --fui-popup-container-inset: var(--fui-raw-space-4, #{measurements.raw-space(4)});
-  --fui-popup-row-pitch: var(--fui-raw-space-32, #{measurements.raw-space(32)});
-  --fui-popup-row-block-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
-  --fui-popup-row-inline-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
-  --fui-popup-row-content-gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
-  --fui-popup-row-gap: var(
-    --fui-stroke-hairline,
-    #{measurements.target-value("stroke", "hairline")}
-  );
+  --fui-popup-container-inset: var(--fui-raw-space-4, #{$_container-inset});
+  --fui-popup-row-pitch: var(--fui-raw-space-32, #{$_row-pitch});
+  --fui-popup-row-block-inset: var(--fui-raw-space-8, #{$_row-inset});
+  --fui-popup-row-inline-inset: var(--fui-raw-space-8, #{$_row-inset});
+  --fui-popup-row-content-gap: var(--fui-raw-space-8, #{$_row-inset});
   --fui-popup-indicator-box: var(--fui-raw-space-16, #{measurements.raw-space(16)});
-  --fui-popup-separator-size: var(
-    --fui-stroke-hairline,
-    #{measurements.target-value("stroke", "hairline")}
-  );
-  --fui-popup-separator-gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-popup-separator-size: var(--fui-stroke-hairline, #{$_separator-size});
+  --fui-popup-separator-gap: var(--fui-raw-space-4, #{$_separator-gap});
   --fui-popup-offset: var(--fui-raw-space-4, #{measurements.raw-space(4)});
-  --fui-popup-viewport-rows: 4.5;
-  --_fui-popup-effective-row-pitch: var(--fui-popup-row-pitch);
+  --fui-popup-viewport-rows: #{$_viewport-rows};
+  --_fui-popup-effective-row-pitch: var(--fui-popup-row-pitch, #{$_row-pitch});
 
   @media (pointer: coarse) {
     --_fui-popup-effective-row-pitch: var(--fui-raw-space-48, #{measurements.raw-space(48)});
   }
 }
 
-@mixin container {
+/// A pick list drawn in the page flow: the popup box without elevation.
+@mixin inline-container {
   @include properties;
+  @include overlay.surface;
+
+  padding: var(--fui-popup-container-inset, #{$_container-inset});
+  box-shadow: none;
+}
+
+/// The floating pick list (Menu, Select, Combobox, Command, DatePicker).
+@mixin container {
+  @include inline-container;
 
-  box-sizing: border-box;
-  padding: var(--fui-popup-container-inset);
-  border: var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")}) solid
-    var(--fui-border, #{tokens.$fui-border});
-  border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
-  background: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
-  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
   box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
 }
 
 @mixin viewport {
   box-sizing: border-box;
   max-block-size: calc(
-    2 * var(--fui-popup-container-inset) + 2 *
+    2 * var(--fui-popup-container-inset, #{$_container-inset}) + 2 *
       var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")}) +
-      var(--fui-popup-viewport-rows) * var(--_fui-popup-effective-row-pitch) +
-      (var(--fui-popup-viewport-rows) - 0.5) * var(--fui-popup-row-gap)
+      var(--fui-popup-viewport-rows, #{$_viewport-rows}) *
+      var(--_fui-popup-effective-row-pitch, #{$_row-pitch}) +
+      (var(--fui-popup-viewport-rows, #{$_viewport-rows}) - 0.5) *
+      var(--fui-popup-row-gap, #{tokens.$fui-popup-row-gap})
   );
   overflow-y: auto;
 }
@@ -61,10 +69,11 @@
   -webkit-tap-highlight-color: transparent;
   display: flex;
   align-items: center;
-  min-block-size: var(--_fui-popup-effective-row-pitch);
-  padding-block: var(--fui-popup-row-block-inset);
-  padding-inline: var(--fui-popup-row-inline-inset);
-  gap: var(--fui-popup-row-content-gap);
+  min-block-size: var(--_fui-popup-effective-row-pitch, #{$_row-pitch});
+  padding-block: var(--fui-popup-row-block-inset, #{$_row-inset});
+  padding-inline: var(--fui-popup-row-inline-inset, #{$_row-inset});
+  gap: var(--fui-popup-row-content-gap, #{$_row-inset});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
 }
 
 @mixin highlight-state {
@@ -80,7 +89,8 @@
 }
 
 @mixin disabled-state {
-  opacity: 0.5;
+  @include mixins.disabled-state;
+
   pointer-events: none;
 }
 
@@ -90,13 +100,13 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  min-block-size: var(--_fui-popup-effective-row-pitch);
-  padding-inline: var(--fui-popup-row-inline-inset);
+  min-block-size: var(--_fui-popup-effective-row-pitch, #{$_row-pitch});
+  padding-inline: var(--fui-popup-row-inline-inset, #{$_row-inset});
   color: var(--fui-text-tertiary, #{tokens.$fui-text-tertiary});
 }
 
 @mixin group-separator {
-  block-size: var(--fui-popup-separator-size);
-  margin-block: var(--fui-popup-separator-gap);
+  block-size: var(--fui-popup-separator-size, #{$_separator-size});
+  margin-block: var(--fui-popup-separator-gap, #{$_separator-gap});
   background: var(--fui-border, #{tokens.$fui-border});
 }

package/src/recipes/_prose.scss

@@ -1,4 +1,6 @@
+@use "../tokens/measurements.generated" as measurements;
 @use "../tokens/mixins" as mixins;
+@use "../tokens/variables" as tokens;
 @use "typography" as typography;
 
 // Block rhythm is owned by the container (owl selectors below). The element
@@ -7,22 +9,26 @@
 @mixin root {
   @include typography.role("body-relaxed");
 
+  // Long-form text: no balancing or orphan control (see recipes/typography).
+  text-wrap: auto;
+
   > * {
     margin-block: 0;
   }
 
   > * + * {
-    margin-block-start: var(--fui-raw-space-12);
+    margin-block-start: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   }
 
   > * + :is(h1, h2, h3, h4, h5, h6) {
-    margin-block-start: var(--fui-raw-space-24);
+    margin-block-start: var(--fui-raw-space-24, #{measurements.raw-space(24)});
   }
 }
 
 @mixin paragraph {
   @include typography.role("body-relaxed");
 
+  text-wrap: auto;
   margin-inline: 0;
 }
 
@@ -45,16 +51,19 @@
 @mixin list($kind) {
   @include typography.role("body-relaxed");
 
-  margin: 0;
-  padding: 0;
+  text-wrap: auto;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 
   @if $kind == "none" {
     display: grid;
     list-style: none;
   } @else if $kind == "disc" or $kind == "decimal" or $kind == "icon" {
     display: grid;
-    grid-template-columns: minmax(var(--fui-raw-space-12), max-content) minmax(0, 1fr);
-    column-gap: var(--fui-raw-space-8);
+    grid-template-columns:
+      minmax(var(--fui-raw-space-12, #{measurements.raw-space(12)}), max-content)
+      minmax(0, 1fr);
+    column-gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
     list-style: none;
 
     > li {
@@ -79,7 +88,7 @@
 
     > li > :is(ul, ol) {
       grid-column: 1 / -1;
-      margin-block-start: var(--fui-raw-space-8);
+      margin-block-start: var(--fui-raw-space-8, #{measurements.raw-space(8)});
     }
 
     @if $kind == "disc" {
@@ -106,10 +115,10 @@
 @mixin inline-code {
   @include typography.role("code");
 
-  padding-block: var(--fui-raw-space-2);
-  padding-inline: var(--fui-raw-space-4);
-  border-radius: var(--fui-radius-sm);
-  background: var(--fui-bg-tertiary);
+  padding-block: var(--fui-raw-space-2, #{measurements.raw-space(2)});
+  padding-inline: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  border-radius: var(--fui-radius-sm, #{tokens.$fui-radius-sm});
+  background: var(--fui-bg-tertiary, #{tokens.$fui-bg-tertiary});
   overflow-wrap: anywhere;
 }
 
@@ -117,11 +126,11 @@
   @include typography.role("code");
 
   @if $density == "compact" {
-    padding-block: var(--fui-raw-space-8);
-    padding-inline: var(--fui-raw-space-12);
+    padding-block: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+    padding-inline: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   } @else if $density == "default" {
-    padding-block: var(--fui-raw-space-12);
-    padding-inline: var(--fui-raw-space-16);
+    padding-block: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+    padding-inline: var(--fui-raw-space-16, #{measurements.raw-space(16)});
   } @else {
     @error "Unknown code-block density '#{$density}'. Expected compact or default.";
   }
@@ -135,21 +144,24 @@
 @mixin blockquote {
   @include typography.role("body-relaxed");
 
-  margin: 0;
-  padding-inline-start: var(--fui-raw-space-16);
-  border-inline-start: var(--fui-raw-space-2) solid var(--fui-border-strong);
+  text-wrap: auto;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding-inline-start: var(--fui-raw-space-16, #{measurements.raw-space(16)});
+  border-inline-start: var(--fui-raw-space-2, #{measurements.raw-space(2)}) solid
+    var(--fui-border-strong, #{tokens.$fui-border-strong});
 }
 
 @mixin table {
   @include typography.role("body-compact");
 
+  text-wrap: auto;
   display: block;
   max-inline-size: 100%;
   overflow-x: auto;
 
   :is(th, td) {
-    padding-block: var(--fui-raw-space-8);
-    padding-inline: var(--fui-raw-space-12);
+    padding-block: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+    padding-inline: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   }
 }
 
@@ -170,10 +182,10 @@
 }
 
 @mixin rule {
-  block-size: var(--fui-stroke-hairline);
-  margin-block: var(--fui-raw-space-24);
+  block-size: var(--fui-stroke-hairline, #{tokens.$fui-stroke-hairline});
+  margin-block: var(--fui-raw-space-24, #{measurements.raw-space(24)});
   border: 0;
-  background: var(--fui-border);
+  background: var(--fui-border, #{tokens.$fui-border});
 }
 
 @mixin media {

package/src/recipes/_representation.scss

@@ -1,4 +1,5 @@
 @use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
 @use "action" as action;
 @use "typography" as typography;
 
@@ -106,13 +107,13 @@
   inline-size: avatar-size($size);
   block-size: avatar-size($size);
   overflow: hidden;
-  border-radius: var(--fui-radius-full);
+  border-radius: var(--fui-radius-full, #{tokens.$fui-radius-full});
 }
 
 @mixin avatar-group-item($size) {
   margin-inline-start: calc(-1 * #{avatar-overlap($size)});
   border: var(--fui-stroke-default, #{measurements.target-value("stroke", "default")}) solid
-    var(--fui-bg-primary);
+    var(--fui-bg-primary, #{tokens.$fui-bg-primary});
 }
 
 @mixin glyph($size) {
@@ -124,8 +125,8 @@
 @mixin activity($size) {
   --_fui-activity-size: #{activity-size($size)};
 
-  inline-size: var(--_fui-activity-size);
-  block-size: var(--_fui-activity-size);
+  inline-size: var(--_fui-activity-size, #{activity-size($size)});
+  block-size: var(--_fui-activity-size, #{activity-size($size)});
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -171,11 +172,11 @@
 
 @mixin chart-marker($kind) {
   @if $kind == "dot" {
-    inline-size: var(--fui-chart-marker-dot, #{_raw(8)});
-    block-size: var(--fui-chart-marker-dot, #{_raw(8)});
-    border-radius: var(--fui-radius-full);
+    inline-size: #{_raw(8)};
+    block-size: #{_raw(8)};
+    border-radius: var(--fui-radius-full, #{tokens.$fui-radius-full});
   } @else if $kind == "line" or $kind == "dashed" {
-    inline-size: var(--fui-chart-marker-inline, #{_raw(12)});
+    inline-size: #{_raw(12)};
     block-size: var(--fui-chart-marker-stroke, #{_raw(2)});
   } @else {
     @error "Unknown chart marker '#{$kind}'. Expected dot, line, or dashed.";
@@ -187,7 +188,7 @@
 
   --_fui-chart-tooltip-item-gap: #{_raw(8)};
 
-  min-inline-size: var(--fui-chart-tooltip-min-inline, 100px);
+  min-inline-size: var(--fui-layout-measure-inline-floor, #{measurements.target-value("layoutMeasure", "inline-floor")});
   padding-block: _raw(8);
   padding-inline: _raw(12);
 }

package/src/recipes/_segmented.scss

@@ -13,7 +13,7 @@
   box-sizing: border-box;
   display: inline-flex;
   align-items: stretch;
-  min-block-size: var(--_fui-segmented-track);
+  min-block-size: var(--_fui-segmented-track, #{action.track($size)});
 }
 
 @mixin item($size) {

package/src/recipes/_table-chrome.scss

@@ -1,4 +1,5 @@
 @use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
 @use "typography" as typography;
 
 @mixin properties {
@@ -16,13 +17,11 @@
   --fui-table-header-block-inset-compact: var(--fui-raw-space-4, #{measurements.raw-space(4)});
   --fui-table-header-block-inset-regular: var(--fui-raw-space-8, #{measurements.raw-space(8)});
   --fui-table-header-block-inset-relaxed: var(--fui-raw-space-12, #{measurements.raw-space(12)});
-  --fui-table-tree-indent-step: var(--fui-raw-space-24, #{measurements.raw-space(24)});
-  --fui-table-divider-size: var(
-    --fui-stroke-hairline,
-    #{measurements.target-value("stroke", "hairline")}
-  );
+  --fui-table-tree-indent-step: var(--fui-raw-space-24, #{$_tree-indent-step});
+  --fui-table-divider-size: var(--fui-stroke-hairline, #{$_divider-size});
 }
 
+
 @function row-track($density) {
   @if $density == "compact" or $density == "regular" or $density == "relaxed" {
     @return var(--fui-table-row-track-#{$density});
@@ -72,6 +71,14 @@
   }
 }
 
+// Fallbacks are the regular-density defaults; `properties` sets the channels
+// per density on the table root.
+$_tree-indent-step: measurements.raw-space(24);
+$_divider-size: measurements.target-value("stroke", "hairline");
+$_cell-inline-inset: cell-inline-inset("regular");
+$_cell-block-inset: cell-block-inset("regular");
+$_row-track: row-track("regular");
+
 @mixin root {
   @include properties;
 
@@ -84,7 +91,7 @@
 
   padding-block: var(--fui-raw-space-12, #{measurements.raw-space(12)});
   padding-inline: 0;
-  color: var(--fui-text-secondary);
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
   text-align: start;
   caption-side: top;
 }
@@ -92,28 +99,32 @@
 @mixin header-cell {
   @include typography.role("ui-compact");
 
-  padding-block: var(--_fui-table-header-block-inset, var(--_fui-table-cell-block-inset));
-  padding-inline: var(--_fui-table-cell-inline-inset);
-  color: var(--fui-text-secondary);
+  padding-block: var(
+    --_fui-table-header-block-inset,
+    var(--_fui-table-cell-block-inset, #{$_cell-block-inset})
+  );
+  padding-inline: var(--_fui-table-cell-inline-inset, #{$_cell-inline-inset});
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
   text-align: start;
   vertical-align: middle;
 }
 
 @mixin body-cell {
-  padding-block: var(--_fui-table-cell-block-inset);
-  padding-inline: var(--_fui-table-cell-inline-inset);
-  color: var(--fui-text-primary);
+  padding-block: var(--_fui-table-cell-block-inset, #{$_cell-block-inset});
+  padding-inline: var(--_fui-table-cell-inline-inset, #{$_cell-inline-inset});
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
   vertical-align: middle;
 }
 
 @mixin row {
-  height: var(--_fui-table-row-track);
-  border-block-end: var(--fui-table-divider-size) solid var(--fui-table-border, var(--fui-border));
+  height: var(--_fui-table-row-track, #{$_row-track});
+  border-block-end: var(--fui-table-divider-size, #{$_divider-size}) solid
+    var(--fui-table-border, var(--fui-border, #{tokens.$fui-border}));
 }
 
 @mixin tree-cell {
   padding-inline-start: calc(
-    var(--_fui-table-cell-inline-inset) + var(--_fui-table-tree-depth, 0) *
-      var(--fui-table-tree-indent-step)
+    var(--_fui-table-cell-inline-inset, #{$_cell-inline-inset}) + var(--fui-table-tree-depth, 0) *
+      var(--fui-table-tree-indent-step, #{$_tree-indent-step})
   );
 }

package/src/recipes/_target.scss

@@ -13,8 +13,6 @@
 }
 
 @mixin hit-area($role) {
-  --_fui-target-hit-size: #{hit-size($role)};
-
   position: relative;
 
   &::after {
@@ -22,8 +20,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
-    inline-size: max(100%, var(--_fui-target-hit-size));
-    block-size: max(100%, var(--_fui-target-hit-size));
+    inline-size: max(100%, #{hit-size($role)});
+    block-size: max(100%, #{hit-size($role)});
     box-sizing: border-box;
     transform: translate(-50%, -50%);
     pointer-events: auto;

package/src/recipes/_typography.scss

@@ -35,4 +35,14 @@
   font-weight: weight($role);
   letter-spacing: tracking($role);
   font-family: font-family($role);
+
+  // Wrapping is part of the role: titles balance across their lines,
+  // descriptions never strand a single word on the last line. Long-form
+  // prose opts back out in recipes/prose, where evening out a paragraph
+  // only wastes space.
+  @if $role == "title-sm" or $role == "title-md" or $role == "title-lg" {
+    text-wrap: balance;
+  } @else if $role == "body-compact" or $role == "body-relaxed" {
+    text-wrap: pretty;
+  }
 }

package/src/styles/globals.scss

@@ -25,7 +25,6 @@
 
 $fui-brand: #f56138 !default;
 $fui-neutral: "paper" !default;
-$fui-density: "default" !default;
 $fui-radius-style: "default" !default;
 // Status seeds (see tokens/_seeds.scss): Cloud Surfaces rust / forest /
 // amber / slate-blue. Washes derive from these.
@@ -40,7 +39,6 @@ $fui-info: #3d7aa8 !default;
 @use "../tokens/seeds" with (
   $fui-brand: $fui-brand,
   $fui-neutral: $fui-neutral,
-  $fui-density: $fui-density,
   $fui-radius-style: $fui-radius-style,
   $fui-danger: $fui-danger,
   $fui-success: $fui-success,
@@ -48,6 +46,7 @@ $fui-info: #3d7aa8 !default;
   $fui-info: $fui-info
 );
 
+@use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as *;
 @use "../tokens/property-registrations" as prop-reg;
 
@@ -92,7 +91,7 @@ $fui-info: #3d7aa8 !default;
   }
 
   :where(body) {
-    margin: 0;
+    margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
     font-size: inherit;
     font-family: var(
       --fui-font-sans,
@@ -160,7 +159,7 @@ $fui-info: #3d7aa8 !default;
 
   ::-webkit-scrollbar-thumb {
     background-color: transparent;
-    border-radius: 9999px;
+    border-radius: var(--fui-radius-full, #{$fui-radius-full});
     transition: background-color var(--fui-transition-fast, $fui-transition-fast);
   }
 
@@ -201,11 +200,17 @@ $fui-info: #3d7aa8 !default;
   }
 
   :where(:focus-visible) {
-    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #f56138) 24%, transparent);
-    outline-offset: var(--fui-focus-ring-offset, 2px);
+    outline: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 24%, transparent);
+    outline-offset: var(--fui-focus-ring-offset, #{$fui-focus-ring-offset});
     box-shadow:
-      0 0 0 calc(var(--fui-focus-ring-width, 2px) + 1px)
-        color-mix(in srgb, var(--fui-focus-ring-color, #f56138) 10%, transparent),
-      0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #f56138) 18%, transparent);
+      0 0 0
+        calc(
+          var(--fui-focus-ring-width, #{$fui-focus-ring-width}) +
+            var(--fui-stroke-hairline, #{$fui-stroke-hairline})
+        )
+        color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 10%, transparent),
+      0 10px 24px -16px
+        color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 18%, transparent);
   }
 }

package/src/tokens/_component-properties.scss

@@ -5,12 +5,22 @@
 // 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: var(--fui-radius-sm);
+  --fui-chart-marker-stroke: var(--fui-raw-space-2);
+  --fui-checkbox-radius: var(--fui-radius-l3);
+  --fui-feedback-text-gap: var(--fui-raw-space-4);
+  --fui-feedback-transient-gap: var(--fui-raw-space-8);
+  --fui-feedback-viewport-inset-top: max(var(--fui-raw-space-16), env(safe-area-inset-top));
+  --fui-feedback-viewport-inset-right: max(var(--fui-raw-space-16), env(safe-area-inset-right));
+  --fui-feedback-viewport-inset-bottom: max(var(--fui-raw-space-16), env(safe-area-inset-bottom));
+  --fui-feedback-viewport-inset-left: max(var(--fui-raw-space-16), env(safe-area-inset-left));
   --fui-grid-min-child-width: var(--fui-layout-measure-grid-cell);
   --fui-line-clamp: 2;
   --fui-navmenu-viewport-height: 0px;
   --fui-navmenu-viewport-left: 0px;
   --fui-navmenu-viewport-width: 0px;
+  --fui-overlay-arrow-size: var(--fui-raw-space-10);
+  --fui-overlay-close-inset: var(--fui-raw-space-12);
+  --fui-overlay-section-gap: var(--fui-raw-space-8);
   --fui-prompt-inset-left: 0px;
   --fui-select-max-items: 4.5;
   --fui-stack-direction: column;
@@ -23,4 +33,12 @@
   --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);
+  --fui-table-tree-depth: 0;
+  // G1: Textarea row bounds, authored inline from the minRows/maxRows props.
+  --fui-textarea-min-rows: 1;
+  --fui-textarea-max-rows: 9999;
+  // G2: Progress ring geometry, authored inline from geometry.ts (see Progress/index.tsx).
+  --fui-progress-diameter: var(--fui-raw-space-48);
+  --fui-progress-dash-full: 0;
+  --fui-progress-dash-quarter: 0;
 }

package/src/tokens/_computed.scss

@@ -11,7 +11,7 @@
 @use "sass:map";
 @use "seeds" as seeds;
 @use "palettes" as palettes;
-@use "density" as density;
+@use "measurements.generated" as measurements;
 @use "radius" as radius;
 @use "derive" as derive;
 
@@ -21,12 +21,8 @@
 
 // Get the selected configurations
 $_palette: palettes.get-palette(seeds.$fui-neutral);
-$_density: density.get-density(seeds.$fui-density);
 $_radius: radius.get-radius-style(seeds.$fui-radius-style);
 
-// Derive spacing from density
-$_spacing: density.derive-spacing($_density);
-
 // True when the brand seed is the Fragments default (coral). The default
 // theme uses the exact SCSS-computed accents; any consumer-supplied
 // $fui-brand keeps the full seed→accent derivation reactive at runtime.
@@ -36,25 +32,25 @@ $brand-is-fragments-default: seeds.$fui-brand == #f56138;
 // Computed: Base Configuration
 // --------------------------------------------
 
-$computed-base-font-size: map.get($_density, base-font-size);
-$computed-base-unit: map.get($_density, base-unit);
+$computed-base-font-size: measurements.spacing-value("baseFontSize");
+$computed-base-unit: measurements.spacing-value("baseUnit");
 
 // --------------------------------------------
 // Computed: Spacing
 // --------------------------------------------
 
-$computed-space-px: map.get($_spacing, px);
-$computed-space-0-5: map.get($_spacing, 0-5);
-$computed-space-0-75: map.get($_spacing, 0-75);
-$computed-space-1: map.get($_spacing, 1);
-$computed-space-2: map.get($_spacing, 2);
-$computed-space-3: map.get($_spacing, 3);
-$computed-space-4: map.get($_spacing, 4);
-$computed-space-5: map.get($_spacing, 5);
-$computed-space-6: map.get($_spacing, 6);
-$computed-space-8: map.get($_spacing, 8);
-$computed-space-10: map.get($_spacing, 10);
-$computed-space-12: map.get($_spacing, 12);
+$computed-space-px: measurements.spacing-step("px");
+$computed-space-0-5: measurements.spacing-step("0-5");
+$computed-space-0-75: measurements.spacing-step("0-75");
+$computed-space-1: measurements.spacing-step("1");
+$computed-space-2: measurements.spacing-step("2");
+$computed-space-3: measurements.spacing-step("3");
+$computed-space-4: measurements.spacing-step("4");
+$computed-space-5: measurements.spacing-step("5");
+$computed-space-6: measurements.spacing-step("6");
+$computed-space-8: measurements.spacing-step("8");
+$computed-space-10: measurements.spacing-step("10");
+$computed-space-12: measurements.spacing-step("12");
 
 // --------------------------------------------
 // Computed: Border Radius
@@ -67,23 +63,21 @@ $computed-radius-xl: radius.radius-value($_radius, xl);
 $computed-radius-full: radius.radius-full();
 
 // --------------------------------------------
-// Computed: Component Heights (from density)
+// Computed: Touch targets and navigation (from the spacing record)
 // --------------------------------------------
 
-// Canonical interactive control ladder
-$computed-control-height-xs: density.px-to-rem($_density, map.get($_density, control-height-xs));
-$computed-control-height-sm: density.px-to-rem($_density, map.get($_density, control-height-sm));
-$computed-control-height-md: density.px-to-rem($_density, map.get($_density, control-height-md));
-$computed-control-height-lg: density.px-to-rem($_density, map.get($_density, control-height-lg));
-
-$computed-touch-sm: density.px-to-rem($_density, map.get($_density, touch-sm));
-$computed-touch-md: density.px-to-rem($_density, map.get($_density, touch-md));
-$computed-touch-lg: density.px-to-rem($_density, map.get($_density, touch-lg));
+$computed-touch-sm: measurements.spacing-px-to-rem(
+  measurements.spacing-nested-value("touch", "sm")
+);
+$computed-touch-md: measurements.spacing-px-to-rem(
+  measurements.spacing-nested-value("touch", "md")
+);
+$computed-touch-lg: measurements.spacing-px-to-rem(
+  measurements.spacing-nested-value("touch", "lg")
+);
 
-// Sidebar navigation (from density)
-$computed-sidebar-item-height: density.px-to-rem(
-  $_density,
-  map.get($_density, sidebar-item-height)
+$computed-sidebar-item-height: measurements.spacing-px-to-rem(
+  measurements.spacing-value("sidebarItemHeight")
 );
 
 // --------------------------------------------