@box/blueprint-web 14.15.2 → 14.16.0

package/dist/lib-esm/index.css

@@ -2679,7 +2679,7 @@
   height:var(--icon-button-size-x-small);
   width:var(--icon-button-size-x-small);
 }
-.bp_dropdown_menu_module_content--83ff8[data-modern=false]{
+.bp_dropdown_menu_module_content--ca3a5[data-modern=false]{
   --dropdown-menu-radius:var(--radius-3);
   --dropdown-menu-padding:var(--space-3);
   --dropdown-menu-text-color:var(--text-text-on-light);
@@ -2723,7 +2723,7 @@
   text-transform:var(--body-default-text-case);
 }
 
-.bp_dropdown_menu_module_content--83ff8[data-modern=true]{
+.bp_dropdown_menu_module_content--ca3a5[data-modern=true]{
   --dropdown-menu-radius:var(--bp-radius-10);
   --dropdown-menu-padding:var(--bp-space-030);
   --dropdown-menu-text-color:var(--bp-text-text-on-light);
@@ -2766,7 +2766,7 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_dropdown_menu_module_content--83ff8{
+.bp_dropdown_menu_module_content--ca3a5{
   backdrop-filter:var(--dropdown-menu-backdrop-filter);
   background-color:var(--dropdown-menu-background);
   border:var(--dropdown-menu-border);
@@ -2781,7 +2781,7 @@
   padding:var(--dropdown-menu-padding);
   z-index:380;
 }
-.bp_dropdown_menu_module_content--83ff8[data-menu-fullscreen=true]{
+.bp_dropdown_menu_module_content--ca3a5[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -2794,39 +2794,39 @@
   position:relative;
   width:100vw;
 }
-.bp_dropdown_menu_module_content--83ff8[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--83ff8{
+.bp_dropdown_menu_module_content--ca3a5[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--ca3a5{
   overflow-y:auto;
   padding:var(--dropdown-menu-full-screen-padding);
 }
-.bp_dropdown_menu_module_content--83ff8 .bp_dropdown_menu_module_subheader--83ff8{
+.bp_dropdown_menu_module_content--ca3a5 .bp_dropdown_menu_module_subheader--ca3a5{
   padding:var(--dropdown-menu-subheader-padding);
 }
-.bp_dropdown_menu_module_content--83ff8 .bp_dropdown_menu_module_subheader--83ff8.bp_dropdown_menu_module_uppercased--83ff8{
+.bp_dropdown_menu_module_content--ca3a5 .bp_dropdown_menu_module_subheader--ca3a5.bp_dropdown_menu_module_uppercased--ca3a5{
   text-transform:uppercase;
 }
-.bp_dropdown_menu_module_content--83ff8 .bp_dropdown_menu_module_dropdownMenuItemSeparator--83ff8{
+.bp_dropdown_menu_module_content--ca3a5 .bp_dropdown_menu_module_dropdownMenuItemSeparator--ca3a5{
   margin-block:var(--dropdown-menu-separator-margin);
 }
 
-.bp_dropdown_menu_module_ellipsis--83ff8{
+.bp_dropdown_menu_module_ellipsis--ca3a5{
   min-width:0;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_dropdown_menu_module_itemBody--83ff8{
+.bp_dropdown_menu_module_itemBody--ca3a5{
   flex:1;
   min-width:0;
   overflow:hidden;
 }
-.bp_dropdown_menu_module_itemOverflow--83ff8{
+.bp_dropdown_menu_module_itemOverflow--ca3a5{
   min-width:0;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_menuItemCaption--83ff8{
+.bp_dropdown_menu_module_menuItemCaption--ca3a5{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   color:var(--dropdown-menu-caption-text-color);
@@ -2837,7 +2837,7 @@
   width:100%;
 }
 
-.bp_dropdown_menu_module_checkmark--83ff8{
+.bp_dropdown_menu_module_checkmark--ca3a5{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -2845,11 +2845,11 @@
   position:absolute;
 }
 
-.bp_dropdown_menu_module_checkmark--83ff8.bp_dropdown_menu_module_mediumSpacing--83ff8{
+.bp_dropdown_menu_module_checkmark--ca3a5.bp_dropdown_menu_module_mediumSpacing--ca3a5{
   left:var(--dropdown-menu-medium-checkmark-left);
 }
 
-.bp_dropdown_menu_module_item--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8{
+.bp_dropdown_menu_module_item--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5{
   align-items:center;
   border:var(--dropdown-menu-item-border);
   border-radius:var(--dropdown-menu-item-radius);
@@ -2862,107 +2862,107 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--83ff8[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--83ff8[data-disabled]{
+.bp_dropdown_menu_module_item--ca3a5[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--ca3a5[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--83ff8[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--83ff8[data-highlighted]{
+.bp_dropdown_menu_module_item--ca3a5[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--ca3a5[data-highlighted]{
   background-color:var(--dropdown-menu-item-background-focus);
   border:var(--dropdown-menu-item-border-focus);
 }
-.bp_dropdown_menu_module_item--83ff8[data-state=open][data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--83ff8[data-state=open][data-highlighted]{
+.bp_dropdown_menu_module_item--ca3a5[data-state=open][data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--ca3a5[data-state=open][data-highlighted]{
   border:var(--dropdown-menu-item-border);
 }
-.bp_dropdown_menu_module_item--83ff8:active,.bp_dropdown_menu_module_subMenuTrigger--83ff8:active{
+.bp_dropdown_menu_module_item--ca3a5:active,.bp_dropdown_menu_module_subMenuTrigger--ca3a5:active{
   background-color:var(--dropdown-menu-item-background-active);
   border:var(--dropdown-menu-item-border-active);
 }
-.bp_dropdown_menu_module_item--83ff8[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--83ff8[data-state=open]{
+.bp_dropdown_menu_module_item--ca3a5[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--ca3a5[data-state=open]{
   background-color:var(--dropdown-menu-item-background-selected);
 }
-.bp_dropdown_menu_module_item--83ff8:hover,.bp_dropdown_menu_module_subMenuTrigger--83ff8:hover{
+.bp_dropdown_menu_module_item--ca3a5:hover,.bp_dropdown_menu_module_subMenuTrigger--ca3a5:hover{
   background-color:var(--dropdown-menu-item-background-hover);
   border:var(--dropdown-menu-item-border-hover);
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_radioItem--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_radioItem--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5{
   padding:.4375rem calc(var(--space-2) + var(--space-4) + var(--space-4)) .4375rem .5rem;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5{
   inset-inline-end:var(--dropdown-menu-checkmark-left);
   left:auto;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8.bp_dropdown_menu_module_mediumSpacing--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8.bp_dropdown_menu_module_mediumSpacing--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5.bp_dropdown_menu_module_mediumSpacing--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5.bp_dropdown_menu_module_mediumSpacing--ca3a5{
   inset-inline-end:var(--dropdown-menu-medium-checkmark-left);
   left:auto;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_radioItemMediumSpacing--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_radioItemMediumSpacing--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_radioItemMediumSpacing--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_radioItemMediumSpacing--ca3a5{
   padding-inline-start:var(--dropdown-menu-radio-item-medium-padding-start);
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_itemBody--83ff8:not(:has(.bp_dropdown_menu_module_menuItemMainContent--83ff8)),.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_radioItem--83ff8 .bp_dropdown_menu_module_itemBody--83ff8:not(:has(.bp_dropdown_menu_module_menuItemMainContent--83ff8)){
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_itemBody--ca3a5:not(:has(.bp_dropdown_menu_module_menuItemMainContent--ca3a5)),.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_radioItem--ca3a5 .bp_dropdown_menu_module_itemBody--ca3a5:not(:has(.bp_dropdown_menu_module_menuItemMainContent--ca3a5)){
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5{
   padding:.4375rem calc(var(--space-2) + var(--space-4) + var(--space-4)) .4375rem .5rem;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5{
   inset-inline-end:var(--dropdown-menu-checkmark-left);
   left:auto;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8.bp_dropdown_menu_module_mediumSpacing--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_checkmark--83ff8.bp_dropdown_menu_module_mediumSpacing--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5.bp_dropdown_menu_module_mediumSpacing--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_checkmark--ca3a5.bp_dropdown_menu_module_mediumSpacing--ca3a5{
   inset-inline-end:var(--dropdown-menu-medium-checkmark-left);
   left:auto;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_checkboxItemMediumSpacing--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_checkboxItemMediumSpacing--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_checkboxItemMediumSpacing--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_checkboxItemMediumSpacing--ca3a5{
   padding-inline-start:var(--dropdown-menu-checkbox-item-medium-padding-start);
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_itemBody--83ff8:not(:has(.bp_dropdown_menu_module_menuItemMainContent--83ff8)),.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_checkboxItem--83ff8 .bp_dropdown_menu_module_itemBody--83ff8:not(:has(.bp_dropdown_menu_module_menuItemMainContent--83ff8)){
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_itemBody--ca3a5:not(:has(.bp_dropdown_menu_module_menuItemMainContent--ca3a5)),.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_checkboxItem--ca3a5 .bp_dropdown_menu_module_itemBody--ca3a5:not(:has(.bp_dropdown_menu_module_menuItemMainContent--ca3a5)){
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_dropdown_menu_module_item--83ff8 .bp_dropdown_menu_module_mediumItemLayout--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8 .bp_dropdown_menu_module_mediumItemLayout--83ff8{
+.bp_dropdown_menu_module_item--ca3a5 .bp_dropdown_menu_module_mediumItemLayout--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5 .bp_dropdown_menu_module_mediumItemLayout--ca3a5{
   gap:var(--dropdown-menu-medium-item-layout-gap);
   justify-content:space-between;
   overflow:hidden;
 }
-.bp_dropdown_menu_module_item--83ff8 .bp_dropdown_menu_module_startElement--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8 .bp_dropdown_menu_module_startElement--83ff8{
+.bp_dropdown_menu_module_item--ca3a5 .bp_dropdown_menu_module_startElement--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5 .bp_dropdown_menu_module_startElement--ca3a5{
   align-items:center;
   display:flex;
 }
-.bp_dropdown_menu_module_item--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8{
+.bp_dropdown_menu_module_item--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5{
   display:flex;
   flex-direction:column;
   flex-grow:1;
   min-width:0;
 }
-.bp_dropdown_menu_module_item--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8.bp_dropdown_menu_module_menuItemMainContent_directChild--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8.bp_dropdown_menu_module_menuItemMainContent_directChild--83ff8{
+.bp_dropdown_menu_module_item--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5.bp_dropdown_menu_module_menuItemMainContent_directChild--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5.bp_dropdown_menu_module_menuItemMainContent_directChild--ca3a5{
   display:block;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_dropdown_menu_module_item--83ff8 .bp_dropdown_menu_module_endElement--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8 .bp_dropdown_menu_module_endElement--83ff8{
+.bp_dropdown_menu_module_item--ca3a5 .bp_dropdown_menu_module_endElement--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5 .bp_dropdown_menu_module_endElement--ca3a5{
   align-items:center;
   color:var(--dropdown-menu-end-element-color);
   display:flex;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_destructive--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_destructive--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_destructive--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_destructive--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5{
   color:var(--dropdown-menu-item-destructive-color);
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_destructive--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8 span,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_destructive--83ff8 .bp_dropdown_menu_module_menuItemMainContent--83ff8 span{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_destructive--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5 span,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_destructive--ca3a5 .bp_dropdown_menu_module_menuItemMainContent--ca3a5 span{
   color:inherit;
 }
-.bp_dropdown_menu_module_item--83ff8.bp_dropdown_menu_module_destructive--83ff8 .bp_dropdown_menu_module_endElement--83ff8,.bp_dropdown_menu_module_subMenuTrigger--83ff8.bp_dropdown_menu_module_destructive--83ff8 .bp_dropdown_menu_module_endElement--83ff8{
+.bp_dropdown_menu_module_item--ca3a5.bp_dropdown_menu_module_destructive--ca3a5 .bp_dropdown_menu_module_endElement--ca3a5,.bp_dropdown_menu_module_subMenuTrigger--ca3a5.bp_dropdown_menu_module_destructive--ca3a5 .bp_dropdown_menu_module_endElement--ca3a5{
   color:var(--dropdown-menu-item-destructive-color);
 }
-.bp_dropdown_menu_module_item--83ff8:has(.bp_dropdown_menu_module_ellipsis--83ff8),.bp_dropdown_menu_module_item--83ff8:has(.bp_dropdown_menu_module_itemBody--83ff8),.bp_dropdown_menu_module_item--83ff8:has(.bp_dropdown_menu_module_menuItemMainContent_directChild--83ff8){
+.bp_dropdown_menu_module_item--ca3a5:has(.bp_dropdown_menu_module_ellipsis--ca3a5),.bp_dropdown_menu_module_item--ca3a5:has(.bp_dropdown_menu_module_itemBody--ca3a5),.bp_dropdown_menu_module_item--ca3a5:has(.bp_dropdown_menu_module_menuItemMainContent_directChild--ca3a5){
   border-radius:var(--dropdown-menu-item-radius);
 }
-.bp_dropdown_menu_module_item--83ff8:has(.bp_dropdown_menu_module_mediumItemLayout--83ff8){
+.bp_dropdown_menu_module_item--ca3a5:has(.bp_dropdown_menu_module_mediumItemLayout--ca3a5){
   border-radius:var(--dropdown-menu-medium-item-radius);
 }
 
-.bp_dropdown_menu_module_menuHeader--83ff8{
+.bp_dropdown_menu_module_menuHeader--ca3a5{
   align-items:center;
   box-shadow:var(--dropdown-menu-header-shadow);
   display:grid;
@@ -2972,17 +2972,228 @@
   padding:var(--dropdown-menu-header-padding);
 }
 
-.bp_dropdown_menu_module_headerTextContent--83ff8{
+.bp_dropdown_menu_module_headerTextContent--ca3a5{
   display:grid;
 }
 
-.bp_dropdown_menu_module_submenuCloseButton--83ff8{
+.bp_dropdown_menu_module_submenuCloseButton--ca3a5{
   grid-area:submenu-close;
 }
 
-.bp_dropdown_menu_module_menuCloseButton--83ff8{
+.bp_dropdown_menu_module_menuCloseButton--ca3a5{
   grid-area:close;
 }
+
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=open]{
+  animation-duration:var(--bp-duration-medium);
+  animation-timing-function:var(--bp-curve-medium-on);
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=open][data-side=top]{
+  animation-name:bp_dropdown_menu_module_bpDropdownTopSlideEnter--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=open][data-side=right]{
+  animation-name:bp_dropdown_menu_module_bpDropdownRightSlideEnter--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=open][data-side=bottom]{
+  animation-name:bp_dropdown_menu_module_bpDropdownBottomSlideEnter--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=open][data-side=left]{
+  animation-name:bp_dropdown_menu_module_bpDropdownLeftSlideEnter--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=closed]{
+  animation-duration:var(--bp-duration-short);
+  animation-timing-function:var(--bp-curve-medium-off);
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=closed][data-side=top]{
+  animation-name:bp_dropdown_menu_module_bpDropdownTopSlideExit--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=closed][data-side=right]{
+  animation-name:bp_dropdown_menu_module_bpDropdownRightSlideExit--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=closed][data-side=bottom]{
+  animation-name:bp_dropdown_menu_module_bpDropdownBottomSlideExit--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true]:not([data-large])[data-state=closed][data-side=left]{
+  animation-name:bp_dropdown_menu_module_bpDropdownLeftSlideExit--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=open]{
+  animation-duration:var(--bp-duration-long);
+  animation-timing-function:var(--bp-curve-large-on);
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=open][data-side=top]{
+  animation-name:bp_dropdown_menu_module_bpDropdownTopSlideEnterLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=open][data-side=right]{
+  animation-name:bp_dropdown_menu_module_bpDropdownRightSlideEnterLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=open][data-side=bottom]{
+  animation-name:bp_dropdown_menu_module_bpDropdownBottomSlideEnterLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=open][data-side=left]{
+  animation-name:bp_dropdown_menu_module_bpDropdownLeftSlideEnterLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=closed]{
+  animation-duration:var(--bp-duration-medium);
+  animation-timing-function:var(--bp-curve-large-off);
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=closed][data-side=top]{
+  animation-name:bp_dropdown_menu_module_bpDropdownTopSlideExitLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=closed][data-side=right]{
+  animation-name:bp_dropdown_menu_module_bpDropdownRightSlideExitLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=closed][data-side=bottom]{
+  animation-name:bp_dropdown_menu_module_bpDropdownBottomSlideExitLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+.bp_dropdown_menu_module_content--ca3a5[data-bp-animated=true][data-large=true][data-state=closed][data-side=left]{
+  animation-name:bp_dropdown_menu_module_bpDropdownLeftSlideExitLarge--ca3a5, bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5;
+}
+
+@keyframes bp_dropdown_menu_module_bpDropdownFadeIn--ca3a5{
+  from{
+    opacity:var(--bp-opacity-hidden);
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownFadeOut--ca3a5{
+  from{
+    opacity:var(--bp-opacity-visible);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownTopSlideEnter--ca3a5{
+  from{
+    transform:translateY(var(--bp-space-020));
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownTopSlideExit--ca3a5{
+  from{
+    transform:translateY(0);
+  }
+  to{
+    transform:translateY(var(--bp-space-020));
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownBottomSlideEnter--ca3a5{
+  from{
+    transform:translateY(calc(var(--bp-space-020)*-1));
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownBottomSlideExit--ca3a5{
+  from{
+    transform:translateY(0);
+  }
+  to{
+    transform:translateY(calc(var(--bp-space-020)*-1));
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownRightSlideEnter--ca3a5{
+  from{
+    transform:translateX(calc(var(--bp-space-020)*-1));
+  }
+  to{
+    transform:translateX(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownRightSlideExit--ca3a5{
+  from{
+    transform:translateX(0);
+  }
+  to{
+    transform:translateX(calc(var(--bp-space-020)*-1));
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownLeftSlideEnter--ca3a5{
+  from{
+    transform:translateX(var(--bp-space-020));
+  }
+  to{
+    transform:translateX(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownLeftSlideExit--ca3a5{
+  from{
+    transform:translateX(0);
+  }
+  to{
+    transform:translateX(var(--bp-space-020));
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownTopSlideEnterLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-small) var(--bp-space-040);
+  }
+  to{
+    transform:var(--bp-scale-default) translateY(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownTopSlideExitLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-default) translateY(0);
+  }
+  to{
+    transform:var(--bp-scale-small) translateY(var(--bp-space-040));
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownBottomSlideEnterLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-small) translateY(calc(var(--bp-space-040)*-1));
+  }
+  to{
+    transform:var(--bp-scale-default) translateY(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownBottomSlideExitLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-default) translateY(0);
+  }
+  to{
+    transform:var(--bp-scale-small) translateY(calc(var(--bp-space-040)*-1));
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownRightSlideEnterLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-small) translateX(calc(var(--bp-space-040)*-1));
+  }
+  to{
+    transform:var(--bp-scale-default) translateX(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownRightSlideExitLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-default) translateX(0);
+  }
+  to{
+    transform:var(--bp-scale-small) translateX(calc(var(--bp-space-040)*-1));
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownLeftSlideEnterLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-small) translateX(var(--bp-space-040));
+  }
+  to{
+    transform:var(--bp-scale-default) translateX(0);
+  }
+}
+@keyframes bp_dropdown_menu_module_bpDropdownLeftSlideExitLarge--ca3a5{
+  from{
+    transform:var(--bp-scale-default) translateX(0);
+  }
+  to{
+    transform:var(--bp-scale-small) translateX(var(--bp-space-040));
+  }
+}
 .bp_divider_module_divider--2f437{
   background-color:var(--border-divider-border);
   border:none;

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-content.js

@@ -3,7 +3,11 @@ import { Space4, Space2 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, Children, isValidElement } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
+import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
 import { DropdownMenuHeader } from './dropdown-menu-header.js';
 import styles from './dropdown-menu.module.js';
@@ -44,6 +48,12 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('DropdownMenu');
+  const sizeObserverRef = useContentSizeObserver(360, 360);
+  const ref = useForkRef(forwardedRef, sizeObserverRef);
   if (isMenuFullScreenEnabled) {
     const {
       Header,
@@ -53,7 +63,7 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       container: container,
       children: jsxs(DropdownMenuPrimitive.Content, {
         ...rest,
-        ref: forwardedRef,
+        ref: ref,
         className: clsx(styles.content, className),
         "data-menu-fullscreen": true,
         "data-modern": enableModernizedComponents ? 'true' : 'false',
@@ -70,10 +80,11 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       container: container,
       children: jsx(DropdownMenuPrimitive.Content, {
         ...rest,
-        ref: forwardedRef,
+        ref: ref,
         className: clsx(styles.content, className),
         collisionPadding: collisionPadding,
         "data-modern": enableModernizedComponents ? 'true' : 'false',
+        "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
         sideOffset: SIDE_OFFSET,
         children: children
       })

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-content.js

@@ -3,7 +3,11 @@ import { Space4, Space3 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
+import { useForkRef } from '../../utils/useForkRef.js';
 import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
 import { sortMenuChildren } from './dropdown-menu-content.js';
 import styles from './dropdown-menu.module.js';
@@ -28,7 +32,13 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('DropdownMenu');
   const preventDefault = useCallback(event => event.preventDefault(), []);
+  const sizeObserverRef = useContentSizeObserver(360, 360);
+  const ref = useForkRef(forwardedRef, sizeObserverRef);
   if (isMenuFullScreenEnabled) {
     const {
       Header,
@@ -38,7 +48,7 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
       container: container,
       children: jsxs(DropdownMenuPrimitive.SubContent, {
         ...rest,
-        ref: forwardedRef,
+        ref: ref,
         className: clsx(styles.content, className),
         "data-menu-fullscreen": true,
         "data-modern": enableModernizedComponents ? 'true' : 'false',
@@ -58,10 +68,11 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
       container: container,
       children: jsx(DropdownMenuPrimitive.SubContent, {
         ...rest,
-        ref: forwardedRef,
+        ref: ref,
         className: clsx(styles.content, className),
         collisionPadding: collisionPadding,
         "data-modern": enableModernizedComponents ? 'true' : 'false',
+        "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
         sideOffset: SIDE_OFFSET,
         children: children
       })

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"content":"bp_dropdown_menu_module_content--83ff8","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--83ff8","subheader":"bp_dropdown_menu_module_subheader--83ff8","uppercased":"bp_dropdown_menu_module_uppercased--83ff8","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--83ff8","ellipsis":"bp_dropdown_menu_module_ellipsis--83ff8","itemBody":"bp_dropdown_menu_module_itemBody--83ff8","itemOverflow":"bp_dropdown_menu_module_itemOverflow--83ff8","menuItemCaption":"bp_dropdown_menu_module_menuItemCaption--83ff8","checkmark":"bp_dropdown_menu_module_checkmark--83ff8","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--83ff8","item":"bp_dropdown_menu_module_item--83ff8","radioItem":"bp_dropdown_menu_module_radioItem--83ff8","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--83ff8","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--83ff8","checkboxItem":"bp_dropdown_menu_module_checkboxItem--83ff8","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--83ff8","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--83ff8","startElement":"bp_dropdown_menu_module_startElement--83ff8","menuItemMainContent_directChild":"bp_dropdown_menu_module_menuItemMainContent_directChild--83ff8","endElement":"bp_dropdown_menu_module_endElement--83ff8","destructive":"bp_dropdown_menu_module_destructive--83ff8","menuHeader":"bp_dropdown_menu_module_menuHeader--83ff8","headerTextContent":"bp_dropdown_menu_module_headerTextContent--83ff8","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--83ff8","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--83ff8"};
+var styles = {"content":"bp_dropdown_menu_module_content--ca3a5","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--ca3a5","subheader":"bp_dropdown_menu_module_subheader--ca3a5","uppercased":"bp_dropdown_menu_module_uppercased--ca3a5","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--ca3a5","ellipsis":"bp_dropdown_menu_module_ellipsis--ca3a5","itemBody":"bp_dropdown_menu_module_itemBody--ca3a5","itemOverflow":"bp_dropdown_menu_module_itemOverflow--ca3a5","menuItemCaption":"bp_dropdown_menu_module_menuItemCaption--ca3a5","checkmark":"bp_dropdown_menu_module_checkmark--ca3a5","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--ca3a5","item":"bp_dropdown_menu_module_item--ca3a5","radioItem":"bp_dropdown_menu_module_radioItem--ca3a5","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--ca3a5","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--ca3a5","checkboxItem":"bp_dropdown_menu_module_checkboxItem--ca3a5","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--ca3a5","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--ca3a5","startElement":"bp_dropdown_menu_module_startElement--ca3a5","menuItemMainContent_directChild":"bp_dropdown_menu_module_menuItemMainContent_directChild--ca3a5","endElement":"bp_dropdown_menu_module_endElement--ca3a5","destructive":"bp_dropdown_menu_module_destructive--ca3a5","menuHeader":"bp_dropdown_menu_module_menuHeader--ca3a5","headerTextContent":"bp_dropdown_menu_module_headerTextContent--ca3a5","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--ca3a5","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--ca3a5"};
 
 export { styles as default };

package/dist/lib-esm/utils/useContentSizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Observes the content element's inline size via ResizeObserver and toggles
+ * a `data-large` attribute when the width or height is greater than or equal to the threshold. This sidesteps
+ * the CSS `@container` size-query limitation where `container-type: inline-size`
+ * breaks intrinsic sizing on the Radix popper wrapper.
+ */
+export declare function useContentSizeObserver<T extends HTMLElement>(widthThresholdPx: number, heightThresholdPx: number): (node: T | null) => void;

package/dist/lib-esm/utils/useContentSizeObserver.js

@@ -0,0 +1,38 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * Observes the content element's inline size via ResizeObserver and toggles
+ * a `data-large` attribute when the width or height is greater than or equal to the threshold. This sidesteps
+ * the CSS `@container` size-query limitation where `container-type: inline-size`
+ * breaks intrinsic sizing on the Radix popper wrapper.
+ */
+function useContentSizeObserver(widthThresholdPx, heightThresholdPx) {
+  const observerRef = useRef(null);
+  const refCallback = useCallback(node => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (node && typeof ResizeObserver !== 'undefined') {
+      observerRef.current = new ResizeObserver(entries => {
+        const entry = entries[0];
+        if (!entry) {
+          return;
+        }
+        const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+        const isWide = width >= widthThresholdPx;
+        const isTall = height >= heightThresholdPx;
+        if (isWide || isTall) {
+          node.setAttribute('data-large', 'true');
+        } else {
+          node.removeAttribute('data-large');
+        }
+      });
+      observerRef.current.observe(node);
+    }
+  }, [widthThresholdPx, heightThresholdPx]);
+  return refCallback;
+}
+
+export { useContentSizeObserver };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.15.2",
+    "version": "14.16.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.114.8",
+        "@box/blueprint-web-assets": "^4.115.0",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.17.50",
+        "@box/storybook-utils": "^0.18.0",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",