@box/blueprint-web 17.22.1 → 17.22.3

package/dist/lib-esm/components.css

@@ -8553,7 +8553,7 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   display:inline;
 }
 
-.bp_modal_module_overlay--0e889{
+.bp_modal_module_overlay--aa987{
   --modal-overlay-background:var(--bp-overlay-modal-overlay);
   --modal-content-background:var(--bp-surface-modal-surface);
   --modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
@@ -8579,6 +8579,8 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   --modal-back-button-margin-inline-start:var(--bp-space-040);
   --modal-back-button-size-non-fullscreen:var(--bp-size-100);
   --modal-title-gap:var(--bp-space-020);
+  --modal-title-addon-gap:var(--bp-space-010);
+  --modal-title-inline-gap:var(--bp-space-030);
   --modal-title-padding:var(--bp-space-050) var(--bp-space-120) var(--bp-space-050) var(--bp-space-040);
   --modal-title-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-160) var(--bp-space-060) var(--bp-space-060);
   --modal-body-padding-fullscreen:var(--bp-space-020) var(--bp-space-040) var(--bp-space-040) var(--bp-space-040);
@@ -8599,15 +8601,15 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   z-index:var(--z-index-modal);
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--0e889{
+  .bp_modal_module_overlay--aa987{
     place-items:center;
   }
 }
 
-.bp_modal_module_headerDividerLine--0e889{
+.bp_modal_module_headerDividerLine--aa987{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--0e889::after{
+.bp_modal_module_headerDividerLine--aa987::after{
   border-bottom:var(--modal-divider-line-border);
   bottom:0;
   content:"";
@@ -8616,16 +8618,16 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   right:var(--modal-divider-line-offset-right);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--0e889::after{
+  .bp_modal_module_headerDividerLine--aa987::after{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--0e889{
+.bp_modal_module_footerDividerLine--aa987{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--0e889::before{
+.bp_modal_module_footerDividerLine--aa987::before{
   border-bottom:var(--modal-divider-line-border);
   content:"";
   left:var(--modal-divider-line-offset-left);
@@ -8634,13 +8636,13 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--0e889::before{
+  .bp_modal_module_footerDividerLine--aa987::before{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_content--0e889{
+.bp_modal_module_content--aa987{
   display:flex;
   flex-direction:column;
   height:100vh;
@@ -8648,15 +8650,15 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--0e889{
+  .bp_modal_module_content--aa987{
     overflow:hidden;
   }
 }
-.bp_modal_module_content--0e889{
+.bp_modal_module_content--aa987{
   background-color:var(--modal-content-background);
 }
 @media (width > 459px){
-  .bp_modal_module_content--0e889{
+  .bp_modal_module_content--aa987{
     border-radius:var(--modal-border-radius);
     height:auto;
     margin:var(--modal-margin);
@@ -8664,97 +8666,97 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
     min-width:var(--modal-min-width-non-fullscreen);
     transition:max-width var(--modal-loading-animation), max-height var(--modal-loading-animation);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_smallSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_smallSizeModal--aa987{
     max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_mediumSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_mediumSizeModal--aa987{
     max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_largeSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_largeSizeModal--aa987{
     max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_xlargeSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_xlargeSizeModal--aa987{
     max-width:var(--modal-max-width-xlarge);
   }
 }
-.bp_modal_module_content--0e889:has(.bp_modal_module_loadingContainerActive--0e889) .bp_modal_module_footerDividerLine--0e889::before,.bp_modal_module_content--0e889:has(.bp_modal_module_loadingContainerActive--0e889) .bp_modal_module_headerDividerLine--0e889::after{
+.bp_modal_module_content--aa987:has(.bp_modal_module_loadingContainerActive--aa987) .bp_modal_module_footerDividerLine--aa987::before,.bp_modal_module_content--aa987:has(.bp_modal_module_loadingContainerActive--aa987) .bp_modal_module_headerDividerLine--aa987::after{
   display:none;
 }
 @media (width > 459px){
-  .bp_modal_module_content--0e889:has(.bp_modal_module_loadingContainerActive--0e889){
+  .bp_modal_module_content--aa987:has(.bp_modal_module_loadingContainerActive--aa987){
     max-height:var(--modal-max-height-loading);
     max-width:var(--modal-max-width-loading);
   }
 }
 
-.bp_modal_module_overlay--0e889 .bp_modal_module_content--0e889[data-bp-animated=false]{
-  animation:bp_modal_module_popup_bounce_in--0e889 var(--animation-duration-3);
+.bp_modal_module_overlay--aa987 .bp_modal_module_content--aa987[data-bp-animated=false]{
+  animation:bp_modal_module_popup_bounce_in--aa987 var(--animation-duration-3);
 }
 
-.bp_modal_module_overlay--0e889 .bp_modal_module_content--0e889[data-bp-animated=true][data-state=open]{
+.bp_modal_module_overlay--aa987 .bp_modal_module_content--aa987[data-bp-animated=true][data-state=open]{
   animation-duration:var(--bp-duration-long);
   animation-fill-mode:backwards;
-  animation-name:bp_modal_module_bpModalEnter--0e889;
+  animation-name:bp_modal_module_bpModalEnter--aa987;
   animation-timing-function:var(--bp-curve-large-on);
 }
 
-.bp_modal_module_overlay--0e889 .bp_modal_module_content--0e889[data-bp-animated=true][data-state=closed],.bp_modal_module_overlay--0e889[data-bp-animated=true][data-state=closed]{
+.bp_modal_module_overlay--aa987 .bp_modal_module_content--aa987[data-bp-animated=true][data-state=closed],.bp_modal_module_overlay--aa987[data-bp-animated=true][data-state=closed]{
   animation-duration:var(--bp-duration-medium);
   animation-fill-mode:forwards;
-  animation-name:bp_modal_module_bpModalExit--0e889;
+  animation-name:bp_modal_module_bpModalExit--aa987;
   animation-timing-function:var(--bp-curve-large-off);
 }
 
-.bp_modal_module_scrollableContainer--0e889{
+.bp_modal_module_scrollableContainer--aa987{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--0e889{
+  .bp_modal_module_scrollableContainer--aa987{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--0e889 .bp_modal_module_close--0e889{
+.bp_modal_module_content--aa987 .bp_modal_module_close--aa987{
   position:fixed;
 }
 @media (width > 374px){
-  .bp_modal_module_content--0e889 .bp_modal_module_close--0e889{
+  .bp_modal_module_content--aa987 .bp_modal_module_close--aa987{
     position:absolute;
   }
 }
-.bp_modal_module_content--0e889 .bp_modal_module_close--0e889{
+.bp_modal_module_content--aa987 .bp_modal_module_close--aa987{
   color:var(--modal-close-button-color);
   right:var(--modal-close-button-offset-right);
   top:var(--modal-close-button-offset-top);
 }
 
-.bp_modal_module_close--0e889.bp_modal_module_onColor--0e889{
+.bp_modal_module_close--aa987.bp_modal_module_onColor--aa987{
   background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--0e889.bp_modal_module_onColor--0e889:hover{
+.bp_modal_module_close--aa987.bp_modal_module_onColor--aa987:hover{
   background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--0e889.bp_modal_module_onColor--0e889:active{
+.bp_modal_module_close--aa987.bp_modal_module_onColor--aa987:active{
   background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--0e889 .bp_modal_module_backButton--0e889{
+.bp_modal_module_content--aa987 .bp_modal_module_backButton--aa987{
   color:var(--modal-back-button-color);
   margin-block-start:var(--modal-back-button-margin-top-start);
   margin-inline-start:var(--modal-back-button-margin-inline-start);
 }
 @media (width > 459px){
-  .bp_modal_module_content--0e889 .bp_modal_module_backButton--0e889{
+  .bp_modal_module_content--aa987 .bp_modal_module_backButton--aa987{
     height:var(--modal-back-button-size-non-fullscreen);
     width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--0e889{
+.bp_modal_module_modalHeader--aa987{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--0e889{
+.bp_modal_module_modalTitle--aa987{
   display:flex;
   flex-direction:column;
   gap:var(--modal-title-gap);
@@ -8762,83 +8764,131 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   padding:var(--modal-title-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--0e889{
+  .bp_modal_module_modalTitle--aa987{
     padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--0e889{
+.bp_modal_module_modalHeaderWithAddon--aa987{
+  container-name:modal-header;
+  container-type:inline-size;
+}
+
+.bp_modal_module_modalTitleWithAddon--aa987{
+  align-items:center;
+  flex-flow:row wrap;
+  gap:var(--modal-title-addon-gap) var(--modal-title-inline-gap);
+  min-width:0;
+  width:100%;
+}
+
+.bp_modal_module_modalTitleLabel--aa987{
+  display:flex;
+  flex-direction:column;
+  gap:var(--modal-title-gap);
+  max-width:100%;
+  min-width:0;
+}
+
+.bp_modal_module_modalTitleAddon--aa987{
+  flex-shrink:0;
+  max-width:100%;
+}
+
+.bp_modal_module_modalTitleText--aa987{
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:1;
+  display:-webkit-box;
+  overflow:hidden;
+}
+
+.bp_modal_module_modalTitleWithSubtitle--aa987 > *{
+  flex-basis:100%;
+}
+
+@container modal-header (max-width: 759px){
+  .bp_modal_module_modalTitleWithAddon--aa987 > *{
+    flex-basis:100%;
+  }
+  .bp_modal_module_modalTitleText--aa987{
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2;
+    display:-webkit-box;
+    overflow:hidden;
+  }
+}
+.bp_modal_module_body--aa987{
   color:var(--modal-body-text-color);
   padding:var(--modal-body-padding-fullscreen);
 }
 @media (width > 459px){
-  .bp_modal_module_body--0e889{
+  .bp_modal_module_body--aa987{
     padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footer--0e889{
+.bp_modal_module_footer--aa987{
   display:flex;
   justify-content:flex-end;
   padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--0e889{
+  .bp_modal_module_footer--aa987{
     padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
-.bp_modal_module_footer--0e889 .bp_modal_module_footerButton--0e889{
+.bp_modal_module_footer--aa987 .bp_modal_module_footerButton--aa987{
   cursor:pointer;
 }
 
-.bp_modal_module_footerButton--0e889 + .bp_modal_module_footerButton--0e889{
+.bp_modal_module_footerButton--aa987 + .bp_modal_module_footerButton--aa987{
   margin-inline-start:var(--modal-footer-button-margin-inline-start);
 }
 
-.bp_modal_module_loadingContainer--0e889{
+.bp_modal_module_loadingContainer--aa987{
   display:flex;
   flex-direction:column;
   flex-grow:1;
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContainer--0e889{
+  .bp_modal_module_loadingContainer--aa987{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContainerActive--0e889{
+.bp_modal_module_loadingContainerActive--aa987{
   overflow:hidden;
 }
 
-.bp_modal_module_loading--0e889{
+.bp_modal_module_loading--aa987{
   align-items:center;
   display:flex;
 }
 
-.bp_modal_module_loadingOverlay--0e889{
+.bp_modal_module_loadingOverlay--aa987{
   background-color:var(--modal-content-background);
   inset:0;
   position:absolute;
   z-index:1;
 }
 
-.bp_modal_module_loadingContent--0e889{
+.bp_modal_module_loadingContent--aa987{
   display:flex;
   flex-direction:column;
   visibility:hidden;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContent--0e889{
+  .bp_modal_module_loadingContent--aa987{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContentVisible--0e889{
+.bp_modal_module_loadingContentVisible--aa987{
   visibility:visible;
 }
 
-@keyframes bp_modal_module_popup_bounce_in--0e889{
+@keyframes bp_modal_module_popup_bounce_in--aa987{
   0%{
     transform:scale3d(.1, .1, 1);
   }
@@ -8846,7 +8896,7 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
     transform:scaleX(1);
   }
 }
-@keyframes bp_modal_module_bpModalEnter--0e889{
+@keyframes bp_modal_module_bpModalEnter--aa987{
   from{
     opacity:var(--bp-opacity-hidden);
     transform:translateY(var(--bp-space-040)) scale(var(--bp-scale-small));
@@ -8856,7 +8906,7 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
     transform:translateY(0) scale(var(--bp-scale-default));
   }
 }
-@keyframes bp_modal_module_bpModalExit--0e889{
+@keyframes bp_modal_module_bpModalExit--aa987{
   from{
     opacity:var(--bp-opacity-visible);
   }

package/dist/lib-esm/index.css

@@ -8553,7 +8553,7 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   display:inline;
 }
 
-.bp_modal_module_overlay--0e889{
+.bp_modal_module_overlay--aa987{
   --modal-overlay-background:var(--bp-overlay-modal-overlay);
   --modal-content-background:var(--bp-surface-modal-surface);
   --modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
@@ -8579,6 +8579,8 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   --modal-back-button-margin-inline-start:var(--bp-space-040);
   --modal-back-button-size-non-fullscreen:var(--bp-size-100);
   --modal-title-gap:var(--bp-space-020);
+  --modal-title-addon-gap:var(--bp-space-010);
+  --modal-title-inline-gap:var(--bp-space-030);
   --modal-title-padding:var(--bp-space-050) var(--bp-space-120) var(--bp-space-050) var(--bp-space-040);
   --modal-title-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-160) var(--bp-space-060) var(--bp-space-060);
   --modal-body-padding-fullscreen:var(--bp-space-020) var(--bp-space-040) var(--bp-space-040) var(--bp-space-040);
@@ -8599,15 +8601,15 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   z-index:var(--z-index-modal);
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--0e889{
+  .bp_modal_module_overlay--aa987{
     place-items:center;
   }
 }
 
-.bp_modal_module_headerDividerLine--0e889{
+.bp_modal_module_headerDividerLine--aa987{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--0e889::after{
+.bp_modal_module_headerDividerLine--aa987::after{
   border-bottom:var(--modal-divider-line-border);
   bottom:0;
   content:"";
@@ -8616,16 +8618,16 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   right:var(--modal-divider-line-offset-right);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--0e889::after{
+  .bp_modal_module_headerDividerLine--aa987::after{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--0e889{
+.bp_modal_module_footerDividerLine--aa987{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--0e889::before{
+.bp_modal_module_footerDividerLine--aa987::before{
   border-bottom:var(--modal-divider-line-border);
   content:"";
   left:var(--modal-divider-line-offset-left);
@@ -8634,13 +8636,13 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--0e889::before{
+  .bp_modal_module_footerDividerLine--aa987::before{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_content--0e889{
+.bp_modal_module_content--aa987{
   display:flex;
   flex-direction:column;
   height:100vh;
@@ -8648,15 +8650,15 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--0e889{
+  .bp_modal_module_content--aa987{
     overflow:hidden;
   }
 }
-.bp_modal_module_content--0e889{
+.bp_modal_module_content--aa987{
   background-color:var(--modal-content-background);
 }
 @media (width > 459px){
-  .bp_modal_module_content--0e889{
+  .bp_modal_module_content--aa987{
     border-radius:var(--modal-border-radius);
     height:auto;
     margin:var(--modal-margin);
@@ -8664,97 +8666,97 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
     min-width:var(--modal-min-width-non-fullscreen);
     transition:max-width var(--modal-loading-animation), max-height var(--modal-loading-animation);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_smallSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_smallSizeModal--aa987{
     max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_mediumSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_mediumSizeModal--aa987{
     max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_largeSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_largeSizeModal--aa987{
     max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--0e889.bp_modal_module_xlargeSizeModal--0e889{
+  .bp_modal_module_content--aa987.bp_modal_module_xlargeSizeModal--aa987{
     max-width:var(--modal-max-width-xlarge);
   }
 }
-.bp_modal_module_content--0e889:has(.bp_modal_module_loadingContainerActive--0e889) .bp_modal_module_footerDividerLine--0e889::before,.bp_modal_module_content--0e889:has(.bp_modal_module_loadingContainerActive--0e889) .bp_modal_module_headerDividerLine--0e889::after{
+.bp_modal_module_content--aa987:has(.bp_modal_module_loadingContainerActive--aa987) .bp_modal_module_footerDividerLine--aa987::before,.bp_modal_module_content--aa987:has(.bp_modal_module_loadingContainerActive--aa987) .bp_modal_module_headerDividerLine--aa987::after{
   display:none;
 }
 @media (width > 459px){
-  .bp_modal_module_content--0e889:has(.bp_modal_module_loadingContainerActive--0e889){
+  .bp_modal_module_content--aa987:has(.bp_modal_module_loadingContainerActive--aa987){
     max-height:var(--modal-max-height-loading);
     max-width:var(--modal-max-width-loading);
   }
 }
 
-.bp_modal_module_overlay--0e889 .bp_modal_module_content--0e889[data-bp-animated=false]{
-  animation:bp_modal_module_popup_bounce_in--0e889 var(--animation-duration-3);
+.bp_modal_module_overlay--aa987 .bp_modal_module_content--aa987[data-bp-animated=false]{
+  animation:bp_modal_module_popup_bounce_in--aa987 var(--animation-duration-3);
 }
 
-.bp_modal_module_overlay--0e889 .bp_modal_module_content--0e889[data-bp-animated=true][data-state=open]{
+.bp_modal_module_overlay--aa987 .bp_modal_module_content--aa987[data-bp-animated=true][data-state=open]{
   animation-duration:var(--bp-duration-long);
   animation-fill-mode:backwards;
-  animation-name:bp_modal_module_bpModalEnter--0e889;
+  animation-name:bp_modal_module_bpModalEnter--aa987;
   animation-timing-function:var(--bp-curve-large-on);
 }
 
-.bp_modal_module_overlay--0e889 .bp_modal_module_content--0e889[data-bp-animated=true][data-state=closed],.bp_modal_module_overlay--0e889[data-bp-animated=true][data-state=closed]{
+.bp_modal_module_overlay--aa987 .bp_modal_module_content--aa987[data-bp-animated=true][data-state=closed],.bp_modal_module_overlay--aa987[data-bp-animated=true][data-state=closed]{
   animation-duration:var(--bp-duration-medium);
   animation-fill-mode:forwards;
-  animation-name:bp_modal_module_bpModalExit--0e889;
+  animation-name:bp_modal_module_bpModalExit--aa987;
   animation-timing-function:var(--bp-curve-large-off);
 }
 
-.bp_modal_module_scrollableContainer--0e889{
+.bp_modal_module_scrollableContainer--aa987{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--0e889{
+  .bp_modal_module_scrollableContainer--aa987{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--0e889 .bp_modal_module_close--0e889{
+.bp_modal_module_content--aa987 .bp_modal_module_close--aa987{
   position:fixed;
 }
 @media (width > 374px){
-  .bp_modal_module_content--0e889 .bp_modal_module_close--0e889{
+  .bp_modal_module_content--aa987 .bp_modal_module_close--aa987{
     position:absolute;
   }
 }
-.bp_modal_module_content--0e889 .bp_modal_module_close--0e889{
+.bp_modal_module_content--aa987 .bp_modal_module_close--aa987{
   color:var(--modal-close-button-color);
   right:var(--modal-close-button-offset-right);
   top:var(--modal-close-button-offset-top);
 }
 
-.bp_modal_module_close--0e889.bp_modal_module_onColor--0e889{
+.bp_modal_module_close--aa987.bp_modal_module_onColor--aa987{
   background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--0e889.bp_modal_module_onColor--0e889:hover{
+.bp_modal_module_close--aa987.bp_modal_module_onColor--aa987:hover{
   background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--0e889.bp_modal_module_onColor--0e889:active{
+.bp_modal_module_close--aa987.bp_modal_module_onColor--aa987:active{
   background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--0e889 .bp_modal_module_backButton--0e889{
+.bp_modal_module_content--aa987 .bp_modal_module_backButton--aa987{
   color:var(--modal-back-button-color);
   margin-block-start:var(--modal-back-button-margin-top-start);
   margin-inline-start:var(--modal-back-button-margin-inline-start);
 }
 @media (width > 459px){
-  .bp_modal_module_content--0e889 .bp_modal_module_backButton--0e889{
+  .bp_modal_module_content--aa987 .bp_modal_module_backButton--aa987{
     height:var(--modal-back-button-size-non-fullscreen);
     width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--0e889{
+.bp_modal_module_modalHeader--aa987{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--0e889{
+.bp_modal_module_modalTitle--aa987{
   display:flex;
   flex-direction:column;
   gap:var(--modal-title-gap);
@@ -8762,83 +8764,131 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
   padding:var(--modal-title-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--0e889{
+  .bp_modal_module_modalTitle--aa987{
     padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--0e889{
+.bp_modal_module_modalHeaderWithAddon--aa987{
+  container-name:modal-header;
+  container-type:inline-size;
+}
+
+.bp_modal_module_modalTitleWithAddon--aa987{
+  align-items:center;
+  flex-flow:row wrap;
+  gap:var(--modal-title-addon-gap) var(--modal-title-inline-gap);
+  min-width:0;
+  width:100%;
+}
+
+.bp_modal_module_modalTitleLabel--aa987{
+  display:flex;
+  flex-direction:column;
+  gap:var(--modal-title-gap);
+  max-width:100%;
+  min-width:0;
+}
+
+.bp_modal_module_modalTitleAddon--aa987{
+  flex-shrink:0;
+  max-width:100%;
+}
+
+.bp_modal_module_modalTitleText--aa987{
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:1;
+  display:-webkit-box;
+  overflow:hidden;
+}
+
+.bp_modal_module_modalTitleWithSubtitle--aa987 > *{
+  flex-basis:100%;
+}
+
+@container modal-header (max-width: 759px){
+  .bp_modal_module_modalTitleWithAddon--aa987 > *{
+    flex-basis:100%;
+  }
+  .bp_modal_module_modalTitleText--aa987{
+    -webkit-box-orient:vertical;
+    -webkit-line-clamp:2;
+    display:-webkit-box;
+    overflow:hidden;
+  }
+}
+.bp_modal_module_body--aa987{
   color:var(--modal-body-text-color);
   padding:var(--modal-body-padding-fullscreen);
 }
 @media (width > 459px){
-  .bp_modal_module_body--0e889{
+  .bp_modal_module_body--aa987{
     padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footer--0e889{
+.bp_modal_module_footer--aa987{
   display:flex;
   justify-content:flex-end;
   padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--0e889{
+  .bp_modal_module_footer--aa987{
     padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
-.bp_modal_module_footer--0e889 .bp_modal_module_footerButton--0e889{
+.bp_modal_module_footer--aa987 .bp_modal_module_footerButton--aa987{
   cursor:pointer;
 }
 
-.bp_modal_module_footerButton--0e889 + .bp_modal_module_footerButton--0e889{
+.bp_modal_module_footerButton--aa987 + .bp_modal_module_footerButton--aa987{
   margin-inline-start:var(--modal-footer-button-margin-inline-start);
 }
 
-.bp_modal_module_loadingContainer--0e889{
+.bp_modal_module_loadingContainer--aa987{
   display:flex;
   flex-direction:column;
   flex-grow:1;
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContainer--0e889{
+  .bp_modal_module_loadingContainer--aa987{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContainerActive--0e889{
+.bp_modal_module_loadingContainerActive--aa987{
   overflow:hidden;
 }
 
-.bp_modal_module_loading--0e889{
+.bp_modal_module_loading--aa987{
   align-items:center;
   display:flex;
 }
 
-.bp_modal_module_loadingOverlay--0e889{
+.bp_modal_module_loadingOverlay--aa987{
   background-color:var(--modal-content-background);
   inset:0;
   position:absolute;
   z-index:1;
 }
 
-.bp_modal_module_loadingContent--0e889{
+.bp_modal_module_loadingContent--aa987{
   display:flex;
   flex-direction:column;
   visibility:hidden;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContent--0e889{
+  .bp_modal_module_loadingContent--aa987{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContentVisible--0e889{
+.bp_modal_module_loadingContentVisible--aa987{
   visibility:visible;
 }
 
-@keyframes bp_modal_module_popup_bounce_in--0e889{
+@keyframes bp_modal_module_popup_bounce_in--aa987{
   0%{
     transform:scale3d(.1, .1, 1);
   }
@@ -8846,7 +8896,7 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
     transform:scaleX(1);
   }
 }
-@keyframes bp_modal_module_bpModalEnter--0e889{
+@keyframes bp_modal_module_bpModalEnter--aa987{
   from{
     opacity:var(--bp-opacity-hidden);
     transform:translateY(var(--bp-space-040)) scale(var(--bp-scale-small));
@@ -8856,7 +8906,7 @@ table.bp_inline_table_module_inlineTable--f26a1 tr:not(:last-child) td{
     transform:translateY(0) scale(var(--bp-scale-default));
   }
 }
-@keyframes bp_modal_module_bpModalExit--0e889{
+@keyframes bp_modal_module_bpModalExit--aa987{
   from{
     opacity:var(--bp-opacity-visible);
   }

package/dist/lib-esm/modal/index.d.ts

@@ -1,4 +1,4 @@
 export { AlertModal } from './alert-modal';
 export type { AlertModalProps } from './alert-modal.types';
 export { Modal } from './modal';
-export type { ModalCloseProps, ModalContentProps, ModalLoadingProps, ModalProps, ModalTriggerProps } from './types';
+export type { ModalCloseProps, ModalContentProps, ModalHeaderProps, ModalHeaderTitleAddonRenderProps, ModalLoadingProps, ModalProps, ModalTriggerProps, } from './types';

package/dist/lib-esm/modal/modal-description.d.ts

@@ -0,0 +1,5 @@
+import { type ModalDescriptionProps } from './types';
+/**
+ * An accessible description to be announced along with the modal title.
+ */
+export declare const ModalDescription: import("react").ForwardRefExoticComponent<ModalDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/lib-esm/modal/modal-description.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+
+/**
+ * An accessible description to be announced along with the modal title.
+ */
+const ModalDescription = /*#__PURE__*/forwardRef(({
+  children,
+  ...props
+}, forwardedRef) => jsx(RadixDialog.Description, {
+  ...props,
+  ref: forwardedRef,
+  children: children
+}));
+
+export { ModalDescription };

package/dist/lib-esm/modal/modal-header.js

@@ -1,51 +1,98 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, cloneElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, cloneElement } from 'react';
 import { clsx } from 'clsx';
 import { useScrollContext } from '../utils/scroll-context.js';
+import { TooltipWrapper } from '../utils/TooltipWrapper.js';
+import { useIsEllipsized } from '../utils/useIsEllipsized.js';
 import { Text } from '../text/text.js';
+import { ModalDescription } from './modal-description.js';
 import { ModalTitle } from './modal-title.js';
 import styles from './modal.module.js';
 
+/**
+ * Title clamped next to an addon. When it gets cut off, it becomes focusable and reveals the full title in a tooltip.
+ * Rendered only with an addon, so modals without one don't observe the title size.
+ */
+const ModalHeaderTruncatableTitle = ({
+  children,
+  className
+}) => {
+  const titleTextRef = useRef(null);
+  const isTitleEllipsized = useIsEllipsized(titleTextRef);
+  return jsx(TooltipWrapper, {
+    tooltipContent: children,
+    withTooltip: isTitleEllipsized,
+    children: jsx(Text, {
+      ref: titleTextRef,
+      as: "h2",
+      className: className,
+      color: "textOnLightDefault",
+      variant: "titleLarge",
+      children: children
+    })
+  });
+};
 /**
  * Header of the Modal
  */
 const ModalHeader = /*#__PURE__*/forwardRef(({
+  backButton,
   children,
   className,
+  renderTitleAddon,
   subtitle,
-  backButton,
   ...rest
 }, forwardedRef) => {
   const {
     isScrolledUnderHeader
   } = useScrollContext();
+  const titleContainerRef = useRef(null);
   const headerClasses = clsx({
-    [styles.headerDividerLine]: isScrolledUnderHeader
+    [styles.headerDividerLine]: isScrolledUnderHeader,
+    [styles.modalHeaderWithAddon]: renderTitleAddon
   }, styles.modalHeader);
+  const title = jsx(ModalTitle, {
+    ...rest,
+    ref: forwardedRef,
+    asChild: true,
+    children: jsxs("div", {
+      className: renderTitleAddon ? styles.modalTitleLabel : styles.modalTitle,
+      children: [renderTitleAddon ? jsx(ModalHeaderTruncatableTitle, {
+        className: clsx(styles.modalTitleText, className),
+        children: children
+      }) : jsx(Text, {
+        as: "h2",
+        className: className,
+        color: "textOnLightDefault",
+        variant: "titleLarge",
+        children: children
+      }), subtitle && jsx(Text, {
+        as: "h3",
+        color: "textOnLightSecondary",
+        variant: "subtitle",
+        children: subtitle
+      })]
+    })
+  });
   return jsxs("div", {
     className: headerClasses,
     children: [backButton ? /*#__PURE__*/cloneElement(backButton, {
       className: styles.backButton
-    }) : null, jsx(ModalTitle, {
-      ...rest,
-      ref: forwardedRef,
-      asChild: true,
-      children: jsxs("div", {
-        className: styles.modalTitle,
-        children: [jsx(Text, {
-          as: "h2",
-          className: className,
-          color: "textOnLightDefault",
-          variant: "titleLarge",
-          children: children
-        }), subtitle && jsx(Text, {
-          as: "h3",
-          color: "textOnLightSecondary",
-          variant: "subtitle",
-          children: subtitle
-        })]
-      })
-    })]
+    }) : null, renderTitleAddon ? jsxs("div", {
+      ref: titleContainerRef,
+      className: clsx(styles.modalTitle, styles.modalTitleWithAddon, {
+        [styles.modalTitleWithSubtitle]: subtitle
+      }),
+      children: [title, jsx(ModalDescription, {
+        asChild: true,
+        children: jsx("div", {
+          className: styles.modalTitleAddon,
+          children: renderTitleAddon({
+            containerRef: titleContainerRef
+          })
+        })
+      })]
+    }) : title]
   });
 });
 

package/dist/lib-esm/modal/modal.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--0e889","headerDividerLine":"bp_modal_module_headerDividerLine--0e889","footerDividerLine":"bp_modal_module_footerDividerLine--0e889","content":"bp_modal_module_content--0e889","smallSizeModal":"bp_modal_module_smallSizeModal--0e889","mediumSizeModal":"bp_modal_module_mediumSizeModal--0e889","largeSizeModal":"bp_modal_module_largeSizeModal--0e889","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--0e889","loadingContainerActive":"bp_modal_module_loadingContainerActive--0e889","popup_bounce_in":"bp_modal_module_popup_bounce_in--0e889","bpModalEnter":"bp_modal_module_bpModalEnter--0e889","bpModalExit":"bp_modal_module_bpModalExit--0e889","scrollableContainer":"bp_modal_module_scrollableContainer--0e889","close":"bp_modal_module_close--0e889","onColor":"bp_modal_module_onColor--0e889","backButton":"bp_modal_module_backButton--0e889","modalHeader":"bp_modal_module_modalHeader--0e889","modalTitle":"bp_modal_module_modalTitle--0e889","body":"bp_modal_module_body--0e889","footer":"bp_modal_module_footer--0e889","footerButton":"bp_modal_module_footerButton--0e889","loadingContainer":"bp_modal_module_loadingContainer--0e889","loading":"bp_modal_module_loading--0e889","loadingOverlay":"bp_modal_module_loadingOverlay--0e889","loadingContent":"bp_modal_module_loadingContent--0e889","loadingContentVisible":"bp_modal_module_loadingContentVisible--0e889"};
+var styles = {"overlay":"bp_modal_module_overlay--aa987","headerDividerLine":"bp_modal_module_headerDividerLine--aa987","footerDividerLine":"bp_modal_module_footerDividerLine--aa987","content":"bp_modal_module_content--aa987","smallSizeModal":"bp_modal_module_smallSizeModal--aa987","mediumSizeModal":"bp_modal_module_mediumSizeModal--aa987","largeSizeModal":"bp_modal_module_largeSizeModal--aa987","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--aa987","loadingContainerActive":"bp_modal_module_loadingContainerActive--aa987","popup_bounce_in":"bp_modal_module_popup_bounce_in--aa987","bpModalEnter":"bp_modal_module_bpModalEnter--aa987","bpModalExit":"bp_modal_module_bpModalExit--aa987","scrollableContainer":"bp_modal_module_scrollableContainer--aa987","close":"bp_modal_module_close--aa987","onColor":"bp_modal_module_onColor--aa987","backButton":"bp_modal_module_backButton--aa987","modalHeader":"bp_modal_module_modalHeader--aa987","modalTitle":"bp_modal_module_modalTitle--aa987","modalHeaderWithAddon":"bp_modal_module_modalHeaderWithAddon--aa987","modalTitleWithAddon":"bp_modal_module_modalTitleWithAddon--aa987","modalTitleLabel":"bp_modal_module_modalTitleLabel--aa987","modalTitleAddon":"bp_modal_module_modalTitleAddon--aa987","modalTitleText":"bp_modal_module_modalTitleText--aa987","modalTitleWithSubtitle":"bp_modal_module_modalTitleWithSubtitle--aa987","body":"bp_modal_module_body--aa987","footer":"bp_modal_module_footer--aa987","footerButton":"bp_modal_module_footerButton--aa987","loadingContainer":"bp_modal_module_loadingContainer--aa987","loading":"bp_modal_module_loading--aa987","loadingOverlay":"bp_modal_module_loadingOverlay--aa987","loadingContent":"bp_modal_module_loadingContent--aa987","loadingContentVisible":"bp_modal_module_loadingContentVisible--aa987"};
 
 export { styles as default };

package/dist/lib-esm/modal/types.d.ts

@@ -1,5 +1,5 @@
-import { type DialogContentProps, type DialogPortalProps, type DialogProps, type DialogTitleProps } from '@radix-ui/react-dialog';
-import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
+import { type DialogContentProps, type DialogDescriptionProps, type DialogPortalProps, type DialogProps, type DialogTitleProps } from '@radix-ui/react-dialog';
+import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type RefObject, type SVGProps } from 'react';
 import { type LoadingIndicatorProps } from '../loading-indicator/loading-indicator';
 import { type IconButtonProps } from '../primitives/icon-button';
 export type ModalProps = DialogProps;
@@ -38,6 +38,10 @@ export interface ModalTitleProps extends DialogTitleProps {
     /** Specifies if title should be visually hidden */
     visuallyHidden?: boolean;
 }
+export interface ModalDescriptionProps extends DialogDescriptionProps {
+    /** Content of the Description element */
+    children: ReactNode;
+}
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** Content of the Body element */
     children: ReactNode;
@@ -50,11 +54,17 @@ export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
     /** Content of the Footer element */
     children: ReactNode;
 }
+export interface ModalHeaderTitleAddonRenderProps {
+    /** Ref to the title area container, for observing changes to its size. */
+    containerRef: RefObject<HTMLDivElement>;
+}
 export interface ModalHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
     backButton?: ReactElement;
     /** Content of the Header element */
     children: ReactNode;
-    /** Content of the Subttitle element */
+    /** Renders noninteractive content adjacent to, or below, the modal title. */
+    renderTitleAddon?: (props: ModalHeaderTitleAddonRenderProps) => ReactNode;
+    /** Content of the Subtitle element */
     subtitle?: ReactNode;
 }
 export interface ModalLoadingProps extends HTMLAttributes<HTMLDivElement> {

package/dist/lib-esm/toolbar/toolbar-root.js

@@ -10,21 +10,21 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
+    style,
     scrollable,
+    ariaLabelNextButton,
+    ariaLabelPrevButton,
+    maxWidth,
+    scrollStep,
     ...rest
   } = props;
   if (scrollable) {
-    const {
-      ariaLabelNextButton,
-      ariaLabelPrevButton,
-      maxWidth,
-      scrollStep = 50
-    } = props;
     return jsx(ToolbarPrimitive.Root, {
       ...rest,
       ref: forwardedRef,
       className: clsx(styles.toolbarRoot, styles.ScrollableToolbarWithReducedPadding, className),
       style: {
+        ...style,
         maxWidth
       },
       children: jsx(HorizontalScrollProvider, {
@@ -41,6 +41,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarRoot, className),
+    style: style,
     children: children
   });
 });

package/dist/lib-esm/toolbar/types.d.ts

@@ -3,10 +3,8 @@ import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type P
 interface ToolbarWithoutScrollProps {
     scrollable?: false;
 }
-interface ToolbarWithScrollProps {
-    /** Prop to enable horizontal scrolling with control buttons. */
-    scrollable: true;
-    /** The maximum width of the toolbar. When this width is reached, horizontal scrolling with control buttons will be enabled. */
+interface ToolbarScrollOptions {
+    /** The maximum width of the toolbar. When this width is reached, horizontal scrolling with control buttons will be enabled. Takes precedence over `style.maxWidth`. */
     maxWidth: string;
     /** Aria label for the previous control button. */
     ariaLabelPrevButton: string;
@@ -17,8 +15,14 @@ interface ToolbarWithScrollProps {
      */
     scrollStep?: number;
 }
+interface ToolbarWithScrollProps extends ToolbarScrollOptions {
+    /** Prop to enable horizontal scrolling with control buttons. */
+    scrollable: true;
+}
 type ScrollProps = ToolbarWithoutScrollProps | ToolbarWithScrollProps;
 export type ToolbarProps = ToolbarPrimitiveProps & ScrollProps;
+/** Scroll options can still be present at runtime when `scrollable` is falsy, e.g. `scrollable={isNarrow}`. */
+export type ToolbarRootRuntimeProps = ToolbarPrimitiveProps & ((ToolbarWithoutScrollProps & Partial<ToolbarScrollOptions>) | ToolbarWithScrollProps);
 export type ToolbarSeparatorProps = ToolbarPrimitiveSeparatorProps;
 export type ToolbarToggleGroupProps = ToolbarToggleGroupPrimitiveProps;
 interface ToolbarButtonCSS extends CSSProperties {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.22.1",
+    "version": "17.22.3",
     "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.11.10",
+        "@box/blueprint-web-assets": "^5.11.12",
         "@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.5",
+        "@box/storybook-utils": "^1.4.7",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",