@box/blueprint-web 16.16.1 → 16.17.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.
@@ -38,7 +38,7 @@ export declare const BLUEPRINT_CONFIGURATION_SPLITS: {
38
38
  */
39
39
  export declare const ANIMATED_COMPONENTS_BY_PHASE: {
40
40
  readonly phase1: readonly ["Button", "IconButton", "DropdownMenu", "Tooltip", "Popover", "SplitButton", "CardTooltip", "NavigationMenu", "Modal", "TextButton", "ContextMenu"];
41
- readonly phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup", "InlineError"];
41
+ readonly phase2: readonly ["TriggerButton", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup", "InlineError"];
42
42
  readonly phase3: readonly [];
43
43
  };
44
44
  /**
@@ -40,7 +40,7 @@ const BLUEPRINT_CONFIGURATION_SPLITS = deepFreeze({
40
40
  */
41
41
  const ANIMATED_COMPONENTS_BY_PHASE = deepFreeze({
42
42
  phase1: ['Button', 'IconButton', 'DropdownMenu', 'Tooltip', 'Popover', 'SplitButton', 'CardTooltip', 'NavigationMenu', 'Modal', 'TextButton', 'ContextMenu'],
43
- phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup', 'InlineError'],
43
+ phase2: ['TriggerButton', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup', 'InlineError'],
44
44
  phase3: []
45
45
  });
46
46
  /**
@@ -14438,7 +14438,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14438
14438
  width:fit-content;
14439
14439
  }
14440
14440
 
14441
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_secondary--22220{
14441
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_secondary--35467{
14442
14442
  --trigger-button-background:var(--surface-dropdown-secondary-surface);
14443
14443
  --trigger-button-border:var(--border-1) solid var(--border-cta-border-secondary);
14444
14444
  --trigger-button-focus-or-hover-background:var(--surface-dropdown-secondary-surface-hover);
@@ -14447,11 +14447,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14447
14447
  --trigger-button-active-background:var(--surface-dropdown-secondary-surface-pressed);
14448
14448
  --trigger-button-active-border:var(--border-1) solid var(--border-cta-border-secondary);
14449
14449
  }
14450
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_tertiary--22220{
14450
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_tertiary--35467{
14451
14451
  --trigger-button-focus-or-hover-background:var(--surface-dropdown-primary-surface-hover);
14452
14452
  --trigger-button-active-background:var(--surface-dropdown-primary-surface-pressed);
14453
14453
  }
14454
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_extraSmall--22220{
14454
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_extraSmall--35467{
14455
14455
  --button-xsmall-gap:var(--space-1);
14456
14456
  --button-xsmall-height:var(--size-6);
14457
14457
  --button-xsmall-padding:0.375rem var(--space-1);
@@ -14463,14 +14463,14 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14463
14463
  text-decoration:var(--body-default-text-decoration);
14464
14464
  text-transform:var(--body-default-text-case);
14465
14465
  }
14466
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_small--22220{
14466
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_small--35467{
14467
14467
  --button-small-padding:0.375rem var(--space-2);
14468
14468
  }
14469
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_large--22220{
14469
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_large--35467{
14470
14470
  --button-large-padding:0.375rem var(--space-3) 0.375rem var(--space-2);
14471
14471
  }
14472
14472
 
14473
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_secondary--22220{
14473
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_secondary--35467{
14474
14474
  --trigger-button-background:var(--bp-surface-dropdown-secondary-surface);
14475
14475
  --trigger-button-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
14476
14476
  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-secondary-surface-hover);
@@ -14479,11 +14479,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14479
14479
  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
14480
14480
  --trigger-button-active-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
14481
14481
  }
14482
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_tertiary--22220{
14482
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_tertiary--35467{
14483
14483
  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-tertiary-surface-hover);
14484
14484
  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
14485
14485
  }
14486
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_extraSmall--22220{
14486
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_extraSmall--35467{
14487
14487
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
14488
14488
  font-size:var(--bp-font-size-05);
14489
14489
  font-style:normal;
@@ -14491,7 +14491,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14491
14491
  letter-spacing:var(--bp-font-letter-spacing-01);
14492
14492
  line-height:var(--bp-font-line-height-04);
14493
14493
  }
14494
- :where(body.is-inter-font) .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_extraSmall--22220{
14494
+ :where(body.is-inter-font) .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_extraSmall--35467{
14495
14495
  font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
14496
14496
  font-size:.875rem;
14497
14497
  font-style:normal;
@@ -14502,64 +14502,64 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14502
14502
  text-transform:none;
14503
14503
  }
14504
14504
 
14505
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_extraSmall--22220{
14505
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_extraSmall--35467{
14506
14506
  --button-xsmall-gap:var(--bp-space-010);
14507
14507
  --button-xsmall-height:var(--bp-size-060);
14508
14508
  }
14509
14509
 
14510
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220{
14510
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467{
14511
14511
  background:var(--trigger-button-background);
14512
14512
  border:var(--trigger-button-border);
14513
14513
  }
14514
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220:not(:disabled):hover,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220:not(:disabled)[data-focus-visible]{
14514
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467:not(:disabled):hover,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467:not(:disabled)[data-focus-visible]{
14515
14515
  background:var(--trigger-button-focus-or-hover-background);
14516
14516
  border:var(--trigger-button-focus-or-hover-border);
14517
14517
  }
14518
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220:not(:disabled):active{
14518
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467:not(:disabled):active{
14519
14519
  background:var(--trigger-button-active-background);
14520
14520
  border:var(--trigger-button-active-border);
14521
14521
  }
14522
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220{
14522
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467{
14523
14523
  background:var(--trigger-button-background);
14524
14524
  border:var(--trigger-button-border);
14525
14525
  }
14526
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220:not(:disabled):hover,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220:not(:disabled)[data-focus-visible]{
14526
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467:not(:disabled):hover,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467:not(:disabled)[data-focus-visible]{
14527
14527
  background:var(--trigger-button-focus-or-hover-background);
14528
14528
  }
14529
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220:not(:disabled):active{
14529
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467:not(:disabled):active{
14530
14530
  background:var(--trigger-button-active-background);
14531
14531
  }
14532
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220{
14532
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467{
14533
14533
  border:var(--trigger-button-focus-or-hover-border-xsmall);
14534
14534
  gap:var(--button-xsmall-gap);
14535
14535
  min-height:var(--button-xsmall-height);
14536
14536
  }
14537
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220:not(:disabled):active,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220:not(:disabled):hover,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220:not(:disabled)[data-focus-visible]{
14537
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467:not(:disabled):active,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467:not(:disabled):hover,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467:not(:disabled)[data-focus-visible]{
14538
14538
  border:var(--trigger-button-focus-or-hover-border-xsmall);
14539
14539
  }
14540
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220.bp_trigger_button_module_startIcon--22220{
14540
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467.bp_trigger_button_module_startIcon--35467{
14541
14541
  padding-left:.625rem;
14542
14542
  }
14543
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_small--22220{
14543
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_small--35467{
14544
14544
  padding:var(--button-small-padding);
14545
14545
  }
14546
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_small--22220.bp_trigger_button_module_startIcon--22220{
14546
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_small--35467.bp_trigger_button_module_startIcon--35467{
14547
14547
  padding-left:.625rem;
14548
14548
  }
14549
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_large--22220{
14549
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_large--35467{
14550
14550
  padding:var(--button-large-padding);
14551
14551
  }
14552
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_large--22220.bp_trigger_button_module_startIcon--22220{
14552
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_large--35467.bp_trigger_button_module_startIcon--35467{
14553
14553
  padding-left:.625rem;
14554
14554
  }
14555
- .bp_trigger_button_module_triggerButton--22220 .bp_trigger_button_module_labelEllipsis--22220{
14555
+ .bp_trigger_button_module_triggerButton--35467 .bp_trigger_button_module_labelEllipsis--35467{
14556
14556
  flex:1 1 0;
14557
14557
  min-width:0;
14558
14558
  overflow:hidden;
14559
14559
  text-overflow:ellipsis;
14560
14560
  white-space:nowrap;
14561
14561
  }
14562
- .bp_trigger_button_module_triggerButton--22220 .bp_trigger_button_module_labelWrap--22220{
14562
+ .bp_trigger_button_module_triggerButton--35467 .bp_trigger_button_module_labelWrap--35467{
14563
14563
  word-wrap:break-word;
14564
14564
  flex:1 1 0;
14565
14565
  min-width:0;
@@ -14567,6 +14567,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14567
14567
  text-align:left;
14568
14568
  white-space:normal;
14569
14569
  }
14570
+
14571
+ .bp_trigger_button_module_triggerButton--35467[data-bp-animated=true][data-bp-trigger-animated=true]:not(:disabled, [aria-disabled=true]) .bp_trigger_button_module_iconCaret--35467{
14572
+ transition-duration:var(--bp-duration-short);
14573
+ transition-property:transform;
14574
+ transition-timing-function:var(--bp-curve-extra-small-on);
14575
+ }
14576
+ .bp_trigger_button_module_triggerButton--35467[data-bp-animated=true][data-bp-trigger-animated=true]:not(:disabled, [aria-disabled=true]):hover:not([aria-expanded=true], [data-state=open]) .bp_trigger_button_module_iconCaret--35467{
14577
+ transform:translateY(var(--bp-size-005));
14578
+ }
14570
14579
  .bp_styles_module_splitButton--a3588[data-modern=false]{
14571
14580
  --split-button-left-width:100%;
14572
14581
  --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);
@@ -14438,7 +14438,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14438
14438
  width:fit-content;
14439
14439
  }
14440
14440
 
14441
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_secondary--22220{
14441
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_secondary--35467{
14442
14442
  --trigger-button-background:var(--surface-dropdown-secondary-surface);
14443
14443
  --trigger-button-border:var(--border-1) solid var(--border-cta-border-secondary);
14444
14444
  --trigger-button-focus-or-hover-background:var(--surface-dropdown-secondary-surface-hover);
@@ -14447,11 +14447,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14447
14447
  --trigger-button-active-background:var(--surface-dropdown-secondary-surface-pressed);
14448
14448
  --trigger-button-active-border:var(--border-1) solid var(--border-cta-border-secondary);
14449
14449
  }
14450
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_tertiary--22220{
14450
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_tertiary--35467{
14451
14451
  --trigger-button-focus-or-hover-background:var(--surface-dropdown-primary-surface-hover);
14452
14452
  --trigger-button-active-background:var(--surface-dropdown-primary-surface-pressed);
14453
14453
  }
14454
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_extraSmall--22220{
14454
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_extraSmall--35467{
14455
14455
  --button-xsmall-gap:var(--space-1);
14456
14456
  --button-xsmall-height:var(--size-6);
14457
14457
  --button-xsmall-padding:0.375rem var(--space-1);
@@ -14463,14 +14463,14 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14463
14463
  text-decoration:var(--body-default-text-decoration);
14464
14464
  text-transform:var(--body-default-text-case);
14465
14465
  }
14466
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_small--22220{
14466
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_small--35467{
14467
14467
  --button-small-padding:0.375rem var(--space-2);
14468
14468
  }
14469
- .bp_trigger_button_module_triggerButton--22220[data-modern=false].bp_trigger_button_module_large--22220{
14469
+ .bp_trigger_button_module_triggerButton--35467[data-modern=false].bp_trigger_button_module_large--35467{
14470
14470
  --button-large-padding:0.375rem var(--space-3) 0.375rem var(--space-2);
14471
14471
  }
14472
14472
 
14473
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_secondary--22220{
14473
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_secondary--35467{
14474
14474
  --trigger-button-background:var(--bp-surface-dropdown-secondary-surface);
14475
14475
  --trigger-button-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
14476
14476
  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-secondary-surface-hover);
@@ -14479,11 +14479,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14479
14479
  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
14480
14480
  --trigger-button-active-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
14481
14481
  }
14482
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_tertiary--22220{
14482
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_tertiary--35467{
14483
14483
  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-tertiary-surface-hover);
14484
14484
  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
14485
14485
  }
14486
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_extraSmall--22220{
14486
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_extraSmall--35467{
14487
14487
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
14488
14488
  font-size:var(--bp-font-size-05);
14489
14489
  font-style:normal;
@@ -14491,7 +14491,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14491
14491
  letter-spacing:var(--bp-font-letter-spacing-01);
14492
14492
  line-height:var(--bp-font-line-height-04);
14493
14493
  }
14494
- :where(body.is-inter-font) .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_extraSmall--22220{
14494
+ :where(body.is-inter-font) .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_extraSmall--35467{
14495
14495
  font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
14496
14496
  font-size:.875rem;
14497
14497
  font-style:normal;
@@ -14502,64 +14502,64 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14502
14502
  text-transform:none;
14503
14503
  }
14504
14504
 
14505
- .bp_trigger_button_module_triggerButton--22220[data-modern=true].bp_trigger_button_module_extraSmall--22220{
14505
+ .bp_trigger_button_module_triggerButton--35467[data-modern=true].bp_trigger_button_module_extraSmall--35467{
14506
14506
  --button-xsmall-gap:var(--bp-space-010);
14507
14507
  --button-xsmall-height:var(--bp-size-060);
14508
14508
  }
14509
14509
 
14510
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220{
14510
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467{
14511
14511
  background:var(--trigger-button-background);
14512
14512
  border:var(--trigger-button-border);
14513
14513
  }
14514
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220:not(:disabled):hover,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220:not(:disabled)[data-focus-visible]{
14514
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467:not(:disabled):hover,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467:not(:disabled)[data-focus-visible]{
14515
14515
  background:var(--trigger-button-focus-or-hover-background);
14516
14516
  border:var(--trigger-button-focus-or-hover-border);
14517
14517
  }
14518
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_secondary--22220:not(:disabled):active{
14518
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_secondary--35467:not(:disabled):active{
14519
14519
  background:var(--trigger-button-active-background);
14520
14520
  border:var(--trigger-button-active-border);
14521
14521
  }
14522
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220{
14522
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467{
14523
14523
  background:var(--trigger-button-background);
14524
14524
  border:var(--trigger-button-border);
14525
14525
  }
14526
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220:not(:disabled):hover,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220:not(:disabled)[data-focus-visible]{
14526
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467:not(:disabled):hover,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467:not(:disabled)[data-focus-visible]{
14527
14527
  background:var(--trigger-button-focus-or-hover-background);
14528
14528
  }
14529
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_tertiary--22220:not(:disabled):active{
14529
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_tertiary--35467:not(:disabled):active{
14530
14530
  background:var(--trigger-button-active-background);
14531
14531
  }
14532
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220{
14532
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467{
14533
14533
  border:var(--trigger-button-focus-or-hover-border-xsmall);
14534
14534
  gap:var(--button-xsmall-gap);
14535
14535
  min-height:var(--button-xsmall-height);
14536
14536
  }
14537
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220:not(:disabled):active,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220:not(:disabled):hover,.bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220:not(:disabled)[data-focus-visible]{
14537
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467:not(:disabled):active,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467:not(:disabled):hover,.bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467:not(:disabled)[data-focus-visible]{
14538
14538
  border:var(--trigger-button-focus-or-hover-border-xsmall);
14539
14539
  }
14540
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_extraSmall--22220.bp_trigger_button_module_startIcon--22220{
14540
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_extraSmall--35467.bp_trigger_button_module_startIcon--35467{
14541
14541
  padding-left:.625rem;
14542
14542
  }
14543
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_small--22220{
14543
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_small--35467{
14544
14544
  padding:var(--button-small-padding);
14545
14545
  }
14546
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_small--22220.bp_trigger_button_module_startIcon--22220{
14546
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_small--35467.bp_trigger_button_module_startIcon--35467{
14547
14547
  padding-left:.625rem;
14548
14548
  }
14549
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_large--22220{
14549
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_large--35467{
14550
14550
  padding:var(--button-large-padding);
14551
14551
  }
14552
- .bp_trigger_button_module_triggerButton--22220.bp_trigger_button_module_large--22220.bp_trigger_button_module_startIcon--22220{
14552
+ .bp_trigger_button_module_triggerButton--35467.bp_trigger_button_module_large--35467.bp_trigger_button_module_startIcon--35467{
14553
14553
  padding-left:.625rem;
14554
14554
  }
14555
- .bp_trigger_button_module_triggerButton--22220 .bp_trigger_button_module_labelEllipsis--22220{
14555
+ .bp_trigger_button_module_triggerButton--35467 .bp_trigger_button_module_labelEllipsis--35467{
14556
14556
  flex:1 1 0;
14557
14557
  min-width:0;
14558
14558
  overflow:hidden;
14559
14559
  text-overflow:ellipsis;
14560
14560
  white-space:nowrap;
14561
14561
  }
14562
- .bp_trigger_button_module_triggerButton--22220 .bp_trigger_button_module_labelWrap--22220{
14562
+ .bp_trigger_button_module_triggerButton--35467 .bp_trigger_button_module_labelWrap--35467{
14563
14563
  word-wrap:break-word;
14564
14564
  flex:1 1 0;
14565
14565
  min-width:0;
@@ -14567,6 +14567,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
14567
14567
  text-align:left;
14568
14568
  white-space:normal;
14569
14569
  }
14570
+
14571
+ .bp_trigger_button_module_triggerButton--35467[data-bp-animated=true][data-bp-trigger-animated=true]:not(:disabled, [aria-disabled=true]) .bp_trigger_button_module_iconCaret--35467{
14572
+ transition-duration:var(--bp-duration-short);
14573
+ transition-property:transform;
14574
+ transition-timing-function:var(--bp-curve-extra-small-on);
14575
+ }
14576
+ .bp_trigger_button_module_triggerButton--35467[data-bp-animated=true][data-bp-trigger-animated=true]:not(:disabled, [aria-disabled=true]):hover:not([aria-expanded=true], [data-state=open]) .bp_trigger_button_module_iconCaret--35467{
14577
+ transform:translateY(var(--bp-size-005));
14578
+ }
14570
14579
  .bp_styles_module_splitButton--a3588[data-modern=false]{
14571
14580
  --split-button-left-width:100%;
14572
14581
  --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);
@@ -6,8 +6,14 @@ export type TriggerButtonProps = Omit<BaseButtonProps, 'size'> & {
6
6
  label?: string;
7
7
  /** Icon to show up at the start of the trigger button */
8
8
  startIcon?: BaseButtonIconProps['icon'];
9
- /** Direction of caret icon */
10
- caretDirection: 'up' | 'down';
9
+ /**
10
+ * Direction of caret icon.
11
+ *
12
+ * @deprecated Prefer keeping the caret pointing down. Open state should not
13
+ * flip the caret; still supported for backward compatibility.
14
+ * @default 'down'
15
+ */
16
+ caretDirection?: 'up' | 'down';
11
17
  /** The size of the trigger button */
12
18
  size?: TriggerButtonSize;
13
19
  /** Controls how the label handles overflow. 'ellipsis' ellipsizes to one line with a tooltip; 'wrap' allows wrapping. */
@@ -3,6 +3,9 @@ import { CaretUp, CaretDown } from '@box/blueprint-web-assets/icons/Fill';
3
3
  import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
4
4
  import clsx from 'clsx';
5
5
  import { forwardRef, useRef } from 'react';
6
+ import '../blueprint-configuration-context/blueprint-configuration-context.js';
7
+ import '../blueprint-configuration-context/consts.js';
8
+ import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
6
9
  import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
10
  import { BaseButton } from '../primitives/base-button/index.js';
8
11
  import { TooltipWrapper } from '../utils/TooltipWrapper.js';
@@ -20,7 +23,7 @@ const buttonSizeToStartIconSizeMap = {
20
23
  */
21
24
  const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
22
25
  const {
23
- caretDirection,
26
+ caretDirection = 'down',
24
27
  label,
25
28
  overflow = 'default',
26
29
  startIcon,
@@ -37,6 +40,10 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
37
40
  const {
38
41
  enableModernizedComponents
39
42
  } = useBlueprintModernization();
43
+ const {
44
+ componentsWithAnimationEnabled
45
+ } = useBlueprintConfiguration();
46
+ const isAnimationEnabled = componentsWithAnimationEnabled.includes('TriggerButton');
40
47
  const labelRef = useRef(null);
41
48
  const isEllipsized = useIsEllipsized(labelRef);
42
49
  // Map extraSmall to small for BaseButton to accept the extraSmall size, but apply our custom styling. BaseButton does not support extraSmall size.
@@ -50,6 +57,7 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
50
57
  size: baseButtonSize,
51
58
  variant: variant,
52
59
  ...rest,
60
+ "data-bp-trigger-animated": isAnimationEnabled ? 'true' : 'false',
53
61
  children: [startIcon && jsx(BaseButton.Icon, {
54
62
  className: styles.startIcon,
55
63
  icon: startIcon,
@@ -67,8 +75,10 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
67
75
  }),
68
76
  children: label
69
77
  }), enableModernizedComponents ? jsx(BaseButton.Icon, {
78
+ className: styles.iconCaret,
70
79
  icon: caretDirection === 'up' ? ChevronUp : ChevronDown
71
80
  }) : jsx(BaseButton.Icon, {
81
+ className: styles.iconCaret,
72
82
  icon: caretDirection === 'up' ? CaretUp : CaretDown
73
83
  })]
74
84
  });
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--22220","secondary":"bp_trigger_button_module_secondary--22220","tertiary":"bp_trigger_button_module_tertiary--22220","extraSmall":"bp_trigger_button_module_extraSmall--22220","small":"bp_trigger_button_module_small--22220","large":"bp_trigger_button_module_large--22220","startIcon":"bp_trigger_button_module_startIcon--22220","labelEllipsis":"bp_trigger_button_module_labelEllipsis--22220","labelWrap":"bp_trigger_button_module_labelWrap--22220"};
2
+ var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--35467","secondary":"bp_trigger_button_module_secondary--35467","tertiary":"bp_trigger_button_module_tertiary--35467","extraSmall":"bp_trigger_button_module_extraSmall--35467","small":"bp_trigger_button_module_small--35467","large":"bp_trigger_button_module_large--35467","startIcon":"bp_trigger_button_module_startIcon--35467","labelEllipsis":"bp_trigger_button_module_labelEllipsis--35467","labelWrap":"bp_trigger_button_module_labelWrap--35467","iconCaret":"bp_trigger_button_module_iconCaret--35467"};
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": "16.16.1",
3
+ "version": "16.17.1",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -50,7 +50,7 @@
50
50
  "dependencies": {
51
51
  "@ariakit/react": "0.4.21",
52
52
  "@ariakit/react-core": "0.4.21",
53
- "@box/blueprint-web-assets": "^5.6.5",
53
+ "@box/blueprint-web-assets": "^5.6.7",
54
54
  "@internationalized/date": "^3.12.0",
55
55
  "@radix-ui/react-accordion": "1.1.2",
56
56
  "@radix-ui/react-checkbox": "1.0.4",
@@ -79,7 +79,7 @@
79
79
  "type-fest": "^3.2.0"
80
80
  },
81
81
  "devDependencies": {
82
- "@box/storybook-utils": "^1.2.5",
82
+ "@box/storybook-utils": "^1.2.7",
83
83
  "@figma/code-connect": "1.4.4",
84
84
  "@types/react": "^18.0.0",
85
85
  "@types/react-dom": "^18.0.0",