@fragments-sdk/ui 0.16.1 → 0.17.1

package/src/components/Input/Input.module.scss

@@ -7,30 +7,17 @@
 .input {
   @include text-base;
   @include interactive-base;
+  @include field-shell;
 
   display: block;
   width: 100%;
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
   }
 
-  &:hover:not(:disabled):not(:focus-visible) {
-    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
-  }
-
   &:focus-visible {
-    @include focus-ring;
-    border-color: var(--fui-color-accent, $fui-color-accent);
-  }
-
-  &:disabled,
-  &[data-disabled] {
-    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    @include field-shell-focus;
   }
 }
 
@@ -66,9 +53,17 @@
 
   &:focus-visible {
     border-color: var(--fui-color-danger, $fui-color-danger);
-    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);
+    @include focus-ring-error;
+  }
+}
+
+// Success state — green border for validated fields (DoorDash/Stocksy pattern)
+.success {
+  border-color: var(--fui-color-success, $fui-color-success);
+
+  &:focus-visible {
+    border-color: var(--fui-color-success, $fui-color-success);
+    @include focus-ring-success;
   }
 }
 
@@ -77,8 +72,14 @@
   color: var(--fui-color-danger, $fui-color-danger);
 }
 
+// Auto-detect success state via :has() — applies success color to helper
+.wrapper[data-success] .helper,
+.helperSuccess {
+  color: var(--fui-color-success, $fui-color-success);
+}
+
 // ============================================
-// Input with shortcut indicator
+// Input with adornments or shortcut indicator
 // ============================================
 
 .inputContainer {
@@ -92,6 +93,64 @@
   }
 }
 
+// Adornment container — wraps input with start/end adornments inside field-shell border
+.hasAdornment {
+  @include field-shell;
+
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: 0 var(--fui-space-3, $fui-space-3);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+
+  &:focus-within {
+    @include field-shell-focus;
+  }
+
+  // Strip the input's own shell when inside adornment container
+  .input {
+    border: none;
+    background: transparent;
+    padding: 0;
+    box-shadow: none;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  // Error state on adornment container
+  &:has(.error) {
+    border-color: var(--fui-color-danger, $fui-color-danger);
+
+    &:focus-within {
+      border-color: var(--fui-color-danger, $fui-color-danger);
+      @include focus-ring-error;
+    }
+  }
+
+  // Success state on adornment container
+  &:has(.success) {
+    border-color: var(--fui-color-success, $fui-color-success);
+
+    &:focus-within {
+      border-color: var(--fui-color-success, $fui-color-success);
+      @include focus-ring-success;
+    }
+  }
+}
+
+.adornment {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 // Kept as fallback for direct usage
 .hasShortcut {
   padding-right: var(--fui-space-12, 3rem);
@@ -104,18 +163,26 @@
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: calc(var(--fui-space-px, $fui-space-px) * 2);
-  padding:
-    calc(var(--fui-space-px, $fui-space-px) * 2)
-    calc(var(--fui-space-px, $fui-space-px) * 6);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-family: var(--fui-font-mono, $fui-font-mono);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  background: var(--fui-bg-subtle, $fui-bg-subtle);
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 var(--fui-space-1, $fui-space-1);
+  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  background: var(--fui-bg-elevated, $fui-bg-elevated);
   border: 1px solid var(--fui-border-default, $fui-border-default);
+  border-bottom-width: 2px;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  box-shadow:
+    inset 0 0.5px 0 color-mix(in srgb, white 6%, transparent);
   pointer-events: none;
   white-space: nowrap;
+  user-select: none;
 }
 
 // ============================================
@@ -136,6 +203,10 @@
   .input[aria-invalid] {
     border-color: var(--fui-color-danger, $fui-color-danger);
   }
+
+  .success {
+    border-color: var(--fui-color-success, $fui-color-success);
+  }
 }
 
 // ============================================

package/src/components/Input/index.tsx

@@ -29,12 +29,18 @@ export interface InputProps extends Omit<
   disabled?: boolean;
   /** Show error styling */
   error?: boolean;
+  /** Show success styling */
+  success?: boolean;
   /** Visible label text */
   label?: string;
   /** Whether the field is required */
   required?: boolean;
   /** Helper text shown below the input */
   helperText?: string;
+  /** Content rendered before the input (e.g., icon or prefix text) */
+  startAdornment?: React.ReactNode;
+  /** Content rendered after the input (e.g., icon or suffix text) */
+  endAdornment?: React.ReactNode;
   /** Keyboard shortcut hint displayed inside the input (e.g., "⌘K"). */
   shortcut?: string;
   /** Whether the shortcut should also register a global focus hotkey.
@@ -44,8 +50,8 @@ export interface InputProps extends Omit<
   onChange?: (value: string) => void;
   /** Alias for onChange (value-first callback) */
   onValueChange?: (value: string) => void;
-  onBlur?: () => void;
-  onFocus?: () => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   /** Props applied to the wrapper element */
   rootProps?: React.HTMLAttributes<HTMLDivElement>;
@@ -86,9 +92,12 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
       size = 'md',
       disabled = false,
       error = false,
+      success = false,
       required = false,
       label,
       helperText,
+      startAdornment,
+      endAdornment,
       shortcut,
       shortcutBehavior = 'display-only',
       onChange,
@@ -149,17 +158,24 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
       return () => document.removeEventListener('keydown', handler);
     }, [shortcut, shortcutBehavior]);
 
+    const hasAdornment = !!(startAdornment || endAdornment);
+
     const inputClasses = [
       styles.input,
       styles[size],
       error && styles.error,
+      success && styles.success,
       shortcut && styles.hasShortcut,
       inputClassName,
     ]
       .filter(Boolean)
       .join(' ');
 
-    const helperClasses = [styles.helper, error && styles.helperError]
+    const helperClasses = [
+      styles.helper,
+      error && styles.helperError,
+      success && styles.helperSuccess,
+    ]
       .filter(Boolean)
       .join(' ');
 
@@ -180,8 +196,8 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
         onChange?.(e.target.value);
         onValueChange?.(e.target.value);
       },
-      onBlur: () => onBlur?.(),
-      onFocus: () => onFocus?.(),
+      onBlur: (e: React.FocusEvent<HTMLInputElement>) => onBlur?.(e),
+      onFocus: (e: React.FocusEvent<HTMLInputElement>) => onFocus?.(e),
       onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => onKeyDown?.(e),
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
@@ -206,14 +222,16 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
       />
     );
 
-    const content = shortcut ? (
-      <div className={styles.inputContainer}>
-        {withFieldWrapper ? inputElement : fieldlessInputElement}
-        <kbd className={styles.shortcut}>{shortcut}</kbd>
+    const rawInput = withFieldWrapper ? inputElement : fieldlessInputElement;
+
+    const content = (hasAdornment || shortcut) ? (
+      <div className={[styles.inputContainer, hasAdornment && styles.hasAdornment].filter(Boolean).join(' ')}>
+        {startAdornment && <span className={styles.adornment}>{startAdornment}</span>}
+        {rawInput}
+        {endAdornment && <span className={styles.adornment}>{endAdornment}</span>}
+        {shortcut && <kbd className={styles.shortcut}>{shortcut}</kbd>}
       </div>
-    ) : (
-      withFieldWrapper ? inputElement : fieldlessInputElement
-    );
+    ) : rawInput;
 
     if (!withFieldWrapper) {
       return (
@@ -243,6 +261,7 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(
         {...rootProps}
         disabled={disabled}
         invalid={error}
+        data-success={success || undefined}
         className={[wrapperClasses, rootProps?.className].filter(Boolean).join(' ')}
         style={{ ...(rootProps?.style ?? {}), ...(style ?? {}) }}
       >

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

@@ -12,6 +12,7 @@
   min-width: 12rem;
   max-height: 320px;
   overflow-y: auto;
+  border-color: var(--fui-form-group-border, $fui-border);
 
   &:focus-visible {
     @include focus-ring;
@@ -38,11 +39,17 @@
 }
 
 .itemSelected {
-  background-color: var(--fui-bg-hover, $fui-bg-hover);
+  @include popup-item-selected;
 }
 
 .itemActive {
-  background-color: var(--fui-bg-hover, $fui-bg-hover);
+  &:not(.itemSelected) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+}
+
+.itemActive.itemSelected {
+  @include popup-item-selected;
 }
 
 .itemDisabled {

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -55,22 +55,24 @@
   width: 1rem;
   height: 1rem;
   margin-top: 0;
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+  background-color: var(--fui-field-bg, $fui-bg-elevated);
+  border: 1px solid var(--fui-field-border, $fui-border-strong);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   cursor: inherit;
 
   &:hover:not([data-disabled]) {
-    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
+    border-color: var(--fui-field-border-hover, $fui-text-tertiary);
   }
 
   &[data-checked] {
-    background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-    border-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);
+    box-shadow: inset 0 0 0 1px var(--fui-field-selection-border, $fui-color-accent);
   }
 
   &[data-checked]:hover:not([data-disabled]) {
-    border-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
+    border-color: var(--fui-field-selection-border, $fui-color-accent);
   }
 
   &[data-invalid] {

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

@@ -9,6 +9,8 @@
   @include button-reset;
   @include interactive-base;
   @include text-base;
+  @include field-shell;
+  @include control-size('md', 'input');
 
   display: inline-flex;
   align-items: center;
@@ -16,38 +18,20 @@
   gap: var(--fui-space-2, $fui-space-2);
   width: 100%;
   min-width: 10rem;
-  height: var(--fui-input-height, $fui-input-height);
-  padding: 0 var(--fui-space-3, $fui-space-3);
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
   text-align: left;
 
-  &:hover:not([data-disabled]) {
-    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
-  }
-
   &[data-popup-open] {
-    border-color: var(--fui-color-accent, $fui-color-accent);
-  }
-
-  &[data-disabled] {
-    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    border-color: var(--fui-field-border-focus, $fui-color-accent);
   }
 }
 
 // Trigger size variants
 .triggerSm {
-  height: var(--fui-input-height-sm, $fui-input-height-sm);
-  padding: 0 var(--fui-space-2, $fui-space-2);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include control-size('sm', 'input');
 }
 
 .triggerLg {
-  height: var(--fui-input-height-lg, $fui-input-height-lg);
-  padding: 0 var(--fui-space-4, $fui-space-4);
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
+  @include control-size('lg', 'input');
 }
 
 // Value display
@@ -99,6 +83,8 @@
   @include surface-elevated;
   @include popup-container;
 
+  border-color: var(--fui-form-group-border, $fui-border);
+
   // Item height derived from text-base font + vertical padding
   --_item-h: calc(
     var(--fui-font-size-sm, #{$fui-font-size-sm}) * var(--fui-line-height-normal, #{$fui-line-height-normal}) +
@@ -143,11 +129,10 @@
   }
 
   &[data-selected] {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    @include popup-item-selected;
 
     &[data-highlighted] {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+      background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
     }
   }
 
@@ -165,6 +150,7 @@
   width: 1rem;
   height: 1rem;
   margin-left: auto;
+  color: var(--fui-color-accent, $fui-color-accent);
 
   svg {
     width: 0.875rem;

package/src/components/Sidebar/Sidebar.module.scss

@@ -226,6 +226,7 @@
 
 .itemWrapper {
   list-style: none;
+  width: 100%;
 }
 
 .item {
@@ -235,8 +236,9 @@
 
   display: flex;
   align-items: center;
-  gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  width: 100%;
+  gap: var(--fui-sidebar-item-gap, var(--fui-space-2, $fui-space-2));
+  padding: var(--fui-sidebar-item-padding-y, var(--fui-space-1, $fui-space-1)) var(--fui-sidebar-item-padding-x, var(--fui-space-2, $fui-space-2));
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -635,8 +637,8 @@
 .skeletonItem {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  gap: var(--fui-sidebar-item-gap, var(--fui-space-2, $fui-space-2));
+  padding: var(--fui-sidebar-item-padding-y, var(--fui-space-1, $fui-space-1)) var(--fui-sidebar-item-padding-x, var(--fui-space-2, $fui-space-2));
   min-height: var(--fui-sidebar-item-height, $fui-sidebar-item-height);
 }
 

package/src/components/Slider/Slider.module.scss

@@ -39,7 +39,8 @@
   position: relative;
   height: var(--fui-slider-track-height, $fui-slider-track-height);
   width: 100%;
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  background-color: var(--fui-form-group-bg, $fui-bg-secondary);
+  box-shadow: inset 0 0 0 1px var(--fui-form-group-border, $fui-border);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   cursor: pointer;
 
@@ -52,7 +53,7 @@
 .indicator {
   position: absolute;
   height: 100%;
-  background-color: var(--fui-color-accent, $fui-color-accent);
+  background-color: var(--fui-field-selection-border, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 }
 
@@ -63,20 +64,21 @@
   width: var(--fui-slider-thumb-size, $fui-slider-thumb-size);
   height: var(--fui-slider-thumb-size, $fui-slider-thumb-size);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  border: var(--fui-slider-thumb-border, $fui-slider-thumb-border) solid var(--fui-color-accent, $fui-color-accent);
+  border: 1px solid var(--fui-field-selection-border, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
   cursor: grab;
   transition:
-    transform 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);
 
   &:hover {
-    transform: scale(1.1);
+    border-color: color-mix(in srgb, var(--fui-color-accent, $fui-color-accent) 58%, transparent);
   }
 
   &:active {
     cursor: grabbing;
-    transform: scale(1.05);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
   }
 
   &:focus-visible {
@@ -107,25 +109,13 @@
   white-space: nowrap;
   padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
-  background: var(--fui-tooltip-bg, $fui-tooltip-bg);
-  color: var(--fui-tooltip-text, $fui-tooltip-text);
+  background: var(--fui-form-group-bg, $fui-bg-secondary);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  border: 1px solid var(--fui-form-group-border, $fui-border);
   font-family: var(--fui-font-mono, $fui-font-mono);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   line-height: 1;
-  box-shadow: var(--fui-tooltip-shadow, $fui-tooltip-shadow);
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid var(--fui-tooltip-bg, $fui-tooltip-bg);
-  }
+  box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
 }
 
 // ============================================

package/src/components/Textarea/Textarea.module.scss

@@ -7,14 +7,12 @@
 .textarea {
   @include text-base;
   @include interactive-base;
+  @include field-shell;
 
   display: block;
   width: 100%;
   min-height: var(--fui-input-height, $fui-input-height);
   padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
   font-family: inherit;
 
@@ -22,19 +20,8 @@
     color: var(--fui-text-tertiary, $fui-text-tertiary);
   }
 
-  &:hover:not(:disabled):not(:focus-visible) {
-    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
-  }
-
   &:focus-visible {
-    @include focus-ring;
-    border-color: var(--fui-color-accent, $fui-color-accent);
-  }
-
-  &:disabled,
-  &[data-disabled] {
-    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    @include field-shell-focus;
   }
 }
 
@@ -77,9 +64,17 @@
 
   &:focus-visible {
     border-color: var(--fui-color-danger, $fui-color-danger);
-    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);
+    @include focus-ring-error;
+  }
+}
+
+// Success state — green border for validated fields
+.success {
+  border-color: var(--fui-color-success, $fui-color-success);
+
+  &:focus-visible {
+    border-color: var(--fui-color-success, $fui-color-success);
+    @include focus-ring-success;
   }
 }
 
@@ -88,6 +83,38 @@
   color: var(--fui-color-danger, $fui-color-danger);
 }
 
+// Auto-detect success state
+.wrapper[data-success] .helper,
+.helperSuccess {
+  color: var(--fui-color-success, $fui-color-success);
+}
+
+// Footer row — helper + character counter side by side
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--fui-space-2, $fui-space-2);
+  min-height: calc(var(--fui-font-size-xs, #{$fui-font-size-xs}) * var(--fui-line-height-normal, #{$fui-line-height-normal}) + var(--fui-space-1, #{$fui-space-1}));
+
+  &:empty {
+    display: none;
+  }
+}
+
+// Character counter
+.charCount {
+  @include helper-text;
+  margin-top: var(--fui-space-1, $fui-space-1);
+  margin-left: auto;
+  font-family: var(--fui-font-mono, $fui-font-mono);
+  white-space: nowrap;
+}
+
+.charCountOver {
+  color: var(--fui-color-danger, $fui-color-danger);
+}
+
 // ============================================
 // Accessibility: High Contrast Mode
 // ============================================
@@ -106,6 +133,10 @@
   .textarea[aria-invalid] {
     border-color: var(--fui-color-danger, $fui-color-danger);
   }
+
+  .success {
+    border-color: var(--fui-color-success, $fui-color-success);
+  }
 }
 
 // ============================================