@zendeskgarden/react-chrome 8.67.0 → 8.68.0

package/dist/index.cjs.js

@@ -67,7 +67,7 @@ const useChromeContext = () => {
 const COMPONENT_ID$A = 'chrome.chrome';
 const StyledChrome = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -79,7 +79,7 @@ StyledChrome.defaultProps = {
 const COMPONENT_ID$z = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -96,7 +96,7 @@ const sizeStyles$4 = props => {
 };
 const StyledBaseHeaderItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -117,7 +117,7 @@ const COMPONENT_ID$x = 'chrome.header_item_text';
 const clippedStyling = styled.css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledHeaderItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -141,7 +141,7 @@ const getExpandedNavWidth = () => {
 };
 const StyledNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -173,7 +173,7 @@ const retrieveProductColor$1 = props => {
 };
 const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -194,11 +194,11 @@ const sizeStyles$3 = props => {
 };
 const StyledBaseNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;border:none;box-sizing:border-box;background:transparent;text-decoration:none;color:inherit;font-size:inherit;", ""], props => sizeStyles$3(props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;border:none;box-sizing:border-box;background:transparent;text-decoration:none;color:inherit;font-size:inherit;", ""], props => sizeStyles$3(props));
 StyledBaseNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -209,7 +209,7 @@ const getHeaderHeight = props => {
 };
 const StyledHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -231,7 +231,11 @@ const colorStyles$5 = theme => {
   const color = reactTheming.getColor('primaryHue', 600, theme);
   const borderColor = reactTheming.getColor('neutralHue', 300, theme);
   const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
-  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}"], borderColor, boxShadow, theme.colors.background, color, color);
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, theme.colors.background, color, color, reactTheming.focusStyles({
+    theme,
+    inset: true,
+    boxShadow
+  }));
 };
 const sizeStyles$2 = props => {
   const top = polished.math(`${getHeaderHeight(props)} / 2`);
@@ -243,11 +247,11 @@ const sizeStyles$2 = props => {
 };
 const StyledSkipNav = styled__default.default.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
-})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";&:focus{outline:none;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => colorStyles$5(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledSkipNav.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -276,7 +280,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -288,7 +292,7 @@ StyledSkipNavIcon.defaultProps = {
 const COMPONENT_ID$q = 'chrome.body';
 const StyledBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
@@ -303,7 +307,7 @@ const getFooterHeight = props => {
 };
 const StyledFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -315,7 +319,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$o = 'chrome.content';
 const StyledContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -327,7 +331,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$n = 'chrome.main';
 const StyledMain = styled__default.default.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -339,7 +343,7 @@ StyledMain.defaultProps = {
 const COMPONENT_ID$m = 'chrome.sidebar';
 const StyledSidebar = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
@@ -351,7 +355,7 @@ StyledSidebar.defaultProps = {
 const COMPONENT_ID$l = 'chrome.footer_item';
 const StyledFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -367,18 +371,14 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
-})(["&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", " ", ";"], props => props.theme.shadows.md(reactTheming.getColor('chromeHue', 400, props.theme, 0.35)), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.getColor('chromeHue', 700, props.theme), props => props.maxY && `
-      &[data-garden-focus-visible] {
-        box-shadow: inset ${props.theme.shadows.lg(props.theme.shadowWidths.md, '0', reactTheming.getColor('chromeHue', 400, props.theme, 0.35))},
-        ${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColor('chromeHue', 400, props.theme, 0.35)},
-        inset ${props.theme.shadows.lg(`-${props.theme.shadowWidths.md}`, '0', reactTheming.getColor('chromeHue', 400, props.theme, 0.35))},
-        -${props.theme.shadowWidths.md} 0 0 0 ${reactTheming.getColor('chromeHue', 400, props.theme, 0.35)};
-      }
-  `, imgStyles, props => props.isRound && `
+})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active,&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => reactTheming.focusStyles({
+  theme: props.theme,
+  inset: props.maxY
+}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => reactTheming.getColor('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
     ${StyledHeaderItemIcon} {
       border-radius: 100px;
     }
@@ -390,7 +390,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$j = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -428,7 +428,7 @@ const colorStyles$4 = props => {
 };
 const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -441,7 +441,7 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -454,7 +454,7 @@ StyledBrandmarkNavItem.defaultProps = {
 const COMPONENT_ID$g = 'chrome.nav_item_icon';
 const StyledNavItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -465,33 +465,47 @@ StyledNavItemIcon.defaultProps = {
 
 const COMPONENT_ID$f = 'chrome.nav_item';
 const colorStyles$3 = props => {
-  const BLACK = props.theme.palette.black;
-  const WHITE = props.theme.palette.white;
+  const {
+    theme,
+    hue,
+    isLight,
+    isDark,
+    isCurrent
+  } = props;
+  const DARK = theme.palette.black;
+  const LIGHT = theme.palette.white;
   let currentColor;
   let hoverColor;
-  if (props.isCurrent) {
-    if (props.isLight) {
-      currentColor = polished.rgba(BLACK, 0.3);
-    } else if (props.isDark) {
-      currentColor = polished.rgba(WHITE, 0.3);
+  if (isCurrent) {
+    if (isLight) {
+      currentColor = polished.rgba(DARK, 0.3);
+    } else if (isDark) {
+      currentColor = polished.rgba(LIGHT, 0.3);
     } else {
-      currentColor = reactTheming.getColor(props.hue, 500, props.theme);
+      currentColor = reactTheming.getColor(hue, 500, theme);
     }
   } else {
-    hoverColor = polished.rgba(props.isLight ? WHITE : BLACK, 0.1);
+    hoverColor = polished.rgba(isLight ? LIGHT : DARK, 0.1);
   }
-  const activeColor = polished.rgba(props.isLight ? BLACK : WHITE, 0.1);
-  const focusColor = polished.rgba(props.isLight ? BLACK : WHITE, 0.2);
-  return styled.css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:inset ", ";}&:active{background-color:", ";}"], props.isCurrent ? 1 : 0.6, currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
+  const activeColor = polished.rgba(isLight ? DARK : LIGHT, 0.1);
+  const focusColor = isLight ? DARK : LIGHT;
+  return styled.css(["opacity:", ";outline-color:transparent;background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:active{background-color:", ";}"], isCurrent ? 1 : 0.6, currentColor, hoverColor, reactTheming.focusStyles({
+    theme,
+    condition: false ,
+    styles: {
+      opacity: 1,
+      outlineColor: focusColor
+    }
+  }), activeColor);
 };
 const StyledNavItem = styled__default.default(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
   componentId: "sc-gs8mjz-0"
-})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}", ";", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', props => colorStyles$3(props), props => props.isExpanded && `
+})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}", ";&:focus-visible:hover,&:focus-visible:active,", "{outline:", " solid;outline-offset:-", ";}", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', colorStyles$3, reactTheming.SELECTOR_FOCUS_VISIBLE, props => polished.math(`${props.theme.borderWidths.md} - 1`), props => props.theme.borderWidths.md, props => props.isExpanded && `
     ${StyledNavItemIcon} {
       margin: 0 ${polished.math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)};
     }
@@ -503,7 +517,7 @@ StyledNavItem.defaultProps = {
 const COMPONENT_ID$e = 'chrome.nav_item_text';
 const StyledNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -523,33 +537,44 @@ StyledNavItemText.defaultProps = {
 
 const COMPONENT_ID$d = 'chrome.subnav_item';
 const colorStyles$2 = props => {
-  const BLACK = props.theme.palette.black;
-  const WHITE = props.theme.palette.white;
+  const {
+    theme,
+    isLight,
+    isCurrent
+  } = props;
+  const DARK = theme.palette.black;
+  const LIGHT = theme.palette.white;
   let currentColor;
   let hoverColor;
-  if (props.isCurrent) {
-    if (props.isLight) {
-      currentColor = polished.rgba(BLACK, 0.1);
+  if (isCurrent) {
+    if (isLight) {
+      currentColor = polished.rgba(DARK, 0.1);
     } else {
-      currentColor = polished.rgba(WHITE, 0.1);
+      currentColor = polished.rgba(LIGHT, 0.1);
     }
   } else {
-    hoverColor = polished.rgba(props.isLight ? WHITE : BLACK, 0.1);
+    hoverColor = polished.rgba(isLight ? LIGHT : DARK, 0.1);
   }
-  const activeColor = polished.rgba(props.isLight ? BLACK : WHITE, 0.03);
-  const focusColor = polished.rgba(props.isLight ? BLACK : WHITE, 0.2);
-  return styled.css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:", ";}&:not([data-garden-header='true']):active{background-color:", ";}"], props.isCurrent ? '1' : '0.6', currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
+  const activeColor = polished.rgba(isLight ? DARK : LIGHT, 0.03);
+  return styled.css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:not([data-garden-header='true']):active{background-color:", ";}"], isCurrent ? '1' : '0.6', currentColor, hoverColor, reactTheming.focusStyles({
+    theme,
+    hue: isLight ? DARK : LIGHT,
+    spacerWidth: null,
+    styles: {
+      opacity: 1
+    }
+  }), activeColor);
 };
 const getSubNavItemHeight = props => {
   return `${props.theme.space.base * 7.5}px`;
 };
 const StyledSubNavItem = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
-})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;margin:", "px 0 0;border:none;border-radius:", ";box-sizing:border-box;background:transparent;cursor:", ";padding:", ";width:100%;min-height:", ";text-align:inherit;font-size:inherit;&,&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}", ";", ";"], props => props.theme.space.base * 2, props => props.theme.borderRadii.md, props => props.isCurrent ? 'default' : 'pointer', props => `0 ${props.theme.space.base * 2}px`, getSubNavItemHeight, props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;margin:", "px 0 0;border:none;border-radius:", ";box-sizing:border-box;background:transparent;cursor:", ";padding:", ";width:100%;min-height:", ";text-align:inherit;font-size:inherit;&,&:hover,&:focus{text-decoration:none;color:inherit;}", ";", ";"], props => props.theme.space.base * 2, props => props.theme.borderRadii.md, props => props.isCurrent ? 'default' : 'pointer', props => `0 ${props.theme.space.base * 2}px`, getSubNavItemHeight, props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledSubNavItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -568,7 +593,7 @@ const colorStyles$1 = props => {
 };
 const StyledSubNav = styled__default.default.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -586,7 +611,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -598,7 +623,7 @@ StyledSubNavItemText.defaultProps = {
 const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 const StyledSubNavItemHeader = styled__default.default(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -645,7 +670,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -663,7 +688,7 @@ const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
 const hiddenStyling = styled.css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
 const StyledSubNavPanel = styled__default.default.div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -694,7 +719,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled__default.default.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -706,7 +731,7 @@ StyledSheet.defaultProps = {
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 const StyledSheetWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -733,7 +758,7 @@ StyledSheetWrapper.defaultProps = {
 const COMPONENT_ID$6 = 'chrome.sheet_title';
 const StyledSheetTitle = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -745,7 +770,7 @@ StyledSheetTitle.defaultProps = {
 const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -757,7 +782,7 @@ StyledSheetDescription.defaultProps = {
 const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -775,15 +800,17 @@ const BASE_MULTIPLIERS = {
 const colorStyles = props => {
   const backgroundColor = 'primaryHue';
   const foregroundColor = 'neutralHue';
-  return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), props.theme.shadows.md(reactTheming.getColor(backgroundColor, 600, props.theme, 0.35)), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
+  return styled.css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], reactTheming.getColor(foregroundColor, 600, props.theme), reactTheming.getColor(backgroundColor, 600, props.theme, 0.08), reactTheming.getColor(foregroundColor, 700, props.theme), reactTheming.focusStyles({
+    theme: props.theme
+  }), reactTheming.getColor(backgroundColor, 600, props.theme, 0.2), reactTheming.getColor(foregroundColor, 800, props.theme));
 };
 const StyledSheetClose = styled__default.default.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
-})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:focus{outline:none;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledSheetClose.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -791,7 +818,7 @@ StyledSheetClose.defaultProps = {
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
 const StyledSheetFooter = styled__default.default.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -803,7 +830,7 @@ StyledSheetFooter.defaultProps = {
 const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -815,7 +842,7 @@ StyledSheetFooterItem.defaultProps = {
 const COMPONENT_ID = 'chrome.sheet_header';
 const StyledSheetHeader = styled__default.default.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -1186,6 +1213,10 @@ const CollapsibleSubNavItem = React__namespace.default.forwardRef((_ref, ref) =>
     onChange,
     ...other
   } = _ref;
+  const {
+    isDark,
+    isLight
+  } = useChromeContext();
   const panelRef = React.useRef();
   const [internalExpanded, setInternalExpanded] = React.useState(controlledExpanded);
   const expanded = containerUtilities.getControlledValue(controlledExpanded, internalExpanded);
@@ -1214,13 +1245,16 @@ const CollapsibleSubNavItem = React__namespace.default.forwardRef((_ref, ref) =>
     ref: ref
   }, React__namespace.default.createElement("div", getHeaderProps({
     ariaLevel: 2
-  }), React__namespace.default.createElement(StyledSubNavItemHeader, getTriggerProps({
+  }), React__namespace.default.createElement(StyledSubNavItemHeader, _extends$3({
+    isDark: isDark,
+    isLight: isLight
+  }, getTriggerProps({
     isExpanded: expanded,
     index: 0,
     role: null,
     tabIndex: null,
     ...other
-  }), React__namespace.default.createElement(React__namespace.default.Fragment, null, header, React__namespace.default.createElement(StyledSubNavItemIconWrapper, {
+  })), React__namespace.default.createElement(React__namespace.default.Fragment, null, header, React__namespace.default.createElement(StyledSubNavItemIconWrapper, {
     isExpanded: expanded
   }, React__namespace.default.createElement(StyledSubNavItemIcon, null))))), React__namespace.default.createElement(StyledSubNavPanel, getPanelProps({
     index: 0,
@@ -1397,7 +1431,7 @@ const SheetComponent = React__namespace.default.forwardRef((_ref, ref) => {
   const sheetRef = React.useRef(null);
   const seed = reactUid.useUIDSeed();
   const [isCloseButtonPresent, setIsCloseButtonPresent] = React.useState(false);
-  const idPrefix = React.useMemo(() => id || seed(`sheet_${'8.67.0'}`), [id, seed]);
+  const idPrefix = React.useMemo(() => id || seed(`sheet_${'8.68.0'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = React.useMemo(() => ({

package/dist/index.esm.js

@@ -10,7 +10,7 @@ import React__default, { useContext, useMemo, useEffect, Children, isValidElemen
 import PropTypes from 'prop-types';
 import styled, { css, keyframes, ThemeContext } from 'styled-components';
 import { math, rgba, readableColor } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, PALETTE, useDocument } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor, PALETTE, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument } from '@zendeskgarden/react-theming';
 import { useAccordion } from '@zendeskgarden/container-accordion';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
 import { useUIDSeed } from 'react-uid';
@@ -41,7 +41,7 @@ const useChromeContext = () => {
 const COMPONENT_ID$A = 'chrome.chrome';
 const StyledChrome = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$A,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledChrome",
   componentId: "sc-1uqm6u6-0"
@@ -53,7 +53,7 @@ StyledChrome.defaultProps = {
 const COMPONENT_ID$z = 'chrome.header_item_icon';
 const StyledHeaderItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$z,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeaderItemIcon",
   componentId: "sc-1jhhp6z-0"
@@ -70,7 +70,7 @@ const sizeStyles$4 = props => {
 };
 const StyledBaseHeaderItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$y,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledBaseHeaderItem",
   componentId: "sc-1qua7h6-0"
@@ -91,7 +91,7 @@ const COMPONENT_ID$x = 'chrome.header_item_text';
 const clippedStyling = css(["position:absolute;margin:0;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledHeaderItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$x,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeaderItemText",
   componentId: "sc-goz7la-0"
@@ -115,7 +115,7 @@ const getExpandedNavWidth = () => {
 };
 const StyledNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledNav",
   componentId: "sc-6j462r-0"
@@ -147,7 +147,7 @@ const retrieveProductColor$1 = props => {
 };
 const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoHeaderItem",
@@ -168,11 +168,11 @@ const sizeStyles$3 = props => {
 };
 const StyledBaseNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledBaseNavItem",
   componentId: "sc-zvo43f-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;border:none;box-sizing:border-box;background:transparent;text-decoration:none;color:inherit;font-size:inherit;", ""], props => sizeStyles$3(props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:outline-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;border:none;box-sizing:border-box;background:transparent;text-decoration:none;color:inherit;font-size:inherit;", ""], props => sizeStyles$3(props));
 StyledBaseNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -183,7 +183,7 @@ const getHeaderHeight = props => {
 };
 const StyledHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-1cexpz-0"
@@ -205,7 +205,11 @@ const colorStyles$5 = theme => {
   const color = getColor('primaryHue', 600, theme);
   const borderColor = getColor('neutralHue', 300, theme);
   const boxShadow = theme.shadows.lg(`${theme.space.base * 5}px`, `${theme.space.base * 7}px`, getColor('chromeHue', 600, theme, 0.15));
-  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}"], borderColor, boxShadow, theme.colors.background, color, color);
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";&:hover,&:focus{color:", ";}", ""], borderColor, boxShadow, theme.colors.background, color, color, focusStyles({
+    theme,
+    inset: true,
+    boxShadow
+  }));
 };
 const sizeStyles$2 = props => {
   const top = math(`${getHeaderHeight(props)} / 2`);
@@ -217,11 +221,11 @@ const sizeStyles$2 = props => {
 };
 const StyledSkipNav = styled.a.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSkipNav",
   componentId: "sc-1tsro34-0"
-})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";&:focus{outline:none;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => colorStyles$5(props.theme), props => retrieveComponentStyles(COMPONENT_ID$s, props));
+})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.zIndex, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => sizeStyles$2(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles$5(props.theme), props => retrieveComponentStyles(COMPONENT_ID$s, props));
 StyledSkipNav.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -250,7 +254,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSkipNavIcon",
   componentId: "sc-1ika5z4-0"
@@ -262,7 +266,7 @@ StyledSkipNavIcon.defaultProps = {
 const COMPONENT_ID$q = 'chrome.body';
 const StyledBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledBody",
   componentId: "sc-c7h9kv-0"
@@ -277,7 +281,7 @@ const getFooterHeight = props => {
 };
 const StyledFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFooter",
   componentId: "sc-v7lib2-0"
@@ -289,7 +293,7 @@ StyledFooter.defaultProps = {
 const COMPONENT_ID$o = 'chrome.content';
 const StyledContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledContent",
   componentId: "sc-qcuzxn-0"
@@ -301,7 +305,7 @@ StyledContent.defaultProps = {
 const COMPONENT_ID$n = 'chrome.main';
 const StyledMain = styled.main.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledMain",
   componentId: "sc-t61cre-0"
@@ -313,7 +317,7 @@ StyledMain.defaultProps = {
 const COMPONENT_ID$m = 'chrome.sidebar';
 const StyledSidebar = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSidebar",
   componentId: "sc-1q77fuw-0"
@@ -325,7 +329,7 @@ StyledSidebar.defaultProps = {
 const COMPONENT_ID$l = 'chrome.footer_item';
 const StyledFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledFooterItem",
   componentId: "sc-1cktm85-0"
@@ -341,18 +345,14 @@ const imgStyles = props => {
 };
 const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-14sft6n-0"
-})(["&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", " ", ";"], props => props.theme.shadows.md(getColor('chromeHue', 400, props.theme, 0.35)), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColor('chromeHue', 700, props.theme), props => props.maxY && `
-      &[data-garden-focus-visible] {
-        box-shadow: inset ${props.theme.shadows.lg(props.theme.shadowWidths.md, '0', getColor('chromeHue', 400, props.theme, 0.35))},
-        ${props.theme.shadowWidths.md} 0 0 0 ${getColor('chromeHue', 400, props.theme, 0.35)},
-        inset ${props.theme.shadows.lg(`-${props.theme.shadowWidths.md}`, '0', getColor('chromeHue', 400, props.theme, 0.35))},
-        -${props.theme.shadowWidths.md} 0 0 0 ${getColor('chromeHue', 400, props.theme, 0.35)};
-      }
-  `, imgStyles, props => props.isRound && `
+})(["&:hover,&:focus{text-decoration:none;color:inherit;}", " &:focus-visible:active,&[data-garden-focus-visible]:active{box-shadow:none;}&:hover ", ",&:hover ", ",&:active ", ",&:active ", "{color:", ";}", " ", " ", ";"], props => focusStyles({
+  theme: props.theme,
+  inset: props.maxY
+}), StyledHeaderItemIcon, StyledHeaderItemText, StyledHeaderItemIcon, StyledHeaderItemText, props => getColor('chromeHue', 700, props.theme), imgStyles, props => props.isRound && `
     ${StyledHeaderItemIcon} {
       border-radius: 100px;
     }
@@ -364,7 +364,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$j = 'chrome.header_item_wrapper';
 const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledHeaderItemWrapper",
@@ -402,7 +402,7 @@ const colorStyles$4 = props => {
 };
 const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledLogoNavItem",
@@ -415,7 +415,7 @@ StyledLogoNavItem.defaultProps = {
 const COMPONENT_ID$h = 'chrome.brandmark_nav_item';
 const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'div'
 }).withConfig({
   displayName: "StyledBrandmarkNavItem",
@@ -428,7 +428,7 @@ StyledBrandmarkNavItem.defaultProps = {
 const COMPONENT_ID$g = 'chrome.nav_item_icon';
 const StyledNavItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledNavItemIcon",
   componentId: "sc-7w9rpt-0"
@@ -439,33 +439,47 @@ StyledNavItemIcon.defaultProps = {
 
 const COMPONENT_ID$f = 'chrome.nav_item';
 const colorStyles$3 = props => {
-  const BLACK = props.theme.palette.black;
-  const WHITE = props.theme.palette.white;
+  const {
+    theme,
+    hue,
+    isLight,
+    isDark,
+    isCurrent
+  } = props;
+  const DARK = theme.palette.black;
+  const LIGHT = theme.palette.white;
   let currentColor;
   let hoverColor;
-  if (props.isCurrent) {
-    if (props.isLight) {
-      currentColor = rgba(BLACK, 0.3);
-    } else if (props.isDark) {
-      currentColor = rgba(WHITE, 0.3);
+  if (isCurrent) {
+    if (isLight) {
+      currentColor = rgba(DARK, 0.3);
+    } else if (isDark) {
+      currentColor = rgba(LIGHT, 0.3);
     } else {
-      currentColor = getColor(props.hue, 500, props.theme);
+      currentColor = getColor(hue, 500, theme);
     }
   } else {
-    hoverColor = rgba(props.isLight ? WHITE : BLACK, 0.1);
+    hoverColor = rgba(isLight ? LIGHT : DARK, 0.1);
   }
-  const activeColor = rgba(props.isLight ? BLACK : WHITE, 0.1);
-  const focusColor = rgba(props.isLight ? BLACK : WHITE, 0.2);
-  return css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:inset ", ";}&:active{background-color:", ";}"], props.isCurrent ? 1 : 0.6, currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
+  const activeColor = rgba(isLight ? DARK : LIGHT, 0.1);
+  const focusColor = isLight ? DARK : LIGHT;
+  return css(["opacity:", ";outline-color:transparent;background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:active{background-color:", ";}"], isCurrent ? 1 : 0.6, currentColor, hoverColor, focusStyles({
+    theme,
+    condition: false ,
+    styles: {
+      opacity: 1,
+      outlineColor: focusColor
+    }
+  }), activeColor);
 };
 const StyledNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   as: 'button'
 }).withConfig({
   displayName: "StyledNavItem",
   componentId: "sc-gs8mjz-0"
-})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}", ";", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', props => colorStyles$3(props), props => props.isExpanded && `
+})(["justify-content:", ";order:1;margin:0;cursor:", ";text-align:", ";&:hover,&:focus{text-decoration:none;color:inherit;}", ";&:focus-visible:hover,&:focus-visible:active,", "{outline:", " solid;outline-offset:-", ";}", " ", ";"], props => props.isExpanded && 'start', props => props.isCurrent ? 'default' : 'pointer', props => props.isExpanded && 'inherit', colorStyles$3, SELECTOR_FOCUS_VISIBLE, props => math(`${props.theme.borderWidths.md} - 1`), props => props.theme.borderWidths.md, props => props.isExpanded && `
     ${StyledNavItemIcon} {
       margin: 0 ${math(`(${getNavWidth(props)} - ${props.theme.iconSizes.lg}) / 4`)};
     }
@@ -477,7 +491,7 @@ StyledNavItem.defaultProps = {
 const COMPONENT_ID$e = 'chrome.nav_item_text';
 const StyledNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledNavItemText",
   componentId: "sc-13m84xl-0"
@@ -497,33 +511,44 @@ StyledNavItemText.defaultProps = {
 
 const COMPONENT_ID$d = 'chrome.subnav_item';
 const colorStyles$2 = props => {
-  const BLACK = props.theme.palette.black;
-  const WHITE = props.theme.palette.white;
+  const {
+    theme,
+    isLight,
+    isCurrent
+  } = props;
+  const DARK = theme.palette.black;
+  const LIGHT = theme.palette.white;
   let currentColor;
   let hoverColor;
-  if (props.isCurrent) {
-    if (props.isLight) {
-      currentColor = rgba(BLACK, 0.1);
+  if (isCurrent) {
+    if (isLight) {
+      currentColor = rgba(DARK, 0.1);
     } else {
-      currentColor = rgba(WHITE, 0.1);
+      currentColor = rgba(LIGHT, 0.1);
     }
   } else {
-    hoverColor = rgba(props.isLight ? WHITE : BLACK, 0.1);
+    hoverColor = rgba(isLight ? LIGHT : DARK, 0.1);
   }
-  const activeColor = rgba(props.isLight ? BLACK : WHITE, 0.03);
-  const focusColor = rgba(props.isLight ? BLACK : WHITE, 0.2);
-  return css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}&[data-garden-focus-visible]{opacity:1;box-shadow:", ";}&:not([data-garden-header='true']):active{background-color:", ";}"], props.isCurrent ? '1' : '0.6', currentColor, hoverColor, props.theme.shadows.md(focusColor), activeColor);
+  const activeColor = rgba(isLight ? DARK : LIGHT, 0.03);
+  return css(["opacity:", ";background-color:", ";&:hover{opacity:1;background-color:", ";}", " &:not([data-garden-header='true']):active{background-color:", ";}"], isCurrent ? '1' : '0.6', currentColor, hoverColor, focusStyles({
+    theme,
+    hue: isLight ? DARK : LIGHT,
+    spacerWidth: null,
+    styles: {
+      opacity: 1
+    }
+  }), activeColor);
 };
 const getSubNavItemHeight = props => {
   return `${props.theme.space.base * 7.5}px`;
 };
 const StyledSubNavItem = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavItem",
   componentId: "sc-1yg9dpx-0"
-})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;margin:", "px 0 0;border:none;border-radius:", ";box-sizing:border-box;background:transparent;cursor:", ";padding:", ";width:100%;min-height:", ";text-align:inherit;font-size:inherit;&,&:hover,&:focus{text-decoration:none;color:inherit;}&:focus{outline:none;}", ";", ";"], props => props.theme.space.base * 2, props => props.theme.borderRadii.md, props => props.isCurrent ? 'default' : 'pointer', props => `0 ${props.theme.space.base * 2}px`, getSubNavItemHeight, props => colorStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$d, props));
+})(["display:flex;align-items:center;transition:box-shadow 0.1s ease-in-out,background-color 0.1s ease-in-out,opacity 0.1s ease-in-out;margin:", "px 0 0;border:none;border-radius:", ";box-sizing:border-box;background:transparent;cursor:", ";padding:", ";width:100%;min-height:", ";text-align:inherit;font-size:inherit;&,&:hover,&:focus{text-decoration:none;color:inherit;}", ";", ";"], props => props.theme.space.base * 2, props => props.theme.borderRadii.md, props => props.isCurrent ? 'default' : 'pointer', props => `0 ${props.theme.space.base * 2}px`, getSubNavItemHeight, props => colorStyles$2(props), props => retrieveComponentStyles(COMPONENT_ID$d, props));
 StyledSubNavItem.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -542,7 +567,7 @@ const colorStyles$1 = props => {
 };
 const StyledSubNav = styled.nav.attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNav",
   componentId: "sc-19hjou6-0"
@@ -560,7 +585,7 @@ const sizeStyles = props => {
 };
 const StyledSubNavItemText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavItemText",
   componentId: "sc-1hy0pn7-0"
@@ -572,7 +597,7 @@ StyledSubNavItemText.defaultProps = {
 const COMPONENT_ID$a = 'chrome.collapsible_sub_nav_item';
 const StyledSubNavItemHeader = styled(StyledSubNavItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.67.0',
+  'data-garden-version': '8.68.0',
   'data-garden-header': 'true'
 }).withConfig({
   displayName: "StyledSubNavItemHeader",
@@ -619,7 +644,7 @@ StyledSubNavItemIcon.defaultProps = {
 };
 const StyledSubNavItemIconWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavItemIcon__StyledSubNavItemIconWrapper",
   componentId: "sc-1d02hho-1"
@@ -637,7 +662,7 @@ const PANEL_COMPONENT_ID = 'chrome.collapsible_sub_nav_item_panel';
 const hiddenStyling = css(["visibility:hidden;max-height:0 !important;overflow:hidden;"]);
 const StyledSubNavPanel = styled.div.attrs({
   'data-garden-id': PANEL_COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSubNavPanel",
   componentId: "sc-1jv3rpv-0"
@@ -668,7 +693,7 @@ const borderStyle = _ref => {
 };
 const StyledSheet = styled.aside.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheet",
   componentId: "sc-dx8ijk-0"
@@ -680,7 +705,7 @@ StyledSheet.defaultProps = {
 const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
 const StyledSheetWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetWrapper",
   componentId: "sc-f6x9zb-0"
@@ -707,7 +732,7 @@ StyledSheetWrapper.defaultProps = {
 const COMPONENT_ID$6 = 'chrome.sheet_title';
 const StyledSheetTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetTitle",
   componentId: "sc-1gogk75-0"
@@ -719,7 +744,7 @@ StyledSheetTitle.defaultProps = {
 const COMPONENT_ID$5 = 'chrome.sheet_description';
 const StyledSheetDescription = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetDescription",
   componentId: "sc-1puglb6-0"
@@ -731,7 +756,7 @@ StyledSheetDescription.defaultProps = {
 const COMPONENT_ID$4 = 'chrome.sheet_body';
 const StyledSheetBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetBody",
   componentId: "sc-bt4eoj-0"
@@ -749,15 +774,17 @@ const BASE_MULTIPLIERS = {
 const colorStyles = props => {
   const backgroundColor = 'primaryHue';
   const foregroundColor = 'neutralHue';
-  return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:", ";}&:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), props.theme.shadows.md(getColor(backgroundColor, 600, props.theme, 0.35)), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
+  return css(["background-color:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active{transition:background-color 0.1s ease-in-out,color 0.1s ease-in-out;background-color:", ";color:", ";}"], getColor(foregroundColor, 600, props.theme), getColor(backgroundColor, 600, props.theme, 0.08), getColor(foregroundColor, 700, props.theme), focusStyles({
+    theme: props.theme
+  }), getColor(backgroundColor, 600, props.theme, 0.2), getColor(foregroundColor, 800, props.theme));
 };
 const StyledSheetClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetClose",
   componentId: "sc-1ab02oq-0"
-})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}&:focus{outline:none;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:flex;position:absolute;top:", "px;", ":", ";align-items:center;justify-content:center;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:none;border-radius:50%;cursor:pointer;padding:0;width:", "px;height:", "px;overflow:hidden;text-decoration:none;font-size:0;user-select:none;&::-moz-focus-inner{border:0;}", ";& > svg{vertical-align:middle;}", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => props.theme.space.base * BASE_MULTIPLIERS.size, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledSheetClose.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -765,7 +792,7 @@ StyledSheetClose.defaultProps = {
 const COMPONENT_ID$2 = 'chrome.sheet_footer';
 const StyledSheetFooter = styled.footer.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetFooter",
   componentId: "sc-2cktos-0"
@@ -777,7 +804,7 @@ StyledSheetFooter.defaultProps = {
 const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
 const StyledSheetFooterItem = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetFooterItem",
   componentId: "sc-r9ixh-0"
@@ -789,7 +816,7 @@ StyledSheetFooterItem.defaultProps = {
 const COMPONENT_ID = 'chrome.sheet_header';
 const StyledSheetHeader = styled.header.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.67.0'
+  'data-garden-version': '8.68.0'
 }).withConfig({
   displayName: "StyledSheetHeader",
   componentId: "sc-o2ry8i-0"
@@ -1160,6 +1187,10 @@ const CollapsibleSubNavItem = React__default.forwardRef((_ref, ref) => {
     onChange,
     ...other
   } = _ref;
+  const {
+    isDark,
+    isLight
+  } = useChromeContext();
   const panelRef = useRef();
   const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
   const expanded = getControlledValue(controlledExpanded, internalExpanded);
@@ -1188,13 +1219,16 @@ const CollapsibleSubNavItem = React__default.forwardRef((_ref, ref) => {
     ref: ref
   }, React__default.createElement("div", getHeaderProps({
     ariaLevel: 2
-  }), React__default.createElement(StyledSubNavItemHeader, getTriggerProps({
+  }), React__default.createElement(StyledSubNavItemHeader, _extends$3({
+    isDark: isDark,
+    isLight: isLight
+  }, getTriggerProps({
     isExpanded: expanded,
     index: 0,
     role: null,
     tabIndex: null,
     ...other
-  }), React__default.createElement(React__default.Fragment, null, header, React__default.createElement(StyledSubNavItemIconWrapper, {
+  })), React__default.createElement(React__default.Fragment, null, header, React__default.createElement(StyledSubNavItemIconWrapper, {
     isExpanded: expanded
   }, React__default.createElement(StyledSubNavItemIcon, null))))), React__default.createElement(StyledSubNavPanel, getPanelProps({
     index: 0,
@@ -1371,7 +1405,7 @@ const SheetComponent = React__default.forwardRef((_ref, ref) => {
   const sheetRef = useRef(null);
   const seed = useUIDSeed();
   const [isCloseButtonPresent, setIsCloseButtonPresent] = useState(false);
-  const idPrefix = useMemo(() => id || seed(`sheet_${'8.67.0'}`), [id, seed]);
+  const idPrefix = useMemo(() => id || seed(`sheet_${'8.68.0'}`), [id, seed]);
   const titleId = `${idPrefix}--title`;
   const descriptionId = `${idPrefix}--description`;
   const sheetContext = useMemo(() => ({

package/dist/typings/elements/header/HeaderItemIcon.d.ts

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export declare const HeaderItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element | null;
+export declare const HeaderItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element | null;

package/dist/typings/elements/nav/NavItemIcon.d.ts

@@ -4,8 +4,8 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
-export declare const NavItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element | null;
+export declare const NavItemIcon: ({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => React.JSX.Element | null;

package/dist/typings/styled/StyledSkipNav.d.ts

@@ -8,6 +8,9 @@ import { DefaultTheme } from 'styled-components';
 interface IStyledSkipNavProps {
     zIndex?: number;
 }
+/**
+ * 1. breaking LVHFA order for `<a>` to underline when focused and hovered
+ */
 export declare const StyledSkipNav: import("styled-components").StyledComponent<"a", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;

package/dist/typings/styled/nav/StyledNavItem.d.ts

@@ -15,6 +15,8 @@ interface IStyledNavItemProps extends ThemeProps<DefaultTheme> {
 /**
  * 1. Anchor reset
  * 2. Button reset
+ * 3. Override `focusStyles` outline (in `colorStyles`)
+ * 4. Use of negative offset to create an inset outline
  */
 export declare const StyledNavItem: import("styled-components").StyledComponent<"button", DefaultTheme, {
     'data-garden-id': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-chrome",
-  "version": "8.67.0",
+  "version": "8.68.0",
   "description": "Components relating to Chrome within the Garden Design System.",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -29,13 +29,13 @@
     "react-merge-refs": "^1.1.0"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^8.1.0",
+    "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.67.0",
+    "@zendeskgarden/react-theming": "^8.68.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -48,5 +48,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
+  "gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
 }