@box/blueprint-web 15.8.0 → 15.8.2

package/dist/lib-esm/index.css

@@ -13524,11 +13524,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_time_picker_module_timePicker--f64d0 .bp_time_picker_module_inlineError--f64d0{
   margin-block-start:var(--time-picker-inline-error-margin-top);
 }
-.bp_toolbar_module_dropdownIndicator--e4acf.bp_toolbar_module_invertCaret--e4acf{
+.bp_toolbar_module_dropdownIndicator--72660.bp_toolbar_module_invertCaret--72660{
   transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_toolbarRoot--e4acf[data-modern=false]{
+.bp_toolbar_module_toolbarRoot--72660[data-modern=false]{
   --toolbar-root-gap:var(--space-1);
   --toolbar-root-padding:calc(var(--space-1) - var(--border-1));
   --toolbar-root-background:var(--surface-surface);
@@ -13544,11 +13544,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-separator-border-radius:var(--radius-2);
   --toolbar-link-color:var(--text-cta-link);
   --toolbar-link-hover-color:var(--text-cta-link-hover);
+  --toolbar-link-pressed-color:var(--text-cta-link-pressed);
   --toolbar-link-padding-inline:var(--space-2);
   --toolbar-link-max-width:400px;
 }
 
-.bp_toolbar_module_toolbarRoot--e4acf[data-modern=true]{
+.bp_toolbar_module_toolbarRoot--72660[data-modern=true]{
   --box-shadow:0 4px 12px 0 #0000001a;
   --toolbar-root-gap:var(--bp-space-010);
   --toolbar-root-padding:var(--bp-space-010);
@@ -13566,14 +13567,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-toggle-group-gap:var(--bp-space-010);
   --toolbar-link-color:var(--bp-text-cta-link);
   --toolbar-link-hover-color:var(--bp-text-cta-link-hover);
+  --toolbar-link-pressed-color:var(--bp-text-cta-link-pressed);
   --toolbar-link-padding-inline:var(--bp-space-020);
   --toolbar-link-max-width:400px;
 }
-.bp_toolbar_module_toolbarRoot--e4acf[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--e4acf{
+.bp_toolbar_module_toolbarRoot--72660[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--72660{
   --toolbar-root-padding:0;
 }
 
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=false]{
+.bp_toolbar_module_toolbarItem--72660[data-modern=false]{
   --toolbar-item-min-width:var(--size-8);
   --toolbar-item-min-height:var(--size-8);
   --toolbar-item-text-indent:var(--space-1);
@@ -13583,6 +13585,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-item-padding-inline:calc(var(--space-1) - var(--border-1));
   --toolbar-item-off-hover-background:var(--surface-toggle-surface-hover);
   --toolbar-item-off-hover-border:var(--border-1) solid var(--surface-toggle-surface-hover);
+  --toolbar-item-off-pressed-background:var(--surface-toggle-surface-off-pressed);
+  --toolbar-item-off-pressed-border:var(--border-1) solid var(--border-toggletext-border-off-pressed);
+  --toolbar-toggle-on-active-background:var(--surface-toggle-surface-on-pressed);
+  --toolbar-toggle-on-active-border:var(--border-1) solid var(--border-toggle-border-on);
   --toolbar-item-focus-outline:var(--outline-focus-on-light);
   --toolbar-item-disabled-opacity:0.3;
   --toolbar-toggle-on-pressed-border:none;
@@ -13609,7 +13615,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
   --trigger-button-hover-opacity:0.7;
 }
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=false].bp_toolbar_module_toolbarButton--e4acf,.bp_toolbar_module_toolbarItem--e4acf[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--e4acf{
+.bp_toolbar_module_toolbarItem--72660[data-modern=false].bp_toolbar_module_toolbarButton--72660,.bp_toolbar_module_toolbarItem--72660[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--72660{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -13618,7 +13624,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=false].bp_toolbar_module_toolbarLink--e4acf{
+.bp_toolbar_module_toolbarItem--72660[data-modern=false].bp_toolbar_module_toolbarLink--72660{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -13628,7 +13634,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-bold-text-case);
 }
 
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true]{
+.bp_toolbar_module_toolbarItem--72660[data-modern=true]{
   --toolbar-item-min-width:var(--bp-size-080);
   --toolbar-item-min-height:var(--bp-size-080);
   --toolbar-item-text-indent:var(--bp-space-010);
@@ -13638,6 +13644,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-item-padding-inline:calc(var(--bp-space-010) - var(--bp-border-01));
   --toolbar-item-off-hover-background:var(--bp-surface-toggle-surface-hover);
   --toolbar-item-off-hover-border:var(--bp-border-01) solid var(--bp-surface-toggle-surface-hover);
+  --toolbar-item-off-pressed-background:var(--bp-surface-toggle-surface-off-pressed);
+  --toolbar-item-off-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
+  --toolbar-toggle-on-active-background:var(--bp-surface-toggle-surface-on-pressed);
+  --toolbar-toggle-on-active-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
   --toolbar-item-focus-outline:var(--bp-outline-focus-on-light);
   --toolbar-item-disabled-opacity:0.3;
   --toolbar-toggle-on-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
@@ -13665,27 +13675,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --trigger-button-hover-opacity:0.65;
   --trigger-button-active-opacity:0.8;
 }
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true]:active,.bp_toolbar_module_toolbarItem--e4acf[data-modern=true][data-active]{
-  background:var(--bp-surface-toggle-surface-off-pressed);
-  border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
-}
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--e4acf[data-modern=true][data-state=on][data-active]{
-  background:var(--bp-surface-toggle-surface-on-pressed);
-  border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
-}
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--e4acf{
+.bp_toolbar_module_toolbarItem--72660[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--72660{
   transform:rotate(1turn);
 }
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--e4acf:active,.bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--e4acf[data-active]{
-  background-color:var(--toolbar-button-color);
-  opacity:var(--trigger-button-active-opacity);
-}
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--e4acf[data-state=on]:hover{
-  background-color:var(--toolbar-button-color);
-  border-color:var(--toolbar-button-color);
-  opacity:var(--trigger-button-hover-opacity);
-}
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_toolbarButton--e4acf,.bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--e4acf{
+.bp_toolbar_module_toolbarItem--72660[data-modern=true].bp_toolbar_module_toolbarButton--72660,.bp_toolbar_module_toolbarItem--72660[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--72660{
   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-07);
   font-style:normal;
@@ -13693,7 +13686,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-05);
 }
-.bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_toolbarLink--e4acf{
+.bp_toolbar_module_toolbarItem--72660[data-modern=true].bp_toolbar_module_toolbarLink--72660{
   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;
@@ -13702,15 +13695,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_toolbar_module_toggleGroup--e4acf[data-modern=false]{
+.bp_toolbar_module_toggleGroup--72660[data-modern=false]{
   --toolbar-toggle-group-gap:var(--space-1);
 }
 
-.bp_toolbar_module_toggleGroup--e4acf[data-modern=true]{
+.bp_toolbar_module_toggleGroup--72660[data-modern=true]{
   --toolbar-toggle-group-gap:var(--bp-space-010);
 }
 
-.bp_toolbar_module_toolbarRoot--e4acf{
+.bp_toolbar_module_toolbarRoot--72660{
   align-items:center;
   background:var(--toolbar-root-background);
   border:var(--toolbar-root-border);
@@ -13721,23 +13714,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding:var(--toolbar-root-padding);
 }
 
-.bp_toolbar_module_scrollButtonWrapper--e4acf{
+.bp_toolbar_module_scrollButtonWrapper--72660{
   align-items:center;
   display:flex;
   gap:var(--toolbar-scroll-button-gap);
 }
-.bp_toolbar_module_scrollButtonWrapper--e4acf.bp_toolbar_module_hidden--e4acf{
+.bp_toolbar_module_scrollButtonWrapper--72660.bp_toolbar_module_hidden--72660{
   display:none;
 }
 
-.bp_toolbar_module_scrollableChildrenWrapper--e4acf{
+.bp_toolbar_module_scrollableChildrenWrapper--72660{
   -ms-overflow-style:none;
   scrollbar-width:none;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--e4acf::-webkit-scrollbar{
+.bp_toolbar_module_scrollableChildrenWrapper--72660::-webkit-scrollbar{
   display:none;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--e4acf{
+.bp_toolbar_module_scrollableChildrenWrapper--72660{
   align-items:center;
   display:flex;
   flex-grow:1;
@@ -13748,23 +13741,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
   white-space:nowrap;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--e4acf > *{
+.bp_toolbar_module_scrollableChildrenWrapper--72660 > *{
   flex:none;
 }
 
-.bp_toolbar_module_separator--e4acf{
+.bp_toolbar_module_separator--72660{
   background-color:var(--toolbar-separator-background);
   border-radius:var(--toolbar-separator-border-radius);
   height:var(--toolbar-separator-height);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--e4acf{
+.bp_toolbar_module_toggleGroup--72660{
   display:flex;
   gap:var(--toolbar-toggle-group-gap);
 }
 
-.bp_toolbar_module_toolbarItem--e4acf{
+.bp_toolbar_module_toolbarItem--72660{
   align-items:center;
   background:var(--toolbar-button-color, var(--toolbar-item-background));
   border:var(--toolbar-item-border);
@@ -13782,41 +13775,53 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--e4acf[data-disabled]{
+.bp_toolbar_module_toolbarItem--72660[data-disabled]{
   background:var(--toolbar-item-background);
   opacity:var(--toolbar-item-disabled-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--e4acf:not([data-disabled]):focus-visible{
+.bp_toolbar_module_toolbarItem--72660:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--toolbar-item-focus-outline);
 }
-.bp_toolbar_module_toolbarItem--e4acf:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarItem--72660:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--toolbar-item-off-hover-background));
   border:var(--toolbar-item-off-hover-border);
 }
+.bp_toolbar_module_toolbarItem--72660:not([data-disabled]):active,.bp_toolbar_module_toolbarItem--72660:not([data-disabled])[data-active]{
+  background:var(--toolbar-button-color, var(--toolbar-item-off-pressed-background));
+  border:var(--toolbar-item-off-pressed-border);
+}
 
-.bp_toolbar_module_toolbarToggle--e4acf[data-state=on]{
+.bp_toolbar_module_toolbarToggle--72660[data-state=on]{
   background:var(--toolbar-toggle-on-pressed-background);
   border:var(--toolbar-toggle-on-pressed-border);
 }
-.bp_toolbar_module_toolbarToggle--e4acf[data-state=on] svg *{
+.bp_toolbar_module_toolbarToggle--72660[data-state=on] svg *{
   fill:var(--toolbar-toggle-icon-fill);
 }
-.bp_toolbar_module_toolbarToggle--e4acf[data-state=on]:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarToggle--72660[data-state=on]:not([data-disabled]):hover{
   background:var(--toolbar-toggle-on-hover-background);
   border:var(--toolbar-toggle-on-hover-border);
 }
+.bp_toolbar_module_toolbarToggle--72660[data-state=on]:not([data-disabled]):active,.bp_toolbar_module_toolbarToggle--72660[data-state=on]:not([data-disabled])[data-active]{
+  background:var(--toolbar-toggle-on-active-background);
+  border:var(--toolbar-toggle-on-active-border);
+}
 
-.bp_toolbar_module_triggerButtonSelectedWithColor--e4acf[data-state=on] .bp_toolbar_module_dropdownIndicator--e4acf path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--72660:active,.bp_toolbar_module_triggerButtonSelectedWithColor--72660[data-active]{
+  background-color:var(--toolbar-button-color);
+  opacity:var(--trigger-button-active-opacity, 1);
+}
+.bp_toolbar_module_triggerButtonSelectedWithColor--72660[data-state=on] .bp_toolbar_module_dropdownIndicator--72660 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--e4acf[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--72660[data-state=on]:hover{
   background-color:var(--toolbar-button-color);
   border-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--e4acf{
+.bp_toolbar_module_toolbarIcon--72660{
   align-items:center;
   display:flex;
   height:var(--toolbar-icon-height);
@@ -13824,15 +13829,27 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:var(--toolbar-icon-width);
 }
 
-.bp_toolbar_module_toolbarLink--e4acf{
+.bp_toolbar_module_toolbarLink--72660{
   color:var(--toolbar-link-color);
   max-width:var(--toolbar-link-max-width);
   padding-inline:var(--toolbar-link-padding-inline);
   text-decoration:none;
   text-indent:unset;
 }
+.bp_toolbar_module_toolbarLink--72660.bp_toolbar_module_toolbarItem--72660:hover{
+  background:var(--toolbar-button-color, var(--toolbar-item-background));
+  border:var(--toolbar-item-border);
+  color:var(--toolbar-link-hover-color);
+  text-decoration:underline;
+}
+.bp_toolbar_module_toolbarLink--72660.bp_toolbar_module_toolbarItem--72660:active{
+  background:var(--toolbar-button-color, var(--toolbar-item-background));
+  border:var(--toolbar-item-border);
+  color:var(--toolbar-link-pressed-color);
+  text-decoration:underline;
+}
 
-.bp_toolbar_module_toolbarLinkText--e4acf{
+.bp_toolbar_module_toolbarLinkText--72660{
   display:block;
   min-width:0;
   overflow:hidden;
@@ -13840,7 +13857,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   white-space:nowrap;
 }
 
-.bp_toolbar_module_toolbarInputContainer--e4acf{
+.bp_toolbar_module_toolbarInputContainer--72660{
   align-items:center;
   display:flex;
   flex:1 1 0;
@@ -13848,7 +13865,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   position:relative;
 }
 
-.bp_toolbar_module_toolbarInputContainer--e4acf:has(.bp_toolbar_module_toolbarInput--e4acf[data-modern=false]){
+.bp_toolbar_module_toolbarInputContainer--72660:has(.bp_toolbar_module_toolbarInput--72660[data-modern=false]){
   --toolbar-input-height:var(--size-8);
   --toolbar-input-padding-block:var(--space-2);
   --toolbar-input-padding-inline:var(--space-3);
@@ -13873,7 +13890,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
 }
 
-.bp_toolbar_module_toolbarInputContainer--e4acf:has(.bp_toolbar_module_toolbarInput--e4acf[data-modern=true]){
+.bp_toolbar_module_toolbarInputContainer--72660:has(.bp_toolbar_module_toolbarInput--72660[data-modern=true]){
   --toolbar-input-height:var(--bp-size-080);
   --toolbar-input-padding-block:var(--bp-space-020);
   --toolbar-input-padding-inline:var(--bp-space-030);
@@ -13898,7 +13915,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
 }
 
-.bp_toolbar_module_toolbarInput--e4acf{
+.bp_toolbar_module_toolbarInput--72660{
   background:var(--toolbar-input-background);
   border:var(--toolbar-input-border-width) solid var(--toolbar-input-border-color);
   border-radius:var(--toolbar-input-border-radius);
@@ -13913,7 +13930,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding-inline:var(--toolbar-input-padding-inline);
   width:100%;
 }
-.bp_toolbar_module_toolbarInput--e4acf[data-modern=false]{
+.bp_toolbar_module_toolbarInput--72660[data-modern=false]{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -13922,7 +13939,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_toolbar_module_toolbarInput--e4acf[data-modern=true]{
+.bp_toolbar_module_toolbarInput--72660[data-modern=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-07);
   font-style:normal;
@@ -13930,16 +13947,24 @@ 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-05);
 }
-.bp_toolbar_module_toolbarInput--e4acf::placeholder{
+.bp_toolbar_module_toolbarInput--72660::placeholder{
   color:var(--toolbar-input-placeholder-color);
   opacity:1;
 }
-.bp_toolbar_module_toolbarInput--e4acf:focus-visible{
+.bp_toolbar_module_toolbarInput--72660[data-modern=true]::placeholder{
+  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;
+  font-weight:var(--bp-font-weight-regular);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+}
+.bp_toolbar_module_toolbarInput--72660:focus-visible{
   --toolbar-input-border-offset:calc(var(--toolbar-input-focus-border-width) - var(--toolbar-input-border-width));
   border:var(--toolbar-input-focus-border-width) solid var(--toolbar-input-border-color-focus);
   padding-inline-start:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-border-offset));
 }
-.bp_toolbar_module_toolbarInput--e4acf:disabled{
+.bp_toolbar_module_toolbarInput--72660:disabled{
   background:var(--toolbar-input-disabled-background);
   border-color:var(--toolbar-input-disabled-border-color);
   box-shadow:var(--toolbar-input-box-shadow);
@@ -13947,20 +13972,20 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   cursor:default;
   opacity:.5;
 }
-.bp_toolbar_module_toolbarInput--e4acf:has(+ .bp_toolbar_module_toolbarInputErrorIcon--e4acf){
+.bp_toolbar_module_toolbarInput--72660:has(+ .bp_toolbar_module_toolbarInputErrorIcon--72660){
   padding-inline-end:var(--toolbar-input-icon-end-pad);
 }
-.bp_toolbar_module_toolbarInput--e4acf:hover:not(:disabled, :focus-visible, .bp_toolbar_module_toolbarInputError--e4acf){
+.bp_toolbar_module_toolbarInput--72660:hover:not(:disabled, :focus-visible, .bp_toolbar_module_toolbarInputError--72660){
   border-color:var(--toolbar-input-hover-border-color);
 }
 
-.bp_toolbar_module_toolbarInput--e4acf.bp_toolbar_module_toolbarInputError--e4acf{
+.bp_toolbar_module_toolbarInput--72660.bp_toolbar_module_toolbarInputError--72660{
   --toolbar-input-error-border-offset:calc(var(--toolbar-input-error-border-width) - var(--toolbar-input-border-width));
   border:var(--toolbar-input-error-border-width) solid var(--toolbar-input-error-border-color);
   padding-inline:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-error-border-offset)) calc(var(--toolbar-input-icon-end-pad) - var(--toolbar-input-error-border-offset));
 }
 
-.bp_toolbar_module_toolbarInputErrorIcon--e4acf{
+.bp_toolbar_module_toolbarInputErrorIcon--72660{
   color:var(--toolbar-input-error-border-color);
   height:var(--toolbar-input-icon-size);
   inset-inline-end:var(--toolbar-input-icon-padding);
@@ -13971,35 +13996,35 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:var(--toolbar-input-icon-size);
 }
 
-.bp_toolbar_module_toolbarInputErrorIconHidden--e4acf{
+.bp_toolbar_module_toolbarInputErrorIconHidden--72660{
   visibility:hidden;
 }
 
-.bp_toolbar_module_toolbarTextToggleItem--e4acf{
+.bp_toolbar_module_toolbarTextToggleItem--72660{
   border:var(--toolbar-text-toggle-off-border);
   color:var(--toolbar-text-toggle-color);
   padding-inline:var(--toolbar-text-toggle-padding-inline);
   text-indent:unset;
   white-space:nowrap;
 }
-.bp_toolbar_module_toolbarTextToggleItem--e4acf:hover{
+.bp_toolbar_module_toolbarTextToggleItem--72660:hover{
   background:var(--toolbar-text-toggle-hover-background);
   border-color:var(--toolbar-text-toggle-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--e4acf:active{
+.bp_toolbar_module_toolbarTextToggleItem--72660:active{
   background:var(--toolbar-text-toggle-active-background);
   border-color:var(--toolbar-text-toggle-active-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--e4acf[aria-checked=true]{
+.bp_toolbar_module_toolbarTextToggleItem--72660[aria-checked=true]{
   background:var(--toolbar-text-toggle-checked-background);
   border:var(--toolbar-text-toggle-checked-border);
   color:var(--toolbar-text-toggle-checked-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--e4acf[aria-checked=true]:hover{
+.bp_toolbar_module_toolbarTextToggleItem--72660[aria-checked=true]:hover{
   background:var(--toolbar-text-toggle-checked-hover-background);
   border-color:var(--toolbar-text-toggle-checked-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--e4acf[aria-checked=true]:active{
+.bp_toolbar_module_toolbarTextToggleItem--72660[aria-checked=true]:active{
   background:var(--toolbar-text-toggle-checked-active-background);
   border-color:var(--toolbar-text-toggle-checked-active-border-color);
 }

package/dist/lib-esm/toolbar/toolbar-input-keydown.d.ts

@@ -0,0 +1,7 @@
+import { type KeyboardEvent } from 'react';
+/**
+ * RovingFocusGroup.Item composes its arrow-key handler on bubble-phase keydown.
+ * stopPropagation does not skip that handler — use capture + stopImmediatePropagation
+ * so text-navigation keys move the caret/selection until the field boundary is reached.
+ */
+export declare const composeToolbarInputKeyDownCapture: (onKeyDownCapture?: (event: KeyboardEvent<HTMLInputElement>) => void) => ((event: KeyboardEvent<HTMLInputElement>) => void);

package/dist/lib-esm/toolbar/toolbar-input-keydown.js

@@ -0,0 +1,41 @@
+import { composeEventHandlers } from '@radix-ui/primitive';
+
+const TEXT_NAVIGATION_KEYS = new Set(['Home', 'End', 'PageUp', 'PageDown']);
+const shouldPreserveTextCaretNavigation = event => {
+  const {
+    key,
+    currentTarget
+  } = event;
+  if (TEXT_NAVIGATION_KEYS.has(key)) {
+    return true;
+  }
+  if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
+    return false;
+  }
+  const {
+    selectionStart,
+    selectionEnd
+  } = currentTarget;
+  if (selectionStart === null || selectionEnd === null) {
+    return false;
+  }
+  const valueLength = currentTarget.value.length;
+  if (key === 'ArrowLeft') {
+    return selectionStart > 0 || selectionEnd > 0;
+  }
+  return selectionStart < valueLength || selectionEnd < valueLength;
+};
+/**
+ * RovingFocusGroup.Item composes its arrow-key handler on bubble-phase keydown.
+ * stopPropagation does not skip that handler — use capture + stopImmediatePropagation
+ * so text-navigation keys move the caret/selection until the field boundary is reached.
+ */
+const composeToolbarInputKeyDownCapture = onKeyDownCapture => {
+  return composeEventHandlers(onKeyDownCapture, event => {
+    if (shouldPreserveTextCaretNavigation(event)) {
+      event.nativeEvent.stopImmediatePropagation();
+    }
+  });
+};
+
+export { composeToolbarInputKeyDownCapture };

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

@@ -1,2 +1,7 @@
 import { type ToolbarInputProps } from './types';
+/**
+ * Register with native Toolbar.Root roving focus via Toolbar.Button asChild (same
+ * Item + scope wiring as built-in controls). Capture keydown keeps caret movement
+ * inside the field for arrow/home/end keys.
+ */
 export declare const ToolbarInput: import("react").ForwardRefExoticComponent<ToolbarInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,15 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
+import { composeToolbarInputKeyDownCapture } from './toolbar-input-keydown.js';
 import styles from './toolbar.module.js';
 
+/**
+ * Register with native Toolbar.Root roving focus via Toolbar.Button asChild (same
+ * Item + scope wiring as built-in controls). Capture keydown keeps caret movement
+ * inside the field for arrow/home/end keys.
+ */
 const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     className,
     error,
     disabled,
+    onKeyDown,
+    onKeyDownCapture,
+    type = 'text',
     ...rest
   } = props;
   const {
@@ -18,13 +28,20 @@ const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const showError = error && !disabled;
   return jsxs("div", {
     className: styles.toolbarInputContainer,
-    children: [jsx("input", {
-      ...rest,
-      ref: forwardedRef,
-      className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+    children: [jsx(ToolbarPrimitive.Button, {
+      asChild: true,
       disabled: disabled,
-      "aria-invalid": showError || undefined
+      children: jsx("input", {
+        ...rest,
+        ref: forwardedRef,
+        type: type,
+        className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
+        "data-modern": enableModernizedComponents ? 'true' : 'false',
+        disabled: disabled,
+        "aria-invalid": showError || undefined,
+        onKeyDown: onKeyDown,
+        onKeyDownCapture: composeToolbarInputKeyDownCapture(onKeyDownCapture)
+      })
     }), jsx(AlertCircle, {
       "aria-hidden": "true",
       className: clsx(styles.toolbarInputErrorIcon, !showError && styles.toolbarInputErrorIconHidden),

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--e4acf","invertCaret":"bp_toolbar_module_invertCaret--e4acf","toolbarRoot":"bp_toolbar_module_toolbarRoot--e4acf","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--e4acf","toolbarItem":"bp_toolbar_module_toolbarItem--e4acf","toolbarButton":"bp_toolbar_module_toolbarButton--e4acf","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--e4acf","toolbarLink":"bp_toolbar_module_toolbarLink--e4acf","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--e4acf","toggleGroup":"bp_toolbar_module_toggleGroup--e4acf","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--e4acf","hidden":"bp_toolbar_module_hidden--e4acf","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--e4acf","separator":"bp_toolbar_module_separator--e4acf","toolbarToggle":"bp_toolbar_module_toolbarToggle--e4acf","toolbarIcon":"bp_toolbar_module_toolbarIcon--e4acf","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--e4acf","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--e4acf","toolbarInput":"bp_toolbar_module_toolbarInput--e4acf","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--e4acf","toolbarInputError":"bp_toolbar_module_toolbarInputError--e4acf","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--e4acf"};
+var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--72660","invertCaret":"bp_toolbar_module_invertCaret--72660","toolbarRoot":"bp_toolbar_module_toolbarRoot--72660","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--72660","toolbarItem":"bp_toolbar_module_toolbarItem--72660","toolbarButton":"bp_toolbar_module_toolbarButton--72660","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--72660","toolbarLink":"bp_toolbar_module_toolbarLink--72660","toggleGroup":"bp_toolbar_module_toggleGroup--72660","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--72660","hidden":"bp_toolbar_module_hidden--72660","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--72660","separator":"bp_toolbar_module_separator--72660","toolbarToggle":"bp_toolbar_module_toolbarToggle--72660","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--72660","toolbarIcon":"bp_toolbar_module_toolbarIcon--72660","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--72660","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--72660","toolbarInput":"bp_toolbar_module_toolbarInput--72660","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--72660","toolbarInputError":"bp_toolbar_module_toolbarInputError--72660","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--72660"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "15.8.0",
+    "version": "15.8.2",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,8 +47,9 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.124.2",
+        "@box/blueprint-web-assets": "^4.125.0",
         "@internationalized/date": "^3.12.0",
+        "@radix-ui/primitive": "1.0.1",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
         "@radix-ui/react-collapsible": "1.0.3",
@@ -77,7 +78,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.21.2",
+        "@box/storybook-utils": "^0.21.4",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",