Repository: marigold-ui/marigold
Pull request #2151 (2022-06-07 10:49:04)

feat: forward ref for `<Slider>`
Ref #2145

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 3cb25da14435883db07ed3738ce61f82bf8d31db

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/ref-slider?filename=.changeset/big-books-allow.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afeat%3A%20forward%20ref%20for%20%60%3CSlider%3E%60%0A)



Patch:
diff --git a/.changeset/afraid-kids-stare.md b/.changeset/afraid-kids-stare.md
new file mode 100644
index 000000000..e8463d709
--- /dev/null
+++ b/.changeset/afraid-kids-stare.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": minor
+---
+
+feat: forward ref for `<FieldText>`
diff --git a/.changeset/big-books-allow.md b/.changeset/big-books-allow.md
new file mode 100644
index 000000000..ed1e187ae
--- /dev/null
+++ b/.changeset/big-books-allow.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": minor
+---
+
+feat: forward ref for `<Slider>`
diff --git a/.changeset/brave-meals-hammer.md b/.changeset/brave-meals-hammer.md
new file mode 100644
index 000000000..373f60f47
--- /dev/null
+++ b/.changeset/brave-meals-hammer.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+feat: forward ref for `<Switch>`
diff --git a/.changeset/khaki-pumpkins-burn.md b/.changeset/khaki-pumpkins-burn.md
new file mode 100644
index 000000000..d9665a012
--- /dev/null
+++ b/.changeset/khaki-pumpkins-burn.md
@@ -0,0 +1,7 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+"@marigold/system": minor
+---
+
+feat: Improve usage of Marigold when not used as a full page app
diff --git a/.changeset/mean-moose-grab.md b/.changeset/mean-moose-grab.md
new file mode 100644
index 000000000..7253cc359
--- /dev/null
+++ b/.changeset/mean-moose-grab.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": minor
+---
+
+feat: forward ref for `<Radio>`
diff --git a/.changeset/odd-pens-exist.md b/.changeset/odd-pens-exist.md
new file mode 100644
index 000000000..defb713a3
--- /dev/null
+++ b/.changeset/odd-pens-exist.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": minor
+---
+
+feat: forward ref for `<TextArea>`
diff --git a/.changeset/proud-dogs-attend.md b/.changeset/proud-dogs-attend.md
new file mode 100644
index 000000000..5be890020
--- /dev/null
+++ b/.changeset/proud-dogs-attend.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": minor
+---
+
+feat: forward ref for `<Select>``
diff --git a/.changeset/short-wombats-relate.md b/.changeset/short-wombats-relate.md
new file mode 100644
index 000000000..3a9c5d9c2
--- /dev/null
+++ b/.changeset/short-wombats-relate.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": minor
+---
+
+feat: forward ref of `<Checkbox>`
diff --git a/docs/content/components/provider.mdx b/docs/content/components/provider.mdx
index 91982d30b..0530ad42d 100644
--- a/docs/content/components/provider.mdx
+++ b/docs/content/components/provider.mdx
@@ -12,6 +12,9 @@ import { MarigoldProvider } from '@marigold/components';
 
 ## Props
 
-| Property           | Type    | Default     |
-| :----------------- | :------ | :---------- |
-| `theme` (optional) | `Theme` | `undefined` |
+| Property              | Type        | Default | Description                                                                                                                                                                                                                                                           |
+| :-------------------- | :---------- | :------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`            | `ReactNode` |         | The children of the component.                                                                                                                                                                                                                                        |
+| `theme`               | `Theme`     |         | The use that should be used within the provider context.                                                                                                                                                                                                              |
+| `selector` (optional) | `string`    |         | By default normalization is applied globally. By specifying a selector you can scope normalization and other CSS from `theme.root` to a certain element in the DOM. This is useful if you want to run your app only on a portion of the page or are cascading themes. |
+| `normalizeDocument`   | `boolean`   | `true`  | Apply CSS normalization to the document (`html` and `body`).                                                                                                                                                                                                          |
diff --git a/packages/components/src/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox.tsx
index 3bbf16173..7457e0241 100644
--- a/packages/components/src/Checkbox/Checkbox.tsx
+++ b/packages/components/src/Checkbox/Checkbox.tsx
@@ -1,7 +1,8 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
+import { useObjectRef } from '@react-aria/utils';
 import { useToggleState } from '@react-stately/toggle';
 import { AriaCheckboxProps } from '@react-types/checkbox';
 
@@ -97,124 +98,132 @@ export interface CheckboxProps
 
 // Component
 // ---------------
-export const Checkbox = ({
-  size,
-  variant,
-  disabled,
-  checked,
-  defaultChecked,
-  indeterminate,
-  readOnly,
-  required,
-  error,
-  ...props
-}: CheckboxProps) => {
-  const ref = React.useRef<HTMLInputElement>(null);
-  // Adjust props to the react-aria API
-  const checkboxProps = {
-    isIndeterminate: indeterminate,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isRequired: required,
-    validationState: error ? 'invalid' : 'valid',
-  } as const;
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      size,
+      variant,
+      disabled,
+      checked,
+      defaultChecked,
+      indeterminate,
+      readOnly,
+      required,
+      error,
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = useObjectRef(ref);
+    // Adjust props to the react-aria API
+    const checkboxProps = {
+      isIndeterminate: indeterminate,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isRequired: required,
+      validationState: error ? 'invalid' : 'valid',
+    } as const;
 
-  /**
-   * Use hook depending if the checkbox is used inside a group or standalone.
-   * This is unusual, but since the checkboxs is not moving out of the group,
-   * it should be safe.
-   */
-  const groupState = useCheckboxGroupContext();
+    /**
+     * Use hook depending if the checkbox is used inside a group or standalone.
+     * This is unusual, but since the checkboxs is not moving out of the group,
+     * it should be safe.
+     */
+    const groupState = useCheckboxGroupContext();
 
-  /* eslint-disable react-hooks/rules-of-hooks */
-  const { inputProps } = groupState
-    ? useCheckboxGroupItem(
-        {
-          ...props,
-          ...checkboxProps,
-          /**
-           * value is optional for standalone checkboxes, but required when
-           * used inside a group.
-           */
-          value: props.value as string,
-        },
-        groupState,
-        ref
-      )
-    : useCheckbox(
-        {
-          isSelected: checked,
-          defaultSelected: defaultChecked,
-          ...checkboxProps,
-          ...props,
-        },
-        useToggleState({
-          isSelected: checked,
-          defaultSelected: defaultChecked,
-          ...props,
-        }),
-        ref
-      );
-  /* eslint-enable react-hooks/rules-of-hooks */
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const { inputProps } = groupState
+      ? useCheckboxGroupItem(
+          {
+            ...props,
+            ...checkboxProps,
+            /**
+             * value is optional for standalone checkboxes, but required when
+             * used inside a group.
+             */
+            value: props.value as string,
+          },
+          groupState,
+          inputRef
+        )
+      : useCheckbox(
+          {
+            isSelected: checked,
+            defaultSelected: defaultChecked,
+            ...checkboxProps,
+            ...props,
+          },
+          useToggleState({
+            isSelected: checked,
+            defaultSelected: defaultChecked,
+            ...props,
+          }),
+          inputRef
+        );
+    /* eslint-enable react-hooks/rules-of-hooks */
 
-  const styles = useComponentStyles(
-    'Checkbox',
-    { variant: groupState?.variant || variant, size: groupState?.size || size },
-    { parts: ['container', 'label', 'checkbox'] }
-  );
+    const styles = useComponentStyles(
+      'Checkbox',
+      {
+        variant: groupState?.variant || variant,
+        size: groupState?.size || size,
+      },
+      { parts: ['container', 'label', 'checkbox'] }
+    );
 
-  const { hoverProps, isHovered } = useHover({});
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const stateProps = useStateProps({
-    hover: isHovered,
-    focus: isFocusVisible,
-    checked: inputProps.checked,
-    disabled: inputProps.disabled,
-    error: groupState?.error || error,
-    readOnly,
-    indeterminate,
-  });
+    const { hoverProps, isHovered } = useHover({});
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const stateProps = useStateProps({
+      hover: isHovered,
+      focus: isFocusVisible,
+      checked: inputProps.checked,
+      disabled: inputProps.disabled,
+      error: groupState?.error || error,
+      readOnly,
+      indeterminate,
+    });
 
-  return (
-    <Box
-      as="label"
-      __baseCSS={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '1ch',
-        position: 'relative',
-      }}
-      css={styles.container}
-      {...hoverProps}
-      {...stateProps}
-    >
+    return (
       <Box
-        as="input"
-        ref={ref}
-        css={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0,
-          zIndex: 1,
-          opacity: 0.0001,
-          cursor: inputProps.disabled ? 'not-allowed' : 'pointer',
+        as="label"
+        __baseCSS={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1ch',
+          position: 'relative',
         }}
-        {...inputProps}
-        {...focusProps}
-      />
-      <Icon
-        checked={inputProps.checked}
-        indeterminate={indeterminate}
-        css={styles.checkbox}
+        css={styles.container}
+        {...hoverProps}
         {...stateProps}
-      />
-      {props.children && (
-        <Box css={styles.label} {...stateProps}>
-          {props.children}
-        </Box>
-      )}
-    </Box>
-  );
-};
+      >
+        <Box
+          as="input"
+          ref={inputRef}
+          css={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0,
+            zIndex: 1,
+            opacity: 0.0001,
+            cursor: inputProps.disabled ? 'not-allowed' : 'pointer',
+          }}
+          {...inputProps}
+          {...focusProps}
+        />
+        <Icon
+          checked={inputProps.checked}
+          indeterminate={indeterminate}
+          css={styles.checkbox}
+          {...stateProps}
+        />
+        {props.children && (
+          <Box css={styles.label} {...stateProps}>
+            {props.children}
+          </Box>
+        )}
+      </Box>
+    );
+  }
+);
diff --git a/packages/components/src/Provider/MarigoldProvider.tsx b/packages/components/src/Provider/MarigoldProvider.tsx
index a515992d4..717d399ab 100644
--- a/packages/components/src/Provider/MarigoldProvider.tsx
+++ b/packages/components/src/Provider/MarigoldProvider.tsx
@@ -1,47 +1,46 @@
 import React from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
 import {
-  Theme,
   Global,
+  GlobalProps,
+  Theme,
   ThemeProvider,
   ThemeProviderProps,
   useTheme,
   __defaultTheme,
 } from '@marigold/system';
 
-// Theme Extension
-// ---------------
-export interface RootThemeExtension<Value> {
-  root?: {
-    body?: Value;
-    html?: Value;
-  };
-}
-
 // Props
 // ---------------
 export interface MarigoldProviderProps<T extends Theme>
-  extends ThemeProviderProps<T> {}
+  extends ThemeProviderProps<T>,
+    GlobalProps {}
 
 // Provider
 // ---------------
 export function MarigoldProvider<T extends Theme>({
-  theme,
   children,
+  theme,
+  selector,
+  normalizeDocument = true,
 }: MarigoldProviderProps<T>) {
   const outer = useTheme();
   const isTopLevel = outer.theme === __defaultTheme;
 
+  if (outer.theme?.root && !isTopLevel && !selector) {
+    throw new Error(
+      `[MarigoldProvider] You cannot nest a MarigoldProvider inside another MarigoldProvider without a "selector"! 
+      Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
+    );
+  }
+
   return (
     <ThemeProvider theme={theme}>
-      {isTopLevel ? (
-        <>
-          <Global />
-          <OverlayProvider>{children}</OverlayProvider>
-        </>
-      ) : (
-        children
-      )}
+      <Global
+        normalizeDocument={isTopLevel && normalizeDocument}
+        selector={selector}
+      />
+      {isTopLevel ? <OverlayProvider>{children}</OverlayProvider> : children}
     </ThemeProvider>
   );
 }
diff --git a/packages/components/src/Radio/Radio.tsx b/packages/components/src/Radio/Radio.tsx
index feda52b41..0e772b107 100644
--- a/packages/components/src/Radio/Radio.tsx
+++ b/packages/components/src/Radio/Radio.tsx
@@ -1,7 +1,12 @@
-import React, { useRef } from 'react';
+import React, {
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from 'react';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { useRadio } from '@react-aria/radio';
+import { useObjectRef } from '@react-aria/utils';
 import type { AriaRadioProps } from '@react-types/radio';
 
 import {
@@ -13,7 +18,7 @@ import {
   useComponentStyles,
   useStateProps,
 } from '@marigold/system';
-import { ComponentProps } from '@marigold/types';
+import type { ComponentProps } from '@marigold/types';
 
 import { useRadioGroupContext } from './Context';
 import { RadioGroup } from './RadioGroup';
@@ -80,75 +85,88 @@ export interface RadioProps
 
 // Component
 // ---------------
-export const Radio = ({ width, disabled, ...props }: RadioProps) => {
-  const {
-    variant,
-    size,
-    error,
-    width: groupWidth,
-    ...state
-  } = useRadioGroupContext();
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ width, disabled, ...props }, ref) => {
+    const {
+      variant,
+      size,
+      error,
+      width: groupWidth,
+      ...state
+    } = useRadioGroupContext();
 
-  const ref = useRef(null);
-  const { inputProps } = useRadio(
-    { isDisabled: disabled, ...props },
-    state,
-    ref
-  );
+    const inputRef = useObjectRef(ref);
+    const { inputProps } = useRadio(
+      { isDisabled: disabled, ...props },
+      state,
+      inputRef
+    );
 
-  const styles = useComponentStyles(
-    'Radio',
-    { variant: variant || props.variant, size: size || props.size },
-    { parts: ['container', 'label', 'radio'] }
-  );
+    const styles = useComponentStyles(
+      'Radio',
+      { variant: variant || props.variant, size: size || props.size },
+      { parts: ['container', 'label', 'radio'] }
+    );
 
-  const { hoverProps, isHovered } = useHover({});
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const stateProps = useStateProps({
-    hover: isHovered,
-    focus: isFocusVisible,
-    checked: inputProps.checked,
-    disabled: inputProps.disabled,
-    readOnly: props.readOnly,
-    error,
-  });
+    const { hoverProps, isHovered } = useHover({});
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const stateProps = useStateProps({
+      hover: isHovered,
+      focus: isFocusVisible,
+      checked: inputProps.checked,
+      disabled: inputProps.disabled,
+      readOnly: props.readOnly,
+      error,
+    });
 
-  return (
-    <Box
-      as="label"
-      __baseCSS={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '1ch',
-        position: 'relative',
-        width: width || groupWidth || '100%',
-      }}
-      css={styles.container}
-      {...hoverProps}
-      {...stateProps}
-    >
+    return (
       <Box
-        as="input"
-        ref={ref}
-        css={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0,
-          zIndex: 1,
-          opacity: 0.0001,
-          cursor: inputProps.disabled ? 'not-allowed' : 'pointer',
+        as="label"
+        __baseCSS={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1ch',
+          position: 'relative',
+          width: width || groupWidth || '100%',
         }}
-        {...inputProps}
-        {...focusProps}
-      />
-      <Icon checked={inputProps.checked} css={styles.radio} {...stateProps} />
-      <Box css={styles.label} {...stateProps}>
-        {props.children}
+        css={styles.container}
+        {...hoverProps}
+        {...stateProps}
+      >
+        <Box
+          as="input"
+          ref={inputRef}
+          css={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0,
+            zIndex: 1,
+            opacity: 0.0001,
+            cursor: inputProps.disabled ? 'not-allowed' : 'pointer',
+          }}
+          {...inputProps}
+          {...focusProps}
+        />
+        <Icon checked={inputProps.checked} css={styles.radio} {...stateProps} />
+        <Box css={styles.label} {...stateProps}>
+          {props.children}
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  }
+) as RadioComponent;
 
 Radio.Group = RadioGroup;
+
+/**
+ * We need this so that TypeScripts allows us to add
+ * additional properties to the component (function).
+ */
+export interface RadioComponent
+  extends ForwardRefExoticComponent<
+    RadioProps & RefAttributes<HTMLInputElement>
+  > {
+  Group: typeof RadioGroup;
+}
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index d1fd7b524..e0e417450 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -1,4 +1,9 @@
-import React, { useRef } from 'react';
+import React, {
+  forwardRef,
+  ForwardRefExoticComponent,
+  RefAttributes,
+  useRef,
+} from 'react';
 import { useButton } from '@react-aria/button';
 import { FocusScope, useFocusRing } from '@react-aria/focus';
 import { useMessageFormatter } from '@react-aria/i18n';
@@ -7,7 +12,7 @@ import { HiddenSelect, useSelect } from '@react-aria/select';
 import { useSelectState } from '@react-stately/select';
 import { Item, Section } from '@react-stately/collections';
 import type { AriaSelectProps } from '@react-types/select';
-import { mergeProps } from '@react-aria/utils';
+import { mergeProps, useObjectRef } from '@react-aria/utils';
 
 import {
   Box,
@@ -76,131 +81,145 @@ export interface SelectProps
 
 // Component
 // ---------------
-export const Select = ({
-  variant,
-  size,
-  width,
-  open,
-  disabled,
-  required,
-  error,
-  ...rest
-}: SelectProps) => {
-  // Set up i18n
-  const formatMessage = useMessageFormatter(messages);
-  const props: AriaSelectProps<object> = {
-    isOpen: open,
-    isDisabled: disabled,
-    isRequired: required,
-    validationState: error ? 'invalid' : 'valid',
-    placeholder: rest.placeholder || formatMessage('placeholder'),
-    ...rest,
-  };
+export const Select = forwardRef<HTMLButtonElement, SelectProps>(
+  ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
+    // Set up i18n
+    const formatMessage = useMessageFormatter(messages);
 
-  const state = useSelectState(props);
-  const buttonRef = useRef<HTMLButtonElement>(null);
+    const buttonRef = useObjectRef(ref);
+    const props = {
+      isOpen: open,
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: error ? 'invalid' : 'valid',
+      placeholder: rest.placeholder || formatMessage('placeholder'),
+      ...rest,
+    } as const;
+    const state = useSelectState(props);
 
-  const {
-    labelProps,
-    triggerProps,
-    valueProps,
-    menuProps,
-    descriptionProps,
-    errorMessageProps,
-  } = useSelect(props, state, buttonRef);
+    const {
+      labelProps,
+      triggerProps,
+      valueProps,
+      menuProps,
+      descriptionProps,
+      errorMessageProps,
+    } = useSelect(props, state, buttonRef);
 
-  const { buttonProps } = useButton(
-    { isDisabled: disabled, ...triggerProps },
-    buttonRef
-  );
-  const { focusProps, isFocusVisible } = useFocusRing();
+    const { buttonProps } = useButton(
+      { isDisabled: disabled, ...triggerProps },
+      buttonRef
+    );
+    const { focusProps, isFocusVisible } = useFocusRing();
 
-  const overlayRef = useRef(null);
-  const { overlayProps: positionProps } = useOverlayPosition({
-    targetRef: buttonRef,
-    overlayRef,
-    isOpen: state.isOpen,
-    placement: 'bottom left',
-  });
+    const overlayRef = useRef(null);
+    const { overlayProps: positionProps } = useOverlayPosition({
+      targetRef: buttonRef,
+      overlayRef,
+      isOpen: state.isOpen,
+      placement: 'bottom left',
+    });
 
-  const styles = useComponentStyles(
-    'Select',
-    { variant, size },
-    { parts: ['container', 'button', 'icon'] }
-  );
-  const stateProps = useStateProps({
-    disabled,
-    error,
-    focusVisible: isFocusVisible,
-    expanded: state.isOpen,
-  });
+    const styles = useComponentStyles(
+      'Select',
+      { variant, size },
+      { parts: ['container', 'button', 'icon'] }
+    );
+    const stateProps = useStateProps({
+      disabled,
+      error,
+      focusVisible: isFocusVisible,
+      expanded: state.isOpen,
+    });
 
-  return (
-    <FieldBase
-      variant={variant}
-      size={size}
-      width={width}
-      label={props.label}
-      labelProps={{ as: 'span', ...labelProps }}
-      description={props.description}
-      descriptionProps={descriptionProps}
-      error={error}
-      errorMessage={props.errorMessage}
-      errorMessageProps={errorMessageProps}
-      stateProps={stateProps}
-      disabled={disabled}
-      required={required}
-    >
-      <HiddenSelect
-        state={state}
-        triggerRef={buttonRef}
+    return (
+      <FieldBase
+        variant={variant}
+        size={size}
+        width={width}
         label={props.label}
-        name={props.name}
-        isDisabled={disabled}
-      />
-      <Box
-        as="button"
-        __baseCSS={{
-          display: 'flex',
-          position: 'relative',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          width: '100%',
-        }}
-        css={styles.button}
-        ref={buttonRef}
-        {...mergeProps(buttonProps, focusProps)}
-        {...stateProps}
+        labelProps={{ as: 'span', ...labelProps }}
+        description={props.description}
+        descriptionProps={descriptionProps}
+        error={error}
+        errorMessage={props.errorMessage}
+        errorMessageProps={errorMessageProps}
+        stateProps={stateProps}
+        disabled={disabled}
+        required={required}
       >
+        <HiddenSelect
+          state={state}
+          triggerRef={buttonRef}
+          label={props.label}
+          name={props.name}
+          isDisabled={disabled}
+        />
         <Box
-          css={{
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
+          as="button"
+          __baseCSS={{
+            display: 'flex',
+            position: 'relative',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
           }}
-          {...valueProps}
+          css={styles.button}
+          ref={buttonRef}
+          {...mergeProps(buttonProps, focusProps)}
+          {...stateProps}
         >
-          {state.selectedItem ? state.selectedItem.rendered : props.placeholder}
+          <Box
+            css={{
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+            }}
+            {...valueProps}
+          >
+            {state.selectedItem
+              ? state.selectedItem.rendered
+              : props.placeholder}
+          </Box>
+          <Chevron css={styles.icon} />
         </Box>
-        <Chevron css={styles.icon} />
-      </Box>
-      <Popover
-        open={state.isOpen}
-        onClose={state.close}
-        dismissable
-        shouldCloseOnBlur
-        minWidth={buttonRef.current ? buttonRef.current.offsetWidth : undefined}
-        ref={overlayRef}
-        {...positionProps}
-      >
-        <FocusScope restoreFocus>
-          <DismissButton onDismiss={state.close} />
-          <ListBox state={state} variant={variant} size={size} {...menuProps} />
-          <DismissButton onDismiss={state.close} />
-        </FocusScope>
-      </Popover>
-    </FieldBase>
-  );
-};
+        <Popover
+          open={state.isOpen}
+          onClose={state.close}
+          dismissable
+          shouldCloseOnBlur
+          minWidth={
+            buttonRef.current ? buttonRef.current.offsetWidth : undefined
+          }
+          ref={overlayRef}
+          {...positionProps}
+        >
+          <FocusScope restoreFocus>
+            <DismissButton onDismiss={state.close} />
+            <ListBox
+              state={state}
+              variant={variant}
+              size={size}
+              {...menuProps}
+            />
+            <DismissButton onDismiss={state.close} />
+          </FocusScope>
+        </Popover>
+      </FieldBase>
+    );
+  }
+) as SelectComponent;
 
 Select.Option = Item;
 Select.Section = Section;
+
+/**
+ * We need this so that TypeScripts allows us to add
+ * additional properties to the component (function).
+ */
+export interface SelectComponent
+  extends ForwardRefExoticComponent<
+    SelectProps & RefAttributes<HTMLButtonElement>
+  > {
+  Option: typeof Item;
+  Section: typeof Section;
+}
diff --git a/packages/components/src/Slider/Slider.tsx b/packages/components/src/Slider/Slider.tsx
index e0d7117cf..e702b76f1 100755
--- a/packages/components/src/Slider/Slider.tsx
+++ b/packages/components/src/Slider/Slider.tsx
@@ -1,10 +1,11 @@
 /**
  * Thanks to react-aria: https://react-spectrum.adobe.com/react-aria/useSlider.html
  */
-import React, { ReactNode, useRef } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { useSlider } from '@react-aria/slider';
 import { useSliderState } from '@react-stately/slider';
 import { useNumberFormatter } from '@react-aria/i18n';
+import { useObjectRef } from '@react-aria/utils';
 import { AriaSliderProps } from '@react-types/slider';
 
 import { ThemeExtensionsWithParts, useComponentStyles } from '@marigold/system';
@@ -57,76 +58,73 @@ export interface SliderProps
  * A label + the output value and the slider functionality itself.
  * The slider itself consists of a track line and a thumb.
  */
-export const Slider = ({
-  variant,
-  size,
-  width = '100%',
-  ...props
-}: SliderProps) => {
-  const { formatOptions } = props;
-  const trackRef = useRef<HTMLElement>(null);
-  const numberFormatter = useNumberFormatter(formatOptions);
-  const state = useSliderState({ ...props, numberFormatter });
-  const { groupProps, trackProps, labelProps, outputProps } = useSlider(
-    {
-      label: props.children,
-      ...props,
-    },
-    state,
-    trackRef
-  );
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(
+  ({ variant, size, width = '100%', ...props }, ref) => {
+    const { formatOptions } = props;
+    const trackRef = useObjectRef(ref);
+    const numberFormatter = useNumberFormatter(formatOptions);
+    const state = useSliderState({ ...props, numberFormatter });
+    const { groupProps, trackProps, labelProps, outputProps } = useSlider(
+      {
+        label: props.children,
+        ...props,
+      },
+      state,
+      trackRef
+    );
 
-  const styles = useComponentStyles(
-    'Slider',
-    { variant, size },
-    { parts: ['track', 'thumb', 'label', 'output'] }
-  );
+    const styles = useComponentStyles(
+      'Slider',
+      { variant, size },
+      { parts: ['track', 'thumb', 'label', 'output'] }
+    );
 
-  return (
-    <Box
-      __baseCSS={{
-        display: 'flex',
-        flexDirection: 'column',
-        touchAction: 'none',
-        width,
-      }}
-      {...groupProps}
-    >
-      {/* Flex container for the label and output element. */}
-      <Box __baseCSS={{ display: 'flex', alignSelf: 'stretch' }}>
-        {props.children && (
-          <Box as="label" __baseCSS={styles.label} {...labelProps}>
-            {props.children}
-          </Box>
-        )}
-        <Box
-          as="output"
-          {...outputProps}
-          __baseCSS={{ flex: '1 0 auto', textAlign: 'end' }}
-          css={styles.output}
-        >
-          {state.getThumbValueLabel(0)}
-        </Box>
-      </Box>
-      {/* The track element holds the visible track line and the thumb. */}
+    return (
       <Box
-        {...trackProps}
-        ref={trackRef}
         __baseCSS={{
-          position: 'relative',
-          height: 32,
-          width: '100%',
-          cursor: props.disabled ? 'not-allowed' : 'pointer',
+          display: 'flex',
+          flexDirection: 'column',
+          touchAction: 'none',
+          width,
         }}
+        {...groupProps}
       >
-        <Box __baseCSS={styles.track} />
-        <Thumb
-          state={state}
-          trackRef={trackRef}
-          disabled={props.disabled}
-          styles={styles.thumb}
-        />
+        {/* Flex container for the label and output element. */}
+        <Box __baseCSS={{ display: 'flex', alignSelf: 'stretch' }}>
+          {props.children && (
+            <Box as="label" __baseCSS={styles.label} {...labelProps}>
+              {props.children}
+            </Box>
+          )}
+          <Box
+            as="output"
+            {...outputProps}
+            __baseCSS={{ flex: '1 0 auto', textAlign: 'end' }}
+            css={styles.output}
+          >
+            {state.getThumbValueLabel(0)}
+          </Box>
+        </Box>
+        {/* The track element holds the visible track line and the thumb. */}
+        <Box
+          {...trackProps}
+          ref={trackRef}
+          __baseCSS={{
+            position: 'relative',
+            height: 32,
+            width: '100%',
+            cursor: props.disabled ? 'not-allowed' : 'pointer',
+          }}
+        >
+          <Box __baseCSS={styles.track} />
+          <Thumb
+            state={state}
+            trackRef={trackRef}
+            disabled={props.disabled}
+            styles={styles.thumb}
+          />
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  }
+);
diff --git a/packages/components/src/Switch/Switch.tsx b/packages/components/src/Switch/Switch.tsx
index 0973d5f5a..83a06bc86 100755
--- a/packages/components/src/Switch/Switch.tsx
+++ b/packages/components/src/Switch/Switch.tsx
@@ -1,6 +1,7 @@
-import React, { useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useFocusRing } from '@react-aria/focus';
 import { useSwitch } from '@react-aria/switch';
+import { useObjectRef } from '@react-aria/utils';
 import { useToggleState } from '@react-stately/toggle';
 import { AriaSwitchProps } from '@react-types/switch';
 
@@ -40,110 +41,116 @@ export interface SwitchProps
   size?: string;
   width?: string;
 }
+
 // Component
 // ---------------
-export const Switch = ({
-  variant,
-  size,
-  width = '100%',
-  checked,
-  disabled,
-  readOnly,
-  defaultChecked,
-  ...rest
-}: SwitchProps) => {
-  const ref = useRef<HTMLInputElement>(null);
-  // Adjust props to the react-aria API
-  const props = {
-    isSelected: checked,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    defaultSelected: defaultChecked,
-    ...rest,
-  };
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (
+    {
+      variant,
+      size,
+      width = '100%',
+      checked,
+      disabled,
+      readOnly,
+      defaultChecked,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputRef = useObjectRef(ref);
+    // Adjust props to the react-aria API
+    const props = {
+      isSelected: checked,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      defaultSelected: defaultChecked,
+      ...rest,
+    };
 
-  const state = useToggleState(props);
-  const { inputProps } = useSwitch(props, state, ref);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const stateProps = useStateProps({
-    checked: state.isSelected,
-    disabled: disabled,
-    readOnly: readOnly,
-    focus: isFocusVisible,
-  });
+    const state = useToggleState(props);
+    const { inputProps } = useSwitch(props, state, inputRef);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const stateProps = useStateProps({
+      checked: state.isSelected,
+      disabled: disabled,
+      readOnly: readOnly,
+      focus: isFocusVisible,
+    });
 
-  const styles = useComponentStyles(
-    'Switch',
-    { variant, size },
-    { parts: ['container', 'label', 'track', 'thumb'] }
-  );
+    const styles = useComponentStyles(
+      'Switch',
+      { variant, size },
+      { parts: ['container', 'label', 'track', 'thumb'] }
+    );
 
-  return (
-    <Box
-      as="label"
-      __baseCSS={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: '1ch',
-        position: 'relative',
-        width,
-      }}
-      css={styles.container}
-    >
-      <Box
-        as="input"
-        ref={ref}
-        css={{
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          top: 0,
-          left: 0,
-          zIndex: 1,
-          opacity: 0.0001,
-          cursor: inputProps.disabled ? 'not-allowed' : 'pointer',
-        }}
-        {...inputProps}
-        {...focusProps}
-      />
-      {props.children && <Box css={styles.label}>{props.children}</Box>}
+    return (
       <Box
+        as="label"
         __baseCSS={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: '1ch',
           position: 'relative',
-          width: 48,
-          height: 24,
-          bg: '#dee2e6',
-          borderRadius: 20,
+          width,
         }}
-        css={styles.track}
-        {...stateProps}
+        css={styles.container}
       >
         <Box
-          __baseCSS={{
-            display: 'block',
+          as="input"
+          ref={inputRef}
+          css={{
             position: 'absolute',
-            top: 1,
+            width: '100%',
+            height: '100%',
+            top: 0,
             left: 0,
+            zIndex: 1,
+            opacity: 0.0001,
+            cursor: inputProps.disabled ? 'not-allowed' : 'pointer',
+          }}
+          {...inputProps}
+          {...focusProps}
+        />
+        {props.children && <Box css={styles.label}>{props.children}</Box>}
+        <Box
+          __baseCSS={{
+            position: 'relative',
+            width: 48,
+            height: 24,
+            bg: '#dee2e6',
+            borderRadius: 20,
+          }}
+          css={styles.track}
+          {...stateProps}
+        >
+          <Box
+            __baseCSS={{
+              display: 'block',
+              position: 'absolute',
+              top: 1,
+              left: 0,
 
-            willChange: 'transform',
-            transform: 'translateX(1px)',
-            transition: 'all 0.1s cubic-bezier(.7, 0, .3, 1)',
+              willChange: 'transform',
+              transform: 'translateX(1px)',
+              transition: 'all 0.1s cubic-bezier(.7, 0, .3, 1)',
 
-            height: 22,
-            width: 22,
+              height: 22,
+              width: 22,
 
-            borderRadius: 9999,
-            bg: '#fff',
+              borderRadius: 9999,
+              bg: '#fff',
 
-            '&:checked': {
-              transform: 'translateX(calc(47px - 100%))',
-            },
-          }}
-          css={styles.thumb}
-          {...stateProps}
-        />
+              '&:checked': {
+                transform: 'translateX(calc(47px - 100%))',
+              },
+            }}
+            css={styles.thumb}
+            {...stateProps}
+          />
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  }
+);
diff --git a/packages/components/src/TextArea/TextArea.stories.tsx b/packages/components/src/TextArea/TextArea.stories.tsx
index 695b54352..71c47ab4d 100644
--- a/packages/components/src/TextArea/TextArea.stories.tsx
+++ b/packages/components/src/TextArea/TextArea.stories.tsx
@@ -69,3 +69,16 @@ export default {
 export const Basic: ComponentStory<typeof TextArea> = args => (
   <TextArea {...args} />
 );
+
+export const Controlled: ComponentStory<typeof TextArea> = args => {
+  const [value, setValue] = React.useState('');
+  return (
+    <>
+      <TextArea {...args} value={value} onChange={setValue} />
+      <pre>
+        <strong>Input Value:</strong>
+        {value}
+      </pre>
+    </>
+  );
+};
diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx
index eef2f59a4..f6cb5894c 100644
--- a/packages/components/src/TextArea/TextArea.tsx
+++ b/packages/components/src/TextArea/TextArea.tsx
@@ -1,5 +1,8 @@
-import React, { useRef } from 'react';
+import React, { forwardRef } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { useFocusRing } from '@react-aria/focus';
 import { useTextField } from '@react-aria/textfield';
+import { useObjectRef } from '@react-aria/utils';
 import { AriaTextFieldProps } from '@react-types/textfield';
 
 import {
@@ -11,8 +14,6 @@ import {
 import { ComponentProps } from '@marigold/types';
 
 import { FieldBase, FieldBaseProps } from '../FieldBase';
-import { useHover } from '@react-aria/interactions';
-import { useFocusRing } from '@react-aria/focus';
 
 // Theme Extension
 // ---------------
@@ -54,69 +55,74 @@ export interface TextAreaProps
 
 // Component
 // ---------------
-export const TextArea = ({
-  variant,
-  size,
-  width,
-  disabled,
-  required,
-  readOnly,
-  error,
-  rows,
-  ...props
-}: TextAreaProps) => {
-  const { label, description, errorMessage } = props;
-  const ref = useRef<HTMLTextAreaElement>(null);
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      variant,
+      size,
+      width,
+      disabled,
+      required,
+      readOnly,
+      error,
+      rows,
+      ...props
+    },
+    ref
+  ) => {
+    const { label, description, errorMessage } = props;
+    const textAreaRef = useObjectRef(ref);
 
-  const { labelProps, inputProps, descriptionProps, errorMessageProps } =
-    useTextField(
-      {
-        inputElementType: 'textarea',
-        isDisabled: disabled,
-        isRequired: required,
-        isReadOnly: readOnly,
-        validationState: error ? 'invalid' : 'valid',
-        ...props,
-      },
-      ref
-    );
+    const { labelProps, inputProps, descriptionProps, errorMessageProps } =
+      useTextField(
+        {
+          inputElementType: 'textarea',
+          isDisabled: disabled,
+          isRequired: required,
+          isReadOnly: readOnly,
+          validationState: error ? 'invalid' : 'valid',
+          ...props,
+        },
+        textAreaRef
+      );
 
-  const { hoverProps, isHovered } = useHover({});
-  const { focusProps, isFocusVisible } = useFocusRing();
-  const stateProps = useStateProps({
-    hover: isHovered,
-    focus: isFocusVisible,
-    disabled,
-    readOnly,
-    error,
-  });
+    const { hoverProps, isHovered } = useHover({});
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const stateProps = useStateProps({
+      hover: isHovered,
+      focus: isFocusVisible,
+      disabled,
+      readOnly,
+      error,
+    });
 
-  const styles = useComponentStyles('TextArea', { variant, size });
-  return (
-    <FieldBase
-      label={label}
-      labelProps={labelProps}
-      required={required}
-      description={description}
-      descriptionProps={descriptionProps}
-      error={error}
-      errorMessage={errorMessage}
-      errorMessageProps={errorMessageProps}
-      stateProps={stateProps}
-      variant={variant}
-      size={size}
-      width={width}
-    >
-      <Box
-        as="textarea"
-        css={styles}
-        ref={ref}
-        rows={rows}
-        {...inputProps}
-        {...focusProps}
-        {...hoverProps}
-        {...stateProps}
-      />
-    </FieldBase>
-  );
-};
+    const styles = useComponentStyles('TextArea', { variant, size });
+    return (
+      <FieldBase
+        label={label}
+        labelProps={labelProps}
+        required={required}
+        description={description}
+        descriptionProps={descriptionProps}
+        error={error}
+        errorMessage={errorMessage}
+        errorMessageProps={errorMessageProps}
+        stateProps={stateProps}
+        variant={variant}
+        size={size}
+        width={width}
+      >
+        <Box
+          as="textarea"
+          css={styles}
+          ref={textAreaRef}
+          rows={rows}
+          {...inputProps}
+          {...focusProps}
+          {...hoverProps}
+          {...stateProps}
+        />
+      </FieldBase>
+    );
+  }
+);
diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx
index ae6f9b619..416f6c9f2 100644
--- a/packages/components/src/TextField/TextField.tsx
+++ b/packages/components/src/TextField/TextField.tsx
@@ -1,7 +1,8 @@
-import React, { useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { useTextField } from '@react-aria/textfield';
+import { useObjectRef } from '@react-aria/utils';
 import { AriaTextFieldProps } from '@react-types/textfield';
 
 import { useStateProps } from '@marigold/system';
@@ -38,72 +39,68 @@ export interface TextFieldProps
 
 // Component
 // ---------------
-export const TextField = ({
-  variant,
-  size,
-  width,
-  disabled,
-  required,
-  readOnly,
-  error,
-  ...props
-}: TextFieldProps) => {
-  const { label, description, errorMessage, autoFocus } = props;
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    { variant, size, width, disabled, required, readOnly, error, ...props },
+    ref
+  ) => {
+    const { label, description, errorMessage, autoFocus } = props;
 
-  const ref = useRef<HTMLInputElement>(null);
-  const { labelProps, inputProps, descriptionProps, errorMessageProps } =
-    useTextField(
-      {
-        isDisabled: disabled,
-        isRequired: required,
-        isReadOnly: readOnly,
-        validationState: error ? 'invalid' : 'valid',
-        ...props,
-      },
-      ref
-    );
+    const inputRef = useObjectRef(ref);
+    const { labelProps, inputProps, descriptionProps, errorMessageProps } =
+      useTextField(
+        {
+          isDisabled: disabled,
+          isRequired: required,
+          isReadOnly: readOnly,
+          validationState: error ? 'invalid' : 'valid',
+          ...props,
+        },
+        inputRef
+      );
 
-  const { hoverProps, isHovered } = useHover({});
-  const { focusProps, isFocusVisible } = useFocusRing({
-    isTextInput: true,
-    autoFocus,
-  });
-  const stateProps = useStateProps({
-    hover: isHovered,
-    focus: isFocusVisible,
-    disabled,
-    readOnly,
-    error,
-  });
+    const { hoverProps, isHovered } = useHover({});
+    const { focusProps, isFocusVisible } = useFocusRing({
+      isTextInput: true,
+      autoFocus,
+    });
+    const stateProps = useStateProps({
+      hover: isHovered,
+      focus: isFocusVisible,
+      disabled,
+      readOnly,
+      error,
+    });
 
-  return (
-    <FieldBase
-      label={label}
-      labelProps={labelProps}
-      required={required}
-      description={description}
-      descriptionProps={descriptionProps}
-      error={error}
-      errorMessage={errorMessage}
-      errorMessageProps={errorMessageProps}
-      stateProps={stateProps}
-      variant={variant}
-      size={size}
-      width={width}
-    >
-      <Input
-        ref={ref}
+    return (
+      <FieldBase
+        label={label}
+        labelProps={labelProps}
+        required={required}
+        description={description}
+        descriptionProps={descriptionProps}
+        error={error}
+        errorMessage={errorMessage}
+        errorMessageProps={errorMessageProps}
+        stateProps={stateProps}
         variant={variant}
         size={size}
-        /**
-         * We use `size` for styles which is a string, not like
-         * the regular HTML attribute, which is a number
-         */
-        {...(inputProps as any)}
-        {...focusProps}
-        {...hoverProps}
-        {...stateProps}
-      />
-    </FieldBase>
-  );
-};
+        width={width}
+      >
+        <Input
+          ref={inputRef}
+          variant={variant}
+          size={size}
+          /**
+           * We use `size` for styles which is a string, not like
+           * the regular HTML attribute, which is a number
+           */
+          {...(inputProps as any)}
+          {...focusProps}
+          {...hoverProps}
+          {...stateProps}
+        />
+      </FieldBase>
+    );
+  }
+);
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index 24fee963b..bf2557b01 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -1,8 +1,4 @@
-import type { CSSObject, Theme as Scales } from '@marigold/system';
-
-// Provider
-// ---------------
-import type { RootThemeExtension } from './Provider';
+import type { Theme as BaseTheme } from '@marigold/system';
 
 // Components
 // ---------------
@@ -70,6 +66,6 @@ interface ComponentStyles
     TooltipThemeExtension,
     UnderlayThemeExtension {}
 
-export interface Theme extends Scales, RootThemeExtension<CSSObject> {
+export interface Theme extends BaseTheme {
   components: ComponentStyles;
 }
diff --git a/packages/system/src/components/Box/Box.stories.tsx b/packages/system/src/components/Box/Box.stories.tsx
index 3c31d47b4..0776a26d3 100644
--- a/packages/system/src/components/Box/Box.stories.tsx
+++ b/packages/system/src/components/Box/Box.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, ComponentStory } from '@storybook/react';
 import { Box } from './Box';
 
 export default {
-  title: 'Components/Box',
+  title: 'System/Box',
   argTypes: {
     children: {
       control: {
diff --git a/packages/system/src/components/Box/Box.tsx b/packages/system/src/components/Box/Box.tsx
index da29a3228..e4ffd754e 100644
--- a/packages/system/src/components/Box/Box.tsx
+++ b/packages/system/src/components/Box/Box.tsx
@@ -8,9 +8,8 @@ import {
   PolymorphicComponentWithRef,
 } from '@marigold/types';
 
-import { getNormalizedStyles } from '../../normalize';
+import { transformPseudos } from './selector';
 import { CSSObject } from '../../types';
-import { transformPseudos } from './utils';
 
 export interface StyleProps
   extends Pick<
@@ -77,7 +76,6 @@ const createThemedStyle =
   ({ as, __baseCSS, styles, css }: CreateStyleProps) =>
   (theme: Theme) => {
     const themedStyles = merge.all([
-      getNormalizedStyles(as),
       transformStyleObject(__baseCSS)(theme),
       transformStyleObject(styles)(theme),
       transformStyleObject(css)(theme),
diff --git a/packages/system/src/components/Box/utils.ts b/packages/system/src/components/Box/selector.ts
similarity index 100%
rename from packages/system/src/components/Box/utils.ts
rename to packages/system/src/components/Box/selector.ts
diff --git a/packages/system/src/components/Global/Global.stories.tsx b/packages/system/src/components/Global/Global.stories.tsx
new file mode 100644
index 000000000..2bbdd0558
--- /dev/null
+++ b/packages/system/src/components/Global/Global.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Global } from './Global';
+import { ThemeProvider } from '../../hooks';
+
+export default {
+  title: 'System/Global',
+  argTypes: {
+    selector: {
+      control: {
+        type: 'text',
+      },
+      description: 'The CSS selector to apply to the styles (default document)',
+    },
+    normalizeDocument: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Normalize the document?',
+    },
+  },
+} as Meta;
+
+const theme = {
+  root: {
+    button: {
+      color: '#fff0f6',
+      border: '1px solid #a61e4d',
+      background: '#d6336c',
+    },
+  },
+};
+
+export const Basic: ComponentStory<typeof Global> = args => (
+  <ThemeProvider theme={theme}>
+    <Global {...args} />
+    <div>
+      <button>Button</button>
+    </div>
+  </ThemeProvider>
+);
+
+export const Custom: ComponentStory<typeof Global> = () => (
+  <ThemeProvider theme={theme}>
+    <Global selector="#custom" />
+    <p>
+      Element normalization and globals styles are only applied to the "Inside
+      Button"
+    </p>
+    <div style={{ paddingBottom: 10 }}>
+      <button>Outside Button</button>
+    </div>
+    <div id="custom">
+      <button>Inside Button</button>
+    </div>
+  </ThemeProvider>
+);
diff --git a/packages/system/src/components/Global/Global.tsx b/packages/system/src/components/Global/Global.tsx
index 07cb500e1..72643515e 100644
--- a/packages/system/src/components/Global/Global.tsx
+++ b/packages/system/src/components/Global/Global.tsx
@@ -1,39 +1,33 @@
 import React from 'react';
 import { Global as EmotionGlobal } from '@emotion/react';
-import { useTheme } from '../../hooks';
 
-/**
- * CSS snippet and idea from:
- * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
- */
-const reduceMotionStyles = {
-  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
-    '*': {
-      animationDuration: '0.001ms !important',
-      animationIterationCount: '1 !important',
-      transitionDuration: '0.001ms !important',
-    },
-  },
+import { useTheme } from '../../hooks/useTheme';
+import * as normalize from './normalize';
+
+export type GlobalProps = {
+  /**
+   * CSS Selector to change the element that the styles will be applied to.
+   */
+  selector?: string;
+
+  /**
+   * Normalize `html` and `body`? Defaults to `true`.
+   */
+  normalizeDocument?: boolean;
 };
 
-export const Global = () => {
-  const { css } = useTheme();
-  const styles = css({
-    html: {
-      height: '100%',
-      /**
-       * Prevent Mobile Safari from zooming stuff ...
-       * Source: https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/
-       */
-      textSizeAdjust: 'none',
-      variant: 'root.html',
-    },
-    body: {
-      height: '100%',
-      lineHeight: 1.5,
-      WebkitFontSmoothing: 'antialiased',
-      variant: 'root.body',
-    },
-  });
-  return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;
+export const Global = ({ normalizeDocument = true, selector }: GlobalProps) => {
+  const { css, theme } = useTheme();
+  const rootStyles = css(theme?.root || {});
+
+  const styles = [
+    normalizeDocument ? normalize.document : {},
+    // Prefix normalization and root styles with selector if provided.
+    selector
+      ? { [`:where(${selector})`]: normalize.element }
+      : normalize.element,
+    selector ? { [`:where(${selector})`]: rootStyles } : rootStyles,
+  ];
+
+  return <EmotionGlobal styles={styles} />;
 };
diff --git a/packages/system/src/components/Global/normalize.ts b/packages/system/src/components/Global/normalize.ts
new file mode 100644
index 000000000..a0ad850c2
--- /dev/null
+++ b/packages/system/src/components/Global/normalize.ts
@@ -0,0 +1,97 @@
+/**
+ * Normalize styling of certain elements between browsers.
+ * Based on https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+export const document = {
+  'html, body': {
+    height: '100%',
+  },
+
+  html: {
+    /**
+     * Prevent Mobile Safari from zooming stuff ...
+     * Source: https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/
+     */
+    textSizeAdjust: 'none',
+  },
+
+  body: {
+    lineHeight: 1.5,
+    WebkitFontSmoothing: 'antialiased',
+    /**
+     * We have to duplicate this here, since the "*" selector will not be
+     * applied to the body element if a custom `selector` is used.
+     */
+    margin: 0,
+  },
+
+  /**
+   * CSS snippet and idea from:
+   * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
+   */
+  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
+    '*': {
+      animationDuration: '0.001ms !important',
+      animationIterationCount: '1 !important',
+      transitionDuration: '0.001ms !important',
+    },
+  },
+};
+
+export const element = {
+  '*, *::before, *::after': {
+    boxSizing: 'border-box',
+  },
+
+  '*': {
+    margin: 0,
+  },
+
+  a: {
+    textDecoration: 'none',
+  },
+
+  'p, h1, h2, h3, h4, h5, h6': {
+    overflowWrap: 'break-word',
+  },
+
+  'img, picture, video, canvas, svg': {
+    display: 'block',
+    maxWidth: '100%',
+  },
+
+  button: {
+    display: 'block',
+    appearance: 'none',
+    font: 'inherit',
+    background: 'transparent',
+    textAlign: 'center',
+  },
+
+  input: {
+    display: 'block',
+    appearance: 'none',
+    font: 'inherit',
+    '&::-ms-clear': {
+      display: 'none',
+    },
+    '&::-webkit-search-cancel-button': {
+      WebkitAppearance: 'none',
+    },
+  },
+
+  select: {
+    display: 'block',
+    appearance: 'none',
+    font: 'inherit',
+    '&::-ms-expand': {
+      display: 'none',
+    },
+  },
+
+  textarea: {
+    display: 'block',
+    appearance: 'none',
+    font: 'inherit',
+  },
+} as const;
diff --git a/packages/system/src/components/SVG/SVG.tsx b/packages/system/src/components/SVG/SVG.tsx
index 03dc08c12..06d7b4f05 100644
--- a/packages/system/src/components/SVG/SVG.tsx
+++ b/packages/system/src/components/SVG/SVG.tsx
@@ -1,11 +1,7 @@
 import { jsx } from '@emotion/react';
 import { ComponentProps } from '@marigold/types';
-
-import { getNormalizedStyles } from '../../normalize';
 import { useTheme } from '../../hooks';
 
-const normalizedStyles = getNormalizedStyles('svg');
-
 // Make sure that numbered values are converted to px.
 const toDimension = (value: number | string | number[] | string[]) =>
   Array.isArray(value)
@@ -31,7 +27,6 @@ export const SVG = ({
     {
       viewBox: '0 0 24 24',
       css: css({
-        ...normalizedStyles,
         fill,
         width: toDimension(props.width || size),
         height: toDimension(props.height || size),
diff --git a/packages/system/src/index.ts b/packages/system/src/index.ts
index 711d26589..2103701b1 100644
--- a/packages/system/src/index.ts
+++ b/packages/system/src/index.ts
@@ -1,5 +1,3 @@
 export * from './components';
 export * from './hooks';
 export * from './types';
-
-export * from './normalize';
diff --git a/packages/system/src/normalize.ts b/packages/system/src/normalize.ts
deleted file mode 100644
index 54b6a1b43..000000000
--- a/packages/system/src/normalize.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Normalize styling of certain elements between browsers.
- * Based on https://www.joshwcomeau.com/css/custom-css-reset/
- */
-import { ElementType } from 'react';
-
-const base = {
-  boxSizing: 'border-box',
-  margin: 0,
-  minWidth: 0,
-} as const;
-
-const a = {
-  ...base,
-  textDecoration: 'none',
-} as const;
-
-const text = {
-  ...base,
-  overflowWrap: 'break-word',
-} as const;
-
-const media = {
-  ...base,
-  display: 'block',
-  maxWidth: '100%',
-} as const;
-
-const button = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  background: 'transparent',
-  textAlign: 'center',
-} as const;
-
-const input = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  '&::-ms-clear': {
-    display: 'none',
-  },
-  '&::-webkit-search-cancel-button': {
-    WebkitAppearance: 'none',
-  },
-} as const;
-
-const select = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  '&::-ms-expand': {
-    display: 'none',
-  },
-} as const;
-
-const textarea = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-} as const;
-
-// Normalize
-// ---------------
-export const normalize = {
-  base,
-  a,
-  p: text,
-  h1: text,
-  h2: text,
-  h3: text,
-  h4: text,
-  h5: text,
-  h6: text,
-  img: media,
-  picture: media,
-  video: media,
-  canvas: media,
-  svg: media,
-  select,
-  button,
-  textarea,
-  input,
-} as const;
-
-export type NormalizedElement = keyof typeof normalize;
-
-/**
- * Type-safe helper to get normalization. If no normalization is found,
- * returns the *base* normalization.
- */
-export const getNormalizedStyles = (val?: ElementType) =>
-  typeof val === 'string' && val in normalize
-    ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly
-    : normalize.base;
diff --git a/packages/system/src/types/theme.ts b/packages/system/src/types/theme.ts
index bc2c06ac2..ca425382d 100644
--- a/packages/system/src/types/theme.ts
+++ b/packages/system/src/types/theme.ts
@@ -112,6 +112,13 @@ export interface ZeroSizeScale<T> extends SizeScale<T> {
  * Base theme with typings for available scales properties.
  */
 export interface Theme {
+  /**
+   * Styles that applied to the root of the app, where the root can be either the document
+   * for full page apps or an element if you're only using Marigold on a portion of the page.
+   * This is useful for additional normalizationor and to style non-Marigold elements.
+   */
+  root?: CSSObject;
+
   /**
    * To configure the default breakpoints used in responsive array values,
    * add a breakpoints array to your theme.


Test patch:
diff --git a/packages/components/src/Checkbox/Checkbox.test.tsx b/packages/components/src/Checkbox/Checkbox.test.tsx
index 34e7c7d52..a7d59468d 100644
--- a/packages/components/src/Checkbox/Checkbox.test.tsx
+++ b/packages/components/src/Checkbox/Checkbox.test.tsx
@@ -235,3 +235,16 @@ test('controlled', () => {
   fireEvent.click(input);
   expect(onChange).toHaveBeenCalledWith(false);
 });
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLInputElement>();
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox data-testid="checkbox" ref={ref}>
+        Check it
+      </Checkbox>
+    </ThemeProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLInputElement);
+});
diff --git a/packages/components/src/Provider/MarigoldProvider.test.tsx b/packages/components/src/Provider/MarigoldProvider.test.tsx
index 9a1fb5cc0..5d85e9565 100644
--- a/packages/components/src/Provider/MarigoldProvider.test.tsx
+++ b/packages/components/src/Provider/MarigoldProvider.test.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable testing-library/no-node-access */
 /* eslint-disable testing-library/no-container */
 import React from 'react';
-import { useTheme } from '@marigold/system';
 import { render, screen } from '@testing-library/react';
+import { useTheme } from '@marigold/system';
 
 import { MarigoldProvider } from './MarigoldProvider';
 
@@ -24,7 +24,17 @@ const theme = {
   },
 };
 
-test('themes can be cascaded', () => {
+let errorMock: jest.SpyInstance;
+
+beforeEach(() => {
+  errorMock = jest.spyOn(console, 'error').mockImplementation();
+});
+
+afterEach(() => {
+  errorMock.mockRestore();
+});
+
+test('support cascading themes', () => {
   const outerTheme = {
     colors: {
       primary: 'coral',
@@ -72,7 +82,7 @@ test('themes can be cascaded', () => {
   `);
 });
 
-test('OverlayProvider is added', () => {
+test('add OverlayProvider from `react-aria`', () => {
   const { container } = render(
     <MarigoldProvider theme={theme}>Test</MarigoldProvider>
   );
@@ -95,7 +105,7 @@ test('OverlayProvider is added only once', () => {
   ).toEqual(1);
 });
 
-test('applies global styles for body and html based on `theme.root`', () => {
+test('apply styles base on theme (`theme.root`)', () => {
   const theme = {
     fonts: {
       body: 'Inter',
@@ -137,3 +147,98 @@ test('applies global styles for body and html based on `theme.root`', () => {
   expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
   expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
 });
+
+test('normalize document (html, body)', () => {
+  render(<MarigoldProvider theme={theme}>child</MarigoldProvider>);
+
+  const html = document.querySelector('html')!;
+  expect(html).toHaveStyle('height: 100%');
+
+  const body = document.querySelector('body')!;
+  expect(body).toHaveStyle('height: 100%');
+  expect(body).toHaveStyle('line-height: 1.5');
+});
+
+test('opt out of document normalization', () => {
+  render(
+    <MarigoldProvider theme={theme} normalizeDocument={false}>
+      child
+    </MarigoldProvider>
+  );
+
+  const html = document.querySelector('html')!;
+  expect(html).not.toHaveStyle('height: 100%');
+
+  const body = document.querySelector('body')!;
+  expect(body).not.toHaveStyle('height: 100%');
+  expect(body).not.toHaveStyle('line-height: 1.5');
+});
+
+test('cascading fails if inner theme has root styles', () => {
+  const outerTheme = {
+    root: {
+      background: 'coral',
+    },
+  };
+
+  const innerTheme = {
+    root: {
+      background: 'gainsboro',
+    },
+  };
+
+  expect(() =>
+    render(
+      <MarigoldProvider theme={outerTheme}>
+        <MarigoldProvider theme={innerTheme}>child</MarigoldProvider>
+      </MarigoldProvider>
+    )
+  ).toThrowError();
+  expect(errorMock).toHaveBeenCalled();
+});
+
+test('cascading without a selector is allowed when inner theme has not root styles', () => {
+  const outerTheme = {
+    colors: {
+      primary: 'coral',
+    },
+  };
+
+  const innerTheme = {
+    colors: {
+      primary: 'gainsboro',
+    },
+  };
+
+  expect(() =>
+    render(
+      <MarigoldProvider theme={outerTheme}>
+        <MarigoldProvider theme={innerTheme}>child</MarigoldProvider>
+      </MarigoldProvider>
+    )
+  ).not.toThrowError();
+});
+
+test('cascading with a selector is allowed when inner theme has specified a selector', () => {
+  const outerTheme = {
+    root: {
+      background: 'coral',
+    },
+  };
+
+  const innerTheme = {
+    root: {
+      background: 'gainsboro',
+    },
+  };
+
+  expect(() =>
+    render(
+      <MarigoldProvider theme={outerTheme}>
+        <MarigoldProvider theme={innerTheme} selector="#root">
+          <div id="root" />
+        </MarigoldProvider>
+      </MarigoldProvider>
+    )
+  ).not.toThrowError();
+});
diff --git a/packages/components/src/Radio/Radio.test.tsx b/packages/components/src/Radio/Radio.test.tsx
index 277eb9003..71b02b26d 100644
--- a/packages/components/src/Radio/Radio.test.tsx
+++ b/packages/components/src/Radio/Radio.test.tsx
@@ -379,3 +379,21 @@ test('allows styling "read-only" state via theme', () => {
   const radio = getVisibleRadios()?.[0];
   expect(radio).toHaveStyle(`opacity: 0.5`);
 });
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLInputElement>();
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio.Group label="With Label">
+        <Radio value="1" data-testid="radio-1" ref={ref}>
+          Option 1
+        </Radio>
+        <Radio value="2" data-testid="radio-2">
+          Option 2
+        </Radio>
+      </Radio.Group>
+    </ThemeProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLInputElement);
+});
diff --git a/packages/components/src/Select/Select.test.tsx b/packages/components/src/Select/Select.test.tsx
index 220ac8526..deb098d0f 100644
--- a/packages/components/src/Select/Select.test.tsx
+++ b/packages/components/src/Select/Select.test.tsx
@@ -650,4 +650,22 @@ test('supports styling disabled option', () => {
   expect(two).toHaveStyle(`color: ${theme.colors.disabled}`);
 });
 
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLButtonElement>();
+  render(
+    <OverlayProvider>
+      <ThemeProvider theme={theme}>
+        <Select label="Label" data-testid="select" ref={ref}>
+          <Select.Section title="Section 1">
+            <Select.Option key="one">one</Select.Option>
+            <Select.Option key="two">two</Select.Option>
+          </Select.Section>
+        </Select>
+      </ThemeProvider>
+    </OverlayProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+});
+
 // FIXME: We currently have no easy way to test the focus + hover styling
diff --git a/packages/components/src/Slider/Slider.test.tsx b/packages/components/src/Slider/Slider.test.tsx
index dbe29eb20..3d448c8a7 100644
--- a/packages/components/src/Slider/Slider.test.tsx
+++ b/packages/components/src/Slider/Slider.test.tsx
@@ -171,3 +171,14 @@ test('allows to set width via prop', () => {
   const container = screen.getByRole('group');
   expect(container).toHaveStyle(`width: ${theme.sizes.large}px`);
 });
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLDivElement>();
+  render(
+    <ThemeProvider theme={theme}>
+      <Slider ref={ref}>Percent</Slider>
+    </ThemeProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLDivElement);
+});
diff --git a/packages/components/src/Switch/Switch.test.tsx b/packages/components/src/Switch/Switch.test.tsx
index b417e26a5..bf8244a6e 100644
--- a/packages/components/src/Switch/Switch.test.tsx
+++ b/packages/components/src/Switch/Switch.test.tsx
@@ -236,3 +236,14 @@ test('supports controlled component usage', () => {
   expect(onChange).toHaveBeenCalledWith(false);
   expect(input).toHaveAttribute('aria-checked', 'false');
 });
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLInputElement>();
+  render(
+    <ThemeProvider theme={theme}>
+      <Switch ref={ref}>Label</Switch>
+    </ThemeProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLInputElement);
+});
diff --git a/packages/components/src/TextArea/TextArea.test.tsx b/packages/components/src/TextArea/TextArea.test.tsx
index 536e252b9..e74cc5372 100644
--- a/packages/components/src/TextArea/TextArea.test.tsx
+++ b/packages/components/src/TextArea/TextArea.test.tsx
@@ -299,3 +299,14 @@ test('can be controlled', () => {
   userEvent.type(screen.getByTestId('textarea'), 'Hello there!');
   expect(screen.getByTestId('output')).toHaveTextContent('Hello there!');
 });
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLTextAreaElement>();
+  render(
+    <ThemeProvider theme={theme}>
+      <TextArea data-testid="text-area" label="A Label" ref={ref} />
+    </ThemeProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+});
diff --git a/packages/components/src/TextField/TextField.test.tsx b/packages/components/src/TextField/TextField.test.tsx
index a447c8949..f5e4db0c4 100644
--- a/packages/components/src/TextField/TextField.test.tsx
+++ b/packages/components/src/TextField/TextField.test.tsx
@@ -294,3 +294,14 @@ test('can be controlled', () => {
   userEvent.type(screen.getByTestId('text-field'), 'Hello there!');
   expect(screen.getByTestId('output')).toHaveTextContent('Hello there!');
 });
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLInputElement>();
+  render(
+    <ThemeProvider theme={theme}>
+      <TextField data-testid="text-field" label="A Label" ref={ref} />
+    </ThemeProvider>
+  );
+
+  expect(ref.current).toBeInstanceOf(HTMLInputElement);
+});
diff --git a/packages/system/src/components/Box/Box.test.tsx b/packages/system/src/components/Box/Box.test.tsx
index a32801bc0..8a8eaed16 100644
--- a/packages/system/src/components/Box/Box.test.tsx
+++ b/packages/system/src/components/Box/Box.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { ThemeProvider } from '../../hooks';
-import { normalize } from '../../normalize';
 
 import { Box, StyleProps } from './Box';
 
@@ -112,35 +111,6 @@ test('forwards ref', () => {
   expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
 });
 
-test('apply normalized styles', () => {
-  render(<Box>Test</Box>);
-  const element = screen.getByText('Test');
-  const { base } = normalize;
-
-  // Smoketest
-  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
-  expect(element).toHaveStyle(`margin: ${base.margin}px`);
-  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
-});
-
-test('base normalization is always applied', () => {
-  render(<Box as="button">Test</Box>);
-  const element = screen.getByText('Test');
-  const { base } = normalize;
-
-  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
-  expect(element).toHaveStyle(`margin: ${base.margin}px`);
-  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
-});
-
-test('apply normalized styles based on element', () => {
-  render(<Box as="h1">Test</Box>);
-  const element = screen.getByText('Test');
-  const { h1 } = normalize;
-
-  expect(element).toHaveStyle(`overflow-wrap: ${h1.overflowWrap}`);
-});
-
 test('accepts default styling via "__baseCSS" prop', () => {
   render(<Box __baseCSS={{ color: 'hotpink' }}>Test</Box>);
   const element = screen.getByText('Test');
@@ -148,7 +118,7 @@ test('accepts default styling via "__baseCSS" prop', () => {
   expect(element).toHaveStyle('color: hotpink');
 });
 
-test('default styling overrides normalization', () => {
+test('default styling overrides (global) normalization', () => {
   render(
     <ThemeProvider theme={theme}>
       <Box __baseCSS={{ m: 'medium' }}>Test</Box>
diff --git a/packages/system/src/components/Box/utils.test.ts b/packages/system/src/components/Box/selector.test.ts
similarity index 98%
rename from packages/system/src/components/Box/utils.test.ts
rename to packages/system/src/components/Box/selector.test.ts
index 54dc7ecf0..d78e6387d 100644
--- a/packages/system/src/components/Box/utils.test.ts
+++ b/packages/system/src/components/Box/selector.test.ts
@@ -1,4 +1,4 @@
-import { transformPseudos } from './utils';
+import { transformPseudos } from './selector';
 
 describe('transform states', () => {
   test('returns a css object', () => {
diff --git a/packages/system/src/components/Global/Global.test.tsx b/packages/system/src/components/Global/Global.test.tsx
index 9e7db8eab..4f7bc7580 100644
--- a/packages/system/src/components/Global/Global.test.tsx
+++ b/packages/system/src/components/Global/Global.test.tsx
@@ -1,60 +1,182 @@
+/* eslint-disable testing-library/no-node-access */
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '../../hooks';
 
 import { Global } from './Global';
 
-test('applies normlaization to html and body', () => {
-  const view = render(<Global />);
-
-  // eslint-disable-next-line testing-library/no-node-access
-  const html = window.getComputedStyle(view.baseElement.parentElement!);
-  expect(html.height).toBe('100%');
-  // expect(html.textSizeAdjust).toBe('none'); can not test this in JSDOM :(
-  const body = window.getComputedStyle(view.baseElement);
-  expect(body.height).toBe('100%');
-  expect(body.lineHeight).toBe('1.5');
-});
-
-test('applies global styles for body and html based on `theme.root`', () => {
-  const theme = {
-    colors: {
-      background: '#fff',
-    },
-    fonts: {
-      body: 'Inter',
+const theme = {
+  colors: {
+    background: '#fff',
+    hot: 'hotpink',
+  },
+  fonts: {
+    body: 'Inter',
+  },
+  lineHeights: {
+    body: 2.5,
+  },
+  fontWeights: {
+    body: 500,
+  },
+  root: {
+    body: {
+      fontFamily: 'body',
+      lineHeight: 'body',
+      fontWeight: 'body',
     },
-    lineHeights: {
-      body: 2.5,
+    html: {
+      bg: 'background',
     },
-    fontWeights: {
-      body: 500,
-      html: 700,
+    p: {
+      bg: 'hot',
     },
-    root: {
-      body: {
-        fontFamily: 'body',
-        lineHeight: 'body',
-        fontWeight: 'body',
-      },
-      html: {
-        bg: 'background',
-      },
-    },
-  };
+  },
+};
+
+test('normalize document (html, body)', () => {
+  render(<Global />);
+
+  const html = document.querySelector('html')!;
+  expect(html).toHaveStyle('height: 100%');
+
+  const body = document.querySelector('body')!;
+  expect(body).toHaveStyle('height: 100%');
+  expect(body).toHaveStyle('line-height: 1.5');
+});
+
+test('opt out of document normalization', () => {
+  render(<Global normalizeDocument={false} />);
+
+  const html = document.querySelector('html')!;
+  expect(html).not.toHaveStyle('height: 100%');
+
+  const body = document.querySelector('body')!;
+  expect(body).not.toHaveStyle('height: 100%');
+  expect(body).not.toHaveStyle('line-height: 1.5');
+});
+
+test('normalize elements', () => {
+  render(
+    <>
+      <Global />
+      <div data-testid="div">Div</div>
+      <p data-testid="p">Paragraph</p>
+      <a data-testid="a">Link</a>
+      <button data-testid="button">Button</button>
+      <img data-testid="img" alt="foo" src="" />
+    </>
+  );
+
+  const div = screen.getByTestId('div');
+  expect(div).toHaveStyle('box-sizing: border-box');
+  expect(div).toHaveStyle('margin: 0');
+
+  const p = screen.getByTestId('p');
+  expect(p).toHaveStyle('box-sizing: border-box');
+  expect(p).toHaveStyle('margin: 0');
+  expect(p).toHaveStyle('overflow-wrap: break-word');
+
+  const a = screen.getByTestId('a');
+  expect(a).toHaveStyle('box-sizing: border-box');
+  expect(a).toHaveStyle('margin: 0');
+  expect(a).toHaveStyle('text-decoration: none');
+
+  const button = screen.getByTestId('button');
+  expect(button).toHaveStyle('box-sizing: border-box');
+  expect(button).toHaveStyle('margin: 0');
+  expect(button).toHaveStyle('display: block');
+  expect(button).toHaveStyle('appearance: none');
+  expect(button).toHaveStyle('font: inherit');
+  expect(button).toHaveStyle('background: transparent');
+  expect(button).toHaveStyle('text-align: center');
+
+  const img = screen.getByTestId('img');
+  expect(img).toHaveStyle('box-sizing: border-box');
+  expect(img).toHaveStyle('margin: 0');
+  expect(img).toHaveStyle('display: block');
+  expect(img).toHaveStyle('max-width: 100%');
+});
+
+test('apply element normalization to a selector (instead of the whole document)', () => {
+  render(
+    <>
+      <Global selector="#root" />
+      <p data-testid="outside">Paragraph</p>
+      <div id="root" data-testid="root">
+        <p data-testid="inside">Paragraph</p>
+      </div>
+    </>
+  );
+
+  const outside = screen.getByTestId('outside');
+  expect(outside).not.toHaveStyle('box-sizing: border-box');
+  expect(outside).not.toHaveStyle('margin: 0');
+  expect(outside).not.toHaveStyle('overflow-wrap: break-word');
 
-  const view = render(
+  // Uncomment when JSDOM supports `:where` selector
+  // const inside = screen.getByTestId('inside');
+  // expect(inside).toHaveStyle('box-sizing: border-box');
+  // expect(inside).toHaveStyle('margin: 0');
+  // expect(inside).toHaveStyle('overflow-wrap: break-word');
+});
+
+test('apply global styles via theme ("theme.root")', () => {
+  render(
     <ThemeProvider theme={theme}>
       <Global />
     </ThemeProvider>
   );
 
-  // eslint-disable-next-line testing-library/no-node-access
-  const html = view.baseElement.parentElement;
+  const html = document.querySelector('html')!;
   expect(html).toHaveStyle(`background: ${theme.colors.background}`);
 
-  const body = view.baseElement;
+  const body = document.querySelector('body')!;
   expect(body).toHaveStyle(`font-family: ${theme.fonts.body}`);
   expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
   expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
 });
+
+test('apply root styles to a selector', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Global selector="#root" />
+      <p data-testid="outside">Paragraph</p>
+      <div id="root" data-testid="root">
+        <p data-testid="inside">Paragraph</p>
+      </div>
+    </ThemeProvider>
+  );
+
+  const html = document.querySelector('html')!;
+  expect(html).not.toHaveStyle(`background: ${theme.colors.background}`);
+
+  const outside = screen.getByTestId('outside');
+  expect(outside).not.toHaveStyle(`background: ${theme.colors.hot}`);
+
+  // Uncomment when JSDOM supports `:where` selector
+  // const inside = screen.getByTestId('inside');
+  // expect(inside).toHaveStyle(`background: ${theme.colors.hot}`);
+});
+
+test('allow to style arbitrary elements with root styles', () => {
+  const customTheme = {
+    root: {
+      '.btn': {
+        background: 'cyan',
+      },
+    },
+  };
+
+  render(
+    <ThemeProvider theme={customTheme}>
+      <Global />
+      <button className="btn" data-testid="button">
+        Paragraph
+      </button>
+    </ThemeProvider>
+  );
+
+  const button = screen.getByTestId('button');
+  expect(button).toHaveStyle('background: cyan');
+});
diff --git a/packages/system/src/components/SVG/SVG.test.tsx b/packages/system/src/components/SVG/SVG.test.tsx
index 96f32448e..d8d98da99 100644
--- a/packages/system/src/components/SVG/SVG.test.tsx
+++ b/packages/system/src/components/SVG/SVG.test.tsx
@@ -19,13 +19,6 @@ test('renders svg', () => {
   expect(svg instanceof SVGElement).toBeTruthy();
 });
 
-test('normalizes <svg>', () => {
-  render(<SVG data-testid="svg" />);
-  const svg = screen.getByTestId('svg');
-  expect(svg).toHaveStyle('display: block');
-  expect(svg).toHaveStyle('max-width: 100%');
-});
-
 test('supports default fill color', () => {
   render(
     <SVG data-testid="svg">
diff --git a/packages/system/src/normalize.test.tsx b/packages/system/src/normalize.test.tsx
deleted file mode 100644
index 838a49877..000000000
--- a/packages/system/src/normalize.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { normalize, getNormalizedStyles } from './normalize';
-
-test.each(Object.entries(normalize))('base is included in %p', (_, value) => {
-  expect(value).toMatchObject(normalize.base);
-});
-
-test('get normalized styles', () => {
-  expect(getNormalizedStyles('a')).toMatchObject(normalize.a);
-  expect(getNormalizedStyles('p')).toMatchObject(normalize.p);
-});
-
-test('return base normalzation for arbitrary components', () => {
-  const Component = () => null;
-  expect(getNormalizedStyles(Component)).toMatchObject(normalize.base);
-});