baseui 0.0.0-alpha-fd35cbd → 0.0.0-alpha-3a96a5e

package/combobox/combobox.js

@@ -60,6 +60,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -322,6 +323,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -360,9 +362,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -375,7 +376,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 var _default = Combobox;

package/combobox/combobox.js.flow

@@ -38,6 +38,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -274,6 +275,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // eslint-disable-next-line flowtype/no-weak-types
             ref={(listboxRef: any)}
             role="listbox"
+            aria-label={listBoxLabel}
             $width={listboxWidth}
             {...listBoxProps}
           >
@@ -322,10 +324,9 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
           <OverriddenInput
             inputRef={handleInputRef}
             aria-activedescendant={
-              selectionIndex >= 0 ? activeDescendantId : undefined
+              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
             }
             aria-autocomplete="list"
-            aria-controls={listboxId}
             disabled={disabled}
             error={error}
             name={name}
@@ -338,6 +339,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
+            {...(isOpen ? {'aria-controls': listboxId} : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/types.js.flow

@@ -18,6 +18,8 @@ export type PropsT<OptionT = mixed> = {|
   disabled?: boolean,
   // Proxies value through to Input component.
   error?: boolean,
+  // Label used for the listbox/popup with options
+  listBoxLabel?: string,
   // Used to render a custom node besides the default.
   mapOptionToNode?: React.AbstractComponent<{|
     isSelected: boolean,

package/datepicker/styled-components.js

@@ -502,7 +502,7 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === _constants.DENSITY.high ? '42px' : '50px',
       width: '100%',

package/datepicker/styled-components.js.flow

@@ -496,7 +496,10 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow:
+        $isFocusVisible && (!$outsideMonth || $peekNextMonth)
+          ? `0 0 0 3px ${colors.accent}`
+          : 'none',
       backgroundColor: $selected
         ? colors.calendarDayBackgroundSelectedHighlighted
         : $pseudoSelected && $isHighlighted

package/es/combobox/combobox.js

@@ -28,6 +28,7 @@ function Combobox(props) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -251,6 +252,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map((option, index) => {
       const isSelected = selectionIndex === index;
@@ -287,9 +289,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -302,7 +303,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 export default Combobox;

package/es/datepicker/styled-components.js

@@ -503,7 +503,7 @@ export const StyledDay = styled('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? `0 0 0 3px ${colors.accent}` : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',

package/es/menu/maybe-child-menu.js

@@ -43,8 +43,6 @@ export default function MaybeChildMenu(props) {
       overrides: mergeOverrides({
         Body: {
           props: {
-            // Adds mouseleave to popover body so that child menu closes when user mouses out.
-            onMouseLeave: props.resetParentMenu,
             // Trap tabbing when focused on a child menu. Popover mounts the element at the end of
             // the html body by default. If a user was to tab to the next element it would navigate
             // to elements not within the immediate area surrounding the menu.

package/es/menu/nested-menus.js

@@ -12,6 +12,8 @@ export const NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   mountRef: {
     current: null
   }
@@ -30,16 +32,43 @@ export default class NestedMenus extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      menus: []
+      menus: [],
+      nestedMenuHoverIndex: -1
     });
 
     _defineProperty(this, "mountRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(this, "mouseLeaveTimeoueId", null);
+
+    _defineProperty(this, "handleMenuMouseLeave", event => {
+      this.mouseLeaveTimeoueId = setTimeout(() => {
+        this.setState({
+          nestedMenuHoverIndex: -1
+        });
+      }, 200);
+    });
+
+    _defineProperty(this, "handleMenuMouseEnter", event => {
+      if (typeof document !== 'undefined') {
+        clearTimeout(this.mouseLeaveTimeoueId);
+        const index = this.state.menus.findIndex(m => {
+          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+        });
+        this.setState({
+          nestedMenuHoverIndex: index
+        });
+      }
+    });
+
     _defineProperty(this, "addMenuToNesting", ref => {
       // check offsetHeight to determine if component is visible in the dom (0 means hidden)
       // we need to do this so that when we renderAll, the hidden seo-only child-menus don't
       // register themselves which would break the nesting logic
-      if (ref.current && ref.current.offsetHeight) {
+      const element = ref.current;
+
+      if (element && element.offsetHeight) {
+        element.addEventListener('mouseenter', this.handleMenuMouseEnter);
+        element.addEventListener('mouseleave', this.handleMenuMouseLeave);
         this.setState(state => {
           return {
             menus: [...state.menus, ref]
@@ -50,7 +79,17 @@ export default class NestedMenus extends React.Component {
 
     _defineProperty(this, "removeMenuFromNesting", ref => {
       this.setState(state => {
-        const nextMenus = state.menus.filter(r => r.current).filter(r => !isSame(r.current, ref.current));
+        for (const r of this.state.menus) {
+          if (r.current && isSame(r.current, ref.current)) {
+            const element = r.current;
+            element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
+            element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
+          }
+        }
+
+        const nextMenus = state.menus.filter(r => {
+          return r.current && !isSame(r.current, ref.current);
+        });
         return {
           menus: nextMenus
         };
@@ -70,6 +109,11 @@ export default class NestedMenus extends React.Component {
       const index = this.findMenuIndexByRef(ref) + 1;
       return this.state.menus[index];
     });
+
+    _defineProperty(this, "isNestedMenuVisible", ref => {
+      const index = this.findMenuIndexByRef(ref);
+      return index <= this.state.nestedMenuHoverIndex;
+    });
   }
 
   render() {
@@ -79,6 +123,8 @@ export default class NestedMenus extends React.Component {
         removeMenuFromNesting: this.removeMenuFromNesting,
         getParentMenu: this.getParentMenu,
         getChildMenu: this.getChildMenu,
+        isNestedMenuVisible: this.isNestedMenuVisible,
+        nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
         mountRef: this.mountRef
       }
     }, /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, /*#__PURE__*/React.createElement("span", {

package/es/menu/stateful-container.js

@@ -34,6 +34,8 @@ const DEFAULT_PROPS = {
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   forceHighlight: false
 };
 
@@ -223,16 +225,7 @@ class MenuStatefulContainerInner extends React.Component {
       });
     });
 
-    _defineProperty(this, "handleMouseLeave", () => {
-      const rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
-      const childMenu = this.props.getChildMenu && this.props.getChildMenu(rootRef);
-
-      if (!this.props.forceHighlight && !childMenu) {
-        this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(this, "handleMouseLeave", event => {});
 
     _defineProperty(this, "getRequiredItemProps", (item, index) => {
       let itemRef = this.refList[index];
@@ -339,10 +332,12 @@ class MenuStatefulContainerInner extends React.Component {
       if (this.keyboardControlNode) this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
     }
 
-    this.props.removeMenuFromNesting && this.props.removeMenuFromNesting(rootRef);
+    if (this.props.removeMenuFromNesting) {
+      this.props.removeMenuFromNesting(rootRef);
+    }
   }
 
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     if (typeof document !== 'undefined') {
       if (!prevState.isFocused && this.state.isFocused) {
         if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -368,6 +363,12 @@ class MenuStatefulContainerInner extends React.Component {
         highlightedIndex: 0
       });
     }
+
+    if (this.props.isNestedMenuVisible && this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex && !this.props.isNestedMenuVisible(this.rootRef) && !this.props.forceHighlight) {
+      this.setState({
+        highlightedIndex: -1
+      });
+    }
   } // One array to hold all of list item refs
 
 

package/es/popover/popover.js

@@ -447,14 +447,16 @@ class PopoverInner extends React.Component {
           },
           onPopperUpdate: this.onPopperUpdate,
           placement: this.state.placement
-        }, /*#__PURE__*/React.createElement(FocusLock, {
+        }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
           disabled: !this.props.focusLock,
           noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
           ,
           returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
           autoFocus: this.state.autoFocusAfterPositioning,
           focusOptions: this.props.focusOptions
-        }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
+        }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
+          disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+        }, this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {
           key: "hidden-layer"

package/es/progress-bar/progressbar.js

@@ -34,7 +34,9 @@ class ProgressBar extends React.Component {
       successValue,
       showLabel,
       infinite,
-      errorMessage
+      errorMessage,
+      forwardedRef,
+      ...restProps
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(overrides.BarContainer, StyledBarContainer);
@@ -68,6 +70,7 @@ class ProgressBar extends React.Component {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/role-supports-aria-props
       React.createElement(Root, _extends({
+        ref: forwardedRef,
         "data-baseweb": "progress-bar",
         role: "progressbar",
         "aria-label": ariaLabel || getProgressLabel(value, successValue),
@@ -76,7 +79,7 @@ class ProgressBar extends React.Component {
         "aria-valuemax": infinite ? null : successValue,
         "aria-invalid": errorMessage ? true : null,
         "aria-errormessage": errorMessage
-      }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+      }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $isLeft: true,
         $size: sharedProps.$size
       }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
@@ -98,4 +101,8 @@ _defineProperty(ProgressBar, "defaultProps", {
   value: 0
 });
 
-export default ProgressBar;
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ProgressBar, _extends({
+  forwardedRef: ref
+}, props)));
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;

package/es/select/select-component.js

@@ -124,11 +124,6 @@ class Select extends React.Component {
       this.handleClick(event);
     });
 
-    _defineProperty(this, "handleTouchEndClearValue", event => {
-      if (this.dragging) return;
-      this.clearValue(event);
-    });
-
     _defineProperty(this, "handleClick", event => {
       if (this.props.disabled || !isClick(event) && !isLeftClick(event)) {
         return;
@@ -741,7 +736,7 @@ class Select extends React.Component {
         "aria-required": this.props.required || null,
         onFocus: this.handleInputFocus,
         tabIndex: 0
-      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
         "aria-hidden": true,
         id: this.props.id || null,
         ref: this.handleInputRef,
@@ -753,7 +748,7 @@ class Select extends React.Component {
           padding: 0
         },
         tabIndex: -1
-      }));
+      }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
     }
 
     return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -800,9 +795,6 @@ class Select extends React.Component {
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
-      onTouchEnd: this.handleTouchEndClearValue,
-      onTouchMove: this.handleTouchMove,
-      onTouchStart: this.handleTouchStart,
       role: "button",
       overrides: {
         Svg: {

package/es/spinner/styled-components.js

@@ -46,13 +46,39 @@ export const StyledActivePath = styled('path', props => ({
 StyledActivePath.displayName = "StyledActivePath";
 export const StyledSpinnerNext = styled('i', ({
   $theme,
+  $color = $theme.colors.contentAccent,
+  $borderWidth,
   $size = SIZE.medium
 }) => {
-  const borderWidth = {
+  //$FlowFixMe
+  let borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
     small: $theme.sizing.scale0
+  }[$borderWidth || $size];
+  let boxSize = {
+    large: $theme.sizing.scale1000,
+    medium: $theme.sizing.scale900,
+    small: $theme.sizing.scale800
   }[$size];
+
+  if (!borderSize) {
+    borderSize = $theme.sizing[$borderWidth];
+
+    if (!borderSize) {
+      borderSize = `${parseInt($borderWidth)}px`;
+    }
+  }
+
+  if (!boxSize) {
+    //$FlowFixMe
+    boxSize = $theme.sizing[$size];
+
+    if (!boxSize) {
+      boxSize = `${parseInt($size)}px`;
+    }
+  }
+
   return {
     display: 'block',
     animationName: spin,
@@ -64,24 +90,16 @@ export const StyledSpinnerNext = styled('i', ({
     borderTopStyle: 'solid',
     borderBottomStyle: 'solid',
     borderRadius: '50%',
-    borderTopColor: $theme.colors.contentAccent,
+    borderTopColor: $color,
     borderRightColor: $theme.colors.backgroundTertiary,
     borderBottomColor: $theme.colors.backgroundTertiary,
     borderLeftColor: $theme.colors.backgroundTertiary,
-    borderLeftWidth: borderWidth,
-    borderRightWidth: borderWidth,
-    borderTopWidth: borderWidth,
-    borderBottomWidth: borderWidth,
-    width: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
-    height: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
+    borderLeftWidth: borderSize,
+    borderRightWidth: borderSize,
+    borderTopWidth: borderSize,
+    borderBottomWidth: borderSize,
+    width: boxSize,
+    height: boxSize,
     cursor: 'wait'
   };
 });

package/es/themes/dark-theme/color-component-tokens.js

@@ -106,15 +106,15 @@ export default ((themePrimitives = colorTokens) => ({
   modalCloseColorFocus: themePrimitives.mono400,
   // Notification
   notificationPrimaryBackground: themePrimitives.primary700,
-  notificationPrimaryText: themePrimitives.primary200,
+  notificationPrimaryText: themePrimitives.primaryA,
   notificationInfoBackground: themePrimitives.accent700,
-  notificationInfoText: themePrimitives.accent200,
+  notificationInfoText: themePrimitives.primaryA,
   notificationPositiveBackground: themePrimitives.positive700,
-  notificationPositiveText: themePrimitives.positive200,
+  notificationPositiveText: themePrimitives.primaryA,
   notificationWarningBackground: themePrimitives.warning700,
-  notificationWarningText: themePrimitives.warning200,
+  notificationWarningText: themePrimitives.primaryA,
   notificationNegativeBackground: themePrimitives.negative700,
-  notificationNegativeText: themePrimitives.negative200,
+  notificationNegativeText: themePrimitives.primaryA,
   // Tag
   // Custom ramps
   tagFontDisabledRampUnit: '600',
@@ -274,11 +274,16 @@ export default ((themePrimitives = colorTokens) => ({
   tableFilterFooterBackground: themePrimitives.mono800,
   // Toast
   toastText: themePrimitives.white,
-  toastPrimaryBackground: themePrimitives.primary500,
-  toastInfoBackground: themePrimitives.accent500,
-  toastPositiveBackground: themePrimitives.positive500,
-  toastWarningBackground: themePrimitives.warning500,
-  toastNegativeBackground: themePrimitives.negative500,
+  toastPrimaryBackground: themePrimitives.primary400,
+  toastPrimaryText: themePrimitives.white,
+  toastInfoBackground: themePrimitives.accent400,
+  toastInfoText: themePrimitives.white,
+  toastPositiveBackground: themePrimitives.positive400,
+  toastPositiveText: themePrimitives.white,
+  toastWarningBackground: themePrimitives.warning400,
+  toastWarningText: themePrimitives.black,
+  toastNegativeBackground: themePrimitives.negative400,
+  toastNegativeText: themePrimitives.white,
   // Toggle
   toggleFill: themePrimitives.mono300,
   toggleFillChecked: themePrimitives.primary,

package/es/themes/light-theme/color-component-tokens.js

@@ -182,15 +182,15 @@ export default ((themePrimitives = colorTokens) => ({
   tabColor: themePrimitives.mono800,
   // Notification
   notificationPrimaryBackground: themePrimitives.primary50,
-  notificationPrimaryText: themePrimitives.primary500,
+  notificationPrimaryText: themePrimitives.primaryA,
   notificationInfoBackground: themePrimitives.accent50,
-  notificationInfoText: themePrimitives.accent500,
+  notificationInfoText: themePrimitives.primaryA,
   notificationPositiveBackground: themePrimitives.positive50,
-  notificationPositiveText: themePrimitives.positive500,
+  notificationPositiveText: themePrimitives.primaryA,
   notificationWarningBackground: themePrimitives.warning50,
-  notificationWarningText: themePrimitives.warning500,
+  notificationWarningText: themePrimitives.primaryA,
   notificationNegativeBackground: themePrimitives.negative50,
-  notificationNegativeText: themePrimitives.negative500,
+  notificationNegativeText: themePrimitives.primaryA,
   // Tag
   // Custom ramps
   tagFontDisabledRampUnit: '100',
@@ -349,11 +349,16 @@ export default ((themePrimitives = colorTokens) => ({
   tableFilterFooterBackground: themePrimitives.mono200,
   // Toast
   toastText: themePrimitives.white,
-  toastPrimaryBackground: themePrimitives.primary500,
-  toastInfoBackground: themePrimitives.accent500,
-  toastPositiveBackground: themePrimitives.positive500,
-  toastWarningBackground: themePrimitives.warning500,
-  toastNegativeBackground: themePrimitives.negative500,
+  toastPrimaryBackground: themePrimitives.primary400,
+  toastPrimaryText: themePrimitives.white,
+  toastInfoBackground: themePrimitives.accent400,
+  toastInfoText: themePrimitives.white,
+  toastPositiveBackground: themePrimitives.positive400,
+  toastPositiveText: themePrimitives.white,
+  toastWarningBackground: themePrimitives.warning400,
+  toastWarningText: themePrimitives.black,
+  toastNegativeBackground: themePrimitives.negative400,
+  toastNegativeText: themePrimitives.white,
   // Spinner
   spinnerTrackFill: themePrimitives.mono900,
   // Progress bar

package/es/toast/styled-components.js

@@ -18,12 +18,23 @@ function getBackgroundColor(kind, type, theme) {
   }[kind];
 }
 
-function getFontColor(kind, theme) {
+function getFontColor(kind, type, theme) {
+  const isInline = type === TYPE.inline;
+
+  if (isInline) {
+    return {
+      [KIND.info]: theme.colors.notificationInfoText,
+      [KIND.positive]: theme.colors.notificationPositiveText,
+      [KIND.warning]: theme.colors.notificationWarningText,
+      [KIND.negative]: theme.colors.notificationNegativeText
+    }[kind];
+  }
+
   return {
-    [KIND.info]: theme.colors.notificationInfoText,
-    [KIND.positive]: theme.colors.notificationPositiveText,
-    [KIND.warning]: theme.colors.notificationWarningText,
-    [KIND.negative]: theme.colors.notificationNegativeText
+    [KIND.info]: theme.colors.toastInfoText,
+    [KIND.positive]: theme.colors.toastPositiveText,
+    [KIND.warning]: theme.colors.toastWarningText,
+    [KIND.negative]: theme.colors.toastNegativeText
   }[kind];
 }
 
@@ -99,9 +110,9 @@ export const Body = styled('div', props => {
     $theme
   } = props;
   const isInline = $type === TYPE.inline;
-  return { ...$theme.typography.font250,
+  return { ...$theme.typography.font300,
     pointerEvents: 'auto',
-    color: isInline ? getFontColor($kind, $theme) : $theme.colors.toastText,
+    color: getFontColor($kind, $type, $theme),
     height: 'auto',
     width: '288px',
     paddingTop: $theme.sizing.scale600,

package/esm/combobox/combobox.js

@@ -46,6 +46,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -308,6 +309,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -346,9 +348,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -361,7 +362,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 export default Combobox;

package/esm/datepicker/styled-components.js

@@ -481,7 +481,7 @@ export var StyledDay = styled('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',