@unisane/ui 0.1.1 → 0.1.2-next.20261102.1

package/registry/components/combobox.tsx

@@ -8,8 +8,13 @@ import { Icon } from '@/components/ui/icon';
 import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
 import { useControllableState } from '@/lib/use-controllable-state';
 import { fieldContainerVariants, getFieldAffixClasses } from '@/lib/field-shell';
-import { getPortalLayerStyle } from '@/lib/portal-layer';
+import {
+  getPortalContainer,
+  getPortalLayerStyle,
+  observePortalAnchorMotion,
+} from '@/lib/portal-layer';
 import { Ripple } from '@/components/ui/ripple';
+import { Button } from '@/components/ui/button';
 import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
 
 export type ComboboxOption = {
@@ -28,6 +33,14 @@ export type ComboboxProps = {
   onSearchChange?: (query: string) => void;
   highlightSelected?: boolean;
   options: ComboboxOption[];
+  /** Disable local label filtering for server-filtered results. */
+  filterOptions?: boolean;
+  loading?: boolean;
+  error?: string;
+  onRetry?: () => void;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  emptyText?: string;
   placeholder?: string;
   label?: string;
   size?: FieldSize;
@@ -49,6 +62,13 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       onSearchChange,
       highlightSelected = true,
       options,
+      filterOptions = true,
+      loading = false,
+      error,
+      onRetry,
+      hasMore = false,
+      onLoadMore,
+      emptyText = 'No results found',
       placeholder = 'Search or select...',
       label,
       size = 'md',
@@ -65,6 +85,17 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
     const comboboxRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
     const dropdownRef = useRef<HTMLDivElement>(null);
+    const footerActionRef = useRef<HTMLButtonElement | null>(null);
+    const setFooterActionRef = useCallback((node: HTMLButtonElement | null) => {
+      // The last result page removes the paging action. Keep keyboard users
+      // in the picker rather than leaving focus on document.body.
+      if (!node && footerActionRef.current === document.activeElement) {
+        (
+          inputRef.current ?? comboboxRef.current?.querySelector<HTMLElement>('[role="combobox"]')
+        )?.focus();
+      }
+      footerActionRef.current = node;
+    }, []);
     const blurTimeoutRef = useRef<number | null>(null);
     const fieldSize = getFieldSizeStyles(size);
     const listboxId = useId();
@@ -123,9 +154,9 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
 
     const selectedOption = options.find((option) => option.value === selectedValue);
 
-    const filteredOptions = options.filter((option) =>
-      option.label.toLowerCase().includes(searchValue.toLowerCase()),
-    );
+    const filteredOptions = filterOptions
+      ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()))
+      : options;
 
     const updateDropdownPosition = useCallback(() => {
       if (!comboboxRef.current || typeof window === 'undefined') return;
@@ -180,11 +211,13 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       setIsPositioned(false);
       updatePosition();
       const raf = window.requestAnimationFrame(updatePosition);
+      const stopMotion = observePortalAnchorMotion(comboboxRef.current, updatePosition);
       window.addEventListener('scroll', updatePosition, true);
       window.addEventListener('resize', updatePosition);
 
       return () => {
         window.cancelAnimationFrame(raf);
+        stopMotion();
         window.removeEventListener('scroll', updatePosition, true);
         window.removeEventListener('resize', updatePosition);
       };
@@ -228,7 +261,10 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
         clearTimeout(blurTimeoutRef.current);
       }
       blurTimeoutRef.current = window.setTimeout(() => {
-        if (!comboboxRef.current?.contains(document.activeElement)) {
+        if (
+          !comboboxRef.current?.contains(document.activeElement) &&
+          !dropdownRef.current?.contains(document.activeElement)
+        ) {
           setOpenState(false);
           setIsSearching(false);
           setSearchValue('');
@@ -242,6 +278,17 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
         if (disabled) return;
 
         switch (event.key) {
+          case 'Tab': {
+            const action =
+              dropdownRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)');
+            if (isOpen && !event.shiftKey && action) {
+              event.preventDefault();
+              action.focus();
+            } else {
+              setOpenState(false);
+            }
+            break;
+          }
           case 'ArrowDown':
             event.preventDefault();
             if (!isOpen) {
@@ -332,8 +379,8 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
 
           <div
             className={cn(
-              'flex h-full min-w-0 items-center',
-              fieldSize.horizontalPadding,
+              'flex h-full min-w-0 flex-1 items-center',
+              fieldSize.leadingPadding,
               size === 'lg' ? 'gap-3' : 'gap-2',
             )}
           >
@@ -346,7 +393,13 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                   value={isSearching ? searchValue : selectedOption ? selectedOption.label : ''}
                   onChange={(event) => handleInputChange(event.target.value)}
                   onKeyDown={handleKeyDown}
-                  onFocus={() => {
+                  onClick={() => {
+                    // Selection leaves focus on the input. A second click must
+                    // reopen its choices without requiring a blur/focus cycle.
+                    if (!disabled && !isOpen) setOpenState(true);
+                  }}
+                  onFocus={(event) => {
+                    if (dropdownRef.current?.contains(event.relatedTarget as Node | null)) return;
                     if (!disabled) {
                       setOpenState(true);
                       setIsSearching(true);
@@ -405,7 +458,7 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
             >
               <Icon
                 symbol="arrow_drop_down"
-                size="sm"
+                size={size === 'lg' ? 'md' : 'sm'}
                 className={cn(
                   'duration-short ease-standard transition-transform',
                   isOpen && 'rotate-180',
@@ -423,7 +476,7 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                 ref={dropdownRef}
                 className={cn(
                   'bg-surface border-outline-soft shadow-2 z-[var(--z-popover,2000)] overflow-y-auto rounded-sm border',
-                  portal ? 'fixed' : 'absolute top-[calc(100%+var(--unit))] right-0 left-0',
+                  portal ? 'fixed' : 'absolute left-0 right-0 top-[calc(100%+var(--unit))]',
                 )}
                 style={
                   portal
@@ -437,11 +490,15 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                       }
                     : undefined
                 }
-                role="listbox"
-                id={listboxId}
-                aria-label={label || 'Options'}
+                onBlur={handleBlur}
               >
-                <div className="py-1">
+                <div
+                  className="py-1"
+                  role="listbox"
+                  id={listboxId}
+                  aria-label={label || 'Options'}
+                  aria-busy={loading}
+                >
                   {filteredOptions.length > 0 ? (
                     filteredOptions.map((option, index) => (
                       <div
@@ -458,7 +515,7 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                           activeIndex === index &&
                             (!highlightSelected || selectedValue !== option.value) &&
                             'bg-state-hover',
-                          option.disabled && 'cursor-not-allowed opacity-38',
+                          option.disabled && 'opacity-38 cursor-not-allowed',
                         )}
                         onClick={() => handleSelect(option)}
                         role="option"
@@ -474,7 +531,7 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                         )}
                       </div>
                     ))
-                  ) : (
+                  ) : !loading && !error ? (
                     <div
                       className={cn(
                         'text-on-surface-variant font-medium',
@@ -483,15 +540,57 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                         fieldSize.optionPaddingX,
                       )}
                     >
-                      No results found
+                      {emptyText}
                     </div>
-                  )}
+                  ) : null}
                 </div>
+                {(loading || error || (hasMore && onLoadMore)) && (
+                  <div
+                    className={cn('border-outline-soft border-t py-2', fieldSize.optionPaddingX)}
+                  >
+                    {loading && (
+                      <p role="status" className="text-on-surface-variant text-label-medium">
+                        Loading results…
+                      </p>
+                    )}
+                    {error && (
+                      <p role="alert" className="text-error text-label-medium">
+                        {error}
+                      </p>
+                    )}
+                    {((error && onRetry) || (!error && hasMore && onLoadMore)) && (
+                      <Button
+                        ref={setFooterActionRef}
+                        type="button"
+                        variant="text"
+                        size={size}
+                        aria-disabled={loading || undefined}
+                        onKeyDown={(event) => {
+                          if (event.key === 'Tab') {
+                            if (event.shiftKey) event.preventDefault();
+                            (
+                              inputRef.current ??
+                              comboboxRef.current?.querySelector<HTMLElement>('[role="combobox"]')
+                            )?.focus();
+                            // Resume the form's tab order from the trigger, not
+                            // the portal at the end of document.body.
+                            if (!event.shiftKey) setOpenState(false);
+                          }
+                        }}
+                        onClick={() => {
+                          if (!loading) (error ? onRetry : onLoadMore)?.();
+                        }}
+                      >
+                        {error ? 'Try again' : 'Load more results'}
+                      </Button>
+                    )}
+                  </div>
+                )}
               </div>
             );
 
             if (portal && typeof document !== 'undefined') {
-              return createPortal(dropdown, document.body);
+              return createPortal(dropdown, getPortalContainer(comboboxRef.current));
             }
 
             return dropdown;

package/registry/components/dialog.tsx

@@ -127,7 +127,12 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
           'fixed inset-0 z-[var(--z-modal,3000)] flex items-center justify-center',
           isFullscreenMobile ? 'medium:p-10 p-0' : 'medium:p-10 p-6',
         )}
-        role="presentation"
+        role={role}
+        data-unisane-modal-root=""
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-labelledby={title ? titleId : undefined}
+        aria-describedby={describedBy}
       >
         <div
           className="bg-scrim animate-fade-enter absolute inset-0"
@@ -137,11 +142,6 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
 
         <Surface
           ref={setRefs}
-          role={role}
-          aria-modal="true"
-          aria-label={ariaLabel}
-          aria-labelledby={title ? titleId : undefined}
-          aria-describedby={describedBy}
           tabIndex={-1}
           tone="surface"
           elevation={5}
@@ -177,7 +177,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
                     variant="titleLarge"
                     as="div"
                     id={titleId}
-                    className="text-on-surface leading-tight wrap-break-word"
+                    className="text-on-surface wrap-break-word leading-tight"
                   >
                     {title}
                   </Text>
@@ -187,7 +187,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
                     variant="bodySmall"
                     as="div"
                     id={descriptionId}
-                    className="text-on-surface-variant leading-relaxed wrap-break-word"
+                    className="text-on-surface-variant wrap-break-word leading-relaxed"
                   >
                     {description}
                   </Text>

package/registry/components/dropdown-menu.tsx

@@ -4,7 +4,11 @@ import React, { useState, useRef, useEffect, useLayoutEffect, useId, useMemo } f
 import { createPortal } from 'react-dom';
 import { cn, Slot } from '@/lib/utils';
 import { useControllableState } from '@/lib/use-controllable-state';
-import { getPortalLayerStyle } from '@/lib/portal-layer';
+import {
+  getPortalContainer,
+  getPortalLayerStyle,
+  observePortalAnchorMotion,
+} from '@/lib/portal-layer';
 import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
 import { Icon } from '@/components/ui/icon';
 import { Menu, MenuItem, MenuDivider, MenuCheckboxItem, MenuRadioItem } from '@/primitives/menu';
@@ -407,10 +411,12 @@ export const DropdownMenuContent: React.FC<DropdownMenuContentProps> = ({
     updatePosition();
 
     if (portal) {
+      const stopMotion = observePortalAnchorMotion(triggerRef.current, updatePosition);
       window.addEventListener('scroll', updatePosition, true);
       window.addEventListener('resize', updatePosition);
 
       return () => {
+        stopMotion();
         window.removeEventListener('scroll', updatePosition, true);
         window.removeEventListener('resize', updatePosition);
       };
@@ -559,7 +565,7 @@ export const DropdownMenuContent: React.FC<DropdownMenuContentProps> = ({
   );
 
   if (portal && typeof document !== 'undefined') {
-    return createPortal(content, document.body);
+    return createPortal(content, getPortalContainer(triggerRef.current));
   }
 
   return content;
@@ -823,10 +829,12 @@ export const DropdownMenuSubContent: React.FC<DropdownMenuSubContentProps> = ({
     setIsPositioned(false);
     updatePosition();
 
+    const stopMotion = observePortalAnchorMotion(triggerRef.current, updatePosition);
     window.addEventListener('scroll', updatePosition, true);
     window.addEventListener('resize', updatePosition);
 
     return () => {
+      stopMotion();
       window.removeEventListener('scroll', updatePosition, true);
       window.removeEventListener('resize', updatePosition);
     };
@@ -872,7 +880,7 @@ export const DropdownMenuSubContent: React.FC<DropdownMenuSubContentProps> = ({
   );
 
   if (typeof document !== 'undefined') {
-    return createPortal(content, document.body);
+    return createPortal(content, getPortalContainer(triggerRef.current));
   }
 
   return content;

package/registry/components/month-picker.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom';
 import { cn } from '@/lib/utils';
 import { type FieldSize } from '@/lib/field-size';
-import { type FieldShellVariant } from '@/lib/field-shell';
+import { type FieldLabelPlacement, type FieldShellVariant } from '@/lib/field-shell';
 import { getPortalLayerStyle } from '@/lib/portal-layer';
 import { useAnchoredOverlayPosition } from '@/lib/use-anchored-overlay-position';
 import { useControllableState } from '@/lib/use-controllable-state';
@@ -31,6 +31,7 @@ const MONTHS = [
 
 export type MonthPickerProps = {
   variant?: FieldShellVariant;
+  labelPlacement?: FieldLabelPlacement;
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
@@ -60,6 +61,7 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
   helperText,
   className,
   variant = 'outlined',
+  labelPlacement = 'floating',
   min,
   max,
   size = 'md',
@@ -208,6 +210,7 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
         {...(error ? { errorMessage: helperText } : { description: helperText })}
         invalid={error}
         label={label}
+        labelPlacement={labelPlacement}
         size={size}
         trailingIcon={pickerButton}
         value={inputValue}
@@ -287,11 +290,11 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
                         aria-label={`${month} ${viewYear}`}
                         className={cn(
                           'text-label-large relative min-h-10 overflow-hidden rounded-sm px-2 transition-colors',
-                          'focus-visible:ring-focus-ring focus-visible:ring-2 focus-visible:outline-none',
+                          'focus-visible:ring-focus-ring focus-visible:outline-none focus-visible:ring-2',
                           selected
                             ? 'bg-primary text-on-primary'
                             : 'text-on-surface hover:bg-state-hover',
-                          disabledMonth && 'pointer-events-none cursor-not-allowed opacity-38',
+                          disabledMonth && 'opacity-38 pointer-events-none cursor-not-allowed',
                         )}
                         onClick={() => selectMonth(monthIndex)}
                       >

package/registry/components/popover.tsx

@@ -2,7 +2,11 @@
 
 import React, { useRef, useId, useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { getPortalLayerStyle } from '@/lib/portal-layer';
+import {
+  getPortalContainer,
+  getPortalLayerStyle,
+  observePortalAnchorMotion,
+} from '@/lib/portal-layer';
 import { cn, focusRing, Slot } from '@/lib/utils';
 import { useControllableState } from '@/lib/use-controllable-state';
 import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
@@ -127,10 +131,13 @@ export const Popover: React.FC<PopoverProps> = ({
 
     if (!portal) return;
 
+    const stopMotion = observePortalAnchorMotion(triggerRef.current, updatePosition);
+
     window.addEventListener('scroll', updatePosition, true);
     window.addEventListener('resize', updatePosition);
 
     return () => {
+      stopMotion();
       window.removeEventListener('scroll', updatePosition, true);
       window.removeEventListener('resize', updatePosition);
     };
@@ -284,7 +291,7 @@ function renderPopoverContent({
   );
 
   if (portal && typeof document !== 'undefined') {
-    return createPortal(popover, document.body);
+    return createPortal(popover, getPortalContainer(trigger));
   }
 
   return popover;

package/registry/components/select-field.tsx

@@ -8,6 +8,8 @@ import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
 import {
   getFieldHelperTextClasses,
   getFieldLabelClasses,
+  getStackedFieldLabelClasses,
+  type FieldLabelPlacement,
   type FieldShellVariant,
 } from '@/lib/field-shell';
 import { useControllableState } from '@/lib/use-controllable-state';
@@ -50,6 +52,7 @@ type SelectFieldCommonProps = {
   portal?: boolean;
   size?: FieldSize;
   variant?: FieldShellVariant;
+  labelPlacement?: FieldLabelPlacement;
   className?: string;
   triggerClassName?: string;
   contentClassName?: string;
@@ -86,6 +89,7 @@ export const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>
       triggerClassName,
       value,
       variant = 'outlined',
+      labelPlacement = 'floating',
     },
     ref,
   ) => {
@@ -109,10 +113,23 @@ export const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>
       onChange: onOpenChange,
     });
     const isOpen = openState ?? false;
-    const isFloating = hideLabel || isOpen || Boolean(selectedValue);
+    const isFloating =
+      labelPlacement === 'stacked' || hideLabel || isOpen || Boolean(selectedValue);
 
     return (
       <Field className={className} invalid={resolvedInvalid}>
+        {label && labelPlacement === 'stacked' ? (
+          <FieldLabel
+            id={labelId}
+            htmlFor={fieldId}
+            required={required}
+            className={
+              hideLabel ? 'sr-only' : getStackedFieldLabelClasses(size, resolvedInvalid, disabled)
+            }
+          >
+            {label}
+          </FieldLabel>
+        ) : null}
         <Select
           value={selectedValue}
           onValueChange={setSelectedValue}
@@ -139,7 +156,7 @@ export const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>
                   'pointer-events-none flex h-full min-w-0 items-center',
                   fieldSize.horizontalPadding,
                   fieldSize.valueText,
-                  variant === 'filled' && label
+                  variant === 'filled' && labelPlacement === 'floating' && label
                     ? cn('items-end', fieldSize.filledDisplayPadding)
                     : '',
                 )}
@@ -147,7 +164,7 @@ export const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>
                 <SelectValue placeholder={isFloating || !label ? placeholder : undefined} />
               </span>
             </SelectTrigger>
-            {label ? (
+            {label && labelPlacement === 'floating' ? (
               <FieldLabel
                 id={labelId}
                 htmlFor={fieldId}
@@ -162,7 +179,9 @@ export const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>
                         error: resolvedInvalid,
                         active: isOpen,
                         floatingClassName:
-                          variant === 'filled' ? fieldSize.filledDisplayFloatingLabel : undefined,
+                          variant === 'filled' && labelPlacement === 'floating'
+                            ? fieldSize.filledDisplayFloatingLabel
+                            : undefined,
                       })
                 }
               >
@@ -189,11 +208,17 @@ export const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>
           </SelectContent>
         </Select>
         {errorMessage ? (
-          <FieldError id={errorId} className={getFieldHelperTextClasses(size, true)}>
+          <FieldError
+            id={errorId}
+            className={getFieldHelperTextClasses(size, true, labelPlacement)}
+          >
             {errorMessage}
           </FieldError>
         ) : description ? (
-          <FieldDescription id={descriptionId} className={getFieldHelperTextClasses(size)}>
+          <FieldDescription
+            id={descriptionId}
+            className={getFieldHelperTextClasses(size, false, labelPlacement)}
+          >
             {description}
           </FieldDescription>
         ) : null}

package/registry/components/select.tsx

@@ -5,7 +5,11 @@ import { createPortal } from 'react-dom';
 import { cn } from '@/lib/utils';
 import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
 import { fieldContainerVariants, type FieldShellVariant } from '@/lib/field-shell';
-import { getPortalLayerStyle } from '@/lib/portal-layer';
+import {
+  getPortalContainer,
+  getPortalLayerStyle,
+  observePortalAnchorMotion,
+} from '@/lib/portal-layer';
 import { useControllableState } from '@/lib/use-controllable-state';
 import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
 import { Icon } from '@/components/ui/icon';
@@ -250,7 +254,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
         <div
           {...props}
           ref={rootRef}
-          className={cn('relative inline-flex w-full min-w-40 flex-col', className)}
+          className={cn('relative inline-flex w-full min-w-0 flex-col', className)}
           data-disabled={disabled || undefined}
           data-state={isOpen ? 'open' : 'closed'}
         >
@@ -355,7 +359,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         data-state={context.open ? 'open' : 'closed'}
         disabled={resolvedDisabled}
         className={cn(
-          'group relative flex w-full cursor-pointer items-center transition-colors select-none',
+          'group relative flex w-full cursor-pointer select-none items-center transition-colors',
           fieldSize.containerHeight,
           fieldContainerVariants({ variant, error: invalid, disabled: resolvedDisabled }),
           'focus-within:ring-0',
@@ -375,18 +379,23 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         {variant === 'filled' ? (
           <span
             className={cn(
-              'duration-snappy absolute right-0 bottom-[calc(var(--unit)*-0.25)] left-0 h-0.5 origin-center scale-x-0 transition-transform ease-out',
+              'duration-snappy absolute bottom-[calc(var(--unit)*-0.25)] left-0 right-0 h-0.5 origin-center scale-x-0 transition-transform ease-out',
               invalid ? 'bg-error scale-x-100' : 'bg-primary',
               context.open && 'scale-x-100',
             )}
           />
         ) : null}
         <span className="min-w-0 flex-1 text-left">{children}</span>
-        <span className={cn('text-on-surface-variant shrink-0', fieldSize.chevronOffset)}>
+        <span
+          className={cn(
+            'text-on-surface-variant flex shrink-0 items-center',
+            fieldSize.trailingPadding,
+          )}
+        >
           {trailingIcon ?? (
             <Icon
               symbol="arrow_drop_down"
-              size={size === 'sm' ? 'sm' : 'md'}
+              size={size === 'lg' ? 'md' : 'sm'}
               className={cn(
                 'duration-short ease-standard transition-transform',
                 context.open && 'rotate-180',
@@ -504,14 +513,16 @@ export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps
       };
       update();
       const frame = window.requestAnimationFrame(update);
+      const stopMotion = observePortalAnchorMotion(context.triggerRef.current, update);
       window.addEventListener('scroll', update, true);
       window.addEventListener('resize', update);
       return () => {
         window.cancelAnimationFrame(frame);
+        stopMotion();
         window.removeEventListener('scroll', update, true);
         window.removeEventListener('resize', update);
       };
-    }, [context.open, portal, updatePosition]);
+    }, [context.open, context.triggerRef, portal, updatePosition]);
 
     useOverlayBehavior({
       open: context.open,
@@ -543,7 +554,7 @@ export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps
           portal
             ? 'fixed'
             : cn(
-                'absolute right-0 left-0',
+                'absolute left-0 right-0',
                 position.direction === 'up'
                   ? 'bottom-[calc(100%+var(--unit))]'
                   : 'top-[calc(100%+var(--unit))]',
@@ -569,7 +580,7 @@ export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps
     );
 
     return portal && context.open && typeof document !== 'undefined'
-      ? createPortal(content, document.body)
+      ? createPortal(content, getPortalContainer(context.triggerRef.current))
       : content;
   },
 );
@@ -629,10 +640,10 @@ export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
         data-highlighted={highlighted || undefined}
         data-state={selected ? 'checked' : 'unchecked'}
         className={cn(
-          'text-label-medium relative flex min-h-[calc(var(--unit)*10)] cursor-pointer items-center rounded-xs py-2 pr-[calc(var(--unit)*10)] pl-3 font-medium transition-colors outline-none',
+          'text-label-medium rounded-xs relative flex min-h-[calc(var(--unit)*10)] cursor-pointer items-center py-2 pl-3 pr-[calc(var(--unit)*10)] font-medium outline-none transition-colors',
           'hover:bg-state-hover data-[highlighted=true]:bg-state-hover',
           selected && 'bg-state-selected text-on-surface',
-          resolvedDisabled && 'cursor-not-allowed opacity-38',
+          resolvedDisabled && 'opacity-38 cursor-not-allowed',
           className,
         )}
         onClick={(event) => {