@fragments-sdk/ui 0.16.1 → 0.17.1

package/src/components/Textarea/index.tsx

@@ -27,6 +27,10 @@ export interface TextareaProps extends Omit<
   disabled?: boolean;
   /** Error state */
   error?: boolean;
+  /** Success state */
+  success?: boolean;
+  /** Show character count when maxLength is set */
+  showCharCount?: boolean;
   /** Label text above the textarea */
   label?: string;
   /** Helper text below the textarea */
@@ -36,9 +40,9 @@ export interface TextareaProps extends Omit<
   /** Alias for onChange (value-first callback) */
   onValueChange?: (value: string) => void;
   /** Called when textarea loses focus */
-  onBlur?: () => void;
+  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   /** Called when textarea receives focus */
-  onFocus?: () => void;
+  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   /** Form field name */
   name?: string;
   /** Maximum character length */
@@ -72,6 +76,8 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       size = 'md',
       disabled = false,
       error = false,
+      success = false,
+      showCharCount = false,
       label,
       helperText,
       onChange,
@@ -100,16 +106,25 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     const labelId = label ? `${textareaId}-label` : undefined;
     const helperId = `${textareaId}-helper`;
 
+    const [charCount, setCharCount] = React.useState(() =>
+      (value ?? defaultValue ?? '').length
+    );
+
     const textareaClasses = [
       styles.textarea,
       styles[size],
       error && styles.error,
+      success && styles.success,
       styles[`resize-${resize}`],
     ]
       .filter(Boolean)
       .join(' ');
 
-    const helperClasses = [styles.helper, error && styles.helperError]
+    const helperClasses = [
+      styles.helper,
+      error && styles.helperError,
+      success && styles.helperSuccess,
+    ]
       .filter(Boolean)
       .join(' ');
 
@@ -125,6 +140,7 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <div
         {...rootProps}
+        data-success={success || undefined}
         className={[styles.wrapper, rootProps?.className, className].filter(Boolean).join(' ')}
         style={{ ...(rootProps?.style ?? {}), ...(wrapperStyle ?? {}) }}
       >
@@ -154,19 +170,34 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             helperText ? helperId : undefined
           )}
           onChange={(e) => {
-            onChange?.(e.target.value);
-            onValueChange?.(e.target.value);
+            const val = e.target.value;
+            setCharCount(val.length);
+            onChange?.(val);
+            onValueChange?.(val);
           }}
-          onBlur={() => onBlur?.()}
-          onFocus={() => onFocus?.()}
+          onBlur={(e) => onBlur?.(e)}
+          onFocus={(e) => onFocus?.(e)}
           className={textareaClasses}
           style={Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : undefined}
         />
-        {helperText && (
-          <span id={helperId} className={helperClasses}>
-            {helperText}
-          </span>
-        )}
+        <div className={styles.footer}>
+          {helperText && (
+            <span id={helperId} className={helperClasses}>
+              {helperText}
+            </span>
+          )}
+          {showCharCount && maxLength != null && (
+            <span
+              className={[
+                styles.charCount,
+                charCount > maxLength && styles.charCountOver,
+              ].filter(Boolean).join(' ')}
+              aria-live="polite"
+            >
+              {charCount}/{maxLength}
+            </span>
+          )}
+        </div>
       </div>
     );
   }

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

@@ -97,34 +97,74 @@
 }
 
 .success {
-  border-left: 3px solid var(--fui-color-success, $fui-color-success);
+  background: color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border-color: color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 40%, transparent);
+
+  .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;
+  }
 
   .icon {
-    color: var(--fui-color-success, $fui-color-success);
+    color: var(--fui-color-success-text, $fui-color-success-text);
   }
 }
 
 .error {
-  border-left: 3px solid var(--fui-color-danger, $fui-color-danger);
+  background: color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border-color: color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 40%, transparent);
+
+  .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;
+  }
 
   .icon {
-    color: var(--fui-color-danger, $fui-color-danger);
+    color: var(--fui-color-danger-text, $fui-color-danger-text);
   }
 }
 
 .warning {
-  border-left: 3px solid var(--fui-color-warning, $fui-color-warning);
+  background: color-mix(in srgb, var(--fui-color-warning, #{$fui-color-warning}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border-color: color-mix(in srgb, var(--fui-color-warning, #{$fui-color-warning}) 40%, transparent);
+
+  .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;
+  }
 
   .icon {
-    color: var(--fui-color-warning, $fui-color-warning);
+    color: var(--fui-color-warning-text, $fui-color-warning-text);
   }
 }
 
 .info {
-  border-left: 3px solid var(--fui-color-info, $fui-color-info);
+  background: color-mix(in srgb, var(--fui-color-info, #{$fui-color-info}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border-color: color-mix(in srgb, var(--fui-color-info, #{$fui-color-info}) 40%, transparent);
+
+  .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;
+  }
 
   .icon {
-    color: var(--fui-color-info, $fui-color-info);
+    color: var(--fui-color-info-text, $fui-color-info-text);
   }
 }
 

package/src/components/Toggle/Toggle.module.scss

@@ -29,32 +29,31 @@
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  box-sizing: content-box;
+  box-sizing: border-box;
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  border: none;
-  // iOS unchecked: semi-transparent gray — visible in both light and dark
-  background-color: var(--fui-bg-active, $fui-bg-active);
-  overflow: hidden;
-  transition: background-color var(--fui-transition-normal, $fui-transition-normal);
+  border: 1px solid var(--fui-field-border, $fui-border-strong);
+  background-color: var(--fui-field-bg, $fui-bg-elevated);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fui-bg-primary, $fui-bg-primary) 45%, transparent);
+  transition:
+    background-color var(--fui-transition-normal, $fui-transition-normal),
+    border-color var(--fui-transition-normal, $fui-transition-normal),
+    box-shadow var(--fui-transition-normal, $fui-transition-normal);
 
-  // Checked: accent fill
   .root[data-checked] & {
-    background-color: var(--fui-color-accent, $fui-color-accent);
+    background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+    border-color: var(--fui-field-selection-border, $fui-color-accent);
   }
 
-  // Hover (unchecked): slightly more opaque
   .root:not([data-disabled]):not([data-checked]) &:hover {
-    background-color: var(--fui-border, $fui-border);
+    border-color: var(--fui-field-border-hover, $fui-text-tertiary);
   }
 
-  // Hover (checked): accent hover
   .root:not([data-disabled])[data-checked] &:hover {
-    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
   }
 
-  // Focus ring (consistent box-shadow approach across all form controls)
   .root:focus-visible & {
-    @include focus-ring;
+    @include field-shell-focus;
   }
 }
 
@@ -97,10 +96,6 @@
   );
 }
 
-// iOS-style thumb: always white, multi-layer shadow.
-// The thumb is intentionally always white (#fff) to match iOS toggle UX — this is
-// a hardcoded design decision (like CodeBlock/Tooltip dark surfaces). Override via
-// --fui-toggle-thumb-bg and --fui-toggle-thumb-shadow CSS custom properties.
 .thumb {
   position: absolute;
   top: var(--_toggle-inset, $fui-toggle-thumb-offset);
@@ -110,32 +105,23 @@
   height: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
   border-radius: 50%;
   pointer-events: none;
-  background-color: var(--fui-toggle-thumb-bg, #fff);
-  box-shadow: var(
-    --fui-toggle-thumb-shadow,
-    0 3px 8px rgba(0, 0, 0, 0.15),
-    0 1px 1px rgba(0, 0, 0, 0.06),
-    0 3px 1px rgba(0, 0, 0, 0.06)
-  );
+  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  border: 1px solid color-mix(in srgb, var(--fui-border-strong, $fui-border-strong) 55%, transparent);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
   transition:
     transform var(--fui-transition-normal, $fui-transition-normal),
     background-color var(--fui-transition-normal, $fui-transition-normal),
-    width var(--fui-transition-fast, $fui-transition-fast);
+    border-color var(--fui-transition-normal, $fui-transition-normal),
+    box-shadow var(--fui-transition-fast, $fui-transition-fast);
 
-  // Slide right when checked — inverse color for contrast against accent
   .root[data-checked] & {
     transform: translateX(var(--_toggle-translate, 0));
-    background-color: var(--fui-text-inverse, $fui-text-inverse);
+    background-color: var(--fui-color-accent, $fui-color-accent);
+    border-color: color-mix(in srgb, var(--fui-color-accent, $fui-color-accent) 60%, transparent);
   }
 
-  // Press: stretch thumb wider (iOS 17+)
   .root:active:not([data-disabled]) & {
-    width: calc(var(--_toggle-thumb-size, #{$fui-toggle-thumb-md}) + 4px);
-  }
-
-  // Press + checked: compensate translate for wider thumb
-  .root:active:not([data-disabled])[data-checked] & {
-    transform: translateX(calc(var(--_toggle-translate, 0) - 4px));
+    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16);
   }
 }
 

package/src/components/Toggle/index.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { mergeAriaIds } from '../../utils/aria';
 import styles from './Toggle.module.scss';
 
 /**
@@ -56,6 +57,9 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
     ref
   ) {
     const resolvedHelperText = helperText ?? description;
+    const generatedId = React.useId();
+    const resolvedId = id ?? `switch-${generatedId}`;
+    const helperId = resolvedHelperText ? `${resolvedId}-helper` : undefined;
     const trackClasses = [
       styles.track,
       size === 'sm' ? styles.trackSm : size === 'lg' ? styles.trackLg : styles.trackMd,
@@ -89,7 +93,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
     return (
       <BaseSwitch.Root
         ref={ref}
-        id={id}
+        id={resolvedId}
         checked={checked}
         defaultChecked={defaultChecked}
         onCheckedChange={onCheckedChange ?? onChange}
@@ -98,7 +102,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
         className={rootClasses}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
-        aria-describedby={ariaDescribedBy}
+        aria-describedby={mergeAriaIds(ariaDescribedBy, helperId)}
       >
         <span className={trackClasses} aria-hidden="true">
           <BaseSwitch.Thumb className={thumbClasses} />
@@ -107,7 +111,11 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(
         {(label || resolvedHelperText) && (
           <div className={styles.content}>
             {label && <span className={labelClasses}>{label}</span>}
-            {resolvedHelperText && <span className={helperClasses}>{resolvedHelperText}</span>}
+            {resolvedHelperText && (
+              <span id={helperId} className={helperClasses}>
+                {resolvedHelperText}
+              </span>
+            )}
           </div>
         )}
       </BaseSwitch.Root>

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -24,19 +24,20 @@
 // ============================================
 
 .default {
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
+  @include form-group-surface;
+
   padding: calc(var(--fui-space-px, $fui-space-px) * 2);
   gap: calc(var(--fui-space-px, $fui-space-px) * 2);
 
   .item {
     background-color: transparent;
-    border: none;
+    border: 1px solid transparent;
     border-radius: calc(var(--fui-radius-md, $fui-radius-md) - 2px);
 
     &.selected {
-      background-color: var(--fui-bg-primary, $fui-bg-primary);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      background-color: var(--fui-field-bg, $fui-bg-elevated);
+      border-color: var(--fui-field-selection-border, $fui-color-accent);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fui-field-selection-border, $fui-color-accent) 55%, transparent);
     }
   }
 }
@@ -47,17 +48,17 @@
 
 .pills {
   .item {
-    background-color: transparent;
-    border: 1px solid transparent;
+    background-color: var(--fui-field-bg, $fui-bg-elevated);
+    border: 1px solid var(--fui-form-group-border, $fui-border);
     border-radius: var(--fui-radius-md, $fui-radius-md);
 
     &:hover:not(:disabled):not(.selected) {
-      background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+      background-color: var(--fui-bg-hover, $fui-bg-hover);
+      border-color: var(--fui-field-border-hover, $fui-text-tertiary);
     }
 
     &.selected {
-      background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-      border-color: var(--fui-border, $fui-border);
+      @include popup-item-selected;
     }
   }
 }
@@ -69,17 +70,16 @@
 .outline {
   .item {
     background-color: transparent;
-    border: 1px solid var(--fui-border, $fui-border);
+    border: 1px solid var(--fui-field-border, $fui-border);
     border-radius: var(--fui-radius-md, $fui-radius-md);
 
     &:hover:not(:disabled):not(.selected) {
-      background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+      background-color: var(--fui-bg-hover, $fui-bg-hover);
+      border-color: var(--fui-field-border-hover, $fui-text-tertiary);
     }
 
     &.selected {
-      background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-      border-color: var(--fui-color-accent, $fui-color-accent);
-      color: var(--fui-color-accent, $fui-color-accent);
+      @include popup-item-selected;
     }
   }
 }
@@ -101,7 +101,11 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
   user-select: none;
-  transition: all 150ms ease;
+  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),
+    color var(--fui-transition-fast, $fui-transition-fast);
 
   &.selected {
     color: var(--fui-text-primary, $fui-text-primary);
@@ -119,7 +123,7 @@
 
 .size-sm {
   .item {
-    min-height: 28px;
+    min-height: var(--fui-button-height-sm, $fui-button-height-sm);
     padding: 0 var(--fui-space-2, $fui-space-2);
     font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   }
@@ -127,7 +131,7 @@
 
 .size-md {
   .item {
-    min-height: 32px;
+    min-height: var(--fui-button-height-md, $fui-button-height-md);
     padding: 0 var(--fui-space-3, $fui-space-3);
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   }
@@ -135,7 +139,7 @@
 
 .size-lg {
   .item {
-    min-height: 40px;
+    min-height: var(--fui-button-height-lg, $fui-button-height-lg);
     padding: 0 var(--fui-space-4, $fui-space-4);
     font-size: var(--fui-font-size-base, $fui-font-size-base);
   }

package/src/index.ts

@@ -279,6 +279,7 @@ export {
   Fieldset,
   type FieldsetProps,
   type FieldsetLegendProps,
+  type FieldsetDescriptionProps,
 } from './components/Fieldset';
 
 // Form
@@ -334,6 +335,7 @@ export {
   type HeaderSearchProps,
   type HeaderActionsProps,
   type HeaderTriggerProps,
+  type HeaderMobileNavProps,
 } from './components/Header';
 
 // AppShell

package/src/styles/globals.scss

@@ -148,7 +148,10 @@ $fui-info: #3b82f6 !default;
   }
 
   :where(:focus-visible) {
-    outline: var(--fui-focus-ring-width, 2px) solid var(--fui-focus-ring-color, #18181b);
+    outline: 1px solid color-mix(in srgb, var(--fui-focus-ring-color, #18181b) 24%, transparent);
     outline-offset: var(--fui-focus-ring-offset, 2px);
+    box-shadow:
+      0 0 0 calc(var(--fui-focus-ring-width, 2px) + 1px) color-mix(in srgb, var(--fui-focus-ring-color, #18181b) 10%, transparent),
+      0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #18181b) 18%, transparent);
   }
 }

package/src/tokens/_mixins.scss

@@ -8,8 +8,9 @@
 @mixin focus-ring {
   outline: none;
   box-shadow:
-    0 0 0 var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) var(--fui-bg-primary, #{$fui-bg-primary}),
-    0 0 0 calc(var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) + var(--fui-focus-ring-width, #{$fui-focus-ring-width})) var(--fui-focus-ring-color, #{$fui-focus-ring-color});
+    0 0 0 1px color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 28%, transparent),
+    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px) color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 12%, transparent),
+    0 10px 24px -16px color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 32%, transparent);
 }
 
 // Reset button styles
@@ -139,6 +140,48 @@
   letter-spacing: 0.05em;
 }
 
+// Shared shell for field-like controls.
+@mixin field-shell {
+  background-color: var(--fui-field-bg, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid var(--fui-field-border, var(--fui-border-strong, #{$fui-border-strong}));
+  border-radius: var(--fui-radius-md, #{$fui-radius-md});
+  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}),
+    color var(--fui-transition-fast, #{$fui-transition-fast});
+
+  &:hover:not(:disabled):not([data-disabled]):not(:focus-visible) {
+    border-color: var(--fui-field-border-hover, var(--fui-text-tertiary, #{$fui-text-tertiary}));
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    background-color: var(--fui-field-bg-disabled, var(--fui-bg-tertiary, #{$fui-bg-tertiary}));
+    color: var(--fui-text-tertiary, #{$fui-text-tertiary});
+  }
+}
+
+@mixin field-shell-focus {
+  @include focus-ring;
+  border-color: var(
+    --fui-field-border-focus,
+    color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 20%, var(--fui-border-strong, #{$fui-border-strong}))
+  );
+}
+
+@mixin popup-item-selected {
+  background-color: var(--fui-field-selection-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+  color: var(--fui-field-selection-color, var(--fui-text-primary, #{$fui-text-primary}));
+  box-shadow: inset 0 0 0 1px var(--fui-field-selection-border, var(--fui-color-accent, #{$fui-color-accent}));
+}
+
+@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});
+}
+
 // Responsive breakpoint mixins (mobile-first, min-width)
 @mixin breakpoint-sm { @media (min-width: $fui-breakpoint-sm) { @content; } }
 @mixin breakpoint-md { @media (min-width: $fui-breakpoint-md) { @content; } }
@@ -240,12 +283,22 @@
   }
 }
 
+// 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, #{$fui-color-success}) 42%, transparent),
+    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px) color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 14%, transparent),
+    0 10px 24px -16px color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 28%, transparent);
+}
+
 // Focus ring for error states (e.g., invalid form fields)
 @mixin focus-ring-error {
   outline: none;
   box-shadow:
-    0 0 0 var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) var(--fui-bg-primary, #{$fui-bg-primary}),
-    0 0 0 calc(var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}) + var(--fui-focus-ring-width, #{$fui-focus-ring-width})) var(--fui-color-danger, #{$fui-color-danger});
+    0 0 0 1px color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 42%, transparent),
+    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px) color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 14%, transparent),
+    0 10px 24px -16px color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 28%, transparent);
 }
 
 // ============================================

package/src/tokens/_variables.scss

@@ -505,6 +505,19 @@ $fui-dark-tooltip-shadow:
     --fui-border-default: light-dark(#{$fui-border-default}, #{$fui-dark-border-default});
     --fui-border-strong: light-dark(#{$fui-border-strong}, #{$fui-dark-border-strong});
 
+    // Form chrome (derived from theme surfaces + seed-driven accent)
+    --fui-field-bg: color-mix(in srgb, var(--fui-bg-elevated) 92%, var(--fui-bg-primary));
+    --fui-field-bg-disabled: color-mix(in srgb, var(--fui-bg-tertiary) 88%, var(--fui-bg-primary));
+    --fui-field-border: color-mix(in srgb, var(--fui-border-strong) 78%, var(--fui-bg-primary));
+    --fui-field-border-hover: color-mix(in srgb, var(--fui-text-tertiary) 58%, var(--fui-border-strong));
+    --fui-field-border-focus: color-mix(in srgb, var(--fui-focus-ring-color) 18%, var(--fui-border-strong));
+    --fui-field-selection-bg: color-mix(in srgb, var(--fui-color-accent) 12%, var(--fui-bg-elevated));
+    --fui-field-selection-bg-hover: color-mix(in srgb, var(--fui-color-accent) 16%, var(--fui-bg-hover));
+    --fui-field-selection-border: color-mix(in srgb, var(--fui-color-accent) 38%, var(--fui-border));
+    --fui-field-selection-color: var(--fui-text-primary);
+    --fui-form-group-bg: color-mix(in srgb, var(--fui-bg-secondary) 58%, var(--fui-bg-primary));
+    --fui-form-group-border: color-mix(in srgb, var(--fui-border) 82%, transparent);
+
     // Shadows (not <color> type — light-dark() can't be used, handled in dark overrides)
     --fui-shadow-sm: #{$fui-shadow-sm};
     --fui-shadow-md: #{$fui-shadow-md};
@@ -559,7 +572,8 @@ $fui-dark-tooltip-shadow:
   }
 
   // Light mode explicit override (for manual toggle back to light)
-  :root[data-theme="light"] {
+  :root[data-theme="light"],
+  :root.light {
     color-scheme: light;
   }
 
@@ -694,6 +708,11 @@ $fui-dark-tooltip-shadow:
   // 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);
 }
 
 // Private mixin for dark mode token values