@box/blueprint-web 12.30.0 → 12.31.0

package/dist/lib-esm/index.css

@@ -6389,7 +6389,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   opacity:.3;
 }
 
-.bp_tabs_module_hiddenWidthSetter--49dca{
+.bp_tabs_module_hiddenWidthSetter--5991e{
   display:block;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -6403,46 +6403,77 @@ 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--49dca > *{
+.bp_tabs_module_hiddenWidthSetter--5991e > *{
   visibility:hidden;
 }
 
-.bp_tabs_module_contentSwitchTabList--49dca{
-  background:var(--surface-contentswitcher-surface);
-  border-radius:var(--radius-7);
+.bp_tabs_module_contentSwitchTabList--5991e[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);
+  --content-switch-tab-list-border-radius:var(--radius-7);
+  --content-switch-tab-height:var(--size-8);
+  --content-switch-tab-border-radius:var(--radius-6);
+  --content-switch-tab-padding-inline:var(--space-4);
+  --content-switch-tab-selected-color:var(--text-text-on-light);
+  --content-switch-tab-selected-background:var(--surface-cta-surface-secondary);
+  --content-switch-tab-selected-box-shadow:0 0 0 var(--border-1) var(--gray-50);
+  --content-switch-tab-focus-box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+  --content-switch-tab-hover-background:var(--surface-surface-hover);
+  --content-switch-tab-active-background:var(--surface-cta-surface-secondary-pressed);
+}
+
+.bp_tabs_module_contentSwitchTabList--5991e[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);
+  --content-switch-tab-list-border-radius:var(--bp-radius-10);
+  --content-switch-tab-height:var(--bp-size-080);
+  --content-switch-tab-border-radius:var(--bp-radius-10);
+  --content-switch-tab-padding-inline:var(--bp-space-040);
+  --content-switch-tab-selected-color:var(--bp-text-text-on-light);
+  --content-switch-tab-selected-background:var(--bp-gray-white);
+  --content-switch-tab-selected-box-shadow:0 0 0 var(--bp-border-01) var(--bp-gray-50);
+  --content-switch-tab-focus-box-shadow:0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
+  --content-switch-tab-hover-background:var(--bp-gray-05);
+}
+
+.bp_tabs_module_contentSwitchTabList--5991e{
+  background:var(--content-switch-tab-list-background);
+  border-radius:var(--content-switch-tab-list-border-radius);
   display:grid;
-  gap:var(--space-1);
+  gap:var(--content-switch-tab-list-gap);
   grid-auto-columns:1fr;
   grid-auto-flow:column;
   min-width:-moz-fit-content;
   min-width:fit-content;
-  padding:var(--space-1);
+  padding:var(--content-switch-tab-list-padding);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca{
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e{
   align-items:center;
   background:#0000;
   border:none;
-  border-radius:var(--radius-6);
+  border-radius:var(--content-switch-tab-border-radius);
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  height:var(--size-8);
+  height:var(--content-switch-tab-height);
   justify-content:center;
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   outline:none;
-  padding-inline:var(--space-4);
+  padding-inline:var(--content-switch-tab-padding-inline);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   white-space:nowrap;
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca[aria-selected=true]{
-  background:var(--surface-cta-surface-secondary);
-  box-shadow:0 0 0 var(--border-1) var(--gray-50);
-  color:var(--text-text-on-light);
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e[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);
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -6452,44 +6483,44 @@ 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--49dca .bp_tabs_module_contentSwitchTab--49dca:not([aria-disabled=true])[data-focus-visible]{
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e:not([aria-disabled=true])[data-focus-visible]{
   border-color:#0000;
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+  box-shadow:var(--content-switch-tab-focus-box-shadow);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca:not([aria-disabled=true]):hover{
-  background:var(--surface-surface-hover);
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e:not([aria-disabled=true]):hover{
+  background:var(--content-switch-tab-hover-background);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca:not([aria-disabled=true]):active{
-  background:var(--surface-cta-surface-secondary-pressed);
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e:not([aria-disabled=true]):active{
+  background:var(--content-switch-tab-active-background);
 }
-.bp_tabs_module_contentSwitchTabList--49dca .bp_tabs_module_contentSwitchTab--49dca[aria-disabled=true]{
+.bp_tabs_module_contentSwitchTabList--5991e .bp_tabs_module_contentSwitchTab--5991e[aria-disabled=true]{
   opacity:.3;
   pointer-events:none;
 }
 
-.bp_tabs_module_tabsListContainer--49dca{
+.bp_tabs_module_tabsListContainer--5991e{
   height:calc(var(--size-10) + (var(--border-3) + 1px)*2);
   overflow-y:hidden;
   scroll-behavior:smooth;
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e{
   display:flex;
   overflow-x:auto;
   padding:calc(var(--border-3) + 1px);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tabSeparator--49dca{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tabSeparator--5991e{
   border-bottom:var(--border-2) solid var(--border-tab-border);
   min-width:var(--space-4);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tabSeparator--49dca:last-child{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tabSeparator--5991e:last-child{
   display:none;
 }
 @media only screen and (max-width: 1023px){
-  .bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tabSeparator--49dca{
+  .bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tabSeparator--5991e{
     min-width:calc(var(--border-3) + 1px);
   }
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e{
   background:var(--background-background);
   border-style:none;
   border-bottom:var(--border-2) solid var(--border-tab-border);
@@ -6510,7 +6541,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-text-case);
   z-index:2;
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[aria-selected=true]{
   border-bottom:var(--border-2) solid var(--border-tab-border-selected);
   color:var(--text-cta-link);
   font-family:var(--body-default-bold-font-family);
@@ -6522,21 +6553,21 @@ 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--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:hover{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:hover{
   background-color:var(--surface-tab-surface-hover);
   color:var(--text-text-on-light-secondary-hover);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:hover[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:hover[aria-selected=true]{
   color:var(--text-cta-link);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:active{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:active{
   background-color:var(--surface-tab-surface-pressed);
   color:var(--text-text-on-light-secondary-hover);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:active[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:active[aria-selected=true]{
   color:var(--text-cta-link);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:focus-visible,.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[data-focus-visible]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:focus-visible,.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[data-focus-visible]{
   background-color:var(--surface-tab-surface-hover);
   border-radius:var(--radius-05);
   box-shadow:inset 0 0 0 1px #fff;
@@ -6544,10 +6575,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   outline:var(--border-3) solid var(--outline-focus-on-light);
   outline-offset:1px;
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[data-focus-visible][aria-selected=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[data-focus-visible][aria-selected=true]{
   color:var(--text-cta-link);
 }
-.bp_tabs_module_tabsListContainer--49dca .bp_tabs_module_tabList--49dca .bp_tabs_module_tab--49dca[aria-disabled=true]{
+.bp_tabs_module_tabsListContainer--5991e .bp_tabs_module_tabList--5991e .bp_tabs_module_tab--5991e[aria-disabled=true]{
   opacity:.5;
 }
 

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

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { TabList as TabList$1 } from '@ariakit/react';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './tabs.module.js';
 import { useTabs } from './use-tabs.js';
 
@@ -13,6 +14,9 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
     ...rest
   } = props;
   const tab = useTabs();
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   if (!tab) {
     throw new Error('TabList must be wrapped in a Tabs component');
   }
@@ -22,6 +26,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
       ...rest,
       ref: ref,
       className: clsx(variant === 'contentSwitcher' ? styles.contentSwitchTabList : styles.tabList, className),
+      "data-modern": enableModernizedComponents,
       store: tab
     })
   });

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

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

package/package.json

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