@usefragments/ui 1.7.0 → 2.0.0

package/src/recipes/_feedback.scss

@@ -1,15 +1,16 @@
+@use "../tokens/measurements.generated" as measurements;
 @use "action" as action;
 @use "surface" as surface;
 @use "target" as target;
 @use "typography" as typography;
 
-@function _raw($step, $fallback) {
-  @return var(--fui-raw-space-#{$step}, $fallback);
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
 }
 
 @mixin icon {
-  inline-size: var(--fui-icon-lg, 20px);
-  block-size: var(--fui-icon-lg, 20px);
+  inline-size: var(--fui-icon-lg, #{measurements.target-value("icon", "lg")});
+  block-size: var(--fui-icon-lg, #{measurements.target-value("icon", "lg")});
   flex: 0 0 auto;
 }
 
@@ -27,7 +28,7 @@
 
   display: flex;
   align-items: center;
-  gap: var(--fui-feedback-content-gap, #{_raw(12, 12px)});
+  gap: #{_raw(12)};
 }
 
 @mixin transient {
@@ -36,7 +37,7 @@
 
   display: flex;
   align-items: center;
-  gap: var(--fui-feedback-transient-gap, #{_raw(8, 8px)});
+  gap: var(--fui-feedback-transient-gap, #{_raw(8)});
 }
 
 @mixin disclosure-row {
@@ -45,10 +46,10 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: _raw(8, 8px);
+  gap: _raw(8);
   min-block-size: action.track("md");
   padding-block: 0;
-  padding-inline: _raw(8, 8px);
+  padding-inline: _raw(8);
 }
 
 @mixin disclosure-glyph {
@@ -60,8 +61,8 @@
 @mixin disclosure-panel {
   @include body;
 
-  padding-block-end: _raw(12, 12px);
-  padding-inline: _raw(8, 8px);
+  padding-block-end: _raw(12);
+  padding-inline: _raw(8);
 }
 
 @mixin close {
@@ -89,8 +90,8 @@
     --_fui-feedback-empty-copy-weight: #{typography.weight("caption")};
     --_fui-feedback-empty-copy-tracking: #{typography.tracking("caption")};
 
-    padding-block: _raw(24, 24px);
-    padding-inline: _raw(16, 16px);
+    padding-block: _raw(24);
+    padding-inline: _raw(16);
   } @else if $size == "md" {
     --_fui-feedback-empty-icon-size: var(--fui-icon-2xl, 32px);
     --_fui-feedback-empty-max-inline: var(--fui-feedback-empty-max-inline-md, 320px);
@@ -103,8 +104,8 @@
     --_fui-feedback-empty-copy-weight: #{typography.weight("body-compact")};
     --_fui-feedback-empty-copy-tracking: #{typography.tracking("body-compact")};
 
-    padding-block: _raw(32, 32px);
-    padding-inline: _raw(24, 24px);
+    padding-block: _raw(32);
+    padding-inline: _raw(24);
   } @else if $size == "lg" {
     --_fui-feedback-empty-icon-size: var(--fui-feedback-empty-icon-lg, 40px);
     --_fui-feedback-empty-max-inline: var(--fui-feedback-empty-max-inline-lg, 400px);
@@ -117,8 +118,8 @@
     --_fui-feedback-empty-copy-weight: #{typography.weight("body-compact")};
     --_fui-feedback-empty-copy-tracking: #{typography.tracking("body-compact")};
 
-    padding-block: _raw(48, 48px);
-    padding-inline: _raw(32, 32px);
+    padding-block: _raw(48);
+    padding-inline: _raw(32);
   } @else {
     @error "Unknown empty-state size '#{$size}'. Expected sm, md, or lg.";
   }

package/src/recipes/_field.scss

@@ -1,5 +1,6 @@
 @use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as tokens;
+@use "../tokens/mixins" as mixins;
 @use "typography";
 
 @function track($size) {
@@ -39,9 +40,12 @@
   }
 }
 
+$_label-gap: measurements.raw-space(6);
+$_message-gap: measurements.raw-space(4);
+
 @mixin wrapper {
-  --fui-field-label-gap: var(--fui-raw-space-6, #{measurements.raw-space(6)});
-  --fui-field-message-gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-field-label-gap: var(--fui-raw-space-6, #{$_label-gap});
+  --fui-field-message-gap: var(--fui-raw-space-4, #{$_message-gap});
 
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -50,53 +54,57 @@
 @mixin label {
   @include typography.role("ui-standard");
 
-  margin-block-end: var(--fui-field-label-gap);
+  margin-block-end: var(--fui-field-label-gap, #{$_label-gap});
 }
 
 @mixin helper {
   @include typography.role("caption");
 
-  margin-block-start: var(--fui-field-message-gap);
+  margin-block-start: var(--fui-field-message-gap, #{$_message-gap});
   color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
 }
 
 @mixin error {
   @include typography.role("caption");
 
-  margin-block-start: var(--fui-field-message-gap);
+  margin-block-start: var(--fui-field-message-gap, #{$_message-gap});
   color: var(--fui-color-danger-text, #{tokens.$fui-color-danger-text});
 }
 
 @mixin shell {
   box-sizing: border-box;
-  min-block-size: var(--_fui-field-track);
-  padding-inline: var(--_fui-field-inline-inset);
-  border: var(--_fui-field-stroke) solid var(--fui-border, #{tokens.$fui-border});
+  // Fallbacks are the md defaults; `size()` sets the channels per field size.
+  min-block-size: var(--_fui-field-track, #{track("md")});
+  padding-inline: var(--_fui-field-inline-inset, #{inline-inset("md")});
+  border: var(--_fui-field-stroke, #{stroke()}) solid var(--fui-border, #{tokens.$fui-border});
   border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
   background: var(--fui-bg-primary, #{tokens.$fui-bg-primary});
   color: var(--fui-text-primary, #{tokens.$fui-text-primary});
 }
 
-@mixin focus-state {
-  border-color: var(--fui-color-accent, #{tokens.$fui-color-accent});
+// One ring for every field state: the edge takes the state colour, the ring
+// is that colour at 34%. Focus, open popup, and focus-within all use it.
+@mixin _ring($color) {
   outline: var(--fui-focus-ring-width, #{tokens.$fui-focus-ring-width}) solid
-    color-mix(
-      in srgb,
-      var(--fui-focus-ring-color, #{tokens.$fui-focus-ring-color}) 34%,
-      transparent
-    );
+    color-mix(in srgb, #{$color} 34%, transparent);
   outline-offset: var(--fui-focus-ring-offset, #{tokens.$fui-focus-ring-offset});
 }
 
+@mixin focus-state {
+  border-color: var(--fui-color-accent, #{tokens.$fui-color-accent});
+  @include _ring(var(--fui-focus-ring-color, #{tokens.$fui-focus-ring-color}));
+}
+
 @mixin invalid-state {
   border-color: var(--fui-color-danger, #{tokens.$fui-color-danger});
 }
 
-@mixin disabled-state {
-  opacity: 0.5;
-  cursor: not-allowed;
+// Invalid and focused: the danger edge stays, the ring takes the danger hue.
+@mixin invalid-focus-state {
+  border-color: var(--fui-color-danger, #{tokens.$fui-color-danger});
+  @include _ring(var(--fui-color-danger, #{tokens.$fui-color-danger}));
 }
 
-@mixin readonly-state {
-  background: var(--fui-bg-secondary, #{tokens.$fui-bg-secondary});
+@mixin disabled-state {
+  @include mixins.disabled-state;
 }

package/src/recipes/_navigation.scss

@@ -1,4 +1,5 @@
 @use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
 @use "typography";
 
 @function _navigation($role) {
@@ -21,21 +22,49 @@
   @error "Unknown navigation measurement '#{$role}'.";
 }
 
+$_row-track: measurements.target-value("controlTrack", "md");
+$_section-track: measurements.target-value("controlTrack", "micro");
+$_gutter: _navigation("sidebarGutter");
+$_leading-box: _navigation("sidebarLeadingBox");
+$_active-rail: _navigation("sidebarRail");
+$_active-dot: _navigation("sidebarDot");
+
+// Build-time twins for the `--fui-navigation-*` hooks `properties` authors, so
+// consumers can write `var(--fui-navigation-gutter, #{navigation.gutter()})`.
+@function row-track() {
+  @return $_row-track;
+}
+@function section-track() {
+  @return $_section-track;
+}
+@function gutter() {
+  @return $_gutter;
+}
+@function leading-box() {
+  @return $_leading-box;
+}
+@function active-rail() {
+  @return $_active-rail;
+}
+@function active-dot() {
+  @return $_active-dot;
+}
+@function label-optical-y() {
+  @return _navigation("sidebarLabelOffset");
+}
+@function collapsed-width() {
+  @return _navigation("sidebarCollapsedWidth");
+}
+
 @mixin properties {
-  --fui-navigation-row-track: var(
-    --fui-control-track-md,
-    #{measurements.target-value("controlTrack", "md")}
-  );
-  --fui-navigation-section-track: var(
-    --fui-control-track-micro,
-    #{measurements.target-value("controlTrack", "micro")}
-  );
-  --fui-navigation-gutter: #{_navigation("sidebarGutter")};
-  --fui-navigation-inline-inset: #{_navigation("sidebarGutter")};
-  --fui-navigation-content-gap: #{_navigation("sidebarGutter")};
-  --fui-navigation-leading-box: #{_navigation("sidebarLeadingBox")};
-  --fui-navigation-active-rail: #{_navigation("sidebarRail")};
-  --fui-navigation-active-dot: #{_navigation("sidebarDot")};
+  --fui-navigation-row-track: var(--fui-control-track-md, #{$_row-track});
+  --fui-navigation-section-track: var(--fui-control-track-micro, #{$_section-track});
+  --fui-navigation-gutter: #{$_gutter};
+  --fui-navigation-inline-inset: #{$_gutter};
+  --fui-navigation-content-gap: #{$_gutter};
+  --fui-navigation-leading-box: #{$_leading-box};
+  --fui-navigation-active-rail: #{$_active-rail};
+  --fui-navigation-active-dot: #{$_active-dot};
   --fui-navigation-label-optical-y: #{_navigation("sidebarLabelOffset")};
 }
 
@@ -44,9 +73,9 @@
   @include typography.role("ui-compact");
 
   box-sizing: border-box;
-  min-block-size: var(--fui-navigation-row-track);
-  padding-inline: var(--fui-navigation-inline-inset);
-  gap: var(--fui-navigation-content-gap);
+  min-block-size: var(--fui-navigation-row-track, #{$_row-track});
+  padding-inline: var(--fui-navigation-inline-inset, #{$_gutter});
+  gap: var(--fui-navigation-content-gap, #{$_gutter});
 }
 
 @mixin section-row {
@@ -54,17 +83,17 @@
   @include typography.role("caption");
 
   box-sizing: border-box;
-  min-block-size: var(--fui-navigation-section-track);
-  padding-inline: var(--fui-navigation-inline-inset);
-  gap: var(--fui-navigation-content-gap);
+  min-block-size: var(--fui-navigation-section-track, #{$_section-track});
+  padding-inline: var(--fui-navigation-inline-inset, #{$_gutter});
+  gap: var(--fui-navigation-content-gap, #{$_gutter});
 }
 
 @mixin leading {
   @include properties;
 
-  inline-size: var(--fui-navigation-leading-box);
-  block-size: var(--fui-navigation-leading-box);
-  flex: 0 0 var(--fui-navigation-leading-box);
+  inline-size: var(--fui-navigation-leading-box, #{$_leading-box});
+  block-size: var(--fui-navigation-leading-box, #{$_leading-box});
+  flex: 0 0 var(--fui-navigation-leading-box, #{$_leading-box});
 
   > svg,
   > img {
@@ -83,18 +112,18 @@
       content: "";
       position: absolute;
       inset-block: var(--fui-raw-space-4, #{measurements.raw-space(4)});
-      inset-inline-start: calc(-1 * var(--fui-navigation-gutter));
-      inline-size: var(--fui-navigation-active-rail);
+      inset-inline-start: calc(-1 * var(--fui-navigation-gutter, #{$_gutter}));
+      inline-size: var(--fui-navigation-active-rail, #{$_active-rail});
     }
   } @else if $placement == "end" {
     &::after {
       content: "";
       position: absolute;
       inset-block-start: 50%;
-      inset-inline-end: var(--fui-navigation-inline-inset);
-      inline-size: var(--fui-navigation-active-dot);
-      block-size: var(--fui-navigation-active-dot);
-      border-radius: 999px;
+      inset-inline-end: var(--fui-navigation-inline-inset, #{$_gutter});
+      inline-size: var(--fui-navigation-active-dot, #{$_active-dot});
+      block-size: var(--fui-navigation-active-dot, #{$_active-dot});
+      border-radius: var(--fui-radius-full, #{tokens.$fui-radius-full});
       transform: translateY(-50%);
     }
   } @else {
@@ -108,3 +137,29 @@
   inline-size: #{_navigation("sidebarCollapsedWidth")};
   justify-items: center;
 }
+
+/// Mobile navigation links (NavigationMenu drawer, Header mobile nav) are popup
+/// rows: secondary ink at rest, hover wash, nested radius. Sidebar keeps its own
+/// rail-indicator grammar and does not use these.
+@mixin link-states {
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
+  text-decoration: none;
+  transition: background-color var(--fui-transition-fast, #{tokens.$fui-transition-fast});
+
+  &:hover {
+    background-color: var(--fui-bg-hover, #{tokens.$fui-bg-hover});
+    color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  }
+}
+
+@mixin link-active {
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  font-weight: var(--fui-font-weight-medium, #{tokens.$fui-font-weight-medium});
+  background-color: var(--fui-control-selected-bg, #{tokens.$fui-bg-active});
+
+  &:hover {
+    background-color: var(--fui-control-selected-bg, #{tokens.$fui-bg-active});
+    color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  }
+}

package/src/recipes/_overlay.scss

@@ -1,3 +1,4 @@
+@use "../tokens/measurements.generated" as measurements;
 @use "../tokens/variables" as tokens;
 @use "action" as action;
 @use "feedback" as feedback;
@@ -5,19 +6,19 @@
 @use "target" as target;
 @use "typography" as typography;
 
-@function _raw($step, $fallback) {
-  @return var(--fui-raw-space-#{$step}, $fallback);
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
 }
 
 @function dialog-max($size) {
   @if $size == "sm" {
-    @return var(--fui-overlay-dialog-max-inline-sm, 384px);
+    @return var(--fui-overlay-dialog-sm, #{measurements.target-value("overlay", "dialog-sm")});
   } @else if $size == "md" {
-    @return var(--fui-overlay-dialog-max-inline-md, 448px);
+    @return var(--fui-overlay-dialog-md, #{measurements.target-value("overlay", "dialog-md")});
   } @else if $size == "lg" {
-    @return var(--fui-overlay-dialog-max-inline-lg, 576px);
+    @return var(--fui-overlay-dialog-lg, #{measurements.target-value("overlay", "dialog-lg")});
   } @else if $size == "xl" {
-    @return var(--fui-overlay-dialog-max-inline-xl, 768px);
+    @return var(--fui-overlay-dialog-xl, #{measurements.target-value("overlay", "dialog-xl")});
   }
 
   @error "Unknown dialog overlay size '#{$size}'. Expected sm, md, lg, or xl.";
@@ -25,13 +26,13 @@
 
 @function drawer-inline($size) {
   @if $size == "sm" {
-    @return var(--fui-overlay-drawer-inline-sm, 320px);
+    @return var(--fui-overlay-drawer-sm, #{measurements.target-value("overlay", "drawer-sm")});
   } @else if $size == "md" {
-    @return var(--fui-overlay-drawer-inline-md, 384px);
+    @return var(--fui-overlay-drawer-md, #{measurements.target-value("overlay", "drawer-md")});
   } @else if $size == "lg" {
-    @return var(--fui-overlay-drawer-inline-lg, 512px);
+    @return var(--fui-overlay-drawer-lg, #{measurements.target-value("overlay", "drawer-lg")});
   } @else if $size == "xl" {
-    @return var(--fui-overlay-drawer-inline-xl, 768px);
+    @return var(--fui-overlay-drawer-xl, #{measurements.target-value("overlay", "drawer-xl")});
   }
 
   @error "Unknown side-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
@@ -51,22 +52,43 @@
   @error "Unknown block-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
 }
 
+/// The translate distance that parks a side panel fully off-screen.
+/// A side panel is inset from the viewport edge by the safe-area frame, so
+/// translating it by its own width alone stops with that inset still on
+/// screen — a sliver of elevated surface, edge and shadow painted at the
+/// border for the whole entrance. The offset has to clear the frame too.
+/// Returned as a distance, not a `transform`, so callers can compose it
+/// (Drawer adds its swipe offset on the same axis).
+@function side-panel-offscreen($side) {
+  @if $side == "start" {
+    @return calc(-100% - var(--_fui-overlay-safe-left, #{_raw(16)}));
+  } @else if $side == "end" {
+    @return calc(100% + var(--_fui-overlay-safe-right, #{_raw(16)}));
+  } @else if $side == "top" {
+    @return calc(-100% - var(--_fui-overlay-safe-top, #{_raw(16)}));
+  } @else if $side == "bottom" {
+    @return calc(100% + var(--_fui-overlay-safe-bottom, #{_raw(16)}));
+  }
+
+  @error "Unknown side panel side '#{$side}'. Expected start, end, top, or bottom.";
+}
+
 @mixin safe-viewport {
   --_fui-overlay-safe-top: var(
     --fui-feedback-viewport-inset-top,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-top))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-top))
   );
   --_fui-overlay-safe-bottom: var(
     --fui-feedback-viewport-inset-bottom,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-bottom))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-bottom))
   );
   --_fui-overlay-safe-left: var(
     --fui-feedback-viewport-inset-left,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-left))
   );
   --_fui-overlay-safe-right: var(
     --fui-feedback-viewport-inset-right,
-    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+    max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-right))
   );
   --_fui-overlay-safe-inline: calc(
     100dvw - var(--_fui-overlay-safe-left) - var(--_fui-overlay-safe-right)
@@ -76,24 +98,73 @@
   );
 }
 
-@mixin modal-shell {
+/// Scrim behind any modal surface. Open/close transitions stay with the caller.
+@mixin backdrop {
+  position: fixed;
+  z-index: var(--fui-overlay-layer-backdrop, #{tokens.$fui-overlay-layer-backdrop});
+  inset: 0;
+  background-color: var(--fui-backdrop, #{tokens.$fui-backdrop});
+}
+
+/// The Drawer geometry for an edge-anchored modal panel: fixed on the modal
+/// layer, inset by the safe-area frame, one drawer width. Callers must also
+/// include `safe-viewport` somewhere on or above the panel. $side: start | end.
+@mixin side-panel-geometry($side) {
+  position: fixed;
+  z-index: var(--fui-overlay-layer-modal, #{tokens.$fui-overlay-layer-modal});
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  inset-block: var(--_fui-overlay-safe-top, #{_raw(16)})
+    var(--_fui-overlay-safe-bottom, #{_raw(16)});
+  inline-size: min(
+    #{drawer-inline("sm")},
+    var(--_fui-overlay-safe-inline, calc(100dvw - #{_raw(32)}))
+  );
+
+  @if $side == "start" {
+    inset-inline-start: var(--_fui-overlay-safe-left, #{_raw(16)});
+  } @else if $side == "end" {
+    inset-inline-end: var(--_fui-overlay-safe-right, #{_raw(16)});
+  } @else {
+    @error "Unknown side panel side '#{$side}'. Expected start or end.";
+  }
+}
+
+/// A complete side panel for hosts that are not the Drawer component
+/// (mobile navigation): the floating surface on the Drawer geometry.
+@mixin side-panel($side) {
+  @include surface;
+  @include safe-viewport;
   @include typography.role("body-compact");
+  @include side-panel-geometry($side);
+}
 
+/// Every floating panel (modal, drawer, popover, popup list, toast) is the
+/// same object: elevated fill, hairline edge, the outer radius level, one shadow.
+@mixin surface {
   box-sizing: border-box;
-  max-block-size: var(--_fui-overlay-safe-block, calc(100dvh - #{_raw(32, 32px)}));
-  overflow: auto;
   color: var(--fui-text-primary, #{tokens.$fui-text-primary});
   background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
-  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
+  border: var(--fui-stroke-hairline, #{tokens.$fui-stroke-hairline}) solid
+    var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-l1, #{tokens.$fui-radius-l1});
   box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
 }
 
+@mixin modal-shell {
+  @include surface;
+  @include typography.role("body-compact");
+
+  max-block-size: var(--_fui-overlay-safe-block, calc(100dvh - #{_raw(32)}));
+  overflow: auto;
+}
+
 @mixin _section-inline-inset {
-  padding-inline: var(--fui-overlay-inline-inset, #{surface.inset("roomy")});
+  padding-inline: #{surface.inset("roomy")};
 
   @media (max-width: 479px) {
-    padding-inline: var(--fui-overlay-inline-inset-narrow, #{surface.inset("default")});
+    padding-inline: #{surface.inset("default")};
   }
 }
 
@@ -101,15 +172,15 @@
   @include _section-inline-inset;
 
   display: grid;
-  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
-  padding-block: var(--fui-overlay-header-block-inset, #{_raw(12, 12px)});
+  gap: var(--fui-overlay-section-gap, #{_raw(8)});
+  padding-block: #{_raw(12)};
 }
 
 @mixin body {
   @include _section-inline-inset;
   @include typography.role("body-compact");
 
-  padding-block: 0 var(--fui-overlay-body-block-end-inset, #{_raw(12, 12px)});
+  padding-block: 0 #{_raw(12)};
 }
 
 @mixin footer {
@@ -118,8 +189,11 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
-  padding-block: var(--fui-overlay-footer-block-inset, #{_raw(8, 8px)});
+  gap: var(--fui-overlay-section-gap, #{_raw(8)});
+  padding-block: #{_raw(8)};
+  border-top: var(--fui-stroke-hairline, #{tokens.$fui-stroke-hairline}) solid
+    var(--fui-border, #{tokens.$fui-border});
+  background-color: var(--fui-bg-secondary, #{tokens.$fui-bg-secondary});
 }
 
 @mixin modal-title {
@@ -140,52 +214,78 @@
   @include target.hit-area("compact");
 
   position: absolute;
-  inset-block-start: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
-  inset-inline-end: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
+  inset-block-start: var(--fui-overlay-close-inset, #{_raw(12)});
+  inset-inline-end: var(--fui-overlay-close-inset, #{_raw(12)});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
+  color: var(--fui-text-secondary, #{tokens.$fui-text-secondary});
+
+  &:hover {
+    background-color: var(--fui-bg-hover, #{tokens.$fui-bg-hover});
+    color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  }
+
+  svg {
+    @include action.glyph("sm");
+  }
 }
 
 @mixin anchored-size($size) {
   @if $size == "sm" {
     @include surface.apply-inset("compact");
 
-    max-inline-size: var(--fui-overlay-popover-max-inline-sm, 256px);
+    max-inline-size: var(
+      --fui-overlay-popover-sm,
+      #{measurements.target-value("overlay", "popover-sm")}
+    );
   } @else if $size == "md" {
     @include surface.apply-inset("compact");
 
-    max-inline-size: var(--fui-overlay-popover-max-inline-md, 384px);
+    max-inline-size: var(
+      --fui-overlay-popover-md,
+      #{measurements.target-value("overlay", "popover-md")}
+    );
   } @else if $size == "lg" {
     @include surface.apply-inset("default");
 
-    max-inline-size: var(--fui-overlay-popover-max-inline-lg, 512px);
+    max-inline-size: var(
+      --fui-overlay-popover-lg,
+      #{measurements.target-value("overlay", "popover-lg")}
+    );
   } @else {
     @error "Unknown anchored overlay size '#{$size}'. Expected sm, md, or lg.";
   }
 }
 
 @mixin anchored-surface($size) {
+  @include surface;
   @include typography.role("body-compact");
   @include anchored-size($size);
 
-  box-sizing: border-box;
-  min-inline-size: var(--fui-overlay-popover-min-inline, 192px);
-  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
-  background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
-  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
-  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
+  min-inline-size: var(
+    --fui-overlay-popover-min,
+    #{measurements.target-value("overlay", "popover-min")}
+  );
 }
 
 @mixin arrow-box {
-  inline-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
-  block-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
+  inline-size: var(--fui-overlay-arrow-size, #{_raw(10)});
+  block-size: var(--fui-overlay-arrow-size, #{_raw(10)});
   transform: rotate(45deg);
 }
 
+/// The one inverse floating surface: compact, no edge, nested radius level.
 @mixin tooltip {
   @include typography.role("ui-compact");
 
   box-sizing: border-box;
-  max-inline-size: var(--fui-overlay-tooltip-max-inline, 320px);
-  padding-block: _raw(4, 4px);
-  padding-inline: _raw(8, 8px);
+  max-inline-size: var(
+    --fui-overlay-tooltip-max,
+    #{measurements.target-value("overlay", "tooltip-max")}
+  );
+  padding-block: _raw(4);
+  padding-inline: _raw(8);
+  color: var(--fui-text-inverse, #{tokens.$fui-text-inverse});
+  background-color: var(--fui-bg-inverse, #{tokens.$fui-bg-inverse});
+  border-radius: var(--fui-radius-l2, #{tokens.$fui-radius-l2});
+  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
 }