@usefragments/ui 1.5.4 → 1.6.0

package/src/components/Listbox/Listbox.module.scss

@@ -1,20 +1,13 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// ============================================
-// Listbox container
-// ============================================
+@use "../../recipes/popup" as popup;
+@use "../../recipes/typography" as typography;
 
 .listbox {
-  @include surface-elevated;
-  @include popup-container;
-
-  @include popup-scroll-viewport;
+  @include popup.container;
+  @include popup.viewport;
 
-  min-width: 12rem;
-  // Show N items + half-peek scroll hint (default 4.5 items).
-  max-height: var(--_popup-scroll-max-h);
-  overflow-y: auto;
+  min-inline-size: var(--fui-listbox-min-inline, 192px);
   border-color: var(--fui-form-group-border, $fui-border);
 
   &:focus-visible {
@@ -22,85 +15,64 @@
   }
 }
 
-// ============================================
-// Listbox item
-// ============================================
-
 .item {
-  @include popup-item;
+  @include popup.row;
 
-  text-align: left;
+  text-align: start;
 
-  // Pointer-hover and keyboard-active share the one neutral highlight (see _mixins).
   &:hover,
   &[data-highlighted] {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 
-  // Listbox items are individually focusable, so keep the keyboard ring on top.
   &:focus-visible {
     @include focus-ring;
   }
 }
 
-.itemSelected {
-  @include popup-item-selected;
-}
-
 .itemActive {
-  &:not(.itemSelected) {
-    @include popup-item-highlight;
-  }
+  @include popup.highlight-state;
 }
 
-.itemActive.itemSelected {
-  @include popup-item-selected;
+.itemSelected {
+  @include popup.selected-state;
 }
 
 .itemDisabled {
-  @include popup-item-disabled;
+  @include popup.disabled-state;
 }
 
-// ============================================
-// Group
-// ============================================
+.group:not(:first-child)::before {
+  @include popup.group-separator;
 
-.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);
-  }
+  content: "";
+  display: block;
 }
 
 .groupLabel {
-  @include popup-group-label;
+  @include popup.group-label;
 }
 
-// ============================================
-// Empty state
-// ============================================
-
 .empty {
-  @include text-base;
+  @include typography.role("body-compact");
 
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding-block: var(--fui-popup-row-block-inset);
+  padding-inline: var(--fui-popup-row-inline-inset);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   text-align: center;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
 @media (prefers-contrast: more) {
   .listbox {
-    border-width: 2px;
+    border-color: var(--fui-text-primary, $fui-text-primary);
+    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
   }
 
   .itemSelected,
   .itemActive {
-    outline: 2px solid var(--fui-color-accent, $fui-color-accent);
-    outline-offset: -2px;
+    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
+      var(--fui-color-accent, $fui-color-accent);
+    outline-offset: calc(-1 * var(--fui-focus-ring-width, $fui-focus-ring-width));
   }
 }

package/src/components/Loading/Loading.module.scss

@@ -1,5 +1,6 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../recipes/representation" as representation;
+@use "../../recipes/typography" as typography;
 
 // ============================================
 // Loading Base
@@ -9,30 +10,17 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  flex: 0 0 auto;
 }
 
 // ============================================
 // Sizes
 // ============================================
 
-// Sizes ride the shared `--fui-icon-*` ladder. The step names are offset by one
-// (sm→icon-sm, md→icon-lg, lg→icon-xl, xl→icon-2xl), intentionally skipping
-// icon-md so the rendered px stays 14/20/24/32 for existing consumers.
-.sm {
-  --loading-size: var(--fui-icon-sm, #{$fui-icon-sm});  // 14px
-}
-
-.md {
-  --loading-size: var(--fui-icon-lg, #{$fui-icon-lg});  // 20px
-}
-
-.lg {
-  --loading-size: var(--fui-icon-xl, #{$fui-icon-xl});  // 24px
-}
-
-.xl {
-  --loading-size: var(--fui-icon-2xl, #{$fui-icon-2xl});  // 32px
+@each $size in ("sm", "md", "lg", "xl") {
+  .#{$size} {
+    @include representation.activity($size);
+  }
 }
 
 // ============================================
@@ -62,8 +50,8 @@
 }
 
 .fill {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,8 +62,8 @@
 // ============================================
 
 .spinnerIcon {
-  width: var(--loading-size);
-  height: var(--loading-size);
+  inline-size: 100%;
+  block-size: 100%;
   animation: spin 0.8s linear infinite;
 
   @media (prefers-reduced-motion: reduce) {
@@ -100,12 +88,14 @@
 .dots {
   display: flex;
   align-items: center;
-  gap: calc(var(--loading-size) * 0.3);
+  justify-content: space-between;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .dot {
-  width: calc(var(--loading-size) * 0.35);
-  height: calc(var(--loading-size) * 0.35);
+  inline-size: 25%;
+  block-size: 25%;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: currentColor;
   animation: bounce 1.4s ease-in-out infinite;
@@ -147,8 +137,8 @@
 
 .pulse {
   position: relative;
-  width: var(--loading-size);
-  height: var(--loading-size);
+  inline-size: 100%;
+  block-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -217,7 +207,7 @@
 }
 
 .inline-sm {
-  --inline-size: 0.875em;  // Relative to surrounding text
+  --inline-size: 0.875em; // Relative to surrounding text
 }
 
 .inline-md {
@@ -247,13 +237,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--fui-space-3, $fui-space-3);
+  gap: var(--fui-raw-space-12, 12px);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
   z-index: 100;
 }
 
 .screenLabel {
-  @include text-base;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include typography.role("body-compact");
+
   color: var(--fui-text-secondary, $fui-text-secondary);
 }

package/src/components/Loading/index.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './Loading.module.scss';
+import * as React from "react";
+import styles from "./Loading.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
-export type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
-export type LoadingVariant = 'spinner' | 'dots' | 'pulse';
+export type LoadingSize = "sm" | "md" | "lg" | "xl";
+export type LoadingVariant = "spinner" | "dots" | "pulse";
 
 export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Size of the loading indicator */
@@ -24,12 +24,12 @@ export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Whether to show the loading indicator with a backdrop overlay */
   overlay?: boolean;
   /** Color variant - uses accent color by default, 'current' inherits text color */
-  color?: 'accent' | 'current' | 'muted';
+  color?: "accent" | "current" | "muted";
 }
 
 export interface LoadingInlineProps extends React.HTMLAttributes<HTMLSpanElement> {
   /** Size of the loading indicator */
-  size?: 'sm' | 'md';
+  size?: "sm" | "md";
   /** Accessible label */
   label?: string;
 }
@@ -90,90 +90,76 @@ function PulseAnimation({ className }: { className?: string }) {
 // Components
 // ============================================
 
-const LoadingRoot = React.forwardRef<HTMLDivElement, LoadingProps>(
-  function LoadingRoot(
-    {
-      size = 'md',
-      variant = 'spinner',
-      label = 'Loading...',
-      centered = false,
-      fill = false,
-      overlay = false,
-      color = 'accent',
-      className,
-      ...htmlProps
-    },
-    ref
-  ) {
-    const classes = [
-      styles.loading,
-      styles[size],
-      styles[variant],
-      styles[`color-${color}`],
-      centered && styles.centered,
-      fill && styles.fill,
-      overlay && styles.overlay,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const animation = variant === 'dots'
-      ? <DotsAnimation className={styles.dots} />
-      : variant === 'pulse'
-        ? <PulseAnimation className={styles.pulse} />
-        : <SpinnerIcon className={styles.spinnerIcon} />;
-
-    const content = (
-      <div
-        ref={ref}
-        className={classes}
-        role="status"
-        aria-label={label}
-        aria-live="polite"
-        {...htmlProps}
-      >
-        {animation}
-      </div>
+const LoadingRoot = React.forwardRef<HTMLDivElement, LoadingProps>(function LoadingRoot(
+  {
+    size = "md",
+    variant = "spinner",
+    label = "Loading...",
+    centered = false,
+    fill = false,
+    overlay = false,
+    color = "accent",
+    className,
+    ...htmlProps
+  },
+  ref
+) {
+  const classes = [
+    styles.loading,
+    styles[size],
+    styles[variant],
+    styles[`color-${color}`],
+    centered && styles.centered,
+    fill && styles.fill,
+    overlay && styles.overlay,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const animation =
+    variant === "dots" ? (
+      <DotsAnimation className={styles.dots} />
+    ) : variant === "pulse" ? (
+      <PulseAnimation className={styles.pulse} />
+    ) : (
+      <SpinnerIcon className={styles.spinnerIcon} />
     );
 
-    if (overlay) {
-      return (
-        <div className={styles.overlayBackdrop}>
-          {content}
-        </div>
-      );
-    }
+  const content = (
+    <div
+      ref={ref}
+      className={classes}
+      role="status"
+      aria-label={label}
+      aria-live="polite"
+      {...htmlProps}
+    >
+      {animation}
+    </div>
+  );
 
-    return content;
+  if (overlay) {
+    return <div className={styles.overlayBackdrop}>{content}</div>;
   }
-);
+
+  return content;
+});
 
 // ============================================
 // Loading.Inline - Inline text loading indicator
 // ============================================
 
 function LoadingInline({
-  size = 'sm',
-  label = 'Loading...',
+  size = "sm",
+  label = "Loading...",
   className,
   ...htmlProps
 }: LoadingInlineProps) {
-  const classes = [
-    styles.inline,
-    styles[`inline-${size}`],
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+  const classes = [styles.inline, styles[`inline-${size}`], className].filter(Boolean).join(" ");
 
   return (
-    <span
-      className={classes}
-      role="status"
-      aria-label={label}
-      {...htmlProps}
-    >
+    <span className={classes} role="status" aria-label={label} {...htmlProps}>
       <SpinnerIcon className={styles.inlineSpinner} />
     </span>
   );
@@ -184,28 +170,17 @@ function LoadingInline({
 // ============================================
 
 function LoadingScreen({
-  size = 'lg',
-  variant = 'spinner',
-  label = 'Loading...',
+  size = "lg",
+  variant = "spinner",
+  label = "Loading...",
   showLabel = false,
   className,
   ...htmlProps
 }: LoadingScreenProps) {
-  const classes = [
-    styles.screen,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+  const classes = [styles.screen, className].filter(Boolean).join(" ");
 
   return (
-    <div
-      className={classes}
-      role="status"
-      aria-label={label}
-      aria-live="polite"
-      {...htmlProps}
-    >
+    <div className={classes} role="status" aria-label={label} aria-live="polite" {...htmlProps}>
       <LoadingRoot size={size} variant={variant} label={label} />
       {showLabel && <span className={styles.screenLabel}>{label}</span>}
     </div>
@@ -222,8 +197,4 @@ export const Loading = Object.assign(LoadingRoot, {
 });
 
 // Re-export individual components for tree-shaking
-export {
-  LoadingRoot,
-  LoadingInline,
-  LoadingScreen,
-};
+export { LoadingRoot, LoadingInline, LoadingScreen };

package/src/components/Main/Main.module.scss

@@ -1,6 +1,4 @@
-@use "../../tokens/variables" as *;
-
-$fui-main-measure-narrow: 57.143rem !default;
+@use "../../recipes/layout";
 
 .root {
   box-sizing: border-box;
@@ -8,7 +6,7 @@ $fui-main-measure-narrow: 57.143rem !default;
   min-width: 0;
   min-height: 100%;
   margin-inline: auto;
-  padding: var(--fui-space-3, $fui-space-3);
+  padding: layout.page-gutter();
 }
 
 .full {
@@ -16,7 +14,7 @@ $fui-main-measure-narrow: 57.143rem !default;
 }
 
 .narrow {
-  max-width: $fui-main-measure-narrow;
+  max-width: layout.measure("page-narrow");
 }
 
 .header,