@box/blueprint-web 15.7.1 → 15.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ export {};
@@ -13524,11 +13524,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13524
13524
  .bp_time_picker_module_timePicker--f64d0 .bp_time_picker_module_inlineError--f64d0{
13525
13525
  margin-block-start:var(--time-picker-inline-error-margin-top);
13526
13526
  }
13527
- .bp_toolbar_module_dropdownIndicator--e4acf.bp_toolbar_module_invertCaret--e4acf{
13527
+ .bp_toolbar_module_dropdownIndicator--72660.bp_toolbar_module_invertCaret--72660{
13528
13528
  transform:rotate(.5turn);
13529
13529
  }
13530
13530
 
13531
- .bp_toolbar_module_toolbarRoot--e4acf[data-modern=false]{
13531
+ .bp_toolbar_module_toolbarRoot--72660[data-modern=false]{
13532
13532
  --toolbar-root-gap:var(--space-1);
13533
13533
  --toolbar-root-padding:calc(var(--space-1) - var(--border-1));
13534
13534
  --toolbar-root-background:var(--surface-surface);
@@ -13544,11 +13544,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13544
13544
  --toolbar-separator-border-radius:var(--radius-2);
13545
13545
  --toolbar-link-color:var(--text-cta-link);
13546
13546
  --toolbar-link-hover-color:var(--text-cta-link-hover);
13547
+ --toolbar-link-pressed-color:var(--text-cta-link-pressed);
13547
13548
  --toolbar-link-padding-inline:var(--space-2);
13548
13549
  --toolbar-link-max-width:400px;
13549
13550
  }
13550
13551
 
13551
- .bp_toolbar_module_toolbarRoot--e4acf[data-modern=true]{
13552
+ .bp_toolbar_module_toolbarRoot--72660[data-modern=true]{
13552
13553
  --box-shadow:0 4px 12px 0 #0000001a;
13553
13554
  --toolbar-root-gap:var(--bp-space-010);
13554
13555
  --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
13566
13567
  --toolbar-toggle-group-gap:var(--bp-space-010);
13567
13568
  --toolbar-link-color:var(--bp-text-cta-link);
13568
13569
  --toolbar-link-hover-color:var(--bp-text-cta-link-hover);
13570
+ --toolbar-link-pressed-color:var(--bp-text-cta-link-pressed);
13569
13571
  --toolbar-link-padding-inline:var(--bp-space-020);
13570
13572
  --toolbar-link-max-width:400px;
13571
13573
  }
13572
- .bp_toolbar_module_toolbarRoot--e4acf[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--e4acf{
13574
+ .bp_toolbar_module_toolbarRoot--72660[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--72660{
13573
13575
  --toolbar-root-padding:0;
13574
13576
  }
13575
13577
 
13576
- .bp_toolbar_module_toolbarItem--e4acf[data-modern=false]{
13578
+ .bp_toolbar_module_toolbarItem--72660[data-modern=false]{
13577
13579
  --toolbar-item-min-width:var(--size-8);
13578
13580
  --toolbar-item-min-height:var(--size-8);
13579
13581
  --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
13583
13585
  --toolbar-item-padding-inline:calc(var(--space-1) - var(--border-1));
13584
13586
  --toolbar-item-off-hover-background:var(--surface-toggle-surface-hover);
13585
13587
  --toolbar-item-off-hover-border:var(--border-1) solid var(--surface-toggle-surface-hover);
13588
+ --toolbar-item-off-pressed-background:var(--surface-toggle-surface-off-pressed);
13589
+ --toolbar-item-off-pressed-border:var(--border-1) solid var(--border-toggletext-border-off-pressed);
13590
+ --toolbar-toggle-on-active-background:var(--surface-toggle-surface-on-pressed);
13591
+ --toolbar-toggle-on-active-border:var(--border-1) solid var(--border-toggle-border-on);
13586
13592
  --toolbar-item-focus-outline:var(--outline-focus-on-light);
13587
13593
  --toolbar-item-disabled-opacity:0.3;
13588
13594
  --toolbar-toggle-on-pressed-border:none;
@@ -13609,7 +13615,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13609
13615
  --toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
13610
13616
  --trigger-button-hover-opacity:0.7;
13611
13617
  }
13612
- .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{
13618
+ .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{
13613
13619
  font-family:var(--body-default-font-family);
13614
13620
  font-size:var(--body-default-font-size);
13615
13621
  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
13618
13624
  text-decoration:var(--body-default-text-decoration);
13619
13625
  text-transform:var(--body-default-text-case);
13620
13626
  }
13621
- .bp_toolbar_module_toolbarItem--e4acf[data-modern=false].bp_toolbar_module_toolbarLink--e4acf{
13627
+ .bp_toolbar_module_toolbarItem--72660[data-modern=false].bp_toolbar_module_toolbarLink--72660{
13622
13628
  font-family:var(--body-default-bold-font-family);
13623
13629
  font-size:var(--body-default-bold-font-size);
13624
13630
  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
13628
13634
  text-transform:var(--body-default-bold-text-case);
13629
13635
  }
13630
13636
 
13631
- .bp_toolbar_module_toolbarItem--e4acf[data-modern=true]{
13637
+ .bp_toolbar_module_toolbarItem--72660[data-modern=true]{
13632
13638
  --toolbar-item-min-width:var(--bp-size-080);
13633
13639
  --toolbar-item-min-height:var(--bp-size-080);
13634
13640
  --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
13638
13644
  --toolbar-item-padding-inline:calc(var(--bp-space-010) - var(--bp-border-01));
13639
13645
  --toolbar-item-off-hover-background:var(--bp-surface-toggle-surface-hover);
13640
13646
  --toolbar-item-off-hover-border:var(--bp-border-01) solid var(--bp-surface-toggle-surface-hover);
13647
+ --toolbar-item-off-pressed-background:var(--bp-surface-toggle-surface-off-pressed);
13648
+ --toolbar-item-off-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
13649
+ --toolbar-toggle-on-active-background:var(--bp-surface-toggle-surface-on-pressed);
13650
+ --toolbar-toggle-on-active-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
13641
13651
  --toolbar-item-focus-outline:var(--bp-outline-focus-on-light);
13642
13652
  --toolbar-item-disabled-opacity:0.3;
13643
13653
  --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
13665
13675
  --trigger-button-hover-opacity:0.65;
13666
13676
  --trigger-button-active-opacity:0.8;
13667
13677
  }
13668
- .bp_toolbar_module_toolbarItem--e4acf[data-modern=true]:active,.bp_toolbar_module_toolbarItem--e4acf[data-modern=true][data-active]{
13669
- background:var(--bp-surface-toggle-surface-off-pressed);
13670
- border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
13671
- }
13672
- .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]{
13673
- background:var(--bp-surface-toggle-surface-on-pressed);
13674
- border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
13675
- }
13676
- .bp_toolbar_module_toolbarItem--e4acf[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--e4acf{
13678
+ .bp_toolbar_module_toolbarItem--72660[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--72660{
13677
13679
  transform:rotate(1turn);
13678
13680
  }
13679
- .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]{
13680
- background-color:var(--toolbar-button-color);
13681
- opacity:var(--trigger-button-active-opacity);
13682
- }
13683
- .bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--e4acf[data-state=on]:hover{
13684
- background-color:var(--toolbar-button-color);
13685
- border-color:var(--toolbar-button-color);
13686
- opacity:var(--trigger-button-hover-opacity);
13687
- }
13688
- .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{
13681
+ .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{
13689
13682
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
13690
13683
  font-size:var(--bp-font-size-07);
13691
13684
  font-style:normal;
@@ -13693,7 +13686,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13693
13686
  letter-spacing:var(--bp-font-letter-spacing-01);
13694
13687
  line-height:var(--bp-font-line-height-05);
13695
13688
  }
13696
- .bp_toolbar_module_toolbarItem--e4acf[data-modern=true].bp_toolbar_module_toolbarLink--e4acf{
13689
+ .bp_toolbar_module_toolbarItem--72660[data-modern=true].bp_toolbar_module_toolbarLink--72660{
13697
13690
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
13698
13691
  font-size:var(--bp-font-size-05);
13699
13692
  font-style:normal;
@@ -13702,15 +13695,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13702
13695
  line-height:var(--bp-font-line-height-04);
13703
13696
  }
13704
13697
 
13705
- .bp_toolbar_module_toggleGroup--e4acf[data-modern=false]{
13698
+ .bp_toolbar_module_toggleGroup--72660[data-modern=false]{
13706
13699
  --toolbar-toggle-group-gap:var(--space-1);
13707
13700
  }
13708
13701
 
13709
- .bp_toolbar_module_toggleGroup--e4acf[data-modern=true]{
13702
+ .bp_toolbar_module_toggleGroup--72660[data-modern=true]{
13710
13703
  --toolbar-toggle-group-gap:var(--bp-space-010);
13711
13704
  }
13712
13705
 
13713
- .bp_toolbar_module_toolbarRoot--e4acf{
13706
+ .bp_toolbar_module_toolbarRoot--72660{
13714
13707
  align-items:center;
13715
13708
  background:var(--toolbar-root-background);
13716
13709
  border:var(--toolbar-root-border);
@@ -13721,23 +13714,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13721
13714
  padding:var(--toolbar-root-padding);
13722
13715
  }
13723
13716
 
13724
- .bp_toolbar_module_scrollButtonWrapper--e4acf{
13717
+ .bp_toolbar_module_scrollButtonWrapper--72660{
13725
13718
  align-items:center;
13726
13719
  display:flex;
13727
13720
  gap:var(--toolbar-scroll-button-gap);
13728
13721
  }
13729
- .bp_toolbar_module_scrollButtonWrapper--e4acf.bp_toolbar_module_hidden--e4acf{
13722
+ .bp_toolbar_module_scrollButtonWrapper--72660.bp_toolbar_module_hidden--72660{
13730
13723
  display:none;
13731
13724
  }
13732
13725
 
13733
- .bp_toolbar_module_scrollableChildrenWrapper--e4acf{
13726
+ .bp_toolbar_module_scrollableChildrenWrapper--72660{
13734
13727
  -ms-overflow-style:none;
13735
13728
  scrollbar-width:none;
13736
13729
  }
13737
- .bp_toolbar_module_scrollableChildrenWrapper--e4acf::-webkit-scrollbar{
13730
+ .bp_toolbar_module_scrollableChildrenWrapper--72660::-webkit-scrollbar{
13738
13731
  display:none;
13739
13732
  }
13740
- .bp_toolbar_module_scrollableChildrenWrapper--e4acf{
13733
+ .bp_toolbar_module_scrollableChildrenWrapper--72660{
13741
13734
  align-items:center;
13742
13735
  display:flex;
13743
13736
  flex-grow:1;
@@ -13748,23 +13741,23 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13748
13741
  scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
13749
13742
  white-space:nowrap;
13750
13743
  }
13751
- .bp_toolbar_module_scrollableChildrenWrapper--e4acf > *{
13744
+ .bp_toolbar_module_scrollableChildrenWrapper--72660 > *{
13752
13745
  flex:none;
13753
13746
  }
13754
13747
 
13755
- .bp_toolbar_module_separator--e4acf{
13748
+ .bp_toolbar_module_separator--72660{
13756
13749
  background-color:var(--toolbar-separator-background);
13757
13750
  border-radius:var(--toolbar-separator-border-radius);
13758
13751
  height:var(--toolbar-separator-height);
13759
13752
  width:1px;
13760
13753
  }
13761
13754
 
13762
- .bp_toolbar_module_toggleGroup--e4acf{
13755
+ .bp_toolbar_module_toggleGroup--72660{
13763
13756
  display:flex;
13764
13757
  gap:var(--toolbar-toggle-group-gap);
13765
13758
  }
13766
13759
 
13767
- .bp_toolbar_module_toolbarItem--e4acf{
13760
+ .bp_toolbar_module_toolbarItem--72660{
13768
13761
  align-items:center;
13769
13762
  background:var(--toolbar-button-color, var(--toolbar-item-background));
13770
13763
  border:var(--toolbar-item-border);
@@ -13782,41 +13775,53 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13782
13775
  -webkit-user-select:none;
13783
13776
  user-select:none;
13784
13777
  }
13785
- .bp_toolbar_module_toolbarItem--e4acf[data-disabled]{
13778
+ .bp_toolbar_module_toolbarItem--72660[data-disabled]{
13786
13779
  background:var(--toolbar-item-background);
13787
13780
  opacity:var(--toolbar-item-disabled-opacity);
13788
13781
  pointer-events:none;
13789
13782
  }
13790
- .bp_toolbar_module_toolbarItem--e4acf:not([data-disabled]):focus-visible{
13783
+ .bp_toolbar_module_toolbarItem--72660:not([data-disabled]):focus-visible{
13791
13784
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--toolbar-item-focus-outline);
13792
13785
  }
13793
- .bp_toolbar_module_toolbarItem--e4acf:not([data-disabled]):hover{
13786
+ .bp_toolbar_module_toolbarItem--72660:not([data-disabled]):hover{
13794
13787
  background:var(--toolbar-button-color, var(--toolbar-item-off-hover-background));
13795
13788
  border:var(--toolbar-item-off-hover-border);
13796
13789
  }
13790
+ .bp_toolbar_module_toolbarItem--72660:not([data-disabled]):active,.bp_toolbar_module_toolbarItem--72660:not([data-disabled])[data-active]{
13791
+ background:var(--toolbar-button-color, var(--toolbar-item-off-pressed-background));
13792
+ border:var(--toolbar-item-off-pressed-border);
13793
+ }
13797
13794
 
13798
- .bp_toolbar_module_toolbarToggle--e4acf[data-state=on]{
13795
+ .bp_toolbar_module_toolbarToggle--72660[data-state=on]{
13799
13796
  background:var(--toolbar-toggle-on-pressed-background);
13800
13797
  border:var(--toolbar-toggle-on-pressed-border);
13801
13798
  }
13802
- .bp_toolbar_module_toolbarToggle--e4acf[data-state=on] svg *{
13799
+ .bp_toolbar_module_toolbarToggle--72660[data-state=on] svg *{
13803
13800
  fill:var(--toolbar-toggle-icon-fill);
13804
13801
  }
13805
- .bp_toolbar_module_toolbarToggle--e4acf[data-state=on]:not([data-disabled]):hover{
13802
+ .bp_toolbar_module_toolbarToggle--72660[data-state=on]:not([data-disabled]):hover{
13806
13803
  background:var(--toolbar-toggle-on-hover-background);
13807
13804
  border:var(--toolbar-toggle-on-hover-border);
13808
13805
  }
13806
+ .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]{
13807
+ background:var(--toolbar-toggle-on-active-background);
13808
+ border:var(--toolbar-toggle-on-active-border);
13809
+ }
13809
13810
 
13810
- .bp_toolbar_module_triggerButtonSelectedWithColor--e4acf[data-state=on] .bp_toolbar_module_dropdownIndicator--e4acf path{
13811
+ .bp_toolbar_module_triggerButtonSelectedWithColor--72660:active,.bp_toolbar_module_triggerButtonSelectedWithColor--72660[data-active]{
13812
+ background-color:var(--toolbar-button-color);
13813
+ opacity:var(--trigger-button-active-opacity, 1);
13814
+ }
13815
+ .bp_toolbar_module_triggerButtonSelectedWithColor--72660[data-state=on] .bp_toolbar_module_dropdownIndicator--72660 path{
13811
13816
  fill:var(--icon-icon-on-light);
13812
13817
  }
13813
- .bp_toolbar_module_triggerButtonSelectedWithColor--e4acf[data-state=on]:hover{
13818
+ .bp_toolbar_module_triggerButtonSelectedWithColor--72660[data-state=on]:hover{
13814
13819
  background-color:var(--toolbar-button-color);
13815
13820
  border-color:var(--toolbar-button-color);
13816
13821
  opacity:var(--trigger-button-hover-opacity);
13817
13822
  }
13818
13823
 
13819
- .bp_toolbar_module_toolbarIcon--e4acf{
13824
+ .bp_toolbar_module_toolbarIcon--72660{
13820
13825
  align-items:center;
13821
13826
  display:flex;
13822
13827
  height:var(--toolbar-icon-height);
@@ -13824,15 +13829,27 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13824
13829
  width:var(--toolbar-icon-width);
13825
13830
  }
13826
13831
 
13827
- .bp_toolbar_module_toolbarLink--e4acf{
13832
+ .bp_toolbar_module_toolbarLink--72660{
13828
13833
  color:var(--toolbar-link-color);
13829
13834
  max-width:var(--toolbar-link-max-width);
13830
13835
  padding-inline:var(--toolbar-link-padding-inline);
13831
13836
  text-decoration:none;
13832
13837
  text-indent:unset;
13833
13838
  }
13839
+ .bp_toolbar_module_toolbarLink--72660.bp_toolbar_module_toolbarItem--72660:hover{
13840
+ background:var(--toolbar-button-color, var(--toolbar-item-background));
13841
+ border:var(--toolbar-item-border);
13842
+ color:var(--toolbar-link-hover-color);
13843
+ text-decoration:underline;
13844
+ }
13845
+ .bp_toolbar_module_toolbarLink--72660.bp_toolbar_module_toolbarItem--72660:active{
13846
+ background:var(--toolbar-button-color, var(--toolbar-item-background));
13847
+ border:var(--toolbar-item-border);
13848
+ color:var(--toolbar-link-pressed-color);
13849
+ text-decoration:underline;
13850
+ }
13834
13851
 
13835
- .bp_toolbar_module_toolbarLinkText--e4acf{
13852
+ .bp_toolbar_module_toolbarLinkText--72660{
13836
13853
  display:block;
13837
13854
  min-width:0;
13838
13855
  overflow:hidden;
@@ -13840,7 +13857,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13840
13857
  white-space:nowrap;
13841
13858
  }
13842
13859
 
13843
- .bp_toolbar_module_toolbarInputContainer--e4acf{
13860
+ .bp_toolbar_module_toolbarInputContainer--72660{
13844
13861
  align-items:center;
13845
13862
  display:flex;
13846
13863
  flex:1 1 0;
@@ -13848,7 +13865,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13848
13865
  position:relative;
13849
13866
  }
13850
13867
 
13851
- .bp_toolbar_module_toolbarInputContainer--e4acf:has(.bp_toolbar_module_toolbarInput--e4acf[data-modern=false]){
13868
+ .bp_toolbar_module_toolbarInputContainer--72660:has(.bp_toolbar_module_toolbarInput--72660[data-modern=false]){
13852
13869
  --toolbar-input-height:var(--size-8);
13853
13870
  --toolbar-input-padding-block:var(--space-2);
13854
13871
  --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
13873
13890
  --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
13874
13891
  }
13875
13892
 
13876
- .bp_toolbar_module_toolbarInputContainer--e4acf:has(.bp_toolbar_module_toolbarInput--e4acf[data-modern=true]){
13893
+ .bp_toolbar_module_toolbarInputContainer--72660:has(.bp_toolbar_module_toolbarInput--72660[data-modern=true]){
13877
13894
  --toolbar-input-height:var(--bp-size-080);
13878
13895
  --toolbar-input-padding-block:var(--bp-space-020);
13879
13896
  --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
13898
13915
  --toolbar-input-icon-end-pad:calc(var(--toolbar-input-padding-inline) + var(--toolbar-input-icon-size) + var(--toolbar-input-icon-padding));
13899
13916
  }
13900
13917
 
13901
- .bp_toolbar_module_toolbarInput--e4acf{
13918
+ .bp_toolbar_module_toolbarInput--72660{
13902
13919
  background:var(--toolbar-input-background);
13903
13920
  border:var(--toolbar-input-border-width) solid var(--toolbar-input-border-color);
13904
13921
  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
13913
13930
  padding-inline:var(--toolbar-input-padding-inline);
13914
13931
  width:100%;
13915
13932
  }
13916
- .bp_toolbar_module_toolbarInput--e4acf[data-modern=false]{
13933
+ .bp_toolbar_module_toolbarInput--72660[data-modern=false]{
13917
13934
  font-family:var(--body-default-font-family);
13918
13935
  font-size:var(--body-default-font-size);
13919
13936
  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
13922
13939
  text-decoration:var(--body-default-text-decoration);
13923
13940
  text-transform:var(--body-default-text-case);
13924
13941
  }
13925
- .bp_toolbar_module_toolbarInput--e4acf[data-modern=true]{
13942
+ .bp_toolbar_module_toolbarInput--72660[data-modern=true]{
13926
13943
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
13927
13944
  font-size:var(--bp-font-size-07);
13928
13945
  font-style:normal;
@@ -13930,16 +13947,24 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
13930
13947
  letter-spacing:var(--bp-font-letter-spacing-01);
13931
13948
  line-height:var(--bp-font-line-height-05);
13932
13949
  }
13933
- .bp_toolbar_module_toolbarInput--e4acf::placeholder{
13950
+ .bp_toolbar_module_toolbarInput--72660::placeholder{
13934
13951
  color:var(--toolbar-input-placeholder-color);
13935
13952
  opacity:1;
13936
13953
  }
13937
- .bp_toolbar_module_toolbarInput--e4acf:focus-visible{
13954
+ .bp_toolbar_module_toolbarInput--72660[data-modern=true]::placeholder{
13955
+ font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
13956
+ font-size:var(--bp-font-size-05);
13957
+ font-style:normal;
13958
+ font-weight:var(--bp-font-weight-regular);
13959
+ letter-spacing:var(--bp-font-letter-spacing-01);
13960
+ line-height:var(--bp-font-line-height-04);
13961
+ }
13962
+ .bp_toolbar_module_toolbarInput--72660:focus-visible{
13938
13963
  --toolbar-input-border-offset:calc(var(--toolbar-input-focus-border-width) - var(--toolbar-input-border-width));
13939
13964
  border:var(--toolbar-input-focus-border-width) solid var(--toolbar-input-border-color-focus);
13940
13965
  padding-inline-start:calc(var(--toolbar-input-padding-inline) - var(--toolbar-input-border-offset));
13941
13966
  }
13942
- .bp_toolbar_module_toolbarInput--e4acf:disabled{
13967
+ .bp_toolbar_module_toolbarInput--72660:disabled{
13943
13968
  background:var(--toolbar-input-disabled-background);
13944
13969
  border-color:var(--toolbar-input-disabled-border-color);
13945
13970
  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
13947
13972
  cursor:default;
13948
13973
  opacity:.5;
13949
13974
  }
13950
- .bp_toolbar_module_toolbarInput--e4acf:has(+ .bp_toolbar_module_toolbarInputErrorIcon--e4acf){
13975
+ .bp_toolbar_module_toolbarInput--72660:has(+ .bp_toolbar_module_toolbarInputErrorIcon--72660){
13951
13976
  padding-inline-end:var(--toolbar-input-icon-end-pad);
13952
13977
  }
13953
- .bp_toolbar_module_toolbarInput--e4acf:hover:not(:disabled, :focus-visible, .bp_toolbar_module_toolbarInputError--e4acf){
13978
+ .bp_toolbar_module_toolbarInput--72660:hover:not(:disabled, :focus-visible, .bp_toolbar_module_toolbarInputError--72660){
13954
13979
  border-color:var(--toolbar-input-hover-border-color);
13955
13980
  }
13956
13981
 
13957
- .bp_toolbar_module_toolbarInput--e4acf.bp_toolbar_module_toolbarInputError--e4acf{
13982
+ .bp_toolbar_module_toolbarInput--72660.bp_toolbar_module_toolbarInputError--72660{
13958
13983
  --toolbar-input-error-border-offset:calc(var(--toolbar-input-error-border-width) - var(--toolbar-input-border-width));
13959
13984
  border:var(--toolbar-input-error-border-width) solid var(--toolbar-input-error-border-color);
13960
13985
  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));
13961
13986
  }
13962
13987
 
13963
- .bp_toolbar_module_toolbarInputErrorIcon--e4acf{
13988
+ .bp_toolbar_module_toolbarInputErrorIcon--72660{
13964
13989
  color:var(--toolbar-input-error-border-color);
13965
13990
  height:var(--toolbar-input-icon-size);
13966
13991
  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
13971
13996
  width:var(--toolbar-input-icon-size);
13972
13997
  }
13973
13998
 
13974
- .bp_toolbar_module_toolbarInputErrorIconHidden--e4acf{
13999
+ .bp_toolbar_module_toolbarInputErrorIconHidden--72660{
13975
14000
  visibility:hidden;
13976
14001
  }
13977
14002
 
13978
- .bp_toolbar_module_toolbarTextToggleItem--e4acf{
14003
+ .bp_toolbar_module_toolbarTextToggleItem--72660{
13979
14004
  border:var(--toolbar-text-toggle-off-border);
13980
14005
  color:var(--toolbar-text-toggle-color);
13981
14006
  padding-inline:var(--toolbar-text-toggle-padding-inline);
13982
14007
  text-indent:unset;
13983
14008
  white-space:nowrap;
13984
14009
  }
13985
- .bp_toolbar_module_toolbarTextToggleItem--e4acf:hover{
14010
+ .bp_toolbar_module_toolbarTextToggleItem--72660:hover{
13986
14011
  background:var(--toolbar-text-toggle-hover-background);
13987
14012
  border-color:var(--toolbar-text-toggle-hover-border-color);
13988
14013
  }
13989
- .bp_toolbar_module_toolbarTextToggleItem--e4acf:active{
14014
+ .bp_toolbar_module_toolbarTextToggleItem--72660:active{
13990
14015
  background:var(--toolbar-text-toggle-active-background);
13991
14016
  border-color:var(--toolbar-text-toggle-active-border-color);
13992
14017
  }
13993
- .bp_toolbar_module_toolbarTextToggleItem--e4acf[aria-checked=true]{
14018
+ .bp_toolbar_module_toolbarTextToggleItem--72660[aria-checked=true]{
13994
14019
  background:var(--toolbar-text-toggle-checked-background);
13995
14020
  border:var(--toolbar-text-toggle-checked-border);
13996
14021
  color:var(--toolbar-text-toggle-checked-color);
13997
14022
  }
13998
- .bp_toolbar_module_toolbarTextToggleItem--e4acf[aria-checked=true]:hover{
14023
+ .bp_toolbar_module_toolbarTextToggleItem--72660[aria-checked=true]:hover{
13999
14024
  background:var(--toolbar-text-toggle-checked-hover-background);
14000
14025
  border-color:var(--toolbar-text-toggle-checked-hover-border-color);
14001
14026
  }
14002
- .bp_toolbar_module_toolbarTextToggleItem--e4acf[aria-checked=true]:active{
14027
+ .bp_toolbar_module_toolbarTextToggleItem--72660[aria-checked=true]:active{
14003
14028
  background:var(--toolbar-text-toggle-checked-active-background);
14004
14029
  border-color:var(--toolbar-text-toggle-checked-active-border-color);
14005
14030
  }
@@ -0,0 +1,7 @@
1
+ import { type KeyboardEvent } from 'react';
2
+ /**
3
+ * RovingFocusGroup.Item composes its arrow-key handler on bubble-phase keydown.
4
+ * stopPropagation does not skip that handler — use capture + stopImmediatePropagation
5
+ * so text-navigation keys move the caret/selection until the field boundary is reached.
6
+ */
7
+ export declare const composeToolbarInputKeyDownCapture: (onKeyDownCapture?: (event: KeyboardEvent<HTMLInputElement>) => void) => ((event: KeyboardEvent<HTMLInputElement>) => void);
@@ -0,0 +1,41 @@
1
+ import { composeEventHandlers } from '@radix-ui/primitive';
2
+
3
+ const TEXT_NAVIGATION_KEYS = new Set(['Home', 'End', 'PageUp', 'PageDown']);
4
+ const shouldPreserveTextCaretNavigation = event => {
5
+ const {
6
+ key,
7
+ currentTarget
8
+ } = event;
9
+ if (TEXT_NAVIGATION_KEYS.has(key)) {
10
+ return true;
11
+ }
12
+ if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
13
+ return false;
14
+ }
15
+ const {
16
+ selectionStart,
17
+ selectionEnd
18
+ } = currentTarget;
19
+ if (selectionStart === null || selectionEnd === null) {
20
+ return false;
21
+ }
22
+ const valueLength = currentTarget.value.length;
23
+ if (key === 'ArrowLeft') {
24
+ return selectionStart > 0 || selectionEnd > 0;
25
+ }
26
+ return selectionStart < valueLength || selectionEnd < valueLength;
27
+ };
28
+ /**
29
+ * RovingFocusGroup.Item composes its arrow-key handler on bubble-phase keydown.
30
+ * stopPropagation does not skip that handler — use capture + stopImmediatePropagation
31
+ * so text-navigation keys move the caret/selection until the field boundary is reached.
32
+ */
33
+ const composeToolbarInputKeyDownCapture = onKeyDownCapture => {
34
+ return composeEventHandlers(onKeyDownCapture, event => {
35
+ if (shouldPreserveTextCaretNavigation(event)) {
36
+ event.nativeEvent.stopImmediatePropagation();
37
+ }
38
+ });
39
+ };
40
+
41
+ export { composeToolbarInputKeyDownCapture };
@@ -1,2 +1,7 @@
1
1
  import { type ToolbarInputProps } from './types';
2
+ /**
3
+ * Register with native Toolbar.Root roving focus via Toolbar.Button asChild (same
4
+ * Item + scope wiring as built-in controls). Capture keydown keeps caret movement
5
+ * inside the field for arrow/home/end keys.
6
+ */
2
7
  export declare const ToolbarInput: import("react").ForwardRefExoticComponent<ToolbarInputProps & import("react").RefAttributes<HTMLInputElement>>;
@@ -1,15 +1,25 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
3
+ import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
3
4
  import clsx from 'clsx';
4
5
  import { forwardRef } from 'react';
5
6
  import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
+ import { composeToolbarInputKeyDownCapture } from './toolbar-input-keydown.js';
6
8
  import styles from './toolbar.module.js';
7
9
 
10
+ /**
11
+ * Register with native Toolbar.Root roving focus via Toolbar.Button asChild (same
12
+ * Item + scope wiring as built-in controls). Capture keydown keeps caret movement
13
+ * inside the field for arrow/home/end keys.
14
+ */
8
15
  const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
9
16
  const {
10
17
  className,
11
18
  error,
12
19
  disabled,
20
+ onKeyDown,
21
+ onKeyDownCapture,
22
+ type = 'text',
13
23
  ...rest
14
24
  } = props;
15
25
  const {
@@ -18,13 +28,20 @@ const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
18
28
  const showError = error && !disabled;
19
29
  return jsxs("div", {
20
30
  className: styles.toolbarInputContainer,
21
- children: [jsx("input", {
22
- ...rest,
23
- ref: forwardedRef,
24
- className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
25
- "data-modern": enableModernizedComponents ? 'true' : 'false',
31
+ children: [jsx(ToolbarPrimitive.Button, {
32
+ asChild: true,
26
33
  disabled: disabled,
27
- "aria-invalid": showError || undefined
34
+ children: jsx("input", {
35
+ ...rest,
36
+ ref: forwardedRef,
37
+ type: type,
38
+ className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
39
+ "data-modern": enableModernizedComponents ? 'true' : 'false',
40
+ disabled: disabled,
41
+ "aria-invalid": showError || undefined,
42
+ onKeyDown: onKeyDown,
43
+ onKeyDownCapture: composeToolbarInputKeyDownCapture(onKeyDownCapture)
44
+ })
28
45
  }), jsx(AlertCircle, {
29
46
  "aria-hidden": "true",
30
47
  className: clsx(styles.toolbarInputErrorIcon, !showError && styles.toolbarInputErrorIconHidden),
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- 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"};
2
+ 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"};
3
3
 
4
4
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "15.7.1",
3
+ "version": "15.8.1",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,8 +47,9 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.21",
49
49
  "@ariakit/react-core": "0.4.21",
50
- "@box/blueprint-web-assets": "^4.124.1",
50
+ "@box/blueprint-web-assets": "^4.124.3",
51
51
  "@internationalized/date": "^3.12.0",
52
+ "@radix-ui/primitive": "1.0.1",
52
53
  "@radix-ui/react-accordion": "1.1.2",
53
54
  "@radix-ui/react-checkbox": "1.0.4",
54
55
  "@radix-ui/react-collapsible": "1.0.3",
@@ -77,7 +78,7 @@
77
78
  "type-fest": "^3.2.0"
78
79
  },
79
80
  "devDependencies": {
80
- "@box/storybook-utils": "^0.21.1",
81
+ "@box/storybook-utils": "^0.21.3",
81
82
  "@figma/code-connect": "1.4.4",
82
83
  "@types/react": "^18.0.0",
83
84
  "@types/react-dom": "^18.0.0",