@usefragments/ui 1.6.0 → 2.0.0

package/src/components/ScrollArea/ScrollArea.module.scss

@@ -1,46 +1,43 @@
-@use '../../tokens/measurements.generated' as measurements;
-@use '../../tokens/variables' as *;
+@use "../../tokens/measurements.generated" as measurements;
+@use "../../tokens/variables" as *;
+
+$_track-size: measurements.raw-space(6);
+$_inline-fade: measurements.raw-space(48);
+$_block-fade: measurements.raw-space(32);
+$_mask-none: linear-gradient(black, black);
 
 .root {
-  --fui-scrollarea-track-size: var(--fui-raw-space-6, #{measurements.raw-space(6)});
-  --fui-scrollarea-inline-fade: var(--fui-raw-space-48, #{measurements.raw-space(48)});
-  --fui-scrollarea-block-fade: var(--fui-raw-space-32, #{measurements.raw-space(32)});
-  --_fui-scrollarea-track-size: var(
-    --fui-scrollarea-track-size,
-    var(--fui-raw-space-6, #{measurements.raw-space(6)})
-  );
-  --_fui-scrollarea-inline-fade: var(
-    --fui-scrollarea-inline-fade,
-    var(--fui-raw-space-48, #{measurements.raw-space(48)})
-  );
-  --_fui-scrollarea-block-fade: var(
-    --fui-scrollarea-block-fade,
-    var(--fui-raw-space-32, #{measurements.raw-space(32)})
-  );
+  --_fui-scrollarea-track-size: var(--fui-raw-space-6, #{$_track-size});
+  --_fui-scrollarea-inline-fade: var(--fui-raw-space-48, #{$_inline-fade});
+  --_fui-scrollarea-block-fade: var(--fui-raw-space-32, #{$_block-fade});
 
   position: relative;
   overflow: hidden;
 }
 
 .viewport {
-  --_fui-scrollarea-inline-mask: linear-gradient(black, black);
-  --_fui-scrollarea-block-mask: linear-gradient(black, black);
+  --_fui-scrollarea-inline-mask: #{$_mask-none};
+  --_fui-scrollarea-block-mask: #{$_mask-none};
 
   inline-size: 100%;
   block-size: 100%;
   overflow: hidden;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
-  mask-image: var(--_fui-scrollarea-inline-mask), var(--_fui-scrollarea-block-mask);
+  mask-image:
+    var(--_fui-scrollarea-inline-mask, #{$_mask-none}),
+    var(--_fui-scrollarea-block-mask, #{$_mask-none});
   mask-repeat: no-repeat;
   mask-size: 100% 100%;
   mask-composite: intersect;
-  -webkit-mask-image: var(--_fui-scrollarea-inline-mask), var(--_fui-scrollarea-block-mask);
+  -webkit-mask-image:
+    var(--_fui-scrollarea-inline-mask, #{$_mask-none}),
+    var(--_fui-scrollarea-block-mask, #{$_mask-none});
   -webkit-mask-composite: source-in;
 
   &::-webkit-scrollbar {
-    width: var(--_fui-scrollarea-track-size);
-    height: var(--_fui-scrollarea-track-size);
+    width: var(--_fui-scrollarea-track-size, #{$_track-size});
+    height: var(--_fui-scrollarea-track-size, #{$_track-size});
   }
 
   &::-webkit-scrollbar-track {
@@ -55,7 +52,7 @@
 
   &:hover,
   &:focus-within,
-  &[data-scrollbar-visibility='always'] {
+  &[data-scrollbar-visibility="always"] {
     scrollbar-color: var(--fui-border-strong, #{$fui-border-strong}) transparent;
 
     &::-webkit-scrollbar-thumb {
@@ -82,80 +79,80 @@
   overflow: auto;
 }
 
-.horizontal:not([data-scroll-x='none']),
-.both:not([data-scroll-x='none']) {
-  scroll-padding-inline: var(--_fui-scrollarea-inline-fade);
+.horizontal:not([data-scroll-x="none"]),
+.both:not([data-scroll-x="none"]) {
+  scroll-padding-inline: var(--_fui-scrollarea-inline-fade, #{$_inline-fade});
 }
 
-.vertical:not([data-scroll-y='none']),
-.both:not([data-scroll-y='none']) {
-  scroll-padding-block: var(--_fui-scrollarea-block-fade);
+.vertical:not([data-scroll-y="none"]),
+.both:not([data-scroll-y="none"]) {
+  scroll-padding-block: var(--_fui-scrollarea-block-fade, #{$_block-fade});
 }
 
-.viewport[data-scroll-x='end'] {
+.viewport[data-scroll-x="end"] {
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
-    black calc(100% - var(--_fui-scrollarea-inline-fade)),
+    black calc(100% - var(--_fui-scrollarea-inline-fade, #{$_inline-fade})),
     transparent
   );
 }
 
-.viewport[data-scroll-x='start'] {
+.viewport[data-scroll-x="start"] {
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
     transparent,
-    black var(--_fui-scrollarea-inline-fade)
+    black var(--_fui-scrollarea-inline-fade, #{$_inline-fade})
   );
 }
 
-.viewport[data-scroll-x='both'] {
+.viewport[data-scroll-x="both"] {
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
     transparent,
-    black var(--_fui-scrollarea-inline-fade),
-    black calc(100% - var(--_fui-scrollarea-inline-fade)),
+    black var(--_fui-scrollarea-inline-fade, #{$_inline-fade}),
+    black calc(100% - var(--_fui-scrollarea-inline-fade, #{$_inline-fade})),
     transparent
   );
 }
 
-.viewport[data-scroll-x='end']:dir(rtl) {
+.viewport[data-scroll-x="end"]:dir(rtl) {
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
     transparent,
-    black var(--_fui-scrollarea-inline-fade)
+    black var(--_fui-scrollarea-inline-fade, #{$_inline-fade})
   );
 }
 
-.viewport[data-scroll-x='start']:dir(rtl) {
+.viewport[data-scroll-x="start"]:dir(rtl) {
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
-    black calc(100% - var(--_fui-scrollarea-inline-fade)),
+    black calc(100% - var(--_fui-scrollarea-inline-fade, #{$_inline-fade})),
     transparent
   );
 }
 
-.viewport[data-scroll-y='end'] {
+.viewport[data-scroll-y="end"] {
   --_fui-scrollarea-block-mask: linear-gradient(
     to bottom,
-    black calc(100% - var(--_fui-scrollarea-block-fade)),
+    black calc(100% - var(--_fui-scrollarea-block-fade, #{$_block-fade})),
     transparent
   );
 }
 
-.viewport[data-scroll-y='start'] {
+.viewport[data-scroll-y="start"] {
   --_fui-scrollarea-block-mask: linear-gradient(
     to bottom,
     transparent,
-    black var(--_fui-scrollarea-block-fade)
+    black var(--_fui-scrollarea-block-fade, #{$_block-fade})
   );
 }
 
-.viewport[data-scroll-y='both'] {
+.viewport[data-scroll-y="both"] {
   --_fui-scrollarea-block-mask: linear-gradient(
     to bottom,
     transparent,
-    black var(--_fui-scrollarea-block-fade),
-    black calc(100% - var(--_fui-scrollarea-block-fade)),
+    black var(--_fui-scrollarea-block-fade, #{$_block-fade}),
+    black calc(100% - var(--_fui-scrollarea-block-fade, #{$_block-fade})),
     transparent
   );
 }

package/src/components/ScrollArea/index.tsx

@@ -1,13 +1,13 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './ScrollArea.module.scss';
+import * as React from "react";
+import styles from "./ScrollArea.module.scss";
 import {
   detectRtlScrollModel,
   readScrollAxes,
   type ScrollAxesState,
   type ScrollOrientation,
-} from './scroll-state';
+} from "./scroll-state";
 
 // ============================================
 // Types
@@ -18,8 +18,8 @@ export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Scroll direction */
   orientation?: ScrollOrientation;
   /** Scrollbar visibility behavior */
-  scrollbarVisibility?: 'auto' | 'always' | 'hover';
-  /** Whether to show fade indicators at scroll edges */
+  scrollbarVisibility?: "auto" | "always" | "hover";
+  /** Whether to show fade indicators at scroll edges. Defaults to false. */
   showFades?: boolean;
   /** Additional class name */
   className?: string;
@@ -37,15 +37,15 @@ export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 function ScrollAreaRoot({
   children,
-  orientation = 'vertical',
-  scrollbarVisibility = 'auto',
+  orientation = "vertical",
+  scrollbarVisibility = "auto",
   showFades = false,
   className,
   dir,
   ...htmlProps
 }: ScrollAreaProps) {
   const viewportRef = React.useRef<HTMLDivElement>(null);
-  const [axes, setAxes] = React.useState<ScrollAxesState>({ x: 'none', y: 'none' });
+  const [axes, setAxes] = React.useState<ScrollAxesState>({ x: "none", y: "none" });
 
   React.useEffect(() => {
     const viewport = viewportRef.current;
@@ -58,11 +58,11 @@ function ScrollAreaRoot({
       frame = null;
       const view = viewport.ownerDocument.defaultView;
       const computedDirection = view?.getComputedStyle(viewport).direction;
-      const direction = (computedDirection || dir) === 'rtl' ? 'rtl' : 'ltr';
+      const direction = (computedDirection || dir) === "rtl" ? "rtl" : "ltr";
       const nextAxes = readScrollAxes(viewport, {
         orientation,
         direction,
-        rtlModel: direction === 'rtl' ? detectRtlScrollModel(viewport.ownerDocument) : undefined,
+        rtlModel: direction === "rtl" ? detectRtlScrollModel(viewport.ownerDocument) : undefined,
       });
 
       setAxes((currentAxes) =>
@@ -99,22 +99,22 @@ function ScrollAreaRoot({
     resizeObserver.observe(viewport);
     syncObservedChildren();
     mutationObserver.observe(viewport, { childList: true, subtree: true });
-    viewport.addEventListener('scroll', schedule, { passive: true });
+    viewport.addEventListener("scroll", schedule, { passive: true });
     schedule();
 
     return () => {
       if (frame !== null) cancelAnimationFrame(frame);
-      viewport.removeEventListener('scroll', schedule);
+      viewport.removeEventListener("scroll", schedule);
       resizeObserver.disconnect();
       mutationObserver.disconnect();
       observedChildren.clear();
     };
   }, [dir, orientation, showFades]);
 
-  const rootClasses = [styles.root, className].filter(Boolean).join(' ');
-  const visibleAxes = showFades ? axes : { x: 'none' as const, y: 'none' as const };
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
+  const visibleAxes = showFades ? axes : { x: "none" as const, y: "none" as const };
 
-  const viewportClasses = [styles.viewport, styles[orientation]].filter(Boolean).join(' ');
+  const viewportClasses = [styles.viewport, styles[orientation]].filter(Boolean).join(" ");
 
   return (
     <div {...htmlProps} className={rootClasses} data-orientation={orientation} dir={dir}>

package/src/components/ScrollArea/scroll-state.ts

@@ -1,6 +1,6 @@
-export type ScrollOrientation = 'horizontal' | 'vertical' | 'both';
-export type ScrollEdgeState = 'none' | 'start' | 'end' | 'both';
-export type RtlScrollModel = 'negative' | 'positive-descending' | 'positive-ascending';
+export type ScrollOrientation = "horizontal" | "vertical" | "both";
+export type ScrollEdgeState = "none" | "start" | "end" | "both";
+export type RtlScrollModel = "negative" | "positive-descending" | "positive-ascending";
 
 export interface ScrollAxesState {
   x: ScrollEdgeState;
@@ -16,21 +16,21 @@ export function detectRtlScrollModel(document: Document): RtlScrollModel {
   const cachedModel = rtlScrollModels.get(document);
   if (cachedModel) return cachedModel;
 
-  const viewport = document.createElement('div');
-  const content = document.createElement('div');
-  viewport.dir = 'rtl';
+  const viewport = document.createElement("div");
+  const content = document.createElement("div");
+  viewport.dir = "rtl";
   viewport.style.cssText =
-    'position:absolute;inset-block-start:-9999px;inline-size:4px;block-size:1px;overflow:scroll;visibility:hidden';
-  content.style.cssText = 'inline-size:8px;block-size:1px';
+    "position:absolute;inset-block-start:-9999px;inline-size:4px;block-size:1px;overflow:scroll;visibility:hidden";
+  content.style.cssText = "inline-size:8px;block-size:1px";
   viewport.append(content);
   (document.body ?? document.documentElement).append(viewport);
 
   let model: RtlScrollModel;
   if (viewport.scrollLeft > 0) {
-    model = 'positive-descending';
+    model = "positive-descending";
   } else {
     viewport.scrollLeft = 1;
-    model = viewport.scrollLeft === 0 ? 'negative' : 'positive-ascending';
+    model = viewport.scrollLeft === 0 ? "negative" : "positive-ascending";
   }
 
   viewport.remove();
@@ -43,37 +43,37 @@ function clamp(value: number, min: number, max: number): number {
 }
 
 function resolveEdgeState(distanceFromStart: number, maxScroll: number): ScrollEdgeState {
-  if (maxScroll <= SCROLL_EDGE_EPSILON_PX) return 'none';
-  if (distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return 'end';
-  if (maxScroll - distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return 'start';
-  return 'both';
+  if (maxScroll <= SCROLL_EDGE_EPSILON_PX) return "none";
+  if (distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return "end";
+  if (maxScroll - distanceFromStart <= SCROLL_EDGE_EPSILON_PX) return "start";
+  return "both";
 }
 
 export function readScrollAxes(
   element: Pick<
     HTMLElement,
-    'clientWidth' | 'clientHeight' | 'scrollWidth' | 'scrollHeight' | 'scrollLeft' | 'scrollTop'
+    "clientWidth" | "clientHeight" | "scrollWidth" | "scrollHeight" | "scrollLeft" | "scrollTop"
   >,
   options: {
     orientation: ScrollOrientation;
-    direction: 'ltr' | 'rtl';
+    direction: "ltr" | "rtl";
     rtlModel?: RtlScrollModel;
   }
 ): ScrollAxesState {
-  const allowX = options.orientation === 'horizontal' || options.orientation === 'both';
-  const allowY = options.orientation === 'vertical' || options.orientation === 'both';
+  const allowX = options.orientation === "horizontal" || options.orientation === "both";
+  const allowY = options.orientation === "vertical" || options.orientation === "both";
 
   const maxX = Math.max(0, element.scrollWidth - element.clientWidth);
   const maxY = Math.max(0, element.scrollHeight - element.clientHeight);
 
-  let x: ScrollEdgeState = 'none';
+  let x: ScrollEdgeState = "none";
   if (allowX) {
     let logicalScrollLeft = element.scrollLeft;
-    if (options.direction === 'rtl') {
-      const rtlModel = options.rtlModel ?? 'negative';
-      if (rtlModel === 'negative') {
+    if (options.direction === "rtl") {
+      const rtlModel = options.rtlModel ?? "negative";
+      if (rtlModel === "negative") {
         logicalScrollLeft = -element.scrollLeft;
-      } else if (rtlModel === 'positive-descending') {
+      } else if (rtlModel === "positive-descending") {
         logicalScrollLeft = maxX - element.scrollLeft;
       }
     }
@@ -81,7 +81,7 @@ export function readScrollAxes(
     x = resolveEdgeState(clamp(logicalScrollLeft, 0, maxX), maxX);
   }
 
-  const y = allowY ? resolveEdgeState(clamp(element.scrollTop, 0, maxY), maxY) : 'none';
+  const y = allowY ? resolveEdgeState(clamp(element.scrollTop, 0, maxY), maxY) : "none";
 
   return { x, y };
 }

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

@@ -37,9 +37,25 @@
   min-width: layout.measure("field-minimum");
   text-align: left;
 
+  &:focus-visible,
   &[data-popup-open] {
-    border-color: var(--fui-field-border-focus, $fui-color-accent);
+    @include field.focus-state;
   }
+
+  .wrapper[data-invalid] & {
+    @include field.invalid-state;
+
+    // Focused while invalid keeps the danger edge and takes the danger ring,
+    // the same pairing Input and Textarea render. Without it the ring stays
+    // accent-coloured and the control reads half-valid at the moment the user
+    // is actually in it.
+    &:focus-visible,
+    &[data-popup-open] {
+      @include field.invalid-focus-state;
+    }
+  }
+
+  @include high-contrast-outline;
 }
 
 // Trigger size variants
@@ -85,7 +101,7 @@
   // it owns is on screen.
   &[data-popup-open] {
     border-color: transparent;
-    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+    background-color: var(--fui-control-selected-bg, $fui-bg-active);
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
@@ -94,7 +110,7 @@
   &:disabled,
   &[data-disabled] {
     background-color: transparent;
-    opacity: 0.5;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
   }
 }
 
@@ -169,7 +185,7 @@
 
 // Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
   outline: none;
 }
 
@@ -253,21 +269,6 @@
   @include popup.group-label;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .trigger {
-    border-width: 2px;
-    border-color: var(--fui-text-primary, $fui-text-primary);
-
-    &[data-popup-open] {
-      border-color: var(--fui-color-accent, $fui-color-accent);
-    }
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Select/index.tsx

@@ -4,10 +4,7 @@ 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 { POPUP_OFFSET_PX, resolvePopupViewportRows } from "../../recipes/popup";
 import styles from "./Select.module.scss";
 
 // ============================================
@@ -16,7 +13,7 @@ import styles from "./Select.module.scss";
 
 export type SelectValue = string;
 
-export type SelectVariant = "field" | "ghost";
+export type SelectVariant = "outline" | "ghost";
 
 export interface SelectOption {
   value: SelectValue;
@@ -68,10 +65,10 @@ export interface SelectProps extends FormFieldProps {
   /** Size variant.
    * @default "md" */
   size?: "sm" | "md" | "lg";
-  /** Visual treatment. `ghost` drops the field shell for a compact, borderless
-   * control — for toolbars and dense rows, where a bordered field reads as a
-   * form. Pair with `size="sm"`.
-   * @default "field" */
+  /** Chrome. `outline` is the bordered field shell; `ghost` drops it for a
+   * compact, borderless control — for toolbars and dense rows, where a bordered
+   * field reads as a form. Pair with `size="sm"`.
+   * @default "outline" */
   variant?: SelectVariant;
   /** Wrapper class name */
   className?: string;
@@ -163,6 +160,9 @@ interface SelectContextValue {
   unregisterItem: (value: SelectValue) => void;
   size: "sm" | "md" | "lg";
   variant: SelectVariant;
+  /** Mirrors the wrapper's `data-invalid` onto the trigger as `aria-invalid`,
+   * so assistive tech hears the state the danger edge is painting. */
+  invalid?: boolean;
   /** Items built from the `options` prop, so a custom composition can put the
    * trigger where it wants without having to re-render the list itself — and
    * without losing whatever the root knows about an option that a bare label
@@ -175,7 +175,7 @@ const SelectContext = React.createContext<SelectContextValue>({
   registerItem: () => {},
   unregisterItem: () => {},
   size: "md",
-  variant: "field",
+  variant: "outline",
   optionItems: null,
 });
 
@@ -234,7 +234,7 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
     helperText,
     error,
     size: sizeProp,
-    variant = "field",
+    variant = "outline",
     className,
   }: SelectProps,
   ref
@@ -320,6 +320,12 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
     return merged;
   }, [declaredItems, items]);
 
+  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
+    label,
+    helperText,
+    error,
+  });
+
   const contextValue = React.useMemo(
     () => ({
       placeholder,
@@ -330,6 +336,7 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
       size,
       variant,
       optionItems,
+      invalid: hasError,
     }),
     [
       placeholder,
@@ -340,27 +347,18 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
       size,
       variant,
       optionItems,
+      hasError,
     ]
   );
 
-  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
-    label,
-    helperText,
-    error,
-  });
-
-  const wrapperClasses = [
-    styles.wrapper,
-    variant === "ghost" && styles.wrapperGhost,
-    className,
-  ]
+  const wrapperClasses = [styles.wrapper, variant === "ghost" && styles.wrapperGhost, className]
     .filter(Boolean)
     .join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
 
   return (
     <SelectContext.Provider value={contextValue}>
-      <div ref={ref} className={wrapperClasses}>
+      <div ref={ref} className={wrapperClasses} data-invalid={hasError || undefined}>
         <BaseSelect.Root
           value={value !== undefined || readOnly ? selectedValue : undefined}
           defaultValue={value === undefined && !readOnly ? defaultValue : undefined}
@@ -427,7 +425,11 @@ function SelectTrigger({
     (placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null);
 
   return (
-    <BaseSelect.Trigger {...htmlProps} className={classes}>
+    <BaseSelect.Trigger
+      {...htmlProps}
+      className={classes}
+      aria-invalid={context.invalid || undefined}
+    >
       {children ?? (
         <>
           {icon && <span className={styles.triggerIcon}>{icon}</span>}