@react-spectrum/s2 3.0.0-nightly-a626c2596-240926 → 3.0.0-nightly-d57bd8d90-240927

package/src/Link.tsx

@@ -13,9 +13,9 @@
 import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {focusRing, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {SkeletonContext, useSkeletonText} from './Skeleton';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';

package/src/Menu.tsx

@@ -26,10 +26,10 @@ import {
   Separator,
   SeparatorProps
 } from 'react-aria-components';
-import {baseColor, edgeToText, fontRelative, size, space, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};
 import {box, iconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
 import {createContext, forwardRef, JSX, ReactNode, useContext, useRef} from 'react';

package/src/Meter.tsx

@@ -20,7 +20,7 @@ import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {size, style} from '../style' with {type: 'macro'};
 import {SkeletonWrapper} from './Skeleton';
 import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';

package/src/Modal.tsx

@@ -16,7 +16,7 @@ import {DOMRef} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 
 interface ModalProps extends ModalOverlayProps {

package/src/NumberField.tsx

@@ -21,7 +21,7 @@ import {
   Text,
   useContextProps
 } from 'react-aria-components';
-import {baseColor, size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, size, style} from '../style' with {type: 'macro'};
 import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import Dash from '../ui-icons/Dash';
@@ -49,7 +49,7 @@ export interface NumberFieldProps extends
   /**
    * The size of the NumberField.
    *
-   * @default "M"
+   * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL'
 }

package/src/Picker.tsx

@@ -27,7 +27,7 @@ import {
   SectionProps,
   SelectValue
 } from 'react-aria-components';
-import {baseColor, edgeToText, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {
   checkmark,
@@ -43,7 +43,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   FieldErrorIcon,
   FieldLabel,
@@ -93,13 +93,13 @@ export interface PickerProps<T extends object> extends
     /**
      * Direction the menu will render relative to the Picker.
      *
-     * @default "bottom"
+     * @default 'bottom'
      */
     direction?: 'bottom' | 'top',
     /**
      * Alignment of the menu relative to the input target.
      *
-     * @default "start"
+     * @default 'start'
      */
     align?: 'start' | 'end',
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */

package/src/Popover.tsx

@@ -23,7 +23,7 @@ import {DOMRef} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {mergeStyles} from '../style/runtime';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 

package/src/ProgressBar.tsx

@@ -22,7 +22,7 @@ import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {mergeStyles} from '../style/runtime';
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {size, style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 

package/src/ProgressCircle.tsx

@@ -13,9 +13,9 @@
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -45,8 +45,7 @@ const wrapper = style<ProgressCircleStyleProps>({
       L: 64
     }
   },
-  aspectRatio: 'square',
-  display: 'inline-block'
+  aspectRatio: 'square'
 }, getAllowedOverrides({height: true}));
 
 const track = style<ProgressCircleStyleProps>({
@@ -73,7 +72,10 @@ const fill = style<ProgressCircleStyleProps>({
   transformOrigin: 'center'
 });
 
-export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}
+export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight
+}
 
 const rotationAnimation = keyframes(`
   0% {

package/src/Provider.tsx

@@ -16,7 +16,7 @@ import {createContext, JSX, ReactNode, useContext} from 'react';
 import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};
 import {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';
 import {mergeStyles} from '../style/runtime';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 
 export interface ProviderProps extends UnsafeStyles {

package/src/Radio.tsx

@@ -15,12 +15,12 @@ import {
   RadioProps as AriaRadioProps,
   RadioRenderProps
 } from 'react-aria-components';
-import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {FocusableRef} from '@react-types/shared';
-import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {forwardRef, ReactNode, useContext, useRef} from 'react';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 

package/src/RadioGroup.tsx

@@ -20,7 +20,7 @@ import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type:
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 

package/src/SearchField.tsx

@@ -22,7 +22,7 @@ import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef}
 import {createFocusableRef} from '@react-spectrum/utils';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText, Input} from './Field';
-import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {fontRelative, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';

package/src/SegmentedControl.tsx

@@ -10,20 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
-import {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';
-import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {focusRing, size, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {Text, TextContext} from './Content';
 import {useDOMRef, useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{
+export interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {
   /**
    * The content to display in the segmented control.
    */
@@ -32,16 +32,22 @@ export interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly
    * Whether the segmented control is disabled.
    */
   isDisabled?: boolean,
-  /**
-   * Defines a string value that labels the current element.
-   */
-  'aria-label': string
+  /** The id of the currently selected item (controlled). */
+  selectedKey?: string | null,
+  /** The id of the initial selected item (uncontrolled). */
+  defaultSelectedKey?: string,
+  /** Handler that is called when the selection changes. */
+  onSelectionChange?: (id: string) => void
 }
-export interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {
+export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {
   /**
-   * The content to display in the control item.
+   * The content to display in the segmented control item.
    */
-  children: ReactNode
+  children: ReactNode,
+  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */
+  id: string,
+  /** Whether the item is disabled or not. */
+  isDisabled?: boolean
 }
 
 export const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);
@@ -135,8 +141,9 @@ const InternalSegmentedControlContext = createContext<InternalSegmentedControlCo
 function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);
   let {
-    defaultValue,
-    value
+    defaultSelectedKey,
+    selectedKey,
+    onSelectionChange
   } = props;
   let domRef = useDOMRef(ref);
 
@@ -148,21 +155,23 @@ function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivEleme
       prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
     }
     
-    if (props.onChange) {
-      props.onChange(value);
+    if (onSelectionChange) {
+      onSelectionChange(value);
     }
   };
 
   return (
     <RadioGroup 
       {...props}
+      value={selectedKey}
+      defaultValue={defaultSelectedKey}
       ref={domRef}
       orientation="horizontal"
       style={props.UNSAFE_style}
       onChange={onChange}
       className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}
       aria-label={props['aria-label']}>
-      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>
+      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>
         {props.children}
       </DefaultSelectionTracker>
     </RadioGroup>
@@ -197,7 +206,7 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
   let divRef = useRef<HTMLDivElement>(null);
   let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);
   let state = useContext(RadioGroupStateContext);
-  let isSelected = props.value === state?.selectedValue;
+  let isSelected = props.id === state?.selectedValue;
   // do not apply animation if a user has the prefers-reduced-motion setting
   let isReduced = false;
   if (window?.matchMedia) {
@@ -205,7 +214,7 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
   }
 
   useLayoutEffect(() => {
-    register?.(props.value);
+    register?.(props.id);
   }, []);
 
   useLayoutEffect(() => {
@@ -231,7 +240,8 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
 
   return (
     <Radio 
-      {...props} 
+      {...props}
+      value={props.id}
       ref={domRef} 
       inputRef={inputRef}
       style={props.UNSAFE_style}
@@ -259,13 +269,13 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
 }
 
 /**
- * A control items represents an individual control within a segmented control.
+ * A SegmentedControlItem represents an option within a SegmentedControl.
  */
 const _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);
 export {_SegmentedControlItem as SegmentedControlItem};
 
 /**
- * A segmented control is a mutually exclusive group of buttons, with or without a track.
+ * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
  */
 const _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);
 export {_SegmentedControl as SegmentedControl};

package/src/Skeleton.tsx

@@ -15,7 +15,7 @@ import {colorToken} from '../style/tokens' with {type: 'macro'};
 import {mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 
 let reduceMotion = typeof window?.matchMedia === 'function'
@@ -64,6 +64,9 @@ export interface SkeletonProps {
   isLoading: boolean
 }
 
+/**
+ * A Skeleton wraps around content to render it as a placeholder.
+ */
 export function Skeleton({children, isLoading}: SkeletonProps) {
   // Disable all form components inside a skeleton.
   return (

package/src/SkeletonCollection.tsx

@@ -19,6 +19,10 @@ export interface SkeletonCollectionProps {
 }
 
 let cache = new WeakMap();
+
+/**
+ * A SkeletonCollection generates placeholder content within a collection component such as CardView.
+ */
 export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
   // Cache rendering based on node object identity. This allows the children function to randomize
   // its content (e.g. heights) and preserve on re-renders.

package/src/Slider.tsx

@@ -20,13 +20,13 @@ import {
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
 import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
-import {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel} from './Field';
 import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
+import {focusRing, size, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocale, useNumberFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';

package/src/StatusLight.tsx

@@ -16,7 +16,7 @@ import {ContextValue, SlotProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {size, style} from '../style' with {type: 'macro'};
 import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useIsSkeleton} from './Skeleton';

package/src/Switch.tsx

@@ -16,12 +16,12 @@ import {
   ContextValue,
   SwitchRenderProps
 } from 'react-aria-components';
-import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';

package/src/Table.tsx

@@ -44,9 +44,9 @@ import {
 import {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
+import {colorMix, fontRelative, lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {ColumnSize} from '@react-types/table';
 import {DOMRef, LoadingState, Node} from '@react-types/shared';
-import {fontRelative, lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -430,9 +430,8 @@ const cellFocus = {
   borderRadius: size(6)
 } as const;
 
-function CellFocusRing(props: {isFocusVisible: boolean}) {
-  let {isFocusVisible} = props;
-  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible})} />;
+function CellFocusRing() {
+  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />;
 }
 
 const columnStyles = style({
@@ -463,7 +462,10 @@ const columnStyles = style({
     default: 'gray-300',
     forcedColors: 'ButtonBorder'
   },
-  borderTopWidth: 0,
+  borderTopWidth: {
+    default: 0,
+    isQuiet: 1
+  },
   borderBottomWidth: 1,
   borderStartWidth: 0,
   borderEndWidth: {
@@ -493,17 +495,18 @@ export interface ColumnProps extends RACColumnProps {
  */
 export function Column(props: ColumnProps) {
   let {isHeaderRowHovered} = useContext(InternalTableHeaderContext);
+  let {isQuiet} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
   let isColumnResizable = allowsResizing;
 
   return (
-    <RACColumn {...props} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align})}>
+    <RACColumn {...props} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align, isQuiet})}>
       {({allowsSorting, sortDirection, isFocusVisible, sort, startResize, isHovered}) => (
         <>
           {/* Note this is mainly for column's without a dropdown menu. If there is a dropdown menu, the button is styled to have a focus ring for simplicity
           (no need to juggle showing this focus ring if focus is on the menu button and not if it is on the resizer) */}
           {/* Separate absolutely positioned element because appyling the ring on the column directly via outline means the ring's required borderRadius will cause the bottom gray border to curve as well */}
-          <CellFocusRing isFocusVisible={isFocusVisible} />
+          {isFocusVisible && <CellFocusRing />}
           {isColumnResizable ?
             (
               <ResizableColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} isHovered={isHeaderRowHovered || isHovered} align={align}>
@@ -797,7 +800,8 @@ const selectAllCheckbox = style({
 
 const selectAllCheckboxColumn = style({
   padding: 0,
-  height: '[calc(100% - 1px)]',
+  height: 'full',
+  boxSizing: 'border-box',
   outlineStyle: 'none',
   position: 'relative',
   alignContent: 'center',
@@ -806,7 +810,10 @@ const selectAllCheckboxColumn = style({
     forcedColors: 'ButtonBorder'
   },
   borderXWidth: 0,
-  borderTopWidth: 0,
+  borderTopWidth: {
+    default: 0,
+    isQuiet: 1
+  },
   borderBottomWidth: 1,
   borderStyle: 'solid',
   backgroundColor: 'gray-75'
@@ -814,7 +821,7 @@ const selectAllCheckboxColumn = style({
 
 let InternalTableHeaderContext = createContext<{isHeaderRowHovered?: boolean}>({isHeaderRowHovered: false});
 
-export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies'> {}
+export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}
 
 /**
  * A header within a `<Table>`, containing the table columns.
@@ -822,6 +829,7 @@ export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style
 export function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>) {
   let scale = useScale();
   let {selectionBehavior, selectionMode} = useTableOptions();
+  let {isQuiet} = useContext(InternalTableContext);
   let [isHeaderRowHovered, setHeaderRowHovered] = useState(false);
 
   return (
@@ -831,12 +839,12 @@ export function TableHeader<T extends object>({columns, children}: TableHeaderPr
         {selectionBehavior === 'toggle' && (
           // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
           // @ts-ignore
-          <RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn}>
+          <RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn({isQuiet})}>
             {({isFocusVisible}) => (
               <>
                 {selectionMode === 'single' &&
                   <>
-                    <CellFocusRing isFocusVisible={isFocusVisible} />
+                    {isFocusVisible && <CellFocusRing />}
                     <VisuallyHiddenSelectAllLabel />
                   </>
                 }
@@ -919,13 +927,8 @@ const checkboxCellStyle = style({
   paddingStart: 16,
   alignContent: 'center',
   height: '[calc(100% - 1px)]',
-  borderBottomWidth: 0
-  // TODO: problem with having the checkbox cell itself use the row background color directly instead
-  // of having a separate white rectangle div base below a div with the row background color set above it as a mask
-  // is that it doesn't come out as the same color as the other cells because the base below the sticky cell will be the blue of the
-  // other cells, not the same white base. If I could convert informative-900/10 (and the rest of the rowBackgroundColors) to an equivalent without any opacity
-  // then this would be possible. Currently waiting request for Spectrum to provide tokens for these equivalent values
-  // backgroundColor: '--rowBackgroundColor'
+  borderBottomWidth: 0,
+  backgroundColor: '--rowBackgroundColor'
 });
 
 const cellContent = style({
@@ -952,15 +955,7 @@ const cellContent = style({
   margin: {
     default: -4,
     isSticky: 0
-  }
-});
-
-const cellBackground = style({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  right: 0,
-  left: 0,
+  },
   backgroundColor: {
     default: 'transparent',
     isSticky: '--rowBackgroundColor'
@@ -996,17 +991,7 @@ export function Cell(props: CellProps) {
       {...otherProps}>
       {({isFocusVisible}) => (
         <>
-          {/*
-            // TODO: problem with having the checkbox cell itself use the row background color directly instead
-            of having a separate white rectangle div base below a div with the row background color set above it as a mask
-            is that it doesn't come out as the same color as the other cells because the base below the sticky cell when other selected cells are scrolled below it will be the blue of the
-            other cells, not the same white base. If I could convert informative-900/10 (and the rest of the rowBackgroundColors) to an equivalent without any opacity
-            then I could do away with this styling. To reproduce this, comment out the stickyCell gray-25, get rid of the below div and apply backgroundColor: '--rowBackgroundColor' to checkboxCellStyle.
-            Having the CellFocusRing here instead of applying a outline on the cell directly also makes it NOT overlap with the border (can be remedied with a -3px outline offset) and applying a border radius to get the curved outline focus ring messes
-            with the divider rendered on the cell since those are also borders
-          */}
-          <div role="presentation" className={cellBackground({isSticky})} />
-          <CellFocusRing isFocusVisible={isFocusVisible} />
+          {isFocusVisible && <CellFocusRing />}
           <span className={cellContent({...tableVisualOptions, isSticky, align: align || 'start'})}>{children}</span>
         </>
       )}
@@ -1014,28 +999,22 @@ export function Cell(props: CellProps) {
   );
 }
 
+// Use color-mix instead of transparency so sticky cells work correctly.
+const selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));
+const selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));
 const rowBackgroundColor = {
-  default: 'gray-25',
-  isFocusVisibleWithin: 'gray-900/7', // table-row-hover-color
-  isHovered: 'gray-900/7', // table-row-hover-color
-  isPressed: 'gray-900/10', // table-row-hover-color
-  isSelected: {
-    default: lightDark('informative-900/10', 'informative-700/10'), // table-selected-row-background-color, opacity /10
-    isFocusVisibleWithin: lightDark('informative-900/15', 'informative-700/15'), // table-selected-row-background-color, opacity /15
-    isHovered: lightDark('informative-900/15', 'informative-700/15'), // table-selected-row-background-color, opacity /15
-    isPressed: lightDark('informative-900/15', 'informative-700/15') // table-selected-row-background-color, opacity /15
+  default: {
+    default: 'gray-25',
+    isQuiet: 'transparent'
   },
-  isQuiet: {
-    default: 'transparent',
-    isFocusVisibleWithin: 'gray-900/7', // table-row-hover-color
-    isHovered: 'gray-900/7', // table-row-hover-color
-    isPressed: 'gray-900/10', // table-row-hover-color
-    isSelected: {
-      default: lightDark('informative-900/10', 'informative-700/10'), // table-selected-row-background-color, opacity /10
-      isFocusVisibleWithin: lightDark('informative-900/15', 'informative-700/15'), // table-selected-row-background-color, opacity /15
-      isHovered: lightDark('informative-900/15', 'informative-700/15'), // table-selected-row-background-color, opacity /15
-      isPressed: lightDark('informative-900/15', 'informative-700/15') // table-selected-row-background-color, opacity /15
-    }
+  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
+  isHovered: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
+  isPressed: colorMix('gray-25', 'gray-900', 10), // table-row-hover-color
+  isSelected: {
+    default: selectedBackground, // table-selected-row-background-color, opacity /10
+    isFocusVisibleWithin: selectedActiveBackground, // table-selected-row-background-color, opacity /15
+    isHovered: selectedActiveBackground, // table-selected-row-background-color, opacity /15
+    isPressed: selectedActiveBackground // table-selected-row-background-color, opacity /15
   },
   forcedColors: {
     default: 'Background'
@@ -1046,7 +1025,7 @@ const row = style<RowRenderProps & S2TableProps>({
   height: 'full',
   position: 'relative',
   boxSizing: 'border-box',
-  backgroundColor: rowBackgroundColor,
+  backgroundColor: '--rowBackgroundColor',
   '--rowBackgroundColor': {
     type: 'backgroundColor',
     value: rowBackgroundColor