@usefragments/ui 1.7.0 → 2.0.0

package/src/tokens/_mixins.scss

@@ -3,6 +3,7 @@
 // ============================================
 
 @use "variables" as *;
+@use "measurements.generated" as measurements;
 
 // Focus ring for keyboard accessibility
 @mixin focus-ring {
@@ -16,8 +17,8 @@
   appearance: none;
   background: transparent;
   border: none;
-  padding: 0;
-  margin: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   font: inherit;
   color: inherit;
   cursor: pointer;
@@ -31,13 +32,21 @@
   }
 }
 
+// The one disabled treatment. Form controls keep `:disabled`; non-form
+// pressables carry `aria-disabled` and read this through `[aria-disabled]`.
+@mixin disabled-state {
+  opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
+  cursor: not-allowed;
+}
+
 // Base interactive element
 @mixin interactive-base {
   transition:
     background-color var(--fui-transition-fast, #{$fui-transition-fast}),
     border-color var(--fui-transition-fast, #{$fui-transition-fast}),
     box-shadow var(--fui-transition-fast, #{$fui-transition-fast}),
-    opacity var(--fui-transition-fast, #{$fui-transition-fast});
+    opacity var(--fui-transition-fast, #{$fui-transition-fast}),
+    scale var(--fui-transition-fast, #{$fui-transition-fast});
 
   &:focus-visible {
     @include focus-ring;
@@ -45,7 +54,8 @@
 
   &:disabled,
   &[data-disabled] {
-    opacity: 0.5;
+    @include disabled-state;
+
     pointer-events: none;
   }
 }
@@ -53,14 +63,25 @@
 // Card surface
 @mixin surface-elevated {
   background-color: var(--fui-bg-elevated, #{$fui-bg-elevated});
-  border: 1px solid var(--fui-border, #{$fui-border});
-  border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-border, #{$fui-border});
+  border-radius: var(--fui-radius-l1, #{$fui-radius-l1});
 }
 
 @mixin form-group-surface {
   background-color: var(--fui-form-group-bg, var(--fui-bg-secondary, #{$fui-bg-secondary}));
-  border: 1px solid var(--fui-form-group-border, var(--fui-border, #{$fui-border}));
-  border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--fui-form-group-border, var(--fui-border, #{$fui-border}));
+  border-radius: var(--fui-radius-l1, #{$fui-radius-l1});
+}
+
+// The shared selected treatment for segmented controls: Tabs pills, ToggleGroup
+// items, Prompt mode buttons. One surface, one hairline, one ink.
+@mixin segmented-selection {
+  color: var(--fui-text-primary, #{$fui-text-primary});
+  background-color: var(--fui-control-selected-bg, #{$fui-bg-active});
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline})
+    var(--fui-control-selected-border, #{$fui-control-selected-border});
 }
 
 // Responsive breakpoint mixins (mobile-first, min-width)
@@ -153,13 +174,14 @@
   }
 }
 
-// Visually hidden (for screen readers)
+// Visually hidden (for screen readers). The clipping box is one CSS pixel by
+// spec, not by design: it borrows the hairline stroke so no bare px lives here.
 @mixin visually-hidden {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
+  width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
+  height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  margin: calc(-1 * var(--fui-stroke-hairline, #{$fui-stroke-hairline}));
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -177,10 +199,14 @@
   }
 }
 
-// High contrast mode support - for users who need more visual contrast
-@mixin prefers-contrast {
+// The one high-contrast treatment: a default-weight outline in the ink colour,
+// drawn inside the box so geometry does not shift. Components include this on
+// the element that carries their border; no hand-written `prefers-contrast`
+// blocks elsewhere.
+@mixin high-contrast-outline($color: var(--fui-text-primary, #{$fui-text-primary})) {
   @media (prefers-contrast: more) {
-    @content;
+    outline: var(--fui-stroke-default, #{$fui-stroke-default}) solid $color;
+    outline-offset: calc(-1 * var(--fui-stroke-default, #{$fui-stroke-default}));
   }
 }
 
@@ -203,27 +229,3 @@
     animation: none;
   }
 }
-
-// Focus ring for success states (e.g., validated form fields)
-@mixin focus-ring-success {
-  outline: none;
-  box-shadow:
-    0 0 0 1px
-      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 42%, transparent),
-    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
-      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 14%, transparent),
-    0 10px 24px -16px
-      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 28%, transparent);
-}
-
-// Focus ring for error states (e.g., invalid form fields)
-@mixin focus-ring-error {
-  outline: none;
-  box-shadow:
-    0 0 0 1px
-      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 42%, transparent),
-    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
-      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 14%, transparent),
-    0 10px 24px -16px
-      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 28%, transparent);
-}

package/src/tokens/_palettes.scss

@@ -3,7 +3,7 @@
 // ============================================
 //
 // One neutral ramp with 11 shades (50-950) powering one light theme and one
-// dark theme. Theme variation comes from the seeds ($fui-brand, $fui-density,
+// dark theme. Theme variation comes from the seeds ($fui-brand,
 // $fui-radius-style) — not from alternative neutral ramps.
 //
 // ============================================

package/src/tokens/_property-registrations.scss

@@ -160,6 +160,7 @@
   @include register-length("radius-lg", $fui-radius-lg);
   @include register-length("radius-xl", $fui-radius-xl);
   @include register-length("radius-full", $fui-radius-full);
+  @include register-length("radius-none", $fui-radius-none);
 
   // ------------------------------------------
   // Component Heights — Lengths
@@ -219,4 +220,12 @@
   //   --fui-transition-fast/normal (shorthand timing)
   //   --fui-backdrop, --fui-dark-backdrop (rgba — registered above as <color>)
   // ------------------------------------------
+
+  // ------------------------------------------
+  // Runtime dials — one value each, animatable
+  // ------------------------------------------
+  @include register-number("opacity-disabled", $fui-opacity-disabled);
+  @include register-number("opacity-muted", $fui-opacity-muted);
+  @include register-number("opacity-faint", $fui-opacity-faint);
+  @include register-number("scale", $fui-scale);
 }

package/src/tokens/_seeds.scss

@@ -11,7 +11,6 @@
 // Example:
 //   @use '@usefragments/ui/styles' with (
 //     $fui-brand: #0066ff,
-//     $fui-density: "compact",
 //     $fui-radius-style: "rounded"
 //   );
 //
@@ -34,11 +33,6 @@ $fui-brand: #f56138 !default;
 /// @type String
 $fui-neutral: "paper" !default;
 
-/// Density preset controlling spacing scale
-/// Options: "compact" | "default" | "relaxed"
-/// @type String
-$fui-density: "default" !default;
-
 /// Radius style for borders and corners
 /// Options: "sharp" | "subtle" | "default" | "rounded" | "pill"
 /// @type String
@@ -49,16 +43,11 @@ $fui-radius-style: "default" !default;
 // --------------------------------------------
 // Fail fast at compile time if invalid seed values are provided.
 
-$_valid-neutrals: ("paper",);
+$_valid-neutrals: ("paper");
 @if not list.index($_valid-neutrals, $fui-neutral) {
   @error "Invalid $fui-neutral: '#{$fui-neutral}'. Must be one of: #{$_valid-neutrals}";
 }
 
-$_valid-densities: measurements.$density-profile-names;
-@if not list.index($_valid-densities, $fui-density) {
-  @error "Invalid $fui-density: '#{$fui-density}'. Must be one of: #{$_valid-densities}";
-}
-
 $_valid-radii: measurements.$radius-profile-names;
 @if not list.index($_valid-radii, $fui-radius-style) {
   @error "Invalid $fui-radius-style: '#{$fui-radius-style}'. Must be one of: #{$_valid-radii}";

package/src/tokens/_variables.scss

@@ -14,7 +14,6 @@
 //      @use '@usefragments/ui/styles' with (
 //        $fui-brand: #0066ff,
 //        $fui-neutral: "ice",
-//        $fui-density: "compact"
 //      );
 //
 // 2. CSS CUSTOM PROPERTIES (Runtime theming):
@@ -40,7 +39,10 @@ $fui-base-unit: computed.$computed-base-unit !default;
 // Helper function to convert base units to rem
 // Usage: fui-unit(2) = 2 * 7px = 14px = 1rem (when base is 14px)
 @function fui-unit($multiplier) {
-  @return calc(#{$multiplier} * #{$fui-base-unit} / #{$fui-base-font-size} * 1rem);
+  @return calc(
+    #{$multiplier} * #{$fui-base-unit} / #{$fui-base-font-size} * 1rem *
+      var(--fui-scale, #{$fui-scale})
+  );
 }
 
 // --------------------------------------------
@@ -147,7 +149,7 @@ $fui-letter-spacing-wide: map.get(
 ) !default;
 
 // --------------------------------------------
-// Spacing (derived from density seed)
+// Spacing (derived from the measurement spacing record)
 // --------------------------------------------
 // Micro-spacing for small internal alignments (margins, thumb offsets)
 $fui-space-px: computed.$computed-space-px !default;
@@ -187,6 +189,16 @@ $fui-radius-md: computed.$computed-radius-md !default;
 $fui-radius-lg: computed.$computed-radius-lg !default;
 $fui-radius-xl: computed.$computed-radius-xl !default;
 $fui-radius-full: computed.$computed-radius-full !default;
+/// Square corners where a shape must not follow the radius profile (joined
+/// segments, skeleton blocks, code gutters).
+$fui-radius-none: 0px !default;
+
+// Radius nesting levels. A surface (l1) holds controls (l2) which hold marks
+// (l3); each level maps onto the active radius profile, so concentric corners
+// stay concentric when a consumer switches `sharp`, `rounded`, or `pill`.
+$fui-radius-l1: $fui-radius-lg !default;
+$fui-radius-l2: $fui-radius-md !default;
+$fui-radius-l3: $fui-radius-sm !default;
 
 // --------------------------------------------
 // Strokes + control tracks (mirror the measurement CSS vars for SCSS fallbacks)
@@ -194,6 +206,19 @@ $fui-radius-full: computed.$computed-radius-full !default;
 $fui-stroke-hairline: measurements.target-value("stroke", "hairline") !default;
 $fui-stroke-default: measurements.target-value("stroke", "default") !default;
 $fui-stroke-strong: measurements.target-value("stroke", "strong") !default;
+
+// The one disabled treatment: every disabled control fades by this amount.
+$fui-opacity-disabled: 0.5 !default;
+/// Dimmed-but-live: secondary glyphs, collapsed rails, decorative rules.
+$fui-opacity-muted: 0.7 !default;
+/// Barely-there: pulse rings and glow tracks that animate up from almost nothing.
+$fui-opacity-faint: 0.3 !default;
+/// Hairline drawn around a selected segmented item (transparent unless a theme wants it).
+$fui-control-selected-border: transparent !default;
+
+// Runtime multiplier on the base unit. `fui-unit()` reads it so a consumer can
+// scale the whole measurement system from one custom property.
+$fui-scale: 1 !default;
 $fui-control-track-micro: measurements.target-value("controlTrack", "micro") !default;
 $fui-control-track-sm: measurements.target-value("controlTrack", "sm") !default;
 $fui-control-track-md: measurements.target-value("controlTrack", "md") !default;
@@ -382,8 +407,8 @@ $fui-breakpoint-xl: 1280px !default;
 // Component-specific tokens
 // --------------------------------------------
 
-// Interactive control heights are fixed geometry. Density still governs
-// composition spacing, but it cannot resize a named control.
+// Interactive control heights are fixed geometry; the spacing scale cannot
+// resize a named control.
 $fui-control-height-xs: measurements.target-value("controlTrack", "micro") !default;
 $fui-control-height-sm: measurements.target-value("controlTrack", "sm") !default;
 $fui-control-height-md: measurements.target-value("controlTrack", "md") !default;
@@ -400,7 +425,7 @@ $fui-input-height-sm: measurements.target-value("fieldTrack", "sm") !default;
 $fui-input-height: measurements.target-value("fieldTrack", "md") !default;
 $fui-input-height-lg: measurements.target-value("fieldTrack", "lg") !default;
 
-// Touch targets (derived from density seed)
+// Touch targets (from the measurement spacing record)
 $fui-touch-sm: computed.$computed-touch-sm !default;
 $fui-touch-md: computed.$computed-touch-md !default;
 $fui-touch-lg: computed.$computed-touch-lg !default;
@@ -436,10 +461,11 @@ $fui-overlay-layer-swipe: 49 !default;
 $fui-overlay-layer-backdrop: 50 !default;
 $fui-overlay-layer-modal: 51 !default;
 $fui-overlay-layer-anchored: 52 !default;
+$fui-overlay-layer-toast: 55 !default;
 $fui-overlay-layer-tooltip: 60 !default;
 
 // Sidebar (multi-consumer — used by Sidebar, NavigationMenu, Theme)
-$fui-sidebar-item-height: computed.$computed-sidebar-item-height !default; // density-responsive (compact/default: 32px, relaxed: 36px)
+$fui-sidebar-item-height: computed.$computed-sidebar-item-height !default;
 
 // AppShell Layout
 $fui-appshell-header-height: map.get(
@@ -554,19 +580,19 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
 
     // Spacing (micro)
     --fui-space-px: #{$fui-space-px};
-    --fui-space-0-5: #{$fui-space-0-5};
-    --fui-space-0-75: #{$fui-space-0-75};
+    --fui-space-0-5: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-0-5});
+    --fui-space-0-75: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-0-75});
 
     // Spacing
-    --fui-space-1: #{$fui-space-1};
-    --fui-space-2: #{$fui-space-2};
-    --fui-space-3: #{$fui-space-3};
-    --fui-space-4: #{$fui-space-4};
-    --fui-space-5: #{$fui-space-5};
-    --fui-space-6: #{$fui-space-6};
-    --fui-space-8: #{$fui-space-8};
-    --fui-space-10: #{$fui-space-10};
-    --fui-space-12: #{$fui-space-12};
+    --fui-space-1: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-1});
+    --fui-space-2: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-2});
+    --fui-space-3: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-3});
+    --fui-space-4: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-4});
+    --fui-space-5: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-5});
+    --fui-space-6: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-6});
+    --fui-space-8: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-8});
+    --fui-space-10: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-10});
+    --fui-space-12: calc(var(--fui-scale, #{$fui-scale}) * #{$fui-space-12});
 
     // Popup geometry — the numbers Select/Listbox/Combobox derive their scroll
     // viewport from. Override these and the peek height follows.
@@ -581,9 +607,17 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
     --fui-radius-lg: #{$fui-radius-lg};
     --fui-radius-xl: #{$fui-radius-xl};
     --fui-radius-full: #{$fui-radius-full};
+    --fui-radius-none: #{$fui-radius-none};
+    --fui-radius-l1: var(--fui-radius-lg);
+    --fui-radius-l2: var(--fui-radius-md);
+    --fui-radius-l3: var(--fui-radius-sm);
 
     // Transitions
     --fui-transition-fast: #{$fui-transition-fast};
+    --fui-opacity-disabled: #{$fui-opacity-disabled};
+    --fui-opacity-muted: #{$fui-opacity-muted};
+    --fui-opacity-faint: #{$fui-opacity-faint};
+    --fui-scale: #{$fui-scale};
     --fui-transition-normal: #{$fui-transition-normal};
 
     // Motion primitives
@@ -598,6 +632,7 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
     --fui-overlay-layer-backdrop: #{$fui-overlay-layer-backdrop};
     --fui-overlay-layer-modal: #{$fui-overlay-layer-modal};
     --fui-overlay-layer-anchored: #{$fui-overlay-layer-anchored};
+    --fui-overlay-layer-toast: #{$fui-overlay-layer-toast};
     --fui-overlay-layer-tooltip: #{$fui-overlay-layer-tooltip};
 
     // Colors — Accent (light-dark for automatic dark mode)
@@ -721,6 +756,7 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
     // pointer-down state; selected must remain visible without dominating its
     // surrounding surface.
     --fui-control-selected-bg: color-mix(in srgb, var(--fui-text-primary) 9%, transparent);
+    --fui-control-selected-border: #{$fui-control-selected-border};
 
     // Checked/value controls carry product meaning, so they follow the accent
     // rather than button chrome. This keeps Checkbox, RadioGroup, and Switch
@@ -731,17 +767,8 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
     --fui-control-checked-border-hover: var(--fui-color-accent-hover);
     --fui-control-checked-color: var(--fui-color-on-accent);
 
-    // Form chrome (shared by Input, Textarea, Select, Combobox, DatePicker,
-    // ColorPicker, Editor, and listbox-style controls).
-    --fui-field-bg: color-mix(in srgb, var(--fui-bg-elevated) 72%, transparent);
-    --fui-field-bg-disabled: color-mix(in srgb, var(--fui-bg-tertiary) 78%, var(--fui-bg-primary));
-    --fui-field-border: var(--fui-border-strong);
-    --fui-field-border-hover: color-mix(
-      in srgb,
-      var(--fui-text-tertiary) 46%,
-      var(--fui-border-strong)
-    );
-    --fui-field-border-focus: var(--fui-text-primary);
+    // Field shells take their edge and ground from --fui-border / --fui-bg-primary
+    // through the field recipe; only selection chrome needs its own hooks.
     --fui-field-selection-bg: var(--fui-control-selected-bg);
     --fui-field-selection-bg-hover: color-mix(in srgb, var(--fui-text-primary) 11%, transparent);
     --fui-field-selection-border: var(--fui-border-strong);
@@ -880,6 +907,8 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
     --fui-sidebar-border: var(--fui-border-default);
     --fui-sidebar-item-color: var(--fui-text-secondary);
     --fui-sidebar-item-icon-color: var(--fui-text-tertiary);
+    --fui-sidebar-item-radius: var(--fui-radius-full);
+    --fui-sidebar-section-label-size: var(--fui-font-size-xs);
     --fui-sidebar-item-hover-bg: var(--fui-bg-hover);
     --fui-sidebar-item-hover-color: var(--fui-text-primary);
     --fui-sidebar-item-active-bg: var(--fui-control-selected-bg);
@@ -938,12 +967,6 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
     --fui-tabs-pills-bg: color-mix(in srgb, var(--fui-text-primary) 5%, transparent);
     --fui-tabs-pills-border: var(--fui-border-default);
     --fui-tabs-pill-hover-bg: transparent;
-    --fui-tabs-pill-active-bg: var(--fui-control-selected-bg);
-    --fui-tabs-pill-active-border: transparent;
-    --fui-tabs-pill-active-shadow: none;
-    --fui-toggle-group-selected-bg: var(--fui-control-selected-bg);
-    --fui-toggle-group-selected-border: transparent;
-    --fui-toggle-group-selected-shadow: none;
 
     // Header search is persistent shell chrome rather than a ghost action.
     // One surface step above divided card headers keeps this global affordance
@@ -982,13 +1005,13 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
     --fui-input-height: var(--fui-field-track-md);
     --fui-input-height-lg: var(--fui-field-track-lg);
 
-    // Touch targets (density-responsive, Fragments control floor: ≥32px)
+    // Touch targets (Fragments control floor: ≥32px)
     --fui-touch-sm: #{$fui-touch-sm};
     --fui-touch-md: #{$fui-touch-md};
     --fui-touch-lg: #{$fui-touch-lg};
     --fui-target-size-min: #{$fui-target-size-min};
 
-    // Sidebar (density-responsive)
+    // Sidebar
     --fui-sidebar-item-height: #{$fui-sidebar-item-height};
 
     // AppShell Layout
@@ -1000,12 +1023,6 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
   // Sass seeds. Attribute specificity intentionally matches :root so these
   // later rules can override the compiled default on either the document root
   // or a scoped provider without inline numeric maps.
-  @each $density in measurements.$density-profile-names {
-    [data-fui-density="#{$density}"] {
-      @include measurements.emit-density-profile($density);
-    }
-  }
-
   @each $radius-style in measurements.$radius-profile-names {
     [data-fui-radius-style="#{$radius-style}"] {
       @include measurements.emit-radius-profile($radius-style);
@@ -1159,31 +1176,32 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
   * {
     // Firefox
     scrollbar-width: thin;
-    scrollbar-color: var(--fui-scrollbar-thumb) var(--fui-scrollbar-track);
+    scrollbar-color: var(--fui-scrollbar-thumb, #{$fui-scrollbar-thumb})
+      var(--fui-scrollbar-track, #{$fui-scrollbar-track});
   }
 
   // Webkit browsers (Chrome, Safari, Edge)
   *::-webkit-scrollbar {
-    width: var(--fui-scrollbar-width);
-    height: var(--fui-scrollbar-width);
+    width: var(--fui-scrollbar-width, #{$fui-scrollbar-width});
+    height: var(--fui-scrollbar-width, #{$fui-scrollbar-width});
   }
 
   *::-webkit-scrollbar-track {
-    background: var(--fui-scrollbar-track);
-    border-radius: calc(var(--fui-scrollbar-width) / 2);
+    background: var(--fui-scrollbar-track, #{$fui-scrollbar-track});
+    border-radius: calc(var(--fui-scrollbar-width, #{$fui-scrollbar-width}) / 2);
   }
 
   *::-webkit-scrollbar-thumb {
-    background: var(--fui-scrollbar-thumb);
-    border-radius: calc(var(--fui-scrollbar-width) / 2);
+    background: var(--fui-scrollbar-thumb, #{$fui-scrollbar-thumb});
+    border-radius: calc(var(--fui-scrollbar-width, #{$fui-scrollbar-width}) / 2);
 
     &:hover {
-      background: var(--fui-scrollbar-thumb-hover);
+      background: var(--fui-scrollbar-thumb-hover, #{$fui-scrollbar-thumb-hover});
     }
   }
 
   *::-webkit-scrollbar-corner {
-    background: var(--fui-scrollbar-track);
+    background: var(--fui-scrollbar-track, #{$fui-scrollbar-track});
   }
 }
 
@@ -1199,16 +1217,10 @@ $fui-dark-link-ink: $fui-dark-color-accent !default;
   // Ensure minimum contrast on interactive elements
   --fui-bg-hover: rgba(0, 0, 0, 0.12);
   --fui-bg-active: rgba(0, 0, 0, 0.18);
-  --fui-field-border: var(--fui-text-primary);
-  --fui-field-border-hover: var(--fui-text-primary);
-  --fui-field-border-focus: var(--fui-color-accent);
   --fui-field-selection-border: var(--fui-color-accent);
   --fui-form-group-border: var(--fui-text-primary);
   --fui-sidebar-item-active-border: var(--fui-text-primary);
-  --fui-tabs-pill-active-border: var(--fui-text-primary);
-  --fui-tabs-pill-active-shadow: inset 0 0 0 1px var(--fui-tabs-pill-active-border);
-  --fui-toggle-group-selected-border: var(--fui-text-primary);
-  --fui-toggle-group-selected-shadow: inset 0 0 0 1px var(--fui-toggle-group-selected-border);
+  --fui-control-selected-border: var(--fui-text-primary);
 }
 
 // Private mixin for dark mode token values

package/src/utils/seed-derivation.ts

@@ -9,24 +9,18 @@
  * the @usefragments/ui barrel export.
  */
 
-import {
-  MEASUREMENT_PROFILES,
-  type MeasurementDensity,
-  type MeasurementRadiusStyle,
-} from "../measurements";
+import { MEASUREMENT_PROFILES, type MeasurementRadiusStyle } from "../measurements";
 
 // ============================================
 // Types
 // ============================================
 
 export type NeutralPalette = "stone" | "ice" | "sand" | "earth" | "fire" | "fragments";
-export type DensityPreset = MeasurementDensity;
 export type RadiusStyle = MeasurementRadiusStyle;
 
 export interface SeedConfig {
   brand: string;
   neutral: NeutralPalette;
-  density: DensityPreset;
   radiusStyle: RadiusStyle;
   danger?: string;
   success?: string;
@@ -666,7 +660,6 @@ export function deriveSemanticHover(color: string): string {
 export const DEFAULT_SEEDS: SeedConfig = {
   brand: "#18181b",
   neutral: "stone",
-  density: "default",
   radiusStyle: "default",
   // Semantic colors omitted - will use palette defaults from PALETTE_SEMANTIC_COLORS
 };

package/src/utils/theme-presets.ts

@@ -8,7 +8,6 @@
 
 import {
   type SeedConfig,
-  type DensityPreset,
   type RadiusStyle,
   PALETTES,
   RADIUS_STYLES,
@@ -110,7 +109,6 @@ export interface ThemeConfig {
   radius?: ThemeRadius;
   shadows?: ThemeShadows;
   dark?: ThemeDarkMode;
-  density?: DensityPreset;
   radiusStyle?: RadiusStyle;
 }
 
@@ -161,7 +159,6 @@ export function seedsToTheme(seeds: SeedConfig): ThemeConfig {
 
   return {
     name: "Custom",
-    density: seeds.density,
     radiusStyle: seeds.radiusStyle,
     colors: {
       accent: seeds.brand,
@@ -262,15 +259,15 @@ export interface PresetDefinition {
 const PRESET_DEFINITIONS: Record<string, PresetDefinition> = {
   default: {
     name: "Default",
-    seeds: { brand: "#18181b", neutral: "stone", density: "default", radiusStyle: "default" },
+    seeds: { brand: "#18181b", neutral: "stone", radiusStyle: "default" },
   },
   neutral: {
     name: "Neutral",
-    seeds: { brand: "#71717a", neutral: "stone", density: "default", radiusStyle: "default" },
+    seeds: { brand: "#71717a", neutral: "stone", radiusStyle: "default" },
   },
   slate: {
     name: "Slate",
-    seeds: { brand: "#64748b", neutral: "stone", density: "default", radiusStyle: "default" },
+    seeds: { brand: "#64748b", neutral: "stone", radiusStyle: "default" },
     overrides: {
       surfaces: { bgSecondary: "#f1f5f9", bgTertiary: "#e2e8f0" },
       dark: { surfaces: { bgSecondary: "#1e293b", bgTertiary: "#334155" } },
@@ -278,18 +275,17 @@ const PRESET_DEFINITIONS: Record<string, PresetDefinition> = {
   },
   emerald: {
     name: "Emerald",
-    seeds: { brand: "#10b981", neutral: "stone", density: "default", radiusStyle: "default" },
+    seeds: { brand: "#10b981", neutral: "stone", radiusStyle: "default" },
   },
   rose: {
     name: "Rose",
-    seeds: { brand: "#f43f5e", neutral: "stone", density: "default", radiusStyle: "default" },
+    seeds: { brand: "#f43f5e", neutral: "stone", radiusStyle: "default" },
   },
   classic: {
     name: "Classic",
     seeds: {
       brand: "#1e40af",
       neutral: "stone",
-      density: "default",
       radiusStyle: "default",
       danger: "#b91c1c",
       success: "#15803d",
@@ -302,7 +298,6 @@ const PRESET_DEFINITIONS: Record<string, PresetDefinition> = {
     seeds: {
       brand: "#7c3aed",
       neutral: "stone",
-      density: "default",
       radiusStyle: "default",
       danger: "#dc2626",
       success: "#16a34a",
@@ -315,7 +310,6 @@ const PRESET_DEFINITIONS: Record<string, PresetDefinition> = {
     seeds: {
       brand: "#06b6d4",
       neutral: "stone",
-      density: "default",
       radiusStyle: "default",
       danger: "#f43f5e",
       success: "#4ade80",
@@ -328,7 +322,6 @@ const PRESET_DEFINITIONS: Record<string, PresetDefinition> = {
     seeds: {
       brand: "#525252",
       neutral: "stone",
-      density: "default",
       radiusStyle: "default",
       danger: "#78716c",
       success: "#65a30d",

package/dist/blocks/AccountSettings.block.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@usefragments/core").BlockDefinition;
-export default _default;
-//# sourceMappingURL=AccountSettings.block.d.ts.map

package/dist/blocks/AccountSettings.block.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccountSettings.block.d.ts","sourceRoot":"","sources":["../../src/blocks/AccountSettings.block.ts"],"names":[],"mappings":";AAEA,wBA4CG"}

package/dist/blocks/ActivityFeedSkeleton.block.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@usefragments/core").BlockDefinition;
-export default _default;
-//# sourceMappingURL=ActivityFeedSkeleton.block.d.ts.map

package/dist/blocks/ActivityFeedSkeleton.block.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActivityFeedSkeleton.block.d.ts","sourceRoot":"","sources":["../../src/blocks/ActivityFeedSkeleton.block.ts"],"names":[],"mappings":";AAEA,wBA0BG"}

package/dist/blocks/BlogEditor.block.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@usefragments/core").BlockDefinition;
-export default _default;
-//# sourceMappingURL=BlogEditor.block.d.ts.map

package/dist/blocks/BlogEditor.block.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlogEditor.block.d.ts","sourceRoot":"","sources":["../../src/blocks/BlogEditor.block.ts"],"names":[],"mappings":";AAEA,wBA+BG"}

package/dist/blocks/ChatInterface.block.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@usefragments/core").BlockDefinition;
-export default _default;
-//# sourceMappingURL=ChatInterface.block.d.ts.map

package/dist/blocks/ChatInterface.block.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatInterface.block.d.ts","sourceRoot":"","sources":["../../src/blocks/ChatInterface.block.ts"],"names":[],"mappings":";AAEA,wBAwCG"}

package/dist/blocks/ChatMessages.block.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("@usefragments/core").BlockDefinition;
-export default _default;
-//# sourceMappingURL=ChatMessages.block.d.ts.map