@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Select/Select.module.scss

@@ -1,23 +1,40 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action";
+@use "../../recipes/field";
+@use "../../recipes/layout";
+@use "../../recipes/popup";
 
-// Form field wrapper (label + helper + error)
-@include form-field-wrapper;
+.wrapper {
+  @include field.wrapper;
+}
+
+.label {
+  @include field.label;
+}
+
+.helper {
+  @include field.helper;
+}
+
+.helperError,
+.errorMessage {
+  @include field.error;
+}
 
 // Trigger button
 .trigger {
   @include button-reset;
   @include interactive-base;
-  @include text-base;
-  @include field-shell;
-  @include control-size("md", "input");
+  @include field.size("md");
+  @include field.shell;
 
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--fui-space-2, $fui-space-2);
+  gap: action.gap("md");
   width: 100%;
-  min-width: 10rem;
+  min-width: layout.measure("field-minimum");
   text-align: left;
 
   &[data-popup-open] {
@@ -27,11 +44,15 @@
 
 // Trigger size variants
 .triggerSm {
-  @include control-size("sm", "input");
+  @include field.size("sm");
+
+  gap: action.gap("sm");
 }
 
 .triggerLg {
-  @include control-size("lg", "input");
+  @include field.size("lg");
+
+  gap: action.gap("lg");
 }
 
 // Ghost trigger — the same control with the field shell taken off, for
@@ -45,20 +66,11 @@
 .triggerGhost {
   width: auto;
   min-width: 0;
-  // No block padding: the control is exactly the target size tall and centres
-  // its own contents, the way a button does. Padding here instead would add to
-  // the line box and leave a ghost taller than every other control in the row
-  // — and taller again wherever the surface has scaled the target down.
-  height: auto;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: 0 var(--fui-space-2, $fui-space-2);
   border: none;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: transparent;
   box-shadow: none;
   color: var(--fui-text-secondary, $fui-text-secondary);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &:hover:not(:disabled):not([data-disabled]) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -143,11 +155,18 @@
   }
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("md");
   }
 }
 
+.triggerSm :is(.triggerIcon, .icon) svg {
+  @include action.glyph("sm");
+}
+
+.triggerLg :is(.triggerIcon, .icon) svg {
+  @include action.glyph("lg");
+}
+
 // Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
   z-index: 52;
@@ -156,17 +175,10 @@
 
 // Popup container
 .popup {
-  @include surface-elevated;
-  @include popup-container;
-
-  @include popup-scroll-viewport;
+  @include popup.container;
+  @include popup.viewport;
 
-  border-color: var(--fui-form-group-border, $fui-border);
   min-width: var(--anchor-width);
-  // Show N items + half-peek scroll hint (default 4.5 items).
-  // !important needed to override Base UI's inline max-height: 100%
-  max-height: var(--_popup-scroll-max-h) !important;
-  overflow-y: auto !important;
 
   // Animation
   opacity: 0;
@@ -190,15 +202,15 @@
 
 // Individual option
 .item {
-  @include popup-item;
+  @include popup.row;
 
   // Base UI sets [data-highlighted] on pointer-hover AND keyboard nav → one indicator.
   &[data-highlighted] {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 
   &[data-selected] {
-    @include popup-item-selected;
+    @include popup.selected-state;
 
     // Selected + active: stronger accent-tinted wash so it still reads as selected.
     &[data-highlighted] {
@@ -207,7 +219,7 @@
   }
 
   &[data-disabled] {
-    @include popup-item-disabled;
+    @include popup.disabled-state;
   }
 }
 
@@ -229,16 +241,16 @@
 
 // Group container
 .group {
-  &:not(:first-child) {
-    margin-top: var(--fui-space-1, $fui-space-1);
-    padding-top: var(--fui-space-1, $fui-space-1);
-    border-top: 1px solid var(--fui-border, $fui-border);
+  &:not(:first-child)::before {
+    content: "";
+    display: block;
+    @include popup.group-separator;
   }
 }
 
 // Group label
 .groupLabel {
-  @include popup-group-label;
+  @include popup.group-label;
 }
 
 // ============================================
@@ -276,11 +288,11 @@
 
 // Arrow
 .arrow {
-  width: 10px;
-  height: 10px;
+  width: var(--fui-raw-space-10, 10px);
+  height: var(--fui-raw-space-10, 10px);
   transform: rotate(45deg);
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 
   &[data-side="top"] {
     border-top: none;

package/src/components/Select/index.tsx

@@ -4,6 +4,10 @@ import * as React from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import { mergeAriaIds, useFormFieldIds, type FormFieldProps } from "../../utils/aria";
+import {
+  POPUP_OFFSET_PX,
+  resolvePopupViewportRows,
+} from "../../recipes/popup";
 import styles from "./Select.module.scss";
 
 // ============================================
@@ -440,7 +444,7 @@ function SelectTrigger({
 function SelectContent({
   children,
   className,
-  sideOffset = 4,
+  sideOffset = POPUP_OFFSET_PX,
   align = "start",
   maxVisibleItems,
   ...htmlProps
@@ -451,7 +455,7 @@ function SelectContent({
   const popupStyle =
     maxVisibleItems != null
       ? ({
-          "--fui-select-max-items": maxVisibleItems + 0.5,
+          "--fui-popup-viewport-rows": resolvePopupViewportRows(maxVisibleItems),
           ...htmlProps.style,
         } as React.CSSProperties)
       : htmlProps.style;

package/src/components/Separator/Separator.module.scss

@@ -1,22 +1,35 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../recipes/layout";
+@use "../../recipes/typography";
+@use "../../tokens/variables" as *;
 
 .separator {
   flex-shrink: 0;
-  background-color: var(--fui-border, $fui-border);
+  background-color: transparent;
 }
 
 // Horizontal (default)
 .horizontal {
   width: 100%;
-  height: 1px;
+
+  .line {
+    display: block;
+    width: 100%;
+    height: var(--fui-stroke-hairline, 1px);
+    background-color: var(--fui-border, $fui-border);
+  }
 }
 
 // Vertical
 .vertical {
-  width: 1px;
   height: auto;
   align-self: stretch;
+
+  .line {
+    display: block;
+    width: var(--fui-stroke-hairline, 1px);
+    height: 100%;
+    background-color: var(--fui-border, $fui-border);
+  }
 }
 
 // With label
@@ -28,61 +41,58 @@
 
   &::before,
   &::after {
-    content: '';
+    content: "";
     flex: 1;
-    height: 1px;
+    height: var(--fui-stroke-hairline, 1px);
     background-color: var(--fui-border, $fui-border);
   }
 }
 
 .label {
-  font-family: var(--fui-font-sans, $fui-font-sans);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  @include typography.role("ui-compact");
+
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   text-transform: uppercase;
-  letter-spacing: var(--fui-letter-spacing-wide, $fui-letter-spacing-wide);
   white-space: nowrap;
 }
 
 // Spacing variants
 .spacingNone {
-  margin: 0;
+  padding: 0;
 }
 
 .spacingSm {
   &.horizontal {
-    margin: var(--fui-space-2, $fui-space-2) 0;
+    padding-block: layout.gap("sm");
   }
 
   &.vertical {
-    margin: 0 var(--fui-space-2, $fui-space-2);
+    padding-inline: layout.gap("sm");
   }
 }
 
 .spacingMd {
   &.horizontal {
-    margin: var(--fui-space-4, $fui-space-4) 0;
+    padding-block: layout.gap("md");
   }
 
   &.vertical {
-    margin: 0 var(--fui-space-4, $fui-space-4);
+    padding-inline: layout.gap("md");
   }
 }
 
 .spacingLg {
   &.horizontal {
-    margin: var(--fui-space-6, $fui-space-6) 0;
+    padding-block: layout.gap("lg");
   }
 
   &.vertical {
-    margin: 0 var(--fui-space-6, $fui-space-6);
+    padding-inline: layout.gap("lg");
   }
 }
 
 // Soft variant (lighter color)
 .soft {
-  background-color: var(--fui-border, $fui-border);
   opacity: 0.5;
 
   &.withLabel::before,

package/src/components/Separator/index.tsx

@@ -1,18 +1,18 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Separator as BaseSeparator } from '@base-ui/react/separator';
-import styles from './Separator.module.scss';
+import * as React from "react";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import styles from "./Separator.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
-export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Orientation of the separator */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: "horizontal" | "vertical";
   /** Spacing around the separator */
-  spacing?: 'none' | 'sm' | 'md' | 'lg';
+  spacing?: "none" | "sm" | "md" | "lg";
   /** Softer visual appearance */
   soft?: boolean;
   /** Optional label text (creates a labeled divider) */
@@ -34,63 +34,67 @@ const spacingClasses = {
 // Component
 // ============================================
 
-const SeparatorRoot = React.forwardRef<HTMLDivElement, SeparatorProps>(
-  function Separator(
-    {
-      orientation = 'horizontal',
-      spacing = 'none',
-      soft = false,
-      label,
-      className,
-      style,
-      ...htmlProps
-    },
-    ref
-  ) {
-    // Labeled separator (horizontal only)
-    if (label && orientation === 'horizontal') {
-      const classes = [
-        styles.separator,
-        styles.withLabel,
-        spacingClasses[spacing],
-        soft && styles.soft,
-        className,
-      ].filter(Boolean).join(' ');
-
-      return (
-        <div
-          ref={ref}
-          role="separator"
-          aria-orientation="horizontal"
-          className={classes}
-          style={style}
-          {...htmlProps}
-        >
-          <span className={styles.label}>{label}</span>
-        </div>
-      );
-    }
-
-    // Standard separator
+const SeparatorRoot = React.forwardRef<HTMLDivElement, SeparatorProps>(function Separator(
+  {
+    orientation = "horizontal",
+    spacing = "none",
+    soft = false,
+    label,
+    className,
+    style,
+    ...htmlProps
+  },
+  ref
+) {
+  // Labeled separator (horizontal only)
+  if (label && orientation === "horizontal") {
     const classes = [
       styles.separator,
-      orientation === 'horizontal' ? styles.horizontal : styles.vertical,
+      styles.withLabel,
       spacingClasses[spacing],
       soft && styles.soft,
       className,
-    ].filter(Boolean).join(' ');
+    ]
+      .filter(Boolean)
+      .join(" ");
 
     return (
-      <BaseSeparator
+      <div
         ref={ref}
-        orientation={orientation}
+        role="separator"
+        aria-orientation="horizontal"
         className={classes}
         style={style}
         {...htmlProps}
-      />
+      >
+        <span className={styles.label}>{label}</span>
+      </div>
     );
   }
-);
+
+  // Standard separator
+  const classes = [
+    styles.separator,
+    orientation === "horizontal" ? styles.horizontal : styles.vertical,
+    spacingClasses[spacing],
+    soft && styles.soft,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <BaseSeparator
+      ref={ref}
+      orientation={orientation}
+      className={classes}
+      style={style}
+      {...htmlProps}
+    >
+      <span className={styles.line} aria-hidden="true" />
+    </BaseSeparator>
+  );
+});
 
 export const Separator = Object.assign(SeparatorRoot, {
   Root: SeparatorRoot,

package/src/components/Sidebar/Sidebar.contract.json

@@ -25,6 +25,7 @@
     "collapsedWidth: string (default: 56px)",
     "position: left|right (default: left)",
     "collapsible: icon|offcanvas|none (default: icon)",
+    "activeIndicator: start|end (default: start)",
     "style: object"
   ],
   "props": {
@@ -98,6 +99,16 @@
         "none"
       ]
     },
+    "activeIndicator": {
+      "type": "enum",
+      "description": "Placement of the active-item affordance",
+      "default": "start",
+      "required": false,
+      "values": [
+        "start",
+        "end"
+      ]
+    },
     "style": {
       "type": "object",
       "description": "",
@@ -124,6 +135,7 @@
       "Place most frequently used items at the top",
       "Use badges sparingly for notifications or counts",
       "The `active` prop on items should be controlled by your app based on current route",
+      "Use activeIndicator=\"end\" when the product language calls for a trailing status dot instead of the default start rail",
       "Use `collapsedContent` on Header to show just a logo icon when collapsed",
       "Submenus are hidden when collapsed - use tooltips for navigation hints instead",
       "Use SidebarProvider to enable external triggers and keyboard shortcuts",