@box/blueprint-web 18.4.0 → 18.5.0

package/dist/lib-esm/blueprint-configuration-context/consts.d.ts

@@ -39,7 +39,7 @@ export declare const BLUEPRINT_CONFIGURATION_SPLITS: {
 export declare const ANIMATED_COMPONENTS_BY_PHASE: {
     readonly phase1: readonly ["Button", "IconButton", "DropdownMenu", "Tooltip", "Popover", "SplitButton", "CardTooltip", "NavigationMenu", "Modal", "TextButton", "ContextMenu"];
     readonly phase2: readonly ["TriggerButton", "ContextMenuItem", "DropdownMenuItem", "NavigationMenuItem", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup", "InlineError"];
-    readonly phase3: readonly ["Notification"];
+    readonly phase3: readonly ["TooltipTravel", "TextInputErrorShake", "Notification", "NumericBadge", "Tabs", "AvatarGroup"];
 };
 /**
  * Default values for Blueprint configuration properties that are not driven by

package/dist/lib-esm/blueprint-configuration-context/consts.js

@@ -41,7 +41,11 @@ const BLUEPRINT_CONFIGURATION_SPLITS = deepFreeze({
 const ANIMATED_COMPONENTS_BY_PHASE = deepFreeze({
   phase1: ['Button', 'IconButton', 'DropdownMenu', 'Tooltip', 'Popover', 'SplitButton', 'CardTooltip', 'NavigationMenu', 'Modal', 'TextButton', 'ContextMenu'],
   phase2: ['TriggerButton', 'ContextMenuItem', 'DropdownMenuItem', 'NavigationMenuItem', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup', 'InlineError'],
-  phase3: ['Notification']
+  phase3: ['TooltipTravel',
+  // story/group-owned bubble; production Tooltip stays on released phase 1
+  'TextInputErrorShake',
+  // DISTINCT from phase2 'TextInput' so phase 3 is independently rollable
+  'Notification', 'NumericBadge', 'Tabs', 'AvatarGroup']
 });
 /**
  * Default values for Blueprint configuration properties that are not driven by

package/dist/lib-esm/components.css

@@ -11498,17 +11498,17 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   opacity:.3;
 }
 
-.bp_tabs_module_hiddenWidthSetter--22ec8{
+.bp_tabs_module_hiddenWidthSetter--13d72{
   display:block;
   height:0;
   overflow:hidden;
   visibility:hidden;
 }
-.bp_tabs_module_hiddenWidthSetter--22ec8 > *{
+.bp_tabs_module_hiddenWidthSetter--13d72 > *{
   visibility:hidden;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72{
   --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-surface-content-switcher-surface);
@@ -11531,7 +11531,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--22ec8 .bp_tabs_module_contentSwitchTab--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11539,7 +11539,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11550,12 +11550,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72{
   align-items:center;
   background:#0000;
   border:none;
   border-radius:var(--content-switch-tab-border-radius);
   color:var(--content-switch-tab-color);
+  cursor:pointer;
   display:flex;
   flex-direction:column;
   height:var(--content-switch-tab-height);
@@ -11564,7 +11565,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding-inline:var(--content-switch-tab-padding-inline);
   white-space:nowrap;
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-selected=true]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[aria-selected=true]{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11572,7 +11573,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-selected=true]{
+:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[aria-selected=true]{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11583,12 +11584,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-selected=true]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[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);
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11596,7 +11597,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11607,19 +11608,52 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8:not([aria-disabled=true])[data-focus-visible]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[data-focus-visible]{
   border-color:#0000;
   box-shadow:var(--content-switch-tab-focus-box-shadow);
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8:not([aria-disabled=true]):hover,.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8:not([aria-disabled=true])[data-focus-visible]:not([aria-selected=true]){
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true]):hover,.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[data-focus-visible]:not([aria-selected=true]){
   background:var(--content-switch-tab-hover-background);
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-disabled=true]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[aria-disabled=true]{
   opacity:.3;
   pointer-events:none;
 }
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true]{
+  position:relative;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+  background:var(--content-switch-tab-selected-background);
+  border-radius:var(--content-switch-tab-border-radius);
+  box-shadow:var(--content-switch-tab-selected-box-shadow);
+  height:var(--content-switch-tab-height);
+  top:var(--content-switch-tab-list-padding);
+  transition-duration:var(--bp-duration-medium);
+  transition-property:transform, width;
+  transition-timing-function:ease-in-out;
+  z-index:0;
+}
+@media (prefers-reduced-motion: reduce){
+  .bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+    transition:none;
+  }
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72{
+  position:relative;
+  z-index:1;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72[aria-selected=true]{
+  background:#0000;
+  box-shadow:none;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[aria-selected=true]:hover,.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[aria-selected=true][data-focus-visible]{
+  background:#0000;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[aria-selected=true][data-focus-visible]{
+  box-shadow:var(--content-switch-tab-focus-box-shadow);
+}
 
-.bp_tabs_module_tabsListContainer--22ec8{
+.bp_tabs_module_tabsListContainer--13d72{
   --tab-height:var(--bp-size-100);
   --tab-inline-padding:var(--bp-space-030);
   --tab-background:var(--bp-surface-tab-surface);
@@ -11645,13 +11679,19 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   overflow-y:hidden;
   scroll-behavior:smooth;
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72{
+  --tab-separator-width:var(--tab-gap);
   display:flex;
   overflow-x:auto;
   padding:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   position:relative;
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8::after{
+@media only screen and (max-width: 1023px){
+  .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72{
+    --tab-separator-width:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
+  }
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72::after{
   border-bottom:var(--tab-border);
   bottom:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   content:"";
@@ -11659,19 +11699,14 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   position:absolute;
   right:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tabSeparator--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tabSeparator--13d72{
   border-bottom:var(--tab-separator-border);
-  min-width:var(--tab-gap);
+  min-width:var(--tab-separator-width);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tabSeparator--22ec8:last-child{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tabSeparator--13d72:last-child{
   display:none;
 }
-@media only screen and (max-width: 1023px){
-  .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tabSeparator--22ec8{
-    min-width:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
-  }
-}
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11679,7 +11714,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11690,7 +11725,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72{
   align-items:center;
   background:var(--tab-background);
   border-style:none;
@@ -11702,10 +11737,27 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   display:flex;
   height:var(--tab-height);
   padding-inline:var(--tab-inline-padding);
+  position:relative;
   scroll-margin:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   z-index:2;
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72::after{
+  background:#0000;
+  bottom:calc(var(--bp-border-01)*-1);
+  content:"";
+  height:var(--bp-border-02);
+  left:calc(var(--tab-separator-width)*-1);
+  pointer-events:none;
+  position:absolute;
+  right:calc(var(--tab-separator-width)*-1);
+  transition:background-color var(--bp-duration-medium) ease-in-out;
+}
+@media (prefers-reduced-motion: reduce){
+  .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72::after{
+    transition:none;
+  }
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-selected=true]{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11713,7 +11765,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-selected=true]{
+:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-selected=true]{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11724,11 +11776,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-selected=true]{
   border-bottom:var(--tab-border-selected);
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11736,7 +11788,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11747,23 +11799,25 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:hover{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:hover{
   background-color:var(--tab-background-hover);
-  border-bottom:var(--tab-border-hover);
   color:var(--tab-font-color-hover);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:hover[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:hover[aria-selected=true]{
   border-bottom:var(--tab-border-selected-hover);
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:active{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:hover:not([aria-selected=true])::after{
+  background:var(--bp-border-tab-border-hover);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:active{
   background-color:var(--tab-background-pressed);
   color:var(--tab-font-color-hover);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:active[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:active[aria-selected=true]{
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:focus-visible,.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[data-focus-visible]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:focus-visible,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[data-focus-visible]{
   background-color:var(--tab-background-hover);
   border-bottom:var(--tab-border-focus);
   border-radius:var(--tab-border-radius);
@@ -11772,13 +11826,53 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   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--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[data-focus-visible][aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[data-focus-visible][aria-selected=true]{
   border-bottom:var(--tab-border-selected);
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-disabled=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-disabled=true]{
   opacity:.5;
 }
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+  background:var(--bp-border-tab-border-selected);
+  bottom:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
+  height:var(--bp-border-02);
+  transition-duration:var(--bp-duration-medium);
+  transition-property:transform, width;
+  transition-timing-function:var(--bp-curve-small-on);
+  z-index:3;
+}
+@media (prefers-reduced-motion: reduce){
+  .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+    transition:none;
+  }
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true]:has(.bp_tabs_module_tab--13d72[aria-selected=true]:hover) .bp_tabs_module_tabIndicator--13d72{
+  background:var(--bp-border-tab-border-selected-hover);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:active,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:focus-visible,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:hover,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[data-focus-visible]{
+  border-bottom:var(--tab-border);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:focus-visible:not([aria-selected=true])::after,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[data-focus-visible]:not([aria-selected=true])::after{
+  background:var(--bp-border-tab-border-hover);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:focus-visible:not([aria-selected=true]),.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[data-focus-visible]:not([aria-selected=true]){
+  box-shadow:inset 0 0 0 1px #fff;
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true],.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true]:active,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true]:hover{
+  border-bottom:var(--tab-border);
+  box-shadow:none;
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true]:focus-visible,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true][data-focus-visible]{
+  border-bottom:var(--tab-border);
+  box-shadow:inset 0 0 0 1px #fff;
+}
+
+.bp_tabs_module_tabIndicator--13d72{
+  left:0;
+  pointer-events:none;
+  position:absolute;
+}
 .bp_radio_group_module_root--8c22a{
   --radio-line-height:var(--bp-font-line-height-04);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

package/dist/lib-esm/index.css

@@ -11498,17 +11498,17 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   opacity:.3;
 }
 
-.bp_tabs_module_hiddenWidthSetter--22ec8{
+.bp_tabs_module_hiddenWidthSetter--13d72{
   display:block;
   height:0;
   overflow:hidden;
   visibility:hidden;
 }
-.bp_tabs_module_hiddenWidthSetter--22ec8 > *{
+.bp_tabs_module_hiddenWidthSetter--13d72 > *{
   visibility:hidden;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72{
   --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-surface-content-switcher-surface);
@@ -11531,7 +11531,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--22ec8 .bp_tabs_module_contentSwitchTab--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11539,7 +11539,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11550,12 +11550,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72{
   align-items:center;
   background:#0000;
   border:none;
   border-radius:var(--content-switch-tab-border-radius);
   color:var(--content-switch-tab-color);
+  cursor:pointer;
   display:flex;
   flex-direction:column;
   height:var(--content-switch-tab-height);
@@ -11564,7 +11565,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding-inline:var(--content-switch-tab-padding-inline);
   white-space:nowrap;
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-selected=true]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[aria-selected=true]{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11572,7 +11573,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-selected=true]{
+:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[aria-selected=true]{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11583,12 +11584,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-selected=true]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[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);
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11596,7 +11597,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11607,19 +11608,52 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8:not([aria-disabled=true])[data-focus-visible]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[data-focus-visible]{
   border-color:#0000;
   box-shadow:var(--content-switch-tab-focus-box-shadow);
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8:not([aria-disabled=true]):hover,.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8:not([aria-disabled=true])[data-focus-visible]:not([aria-selected=true]){
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true]):hover,.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[data-focus-visible]:not([aria-selected=true]){
   background:var(--content-switch-tab-hover-background);
 }
-.bp_tabs_module_contentSwitchTabList--22ec8 .bp_tabs_module_contentSwitchTab--22ec8[aria-disabled=true]{
+.bp_tabs_module_contentSwitchTabList--13d72 .bp_tabs_module_contentSwitchTab--13d72[aria-disabled=true]{
   opacity:.3;
   pointer-events:none;
 }
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true]{
+  position:relative;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+  background:var(--content-switch-tab-selected-background);
+  border-radius:var(--content-switch-tab-border-radius);
+  box-shadow:var(--content-switch-tab-selected-box-shadow);
+  height:var(--content-switch-tab-height);
+  top:var(--content-switch-tab-list-padding);
+  transition-duration:var(--bp-duration-medium);
+  transition-property:transform, width;
+  transition-timing-function:ease-in-out;
+  z-index:0;
+}
+@media (prefers-reduced-motion: reduce){
+  .bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+    transition:none;
+  }
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72{
+  position:relative;
+  z-index:1;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72[aria-selected=true]{
+  background:#0000;
+  box-shadow:none;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[aria-selected=true]:hover,.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[aria-selected=true][data-focus-visible]{
+  background:#0000;
+}
+.bp_tabs_module_contentSwitchTabList--13d72[data-bp-animated=true] .bp_tabs_module_contentSwitchTab--13d72:not([aria-disabled=true])[aria-selected=true][data-focus-visible]{
+  box-shadow:var(--content-switch-tab-focus-box-shadow);
+}
 
-.bp_tabs_module_tabsListContainer--22ec8{
+.bp_tabs_module_tabsListContainer--13d72{
   --tab-height:var(--bp-size-100);
   --tab-inline-padding:var(--bp-space-030);
   --tab-background:var(--bp-surface-tab-surface);
@@ -11645,13 +11679,19 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   overflow-y:hidden;
   scroll-behavior:smooth;
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72{
+  --tab-separator-width:var(--tab-gap);
   display:flex;
   overflow-x:auto;
   padding:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   position:relative;
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8::after{
+@media only screen and (max-width: 1023px){
+  .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72{
+    --tab-separator-width:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
+  }
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72::after{
   border-bottom:var(--tab-border);
   bottom:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   content:"";
@@ -11659,19 +11699,14 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   position:absolute;
   right:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tabSeparator--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tabSeparator--13d72{
   border-bottom:var(--tab-separator-border);
-  min-width:var(--tab-gap);
+  min-width:var(--tab-separator-width);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tabSeparator--22ec8:last-child{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tabSeparator--13d72:last-child{
   display:none;
 }
-@media only screen and (max-width: 1023px){
-  .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tabSeparator--22ec8{
-    min-width:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
-  }
-}
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11679,7 +11714,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11690,7 +11725,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72{
   align-items:center;
   background:var(--tab-background);
   border-style:none;
@@ -11702,10 +11737,27 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   display:flex;
   height:var(--tab-height);
   padding-inline:var(--tab-inline-padding);
+  position:relative;
   scroll-margin:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
   z-index:2;
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72::after{
+  background:#0000;
+  bottom:calc(var(--bp-border-01)*-1);
+  content:"";
+  height:var(--bp-border-02);
+  left:calc(var(--tab-separator-width)*-1);
+  pointer-events:none;
+  position:absolute;
+  right:calc(var(--tab-separator-width)*-1);
+  transition:background-color var(--bp-duration-medium) ease-in-out;
+}
+@media (prefers-reduced-motion: reduce){
+  .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72::after{
+    transition:none;
+  }
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-selected=true]{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11713,7 +11765,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-selected=true]{
+:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-selected=true]{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11724,11 +11776,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-selected=true]{
   border-bottom:var(--tab-border-selected);
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -11736,7 +11788,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8 .bp_tabs_module_hiddenWidthSetter--22ec8{
+:where(body.is-inter-font) .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72 .bp_tabs_module_hiddenWidthSetter--13d72{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -11747,23 +11799,25 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:hover{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:hover{
   background-color:var(--tab-background-hover);
-  border-bottom:var(--tab-border-hover);
   color:var(--tab-font-color-hover);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:hover[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:hover[aria-selected=true]{
   border-bottom:var(--tab-border-selected-hover);
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:active{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:hover:not([aria-selected=true])::after{
+  background:var(--bp-border-tab-border-hover);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:active{
   background-color:var(--tab-background-pressed);
   color:var(--tab-font-color-hover);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:active[aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:active[aria-selected=true]{
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:focus-visible,.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[data-focus-visible]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:focus-visible,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[data-focus-visible]{
   background-color:var(--tab-background-hover);
   border-bottom:var(--tab-border-focus);
   border-radius:var(--tab-border-radius);
@@ -11772,13 +11826,53 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   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--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[data-focus-visible][aria-selected=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72:focus-visible[aria-selected=true],.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[data-focus-visible][aria-selected=true]{
   border-bottom:var(--tab-border-selected);
   color:var(--tab-font-selected-color);
 }
-.bp_tabs_module_tabsListContainer--22ec8 .bp_tabs_module_tabList--22ec8 .bp_tabs_module_tab--22ec8[aria-disabled=true]{
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72 .bp_tabs_module_tab--13d72[aria-disabled=true]{
   opacity:.5;
 }
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+  background:var(--bp-border-tab-border-selected);
+  bottom:calc(var(--tab-border-focus-outline-width) + var(--tab-border-focus-outline-offset));
+  height:var(--bp-border-02);
+  transition-duration:var(--bp-duration-medium);
+  transition-property:transform, width;
+  transition-timing-function:var(--bp-curve-small-on);
+  z-index:3;
+}
+@media (prefers-reduced-motion: reduce){
+  .bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tabIndicator--13d72{
+    transition:none;
+  }
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true]:has(.bp_tabs_module_tab--13d72[aria-selected=true]:hover) .bp_tabs_module_tabIndicator--13d72{
+  background:var(--bp-border-tab-border-selected-hover);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:active,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:focus-visible,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:hover,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[data-focus-visible]{
+  border-bottom:var(--tab-border);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:focus-visible:not([aria-selected=true])::after,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[data-focus-visible]:not([aria-selected=true])::after{
+  background:var(--bp-border-tab-border-hover);
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72:focus-visible:not([aria-selected=true]),.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[data-focus-visible]:not([aria-selected=true]){
+  box-shadow:inset 0 0 0 1px #fff;
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true],.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true]:active,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true]:hover{
+  border-bottom:var(--tab-border);
+  box-shadow:none;
+}
+.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true]:focus-visible,.bp_tabs_module_tabsListContainer--13d72 .bp_tabs_module_tabList--13d72[data-bp-animated=true] .bp_tabs_module_tab--13d72[aria-selected=true][data-focus-visible]{
+  border-bottom:var(--tab-border);
+  box-shadow:inset 0 0 0 1px #fff;
+}
+
+.bp_tabs_module_tabIndicator--13d72{
+  left:0;
+  pointer-events:none;
+  position:absolute;
+}
 .bp_radio_group_module_root--8c22a{
   --radio-line-height:var(--bp-font-line-height-04);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

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

@@ -1,8 +1,13 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { TabList as TabList$1 } from '@ariakit/react';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
+import { useForkRef } from '../../utils/useForkRef.js';
 import styles from './tabs.module.js';
+import { useTabIndicatorStyle } from './use-tab-indicator.js';
 import { useTabs } from './use-tabs.js';
 
 const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
@@ -10,19 +15,40 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
     className,
     variant = 'default',
     containerClassname,
+    children,
     ...rest
   } = props;
   const tab = useTabs();
+  const listRef = useRef(null);
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Tabs');
+  const selectedTabElement = tab?.useState(state => state.items.find(item => item.id === state.selectedId)?.element ?? null);
+  const indicatorStyle = useTabIndicatorStyle({
+    enabled: isAnimationEnabled,
+    listRef,
+    selectedTabElement
+  });
+  const listRefs = useForkRef(ref, listRef);
   if (!tab) {
     throw new Error('TabList must be wrapped in a Tabs component');
   }
   return jsx("div", {
     className: clsx(styles.tabsListContainer, containerClassname),
-    children: jsx(TabList$1, {
+    children: jsxs(TabList$1, {
       ...rest,
-      ref: ref,
+      ref: listRefs,
       className: clsx(variant === 'contentSwitcher' ? styles.contentSwitchTabList : styles.tabList, className),
-      store: tab
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
+      store: tab,
+      children: [isAnimationEnabled && indicatorStyle ? jsx("div", {
+        "aria-hidden": "true",
+        className: styles.tabIndicator,
+        "data-bp-tab-indicator": "",
+        role: "presentation",
+        style: indicatorStyle
+      }) : null, children]
     })
   });
 });

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

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

package/dist/lib-esm/primitives/tabs/use-tab-indicator.d.ts

@@ -0,0 +1,17 @@
+import { type CSSProperties, type RefObject } from 'react';
+export type TabIndicatorStyle = Pick<CSSProperties, 'transform' | 'width'>;
+/**
+ * Measures the selected tab and returns the sliding-indicator `transform` +
+ * `width`. `useContentSizeObserver` is a threshold/`data-large` helper, so
+ * ResizeObserver lives here: the list for container resize, the selected tab
+ * for label/size changes that do not change the list box.
+ *
+ * The indicator must be a child of the scrolling tab list (or subtract
+ * `scrollLeft`). `offsetLeft` is relative to that list and does not include
+ * scroll, so horizontal scroll stays correct without extra math.
+ */
+export declare const useTabIndicatorStyle: ({ enabled, listRef, selectedTabElement, }: {
+    enabled: boolean;
+    listRef: RefObject<HTMLElement | null>;
+    selectedTabElement: HTMLElement | null | undefined;
+}) => TabIndicatorStyle | undefined;

package/dist/lib-esm/primitives/tabs/use-tab-indicator.js

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect.js';
+
+/**
+ * Measures the selected tab and returns the sliding-indicator `transform` +
+ * `width`. `useContentSizeObserver` is a threshold/`data-large` helper, so
+ * ResizeObserver lives here: the list for container resize, the selected tab
+ * for label/size changes that do not change the list box.
+ *
+ * The indicator must be a child of the scrolling tab list (or subtract
+ * `scrollLeft`). `offsetLeft` is relative to that list and does not include
+ * scroll, so horizontal scroll stays correct without extra math.
+ */
+const useTabIndicatorStyle = ({
+  enabled,
+  listRef,
+  selectedTabElement
+}) => {
+  const [style, setStyle] = useState(undefined);
+  useEnhancedEffect(() => {
+    if (!enabled) {
+      setStyle(undefined);
+      return undefined;
+    }
+    const list = listRef.current;
+    const selectedTab = selectedTabElement ?? null;
+    const measure = () => {
+      if (!selectedTab) {
+        setStyle(undefined);
+        return;
+      }
+      const transform = `translateX(${selectedTab.offsetLeft}px)`;
+      const width = selectedTab.offsetWidth;
+      setStyle(previous => {
+        if (previous?.transform === transform && previous.width === width) {
+          return previous;
+        }
+        return {
+          transform,
+          width
+        };
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(measure);
+    if (list) {
+      observer.observe(list);
+    }
+    if (selectedTab) {
+      observer.observe(selectedTab);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [enabled, listRef, selectedTabElement]);
+  return style;
+};
+
+export { useTabIndicatorStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.4.0",
+    "version": "18.5.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.12.3",
+        "@box/blueprint-web-assets": "^5.12.4",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.4.15",
+        "@box/storybook-utils": "^1.4.16",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",