@usefragments/ui 1.5.3 → 1.6.0

package/src/components/ThinkingIndicator/index.tsx

@@ -1,15 +1,15 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './ThinkingIndicator.module.scss';
-import { Loading } from '../Loading';
+import * as React from "react";
+import styles from "./ThinkingIndicator.module.scss";
+import { Loading } from "../Loading";
 
 // ============================================
 // Types
 // ============================================
 
-export type ThinkingVariant = 'dots' | 'pulse' | 'spinner';
-export type StepStatus = 'pending' | 'active' | 'complete' | 'error';
+export type ThinkingVariant = "dots" | "pulse" | "spinner";
+export type StepStatus = "pending" | "active" | "complete" | "error";
 
 export interface ThinkingStep {
   id: string;
@@ -55,7 +55,9 @@ const ThinkingIndicatorContext = React.createContext<ThinkingIndicatorContextVal
 function useThinkingIndicatorContext() {
   const context = React.useContext(ThinkingIndicatorContext);
   if (!context) {
-    throw new Error('ThinkingIndicator compound components must be used within a ThinkingIndicator');
+    throw new Error(
+      "ThinkingIndicator compound components must be used within a ThinkingIndicator"
+    );
   }
   return context;
 }
@@ -82,7 +84,7 @@ function useElapsedTime(active: boolean): string {
     return () => clearInterval(interval);
   }, [active]);
 
-  if (elapsed < 1000) return '';
+  if (elapsed < 1000) return "";
 
   const seconds = Math.floor(elapsed / 1000);
   if (seconds < 60) return `${seconds}s`;
@@ -100,8 +102,6 @@ function CheckIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -119,8 +119,6 @@ function ErrorIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -140,7 +138,7 @@ function ErrorIcon() {
 // ============================================
 
 function ThinkingSteps({ children, className, ...htmlProps }: ThinkingStepsProps) {
-  const classes = [styles.steps, className].filter(Boolean).join(' ');
+  const classes = [styles.steps, className].filter(Boolean).join(" ");
 
   return (
     <div {...htmlProps} className={classes}>
@@ -149,25 +147,31 @@ function ThinkingSteps({ children, className, ...htmlProps }: ThinkingStepsProps
   );
 }
 
-function ThinkingStep({
-  label,
-  status = 'pending',
-  className,
-  ...htmlProps
-}: ThinkingStepProps) {
+function ThinkingStep({ label, status = "pending", className, ...htmlProps }: ThinkingStepProps) {
   const classes = [
     styles.step,
     styles[`step${status.charAt(0).toUpperCase() + status.slice(1)}`],
     className,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <div {...htmlProps} className={classes}>
       <span className={styles.stepIndicator}>
-        {status === 'complete' && <CheckIcon />}
-        {status === 'error' && <ErrorIcon />}
-        {status === 'active' && <Loading size="sm" variant="spinner" color="current" label="" />}
-        {status === 'pending' && <span className={styles.stepDot} />}
+        {status === "complete" && <CheckIcon />}
+        {status === "error" && <ErrorIcon />}
+        {status === "active" && (
+          <Loading
+            size="sm"
+            variant="spinner"
+            color="current"
+            label=""
+            role="presentation"
+            aria-hidden="true"
+          />
+        )}
+        {status === "pending" && <span className={styles.stepDot} />}
       </span>
       <span className={styles.stepLabel}>{label}</span>
     </div>
@@ -180,8 +184,8 @@ function ThinkingStep({
 
 function ThinkingIndicatorRoot({
   active = true,
-  label = 'Thinking...',
-  variant = 'dots',
+  label = "Thinking...",
+  variant = "dots",
   showElapsed = false,
   steps,
   className,
@@ -196,41 +200,31 @@ function ThinkingIndicatorRoot({
 
   if (!active) return null;
 
-  const classes = [
-    styles.thinkingIndicator,
-    className,
-  ].filter(Boolean).join(' ');
+  const classes = [styles.thinkingIndicator, className].filter(Boolean).join(" ");
 
   // Map ThinkingIndicator variants to Loading variants
-  const loadingVariant = variant === 'dots' ? 'dots'
-    : variant === 'pulse' ? 'pulse'
-    : 'spinner';
+  const loadingVariant = variant === "dots" ? "dots" : variant === "pulse" ? "pulse" : "spinner";
 
   return (
     <ThinkingIndicatorContext.Provider value={contextValue}>
-      <div
-        {...htmlProps}
-        className={classes}
-        role="status"
-        aria-label={label}
-        aria-live="polite"
-      >
+      <div {...htmlProps} className={classes} role="status" aria-label={label} aria-live="polite">
         <div className={styles.main}>
-          <Loading size="sm" variant={loadingVariant} color="muted" label="" />
+          <Loading
+            size="sm"
+            variant={loadingVariant}
+            color="muted"
+            label=""
+            role="presentation"
+            aria-hidden="true"
+          />
           <span className={styles.label}>{label}</span>
-          {showElapsed && elapsedTime && (
-            <span className={styles.elapsed}>{elapsedTime}</span>
-          )}
+          {showElapsed && elapsedTime && <span className={styles.elapsed}>{elapsedTime}</span>}
         </div>
 
         {steps && steps.length > 0 && (
           <ThinkingSteps>
             {steps.map((step) => (
-              <ThinkingStep
-                key={step.id}
-                label={step.label}
-                status={step.status}
-              />
+              <ThinkingStep key={step.id} label={step.label} status={step.status} />
             ))}
           </ThinkingSteps>
         )}
@@ -248,10 +242,6 @@ export const ThinkingIndicator = Object.assign(ThinkingIndicatorRoot, {
   Step: ThinkingStep,
 });
 
-export {
-  ThinkingIndicatorRoot,
-  ThinkingSteps,
-  ThinkingStep,
-};
+export { ThinkingIndicatorRoot, ThinkingSteps, ThinkingStep };
 
 export { useThinkingIndicatorContext };

package/src/components/Toast/Toast.contract.json

@@ -3,12 +3,7 @@
   "name": "Toast",
   "description": "Brief, non-blocking notification messages",
   "category": "feedback",
-  "tags": [
-    "notification",
-    "alert",
-    "message",
-    "feedback"
-  ],
+  "tags": ["notification", "alert", "message", "feedback"],
   "status": "stable",
   "sourcePath": "src/components/Toast/index.tsx",
   "exportName": "Toast",
@@ -44,18 +39,12 @@
       "description": "Visual variant indicating message type",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "success",
-        "error",
-        "warning",
-        "info"
-      ]
+      "values": ["default", "success", "error", "warning", "info"]
     },
     "duration": {
       "type": "number",
       "description": "Auto-dismiss duration in ms (0 = no auto-dismiss)",
-      "default": 5000,
+      "default": 8000,
       "required": false
     },
     "action": {
@@ -161,16 +150,11 @@
       "ToastInput (useToast): optional id for deterministic creation/replacement flows",
       "useToast().success/error/warning/info: (title, description?) or ({ title, description, action, duration, id })"
     ],
-    "a11yRules": [
-      "A11Y_ALERT_ROLE",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_ALERT_ROLE", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Provider"
-    ]
+    "subComponents": ["Provider"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Toast/Toast.module.scss

@@ -1,19 +1,25 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// ============================================
-// Toast Container
-// ============================================
+@use "../../recipes/feedback" as feedback;
 
 .container {
   position: fixed;
-  // Sits above all overlays (Dialog/Drawer 50-51, Menu/Popover 52, Tooltip 60).
-  z-index: 70;
+  z-index: var(--fui-feedback-toast-layer, 70);
   display: flex;
   flex-direction: column;
-  gap: var(--fui-space-2, $fui-space-2);
-  max-width: 420px;
-  width: calc(100% - var(--fui-space-4, $fui-space-4) * 2);
+  gap: var(--fui-feedback-stack-gap, var(--fui-raw-space-8, 8px));
+  inline-size: min(
+    var(--fui-feedback-toast-max-inline, 400px),
+    calc(
+      100% - var(
+          --fui-feedback-viewport-inset-left,
+          max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+        ) - var(
+          --fui-feedback-viewport-inset-right,
+          max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+        )
+    )
+  );
   pointer-events: none;
 
   > * {
@@ -21,65 +27,40 @@
   }
 }
 
-// Position variants
 .topleft {
-  top: var(--fui-space-4, $fui-space-4);
-  left: var(--fui-space-4, $fui-space-4);
+  @include feedback.viewport-stack("top-left");
 }
 
 .topcenter {
-  top: var(--fui-space-4, $fui-space-4);
-  left: 50%;
-  transform: translateX(-50%);
+  @include feedback.viewport-stack("top-center");
 }
 
 .topright {
-  top: var(--fui-space-4, $fui-space-4);
-  right: var(--fui-space-4, $fui-space-4);
+  @include feedback.viewport-stack("top-right");
 }
 
 .bottomleft {
-  bottom: var(--fui-space-4, $fui-space-4);
-  left: var(--fui-space-4, $fui-space-4);
-  flex-direction: column-reverse;
+  @include feedback.viewport-stack("bottom-left");
 }
 
 .bottomcenter {
-  bottom: var(--fui-space-4, $fui-space-4);
-  left: 50%;
-  transform: translateX(-50%);
-  flex-direction: column-reverse;
+  @include feedback.viewport-stack("bottom-center");
 }
 
 .bottomright {
-  bottom: var(--fui-space-4, $fui-space-4);
-  right: var(--fui-space-4, $fui-space-4);
-  flex-direction: column-reverse;
+  @include feedback.viewport-stack("bottom-right");
 }
 
-// ============================================
-// Toast Item
-// ============================================
-
 .toast {
-  display: flex;
-  // Single-line toasts (title only) read best vertically centered; toasts
-  // with a description are multi-line and top-align — see `:has(.description)`.
-  align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  @include feedback.transient;
+
   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);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
-  font-family: var(--fui-font-sans, $fui-font-sans);
-
-  // Animation
   animation: toastEnter var(--fui-transition-normal, $fui-transition-normal);
 }
 
-// With a description the toast is multi-line: top-align icon/close to the
-// first line rather than the block centre.
 .toast:has(.description) {
   align-items: flex-start;
 }
@@ -89,35 +70,23 @@
     opacity: 0;
     transform: translateY($fui-anim-offset-md) scale(0.96);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }
 
-// ============================================
-// Variant Styles
-// ============================================
-
-.default {
-  .icon {
-    color: var(--fui-text-secondary, $fui-text-secondary);
-  }
+.default .icon {
+  color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
 .success {
   background: var(--fui-color-success-bg, $fui-color-success-bg);
   border-color: var(--fui-color-success-border, $fui-color-success-border);
 
-  .title {
-    color: var(--fui-color-success-text, $fui-color-success-text);
-  }
-
-  .description {
-    color: var(--fui-color-success-text, $fui-color-success-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-success-text, $fui-color-success-text);
   }
@@ -127,15 +96,8 @@
   background: var(--fui-color-danger-bg, $fui-color-danger-bg);
   border-color: var(--fui-color-danger-border, $fui-color-danger-border);
 
-  .title {
-    color: var(--fui-color-danger-text, $fui-color-danger-text);
-  }
-
-  .description {
-    color: var(--fui-color-danger-text, $fui-color-danger-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-danger-text, $fui-color-danger-text);
   }
@@ -145,15 +107,8 @@
   background: var(--fui-color-warning-bg, $fui-color-warning-bg);
   border-color: var(--fui-color-warning-border, $fui-color-warning-border);
 
-  .title {
-    color: var(--fui-color-warning-text, $fui-color-warning-text);
-  }
-
-  .description {
-    color: var(--fui-color-warning-text, $fui-color-warning-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-warning-text, $fui-color-warning-text);
   }
@@ -163,78 +118,59 @@
   background: var(--fui-color-info-bg, $fui-color-info-bg);
   border-color: var(--fui-color-info-border, $fui-color-info-border);
 
-  .title {
-    color: var(--fui-color-info-text, $fui-color-info-text);
-  }
-
-  .description {
-    color: var(--fui-color-info-text, $fui-color-info-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-info-text, $fui-color-info-text);
   }
 }
 
-// ============================================
-// Toast Parts
-// ============================================
+.success .description,
+.error .description,
+.warning .description,
+.info .description {
+  opacity: 0.8;
+}
 
 .icon {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
+  @include feedback.icon;
 
   svg {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
   }
 }
 
-// Nudge the icon to meet the first line only in multi-line toasts; centered
-// single-line toasts need no offset.
 .toast:has(.description) .icon {
-  margin-top: 1px;
+  margin-block-start: var(--fui-stroke-hairline, 1px);
 }
 
 .content {
+  display: grid;
   flex: 1;
-  min-width: 0;
+  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
+  min-inline-size: 0;
 }
 
 .title {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  @include feedback.title;
+
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
 }
 
 .description {
-  margin-top: 2px;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include feedback.body;
+
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
-// ============================================
-// Action Button
-// ============================================
-
 .action {
+  @include button-reset;
+  @include feedback.compact-action;
+
   flex-shrink: 0;
-  @include min-target-size;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  color: var(--fui-color-accent, $fui-color-accent);
-  background: transparent;
-  border: none;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  color: var(--fui-color-accent, $fui-color-accent);
   cursor: pointer;
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
@@ -247,20 +183,11 @@
   }
 }
 
-// ============================================
-// Close Button
-// ============================================
-
 .close {
+  @include button-reset;
+  @include feedback.close;
+
   flex-shrink: 0;
-  @include touch-target;
-
-  width: 1.5rem;
-  height: 1.5rem;
-  margin: -2px -4px -2px 0;
-  padding: 0;
-  background: transparent;
-  border: none;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   cursor: pointer;
@@ -269,8 +196,8 @@
     color var(--fui-transition-fast, $fui-transition-fast);
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: var(--_fui-action-icon-size);
+    block-size: var(--_fui-action-icon-size);
   }
 
   &:hover {
@@ -283,10 +210,6 @@
   }
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
   .toast {
     animation: none;

package/src/components/Toggle/index.ts

@@ -0,0 +1,7 @@
+/** @deprecated Import `Switch` from `../Switch` instead. */
+export {
+  Switch,
+  type SwitchProps,
+  Switch as Toggle,
+  type SwitchProps as ToggleProps,
+} from "../Switch";

package/src/components/ToggleGroup/ToggleGroup.contract.json

@@ -3,14 +3,7 @@
   "name": "ToggleGroup",
   "description": "A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.",
   "category": "forms",
-  "tags": [
-    "toggle",
-    "group",
-    "fragmented",
-    "control",
-    "tabs",
-    "switch"
-  ],
+  "tags": ["toggle", "group", "fragmented", "control", "tabs", "switch"],
   "status": "stable",
   "sourcePath": "src/components/ToggleGroup/index.tsx",
   "exportName": "ToggleGroup",
@@ -22,7 +15,7 @@
     "children: node (required)",
     "variant: default|pills|outline|outlined (default: default)",
     "size: sm|md|lg (default: md)",
-    "gap: sm|none|xs (default: xs)",
+    "gap: sm|none|xs (default: xs for pills; none otherwise)",
     "selectionMode: single (default: single)"
   ],
   "props": {
@@ -56,43 +49,27 @@
       "description": "Visual style",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "pills",
-        "outline",
-        "outlined"
-      ]
+      "values": ["default", "pills", "outline", "outlined"]
     },
     "size": {
       "type": "enum",
       "description": "Size variant",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "gap": {
       "type": "enum",
-      "description": "Gap between items (pills/outline variants)",
-      "default": "xs",
+      "description": "Gap between items in the pills variant. Connected variants intentionally ignore gaps.",
       "required": false,
-      "values": [
-        "sm",
-        "none",
-        "xs"
-      ]
+      "values": ["sm", "none", "xs"]
     },
     "selectionMode": {
       "type": "enum",
       "description": "Selection behavior",
       "default": "single",
       "required": false,
-      "values": [
-        "single"
-      ]
+      "values": ["single"]
     }
   },
   "usage": {
@@ -112,6 +89,7 @@
       "Keep options to 2-5 items for clarity",
       "Use clear, concise labels",
       "Consider icons for common actions (grid/list view)",
+      "Use default for an inset tonal rail, pills for an open filter cluster, and outline for connected bordered segments",
       "Ensure adequate touch targets on mobile"
     ],
     "accessibility": [
@@ -182,20 +160,15 @@
       "onChange: (value: string) => void - change handler (or onValueChange)",
       "children: ToggleGroup.Item[] - toggle items",
       "variant: default|pills|outline|outlined - visual style (outlined aliases outline)",
-      "size: sm|md - size variant",
-      "gap: none|xs|sm - spacing",
+      "size: sm|md|lg - size variant",
+      "gap: none|xs|sm - pills spacing (xs by default; connected variants remain gapless)",
       "selectionMode: single (default: single)"
     ],
-    "a11yRules": [
-      "A11Y_GROUP_ROLE",
-      "A11Y_KEYBOARD_ACCESSIBLE"
-    ]
+    "a11yRules": ["A11Y_GROUP_ROLE", "A11Y_KEYBOARD_ACCESSIBLE"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Item"
-    ]
+    "subComponents": ["Item"]
   },
   "provenance": {
     "source": "migrated",