@box/blueprint-web 12.56.0 → 12.57.1

package/dist/lib-esm/index.css

@@ -7455,7 +7455,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   opacity:.3;
 }
 
-.bp_tabs_module_hiddenWidthSetter--42942{
+.bp_tabs_module_hiddenWidthSetter--bbd44{
   display:block;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -7469,11 +7469,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-bold-text-case);
   visibility:hidden;
 }
-.bp_tabs_module_hiddenWidthSetter--42942 > *{
+.bp_tabs_module_hiddenWidthSetter--bbd44 > *{
   visibility:hidden;
 }
 
-.bp_tabs_module_contentSwitchTabList--42942[data-modern=false]{
+.bp_tabs_module_contentSwitchTabList--bbd44[data-modern=false]{
   --content-switch-tab-list-gap:var(--space-1);
   --content-switch-tab-list-padding:var(--space-1);
   --content-switch-tab-list-background:var(--surface-contentswitcher-surface);
@@ -7489,7 +7489,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --content-switch-tab-active-background:var(--surface-cta-surface-secondary-pressed);
 }
 
-.bp_tabs_module_contentSwitchTabList--42942[data-modern=true]{
+.bp_tabs_module_contentSwitchTabList--bbd44[data-modern=true]{
   --content-switch-tab-list-gap:var(--bp-space-010);
   --content-switch-tab-list-padding:var(--bp-space-010);
   --content-switch-tab-list-background:var(--bp-gray-10);
@@ -7504,7 +7504,58 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --content-switch-tab-hover-background:var(--bp-gray-05);
 }
 
-.bp_tabs_module_contentSwitchTabList--42942{
+.bp_tabs_module_tabsListContainer--bbd44[data-modern=false]{
+  --tab-height:var(--size-10);
+  --tab-inline-padding:var(--space-3);
+  --tab-background:var(--background-background);
+  --tab-background-hover:var(--surface-tab-surface-hover);
+  --tab-background-pressed:var(--surface-tab-surface-pressed);
+  --tab-border-radius:var(--radius-05);
+  --tab-border-radius-top-left:var(--radius-05);
+  --tab-border-radius-top-right:var(--radius-05);
+  --tab-font-color:var(--text-text-on-light-secondary);
+  --tab-font-color-hover:var(--text-text-on-light-secondary-hover);
+  --tab-font-selected-color:var(--text-cta-link);
+  --tab-border:var(--border-2) solid var(--border-tab-border);
+  --tab-border-hover:var(--border-2) solid var(--border-tab-border);
+  --tab-border-selected:var(--border-2) solid var(--border-tab-border-selected);
+  --tab-border-selected-hover:var(--border-2) solid var(--border-tab-border-selected-hover);
+  --tab-border-focus:var(--border-2) solid var(--border-tab-border);
+  --tab-gap:var(--space-4);
+  --tab-separator-border:var(--border-2) solid var(--border-tab-border);
+  --tab-border-focus-outline-width:var(--border-3);
+  --tab-border-focus-outline-color:var(--outline-focus-on-light);
+  --tab-border-focus-outline-offset:var(--border-1);
+  --tab-border-hover-color:var(--border-tab-border-hover);
+}
+
+.bp_tabs_module_tabsListContainer--bbd44[data-modern=true]{
+  --tab-height:var(--bp-size-100);
+  --tab-inline-padding:var(--bp-space-030);
+  --tab-background:var(--bp-background-background);
+  --tab-background-hover:var(--bp-surface-tab-surface-hover);
+  --tab-background-pressed:var(--bp-surface-tab-surface-pressed);
+  --tab-border-radius:var(--bp-radius-06) var(--bp-radius-06) 0 0;
+  --tab-border-radius-top-left:var(--bp-radius-06);
+  --tab-border-radius-top-right:var(--bp-radius-06);
+  --tab-font-color:var(--bp-text-text-on-light-secondary);
+  --tab-font-color-hover:var(--bp-text-text-on-light-secondary-hover);
+  --tab-font-selected-color:var(--bp-text-text-on-light);
+  --tab-border:var(--bp-border-01) solid var(--bp-border-tab-border);
+  --tab-border-hover:var(--bp-border-02) solid var(--bp-border-tab-border-hover);
+  --tab-border-selected:var(--bp-border-02) solid var(--bp-border-tab-border-selected);
+  --tab-border-selected-hover:var(--bp-border-02) solid var(--bp-border-tab-border-selected-hover);
+  --tab-border-focus:var(--bp-border-02) solid var(--bp-border-tab-border-hover);
+  --tab-gap:var(--bp-space-010);
+  --tab-separator-border:var(--bp-border-01) solid var(--bp-border-tab-border);
+  --tab-border-focus-outline-width:var(--bp-border-03);
+  --tab-border-focus-outline-color:var(--bp-outline-focus-on-light);
+  --tab-border-focus-outline-offset:var(--bp-border-01);
+  --tab-border-hover-color:var(--bp-border-tab-border-hover);
+  --tab-border-selected-color:var(--bp-border-tab-border-selected);
+}
+
+.bp_tabs_module_contentSwitchTabList--bbd44{
   background:var(--content-switch-tab-list-background);
   border-radius:var(--content-switch-tab-list-border-radius);
   display:grid;
@@ -7515,7 +7566,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   min-width:fit-content;
   padding:var(--content-switch-tab-list-padding);
 }
-.bp_tabs_module_contentSwitchTabList--42942 .bp_tabs_module_contentSwitchTab--42942{
+.bp_tabs_module_contentSwitchTabList--bbd44 .bp_tabs_module_contentSwitchTab--bbd44{
   align-items:center;
   background:#0000;
   border:none;
@@ -7536,7 +7587,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-text-case);
   white-space:nowrap;
 }
-.bp_tabs_module_contentSwitchTabList--42942 .bp_tabs_module_contentSwitchTab--42942[aria-selected=true]{
+.bp_tabs_module_contentSwitchTabList--bbd44 .bp_tabs_module_contentSwitchTab--bbd44[aria-selected=true]{
   background:var(--content-switch-tab-selected-background);
   box-shadow:var(--content-switch-tab-selected-box-shadow);
   color:var(--content-switch-tab-selected-color);
@@ -7549,67 +7600,67 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_tabs_module_contentSwitchTabList--42942 .bp_tabs_module_contentSwitchTab--42942:not([aria-disabled=true])[data-focus-visible]{
+.bp_tabs_module_contentSwitchTabList--bbd44 .bp_tabs_module_contentSwitchTab--bbd44:not([aria-disabled=true])[data-focus-visible]{
   border-color:#0000;
   box-shadow:var(--content-switch-tab-focus-box-shadow);
 }
-.bp_tabs_module_contentSwitchTabList--42942 .bp_tabs_module_contentSwitchTab--42942:not([aria-disabled=true]):hover{
+.bp_tabs_module_contentSwitchTabList--bbd44 .bp_tabs_module_contentSwitchTab--bbd44:not([aria-disabled=true]):hover{
   background:var(--content-switch-tab-hover-background);
 }
-.bp_tabs_module_contentSwitchTabList--42942 .bp_tabs_module_contentSwitchTab--42942:not([aria-disabled=true]):active{
+.bp_tabs_module_contentSwitchTabList--bbd44 .bp_tabs_module_contentSwitchTab--bbd44:not([aria-disabled=true]):active{
   background:var(--content-switch-tab-active-background);
 }
-.bp_tabs_module_contentSwitchTabList--42942 .bp_tabs_module_contentSwitchTab--42942[aria-disabled=true]{
+.bp_tabs_module_contentSwitchTabList--bbd44 .bp_tabs_module_contentSwitchTab--bbd44[aria-disabled=true]{
   opacity:.3;
   pointer-events:none;
 }
 
-.bp_tabs_module_tabsListContainer--42942{
-  height:calc(var(--size-10) + (var(--border-3) + 1px)*2);
+.bp_tabs_module_tabsListContainer--bbd44{
+  height:calc(var(--tab-height) + (var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset))*2);
   overflow-y:hidden;
   scroll-behavior:smooth;
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942{
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44{
   display:flex;
   overflow-x:auto;
-  padding:calc(var(--border-3) + 1px);
+  padding:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tabSeparator--42942{
-  border-bottom:var(--border-2) solid var(--border-tab-border);
-  min-width:var(--space-4);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tabSeparator--bbd44{
+  border-bottom:var(--tab-separator-border);
+  min-width:var(--tab-gap);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tabSeparator--42942:last-child{
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tabSeparator--bbd44:last-child{
   display:none;
 }
 @media only screen and (max-width: 1023px){
-  .bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tabSeparator--42942{
-    min-width:calc(var(--border-3) + 1px);
+  .bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tabSeparator--bbd44{
+    min-width:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   }
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942{
-  background:var(--background-background);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44{
+  background:var(--tab-background);
   border-style:none;
-  border-bottom:var(--border-2) solid var(--border-tab-border);
-  border-top-left-radius:var(--radius-05);
-  border-top-right-radius:var(--radius-05);
-  color:var(--text-text-on-light-secondary);
+  border-bottom:var(--tab-border);
+  border-top-left-radius:var(--tab-border-radius-top-left);
+  border-top-right-radius:var(--tab-border-radius-top-right);
+  color:var(--tab-font-color);
   cursor:pointer;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  height:var(--size-10);
+  height:var(--tab-height);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
-  padding-inline:var(--space-3) var(--space-3);
-  scroll-margin:calc(var(--border-3) + 1px);
+  padding-inline:var(--tab-inline-padding);
+  scroll-margin:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   z-index:2;
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942[aria-selected=true]{
-  border-bottom:var(--border-2) solid var(--border-tab-border-selected);
-  color:var(--text-cta-link);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44[aria-selected=true]{
+  border-bottom:var(--tab-border-selected);
+  color:var(--tab-font-selected-color);
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -7619,32 +7670,36 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942:hover{
-  background-color:var(--surface-tab-surface-hover);
-  color:var(--text-text-on-light-secondary-hover);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44:hover{
+  background-color:var(--tab-background-hover);
+  border-bottom:var(--tab-border-hover);
+  color:var(--tab-font-color-hover);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942:hover[aria-selected=true]{
-  color:var(--text-cta-link);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44:hover[aria-selected=true]{
+  border-bottom:var(--tab-border-selected-hover);
+  color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942:active{
-  background-color:var(--surface-tab-surface-pressed);
-  color:var(--text-text-on-light-secondary-hover);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44:active{
+  background-color:var(--tab-background-pressed);
+  color:var(--tab-font-color-hover);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942:active[aria-selected=true]{
-  color:var(--text-cta-link);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44:active[aria-selected=true]{
+  color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942:focus-visible,.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942[data-focus-visible]{
-  background-color:var(--surface-tab-surface-hover);
-  border-radius:var(--radius-05);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44:focus-visible,.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44[data-focus-visible]{
+  background-color:var(--tab-background-hover);
+  border-bottom:var(--tab-border-focus);
+  border-radius:var(--tab-border-radius);
   box-shadow:inset 0 0 0 1px #fff;
-  color:var(--text-text-on-light-secondary-hover);
-  outline:var(--border-3) solid var(--outline-focus-on-light);
-  outline-offset:1px;
+  color:var(--tab-font-color-hover);
+  outline:var(--tab-border-focus-outline-width) solid var(--tab-border-focus-outline-color);
+  outline-offset:var(--tab-border-focus-outline-offset);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942[data-focus-visible][aria-selected=true]{
-  color:var(--text-cta-link);
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44[data-focus-visible][aria-selected=true]{
+  border-bottom:var(--tab-border-selected);
+  color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--42942 .bp_tabs_module_tabList--42942 .bp_tabs_module_tab--42942[aria-disabled=true]{
+.bp_tabs_module_tabsListContainer--bbd44 .bp_tabs_module_tabList--bbd44 .bp_tabs_module_tab--bbd44[aria-disabled=true]{
   opacity:.5;
 }
 

package/dist/lib-esm/primitives/tabs/content-switch-tab.js

@@ -15,6 +15,7 @@ const ContentSwitchTab = /*#__PURE__*/forwardRef(function Tab$1(props, ref) {
     ref: ref,
     className: clsx(styles.contentSwitchTab, className),
     children: [children, jsx("span", {
+      "aria-hidden": "true",
       className: styles.hiddenWidthSetter,
       children: children
     })]

package/dist/lib-esm/primitives/tabs/default-tab.js

@@ -43,6 +43,7 @@ const DefaultTab = /*#__PURE__*/forwardRef(function Tab$1(props, ref) {
       ref: useForkRef(tabRef, ref),
       className: clsx(styles.tab, className),
       children: [children, jsx("span", {
+        "aria-hidden": "true",
         className: styles.hiddenWidthSetter,
         children: children
       })]

package/dist/lib-esm/primitives/tabs/tab-list.js

@@ -22,6 +22,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
   }
   return jsx("div", {
     className: clsx(styles.tabsListContainer, containerClassname),
+    "data-modern": enableModernizedComponents,
     children: jsx(TabList$1, {
       ...rest,
       ref: ref,

package/dist/lib-esm/primitives/tabs/tabs.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--42942","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--42942","contentSwitchTab":"bp_tabs_module_contentSwitchTab--42942","tabsListContainer":"bp_tabs_module_tabsListContainer--42942","tabList":"bp_tabs_module_tabList--42942","tabSeparator":"bp_tabs_module_tabSeparator--42942","tab":"bp_tabs_module_tab--42942"};
+var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--bbd44","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--bbd44","tabsListContainer":"bp_tabs_module_tabsListContainer--bbd44","contentSwitchTab":"bp_tabs_module_contentSwitchTab--bbd44","tabList":"bp_tabs_module_tabList--bbd44","tabSeparator":"bp_tabs_module_tabSeparator--bbd44","tab":"bp_tabs_module_tab--bbd44"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.56.0",
+    "version": "12.57.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {