@box/blueprint-web 14.23.0 → 14.24.0

package/dist/lib-esm/index.css

@@ -13007,6 +13007,309 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_time_picker_module_timePicker--41158 .bp_time_picker_module_inlineError--41158{
   margin-block-start:var(--time-picker-inline-error-margin-top);
 }
+.bp_toolbar_module_dropdownIndicator--5aae4.bp_toolbar_module_invertCaret--5aae4{
+  transform:rotate(.5turn);
+}
+
+.bp_toolbar_module_toolbarRoot--5aae4[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);
+  --toolbar-root-border:var(--border-1) solid var(--border-card-border);
+  --toolbar-root-border-radius:var(--radius-4);
+  --toolbar-root-box-shadow:var(--dropshadow-3);
+  --toolbar-scroll-button-gap:var(--space-1);
+  --toolbar-scrollable-children-gap:var(--space-1);
+  --toolbar-scrollable-children-padding:calc(var(--space-1) - var(--border-1));
+  --toolbar-scrollable-children-scroll-padding:calc(var(--space-1) - var(--border-1));
+  --toolbar-separator-height:var(--size-6);
+  --toolbar-separator-background:var(--border-divider-border);
+  --toolbar-separator-border-radius:var(--radius-2);
+}
+
+.bp_toolbar_module_toolbarRoot--5aae4[data-modern=true]{
+  --box-shadow:0 4px 12px 0 #0000001a;
+  --toolbar-root-gap:var(--bp-space-010);
+  --toolbar-root-padding:var(--bp-space-010);
+  --toolbar-root-background:var(--bp-surface-toolbar-surface);
+  --toolbar-root-border:var(--bp-border-01) solid var(--bp-border-toolbar-border);
+  --toolbar-root-border-radius:var(--bp-radius-10);
+  --toolbar-root-box-shadow:var(--box-shadow);
+  --toolbar-scroll-button-gap:var(--bp-space-010);
+  --toolbar-scrollable-children-gap:var(--bp-space-010);
+  --toolbar-scrollable-children-padding:var(--bp-space-010);
+  --toolbar-scrollable-children-scroll-padding:var(--bp-space-010);
+  --toolbar-separator-height:var(--bp-size-060);
+  --toolbar-separator-background:var(--bp-border-divider-border);
+  --toolbar-separator-border-radius:var(--bp-radius-03);
+  --toolbar-toggle-group-gap:var(--bp-space-010);
+}
+.bp_toolbar_module_toolbarRoot--5aae4[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--5aae4{
+  --toolbar-root-padding:0;
+}
+
+.bp_toolbar_module_toolbarItem--5aae4[data-modern=false]{
+  --toolbar-item-min-width:var(--size-8);
+  --toolbar-item-min-height:var(--size-8);
+  --toolbar-item-text-indent:var(--space-1);
+  --toolbar-item-background:var(--surface-toggle-surface);
+  --toolbar-item-border:var(--border-1) solid #0000;
+  --toolbar-item-border-radius:var(--radius-2);
+  --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-focus-outline:var(--outline-focus-on-light);
+  --toolbar-item-disabled-opacity:.3;
+  --toolbar-toggle-on-pressed-border:none;
+  --toolbar-toggle-on-pressed-background:var(--surface-toggle-surface-pressed);
+  --toolbar-toggle-icon-fill:var(--icon-icon-on-dark);
+  --toolbar-toggle-on-hover-background:var(--surface-toggle-surface-on-hover);
+  --toolbar-toggle-on-hover-border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
+  --toolbar-icon-width:var(--size-5);
+  --toolbar-icon-height:var(--size-5);
+  --toolbar-item-text-color:var(--text-text-on-light);
+  --toolbar-text-toggle-color:var(--text-text-on-light);
+  --toolbar-text-toggle-off-border:var(--border-1) solid var(--border-toggletext-border-off);
+  --toolbar-text-toggle-padding-inline:var(--space-2);
+  --toolbar-text-toggle-hover-background:var(--surface-toggle-surface-off-hover);
+  --toolbar-text-toggle-hover-border-color:var(--border-toggletext-border-off-hover);
+  --toolbar-text-toggle-active-background:var(--surface-toggle-surface-off-pressed);
+  --toolbar-text-toggle-active-border-color:var(--border-toggletext-border-off-pressed);
+  --toolbar-text-toggle-checked-color:var(--text-toggletext-text);
+  --toolbar-text-toggle-checked-background:var(--surface-toggletext-surface-on);
+  --toolbar-text-toggle-checked-border:var(--border-1) solid var(--border-toggletext-border-on);
+  --toolbar-text-toggle-checked-hover-background:var(--surface-toggletext-surface-on-hover);
+  --toolbar-text-toggle-checked-hover-border-color:var(--border-toggletext-border-on-hover);
+  --toolbar-text-toggle-checked-active-background:var(--surface-toggletext-surface-on-pressed);
+  --toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
+  --trigger-button-hover-opacity:.7;
+}
+.bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--5aae4{
+  font-family:var(--body-default-font-family);
+  font-size:var(--body-default-font-size);
+  font-weight:var(--body-default-font-weight);
+  letter-spacing:var(--body-default-letter-spacing);
+  line-height:var(--body-default-line-height);
+  text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+}
+
+.bp_toolbar_module_toolbarItem--5aae4[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);
+  --toolbar-item-background:var(--bp-surface-toggle-surface);
+  --toolbar-item-border:var(--bp-border-01) solid #0000;
+  --toolbar-item-border-radius:var(--bp-radius-10);
+  --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-focus-outline:var(--bp-outline-focus-on-light);
+  --toolbar-item-disabled-opacity:.3;
+  --toolbar-toggle-on-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
+  --toolbar-toggle-on-pressed-background:var(--bp-surface-toggle-surface-on);
+  --toolbar-toggle-icon-fill:var(--bp-icon-icon-blue);
+  --toolbar-toggle-on-hover-background:var(--bp-surface-toggle-surface-on-hover);
+  --toolbar-toggle-on-hover-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
+  --toolbar-icon-width:var(--bp-size-050);
+  --toolbar-icon-height:var(--bp-size-050);
+  --toolbar-item-text-color:var(--bp-text-text-on-light);
+  --toolbar-text-toggle-color:var(--bp-text-text-on-light);
+  --toolbar-text-toggle-off-border:var(--bp-border-01) solid var(--bp-border-toggle-text-border-off);
+  --toolbar-text-toggle-padding-inline:var(--bp-space-020);
+  --toolbar-text-toggle-hover-background:var(--bp-surface-toggle-surface-off-hover);
+  --toolbar-text-toggle-hover-border-color:var(--bp-border-toggle-text-border-off-hover);
+  --toolbar-text-toggle-active-background:var(--bp-surface-toggle-text-surface-off-pressed);
+  --toolbar-text-toggle-active-border-color:var(--bp-border-toggle-text-border-off-pressed);
+  --toolbar-text-toggle-checked-color:var(--bp-text-toggle-text-text);
+  --toolbar-text-toggle-checked-background:var(--bp-surface-toggle-text-surface-on);
+  --toolbar-text-toggle-checked-border:var(--bp-border-01) solid var(--bp-border-toggle-text-border-on);
+  --toolbar-text-toggle-checked-hover-background:var(--bp-surface-toggle-text-surface-on-hover);
+  --toolbar-text-toggle-checked-hover-border-color:var(--bp-border-toggle-text-border-on-hover);
+  --toolbar-text-toggle-checked-active-background:var(--bp-surface-toggle-text-surface-on-pressed);
+  --toolbar-text-toggle-checked-active-border-color:var(--bp-border-toggle-text-border-on-pressed);
+  --trigger-button-hover-opacity:.65;
+  --trigger-button-active-opacity:.8;
+}
+.bp_toolbar_module_toolbarItem--5aae4[data-modern=true]:active,.bp_toolbar_module_toolbarItem--5aae4[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--5aae4[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--5aae4[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--5aae4[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--5aae4{
+  transform:rotate(1turn);
+}
+.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-active]{
+  background-color:var(--toolbar-button-color);
+  opacity:var(--trigger-button-active-opacity);
+}
+.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[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--5aae4[data-modern=true].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--5aae4{
+  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;
+  font-weight:var(--bp-font-weight-regular);
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-05);
+}
+
+.bp_toolbar_module_toggleGroup--5aae4[data-modern=false]{
+  --toolbar-toggle-group-gap:var(--space-1);
+}
+
+.bp_toolbar_module_toggleGroup--5aae4[data-modern=true]{
+  --toolbar-toggle-group-gap:var(--bp-space-010);
+}
+
+.bp_toolbar_module_toolbarRoot--5aae4{
+  align-items:center;
+  background:var(--toolbar-root-background);
+  border:var(--toolbar-root-border);
+  border-radius:var(--toolbar-root-border-radius);
+  box-shadow:var(--toolbar-root-box-shadow);
+  display:flex;
+  gap:var(--toolbar-root-gap);
+  padding:var(--toolbar-root-padding);
+}
+
+.bp_toolbar_module_scrollButtonWrapper--5aae4{
+  align-items:center;
+  display:flex;
+  gap:var(--toolbar-scroll-button-gap);
+}
+.bp_toolbar_module_scrollButtonWrapper--5aae4.bp_toolbar_module_hidden--5aae4{
+  display:none;
+}
+
+.bp_toolbar_module_scrollableChildrenWrapper--5aae4{
+  -ms-overflow-style:none;
+  scrollbar-width:none;
+}
+.bp_toolbar_module_scrollableChildrenWrapper--5aae4::-webkit-scrollbar{
+  display:none;
+}
+.bp_toolbar_module_scrollableChildrenWrapper--5aae4{
+  align-items:center;
+  display:flex;
+  flex-grow:1;
+  gap:var(--toolbar-scrollable-children-gap);
+  overflow-x:auto;
+  padding:var(--toolbar-scrollable-children-padding);
+  scroll-behavior:smooth;
+  scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
+  white-space:nowrap;
+}
+.bp_toolbar_module_scrollableChildrenWrapper--5aae4 > *{
+  flex:none;
+}
+
+.bp_toolbar_module_separator--5aae4{
+  background-color:var(--toolbar-separator-background);
+  border-radius:var(--toolbar-separator-border-radius);
+  height:var(--toolbar-separator-height);
+  width:1px;
+}
+
+.bp_toolbar_module_toggleGroup--5aae4{
+  display:flex;
+  gap:var(--toolbar-toggle-group-gap);
+}
+
+.bp_toolbar_module_toolbarItem--5aae4{
+  align-items:center;
+  background:var(--toolbar-button-color, var(--toolbar-item-background));
+  border:var(--toolbar-item-border);
+  border-radius:var(--toolbar-item-border-radius);
+  color:var(--toolbar-item-text-color);
+  cursor:pointer;
+  display:flex;
+  gap:var(--toolbar-scroll-button-gap);
+  justify-content:center;
+  min-height:var(--toolbar-item-min-height);
+  min-width:var(--toolbar-item-min-width);
+  outline:none;
+  padding-inline:var(--toolbar-item-padding-inline);
+  text-indent:var(--toolbar-item-text-indent);
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_toolbar_module_toolbarItem--5aae4[data-disabled]{
+  background:var(--toolbar-item-background);
+  opacity:var(--toolbar-item-disabled-opacity);
+  pointer-events:none;
+}
+.bp_toolbar_module_toolbarItem--5aae4: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--5aae4: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_toolbarToggle--5aae4[data-state=on]{
+  background:var(--toolbar-toggle-on-pressed-background);
+  border:var(--toolbar-toggle-on-pressed-border);
+}
+.bp_toolbar_module_toolbarToggle--5aae4[data-state=on] svg *{
+  fill:var(--toolbar-toggle-icon-fill);
+}
+.bp_toolbar_module_toolbarToggle--5aae4[data-state=on]:not([data-disabled]):hover{
+  background:var(--toolbar-toggle-on-hover-background);
+  border:var(--toolbar-toggle-on-hover-border);
+}
+
+.bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on] .bp_toolbar_module_dropdownIndicator--5aae4 path{
+  fill:var(--icon-icon-on-light);
+}
+.bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[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--5aae4{
+  align-items:center;
+  display:flex;
+  height:var(--toolbar-icon-height);
+  justify-content:center;
+  width:var(--toolbar-icon-width);
+}
+
+.bp_toolbar_module_toolbarTextToggleItem--5aae4{
+  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--5aae4:hover{
+  background:var(--toolbar-text-toggle-hover-background);
+  border-color:var(--toolbar-text-toggle-hover-border-color);
+}
+.bp_toolbar_module_toolbarTextToggleItem--5aae4:active{
+  background:var(--toolbar-text-toggle-active-background);
+  border-color:var(--toolbar-text-toggle-active-border-color);
+}
+.bp_toolbar_module_toolbarTextToggleItem--5aae4[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--5aae4[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--5aae4[aria-checked=true]:active{
+  background:var(--toolbar-text-toggle-checked-active-background);
+  border-color:var(--toolbar-text-toggle-checked-active-border-color);
+}
 :root{
   --surface-surface-brand:#0061d5;
   --surface-surface-brand-hover:#006ae9;
@@ -14858,316 +15161,142 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --bp-text-text-on-light:var(--bp-gray-100);
   --bp-text-text-on-light-disabled:var(--bp-gray-30);
   --bp-text-text-on-light-secondary:var(--bp-gray-65);
-  --bp-text-text-on-light-secondary-hover:var(--bp-gray-80);
-  --bp-text-text-on-light-tertiary:var(--bp-gray-50);
-  --bp-text-text-success-on-color:var(--bp-green-light-160);
-  --bp-text-text-warning-on-color:var(--bp-yellorange-160);
-  --z-index-sidepanel:360;
-  --z-index-modal:370;
-  --z-index-popover:380;
-  --z-index-notification:2147483647;
-  --z-index-card-tooltip:2147483647;
-}
-.bp_toolbar_module_dropdownIndicator--5aae4.bp_toolbar_module_invertCaret--5aae4{
-  transform:rotate(.5turn);
-}
-
-.bp_toolbar_module_toolbarRoot--5aae4[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);
-  --toolbar-root-border:var(--border-1) solid var(--border-card-border);
-  --toolbar-root-border-radius:var(--radius-4);
-  --toolbar-root-box-shadow:var(--dropshadow-3);
-  --toolbar-scroll-button-gap:var(--space-1);
-  --toolbar-scrollable-children-gap:var(--space-1);
-  --toolbar-scrollable-children-padding:calc(var(--space-1) - var(--border-1));
-  --toolbar-scrollable-children-scroll-padding:calc(var(--space-1) - var(--border-1));
-  --toolbar-separator-height:var(--size-6);
-  --toolbar-separator-background:var(--border-divider-border);
-  --toolbar-separator-border-radius:var(--radius-2);
-}
-
-.bp_toolbar_module_toolbarRoot--5aae4[data-modern=true]{
-  --box-shadow:0 4px 12px 0 #0000001a;
-  --toolbar-root-gap:var(--bp-space-010);
-  --toolbar-root-padding:var(--bp-space-010);
-  --toolbar-root-background:var(--bp-surface-toolbar-surface);
-  --toolbar-root-border:var(--bp-border-01) solid var(--bp-border-toolbar-border);
-  --toolbar-root-border-radius:var(--bp-radius-10);
-  --toolbar-root-box-shadow:var(--box-shadow);
-  --toolbar-scroll-button-gap:var(--bp-space-010);
-  --toolbar-scrollable-children-gap:var(--bp-space-010);
-  --toolbar-scrollable-children-padding:var(--bp-space-010);
-  --toolbar-scrollable-children-scroll-padding:var(--bp-space-010);
-  --toolbar-separator-height:var(--bp-size-060);
-  --toolbar-separator-background:var(--bp-border-divider-border);
-  --toolbar-separator-border-radius:var(--bp-radius-03);
-  --toolbar-toggle-group-gap:var(--bp-space-010);
-}
-.bp_toolbar_module_toolbarRoot--5aae4[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--5aae4{
-  --toolbar-root-padding:0;
-}
-
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=false]{
-  --toolbar-item-min-width:var(--size-8);
-  --toolbar-item-min-height:var(--size-8);
-  --toolbar-item-text-indent:var(--space-1);
-  --toolbar-item-background:var(--surface-toggle-surface);
-  --toolbar-item-border:var(--border-1) solid #0000;
-  --toolbar-item-border-radius:var(--radius-2);
-  --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-focus-outline:var(--outline-focus-on-light);
-  --toolbar-item-disabled-opacity:.3;
-  --toolbar-toggle-on-pressed-border:none;
-  --toolbar-toggle-on-pressed-background:var(--surface-toggle-surface-pressed);
-  --toolbar-toggle-icon-fill:var(--icon-icon-on-dark);
-  --toolbar-toggle-on-hover-background:var(--surface-toggle-surface-on-hover);
-  --toolbar-toggle-on-hover-border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
-  --toolbar-icon-width:var(--size-5);
-  --toolbar-icon-height:var(--size-5);
-  --toolbar-item-text-color:var(--text-text-on-light);
-  --toolbar-text-toggle-color:var(--text-text-on-light);
-  --toolbar-text-toggle-off-border:var(--border-1) solid var(--border-toggletext-border-off);
-  --toolbar-text-toggle-padding-inline:var(--space-2);
-  --toolbar-text-toggle-hover-background:var(--surface-toggle-surface-off-hover);
-  --toolbar-text-toggle-hover-border-color:var(--border-toggletext-border-off-hover);
-  --toolbar-text-toggle-active-background:var(--surface-toggle-surface-off-pressed);
-  --toolbar-text-toggle-active-border-color:var(--border-toggletext-border-off-pressed);
-  --toolbar-text-toggle-checked-color:var(--text-toggletext-text);
-  --toolbar-text-toggle-checked-background:var(--surface-toggletext-surface-on);
-  --toolbar-text-toggle-checked-border:var(--border-1) solid var(--border-toggletext-border-on);
-  --toolbar-text-toggle-checked-hover-background:var(--surface-toggletext-surface-on-hover);
-  --toolbar-text-toggle-checked-hover-border-color:var(--border-toggletext-border-on-hover);
-  --toolbar-text-toggle-checked-active-background:var(--surface-toggletext-surface-on-pressed);
-  --toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
-  --trigger-button-hover-opacity:.7;
-}
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=false].bp_toolbar_module_toolbarTextToggleItem--5aae4{
-  font-family:var(--body-default-font-family);
-  font-size:var(--body-default-font-size);
-  font-weight:var(--body-default-font-weight);
-  letter-spacing:var(--body-default-letter-spacing);
-  line-height:var(--body-default-line-height);
-  text-decoration:var(--body-default-text-decoration);
-  text-transform:var(--body-default-text-case);
+  --bp-text-text-on-light-secondary-hover:var(--bp-gray-80);
+  --bp-text-text-on-light-tertiary:var(--bp-gray-50);
+  --bp-text-text-success-on-color:var(--bp-green-light-160);
+  --bp-text-text-warning-on-color:var(--bp-yellorange-160);
+  --z-index-sidepanel:360;
+  --z-index-modal:370;
+  --z-index-popover:380;
+  --z-index-notification:2147483647;
+  --z-index-card-tooltip:2147483647;
 }
 
-.bp_toolbar_module_toolbarItem--5aae4[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);
-  --toolbar-item-background:var(--bp-surface-toggle-surface);
-  --toolbar-item-border:var(--bp-border-01) solid #0000;
-  --toolbar-item-border-radius:var(--bp-radius-10);
-  --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-focus-outline:var(--bp-outline-focus-on-light);
-  --toolbar-item-disabled-opacity:.3;
-  --toolbar-toggle-on-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
-  --toolbar-toggle-on-pressed-background:var(--bp-surface-toggle-surface-on);
-  --toolbar-toggle-icon-fill:var(--bp-icon-icon-blue);
-  --toolbar-toggle-on-hover-background:var(--bp-surface-toggle-surface-on-hover);
-  --toolbar-toggle-on-hover-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
-  --toolbar-icon-width:var(--bp-size-050);
-  --toolbar-icon-height:var(--bp-size-050);
-  --toolbar-item-text-color:var(--bp-text-text-on-light);
-  --toolbar-text-toggle-color:var(--bp-text-text-on-light);
-  --toolbar-text-toggle-off-border:var(--bp-border-01) solid var(--bp-border-toggle-text-border-off);
-  --toolbar-text-toggle-padding-inline:var(--bp-space-020);
-  --toolbar-text-toggle-hover-background:var(--bp-surface-toggle-surface-off-hover);
-  --toolbar-text-toggle-hover-border-color:var(--bp-border-toggle-text-border-off-hover);
-  --toolbar-text-toggle-active-background:var(--bp-surface-toggle-text-surface-off-pressed);
-  --toolbar-text-toggle-active-border-color:var(--bp-border-toggle-text-border-off-pressed);
-  --toolbar-text-toggle-checked-color:var(--bp-text-toggle-text-text);
-  --toolbar-text-toggle-checked-background:var(--bp-surface-toggle-text-surface-on);
-  --toolbar-text-toggle-checked-border:var(--bp-border-01) solid var(--bp-border-toggle-text-border-on);
-  --toolbar-text-toggle-checked-hover-background:var(--bp-surface-toggle-text-surface-on-hover);
-  --toolbar-text-toggle-checked-hover-border-color:var(--bp-border-toggle-text-border-on-hover);
-  --toolbar-text-toggle-checked-active-background:var(--bp-surface-toggle-text-surface-on-pressed);
-  --toolbar-text-toggle-checked-active-border-color:var(--bp-border-toggle-text-border-on-pressed);
-  --trigger-button-hover-opacity:.65;
-  --trigger-button-active-opacity:.8;
-}
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true]:active,.bp_toolbar_module_toolbarItem--5aae4[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_inline_trigger_button_module_inlineTriggerButton--043a4{
+  box-sizing:border-box;
+  color:var(--bp-text-text-on-light, var(--text-text-on-light));
+  min-width:0;
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--5aae4[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_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_secondary--043a4{
+  --trigger-button-background:var(--bp-surface-dropdown-secondary-surface);
+  --trigger-button-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
+  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-secondary-surface-hover);
+  --trigger-button-focus-or-hover-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
+  --trigger-button-focus-or-hover-border-xsmall:none;
+  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
+  --trigger-button-active-border:var(--bp-border-01) solid var(--bp-border-dropdown-secondary-border);
+  background:var(--trigger-button-background);
+  border:var(--trigger-button-border);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--5aae4{
-  transform:rotate(1turn);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_secondary--043a4:not(:disabled):hover,.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_secondary--043a4:not(:disabled)[data-focus-visible]{
+  background:var(--trigger-button-focus-or-hover-background);
+  border:var(--trigger-button-focus-or-hover-border);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4:active,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-active]{
-  background-color:var(--toolbar-button-color);
-  opacity:var(--trigger-button-active-opacity);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_secondary--043a4:not(:disabled):active{
+  background:var(--trigger-button-active-background);
+  border:var(--trigger-button-active-border);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on]:hover{
-  background-color:var(--toolbar-button-color);
-  border-color:var(--toolbar-button-color);
-  opacity:var(--trigger-button-hover-opacity);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_tertiary--043a4{
+  --trigger-button-background:var(--bp-surface-cta-surface-tertiary);
+  --trigger-button-border:var(--bp-border-01) solid #0000;
+  --trigger-button-focus-or-hover-background:var(--bp-surface-dropdown-tertiary-surface-hover);
+  --trigger-button-focus-or-hover-border-xsmall:var(--trigger-button-border);
+  --trigger-button-active-background:var(--bp-surface-dropdown-secondary-surface-pressed);
+  background:var(--trigger-button-background);
+  border:var(--trigger-button-border);
 }
-.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_toolbarButton--5aae4,.bp_toolbar_module_toolbarItem--5aae4[data-modern=true].bp_toolbar_module_toolbarTextToggleItem--5aae4{
-  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;
-  font-weight:var(--bp-font-weight-regular);
-  letter-spacing:var(--bp-font-letter-spacing-01);
-  line-height:var(--bp-font-line-height-05);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_tertiary--043a4:not(:disabled):hover,.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_tertiary--043a4:not(:disabled)[data-focus-visible]{
+  background:var(--trigger-button-focus-or-hover-background);
 }
-
-.bp_toolbar_module_toggleGroup--5aae4[data-modern=false]{
-  --toolbar-toggle-group-gap:var(--space-1);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_tertiary--043a4:not(:disabled):active{
+  background:var(--trigger-button-active-background);
 }
-
-.bp_toolbar_module_toggleGroup--5aae4[data-modern=true]{
-  --toolbar-toggle-group-gap:var(--bp-space-010);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_extraSmall--043a4{
+  --button-xsmall-gap:var(--bp-space-010);
+  --button-xsmall-height:var(--bp-size-060);
+  --trigger-button-xsmall-inline-padding:var(--bp-space-020);
+  --button-xsmall-padding:var(--bp-space-010) var(--trigger-button-xsmall-inline-padding);
+  --trigger-button-start-icon-padding-xsmall:var(--trigger-button-xsmall-inline-padding);
+  border:var(--trigger-button-focus-or-hover-border-xsmall);
+  gap:var(--button-xsmall-gap);
+  min-height:var(--button-xsmall-height);
+  padding:var(--button-xsmall-padding);
 }
-
-.bp_toolbar_module_toolbarRoot--5aae4{
-  align-items:center;
-  background:var(--toolbar-root-background);
-  border:var(--toolbar-root-border);
-  border-radius:var(--toolbar-root-border-radius);
-  box-shadow:var(--toolbar-root-box-shadow);
-  display:flex;
-  gap:var(--toolbar-root-gap);
-  padding:var(--toolbar-root-padding);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_extraSmall--043a4:not(:disabled):active,.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_extraSmall--043a4:not(:disabled):hover,.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_extraSmall--043a4:not(:disabled)[data-focus-visible]{
+  border:var(--trigger-button-focus-or-hover-border-xsmall);
 }
-
-.bp_toolbar_module_scrollButtonWrapper--5aae4{
-  align-items:center;
-  display:flex;
-  gap:var(--toolbar-scroll-button-gap);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_extraSmall--043a4.bp_inline_trigger_button_module_startIcon--043a4{
+  padding-left:var(--trigger-button-start-icon-padding-xsmall, .625rem);
 }
-.bp_toolbar_module_scrollButtonWrapper--5aae4.bp_toolbar_module_hidden--5aae4{
-  display:none;
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_row--043a4{
+  align-items:flex-start;
+  display:inline-flex;
+  justify-content:flex-start;
+  max-width:100%;
+  min-width:0;
+  white-space:normal;
+  width:min(100%, max-content);
 }
 
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4{
-  -ms-overflow-style:none;
-  scrollbar-width:none;
-}
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4::-webkit-scrollbar{
-  display:none;
-}
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4{
-  align-items:center;
-  display:flex;
-  flex-grow:1;
-  gap:var(--toolbar-scrollable-children-gap);
-  overflow-x:auto;
-  padding:var(--toolbar-scrollable-children-padding);
-  scroll-behavior:smooth;
-  scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
-  white-space:nowrap;
-}
-.bp_toolbar_module_scrollableChildrenWrapper--5aae4 > *{
-  flex:none;
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_row--043a4.bp_inline_trigger_button_module_extraSmall--043a4{
+  min-height:var(--button-xsmall-height);
+  padding:var(--bp-space-010) var(--bp-space-020);
 }
 
-.bp_toolbar_module_separator--5aae4{
-  background-color:var(--toolbar-separator-background);
-  border-radius:var(--toolbar-separator-border-radius);
-  height:var(--toolbar-separator-height);
-  width:1px;
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_row--043a4.bp_inline_trigger_button_module_extraSmall--043a4.bp_inline_trigger_button_module_startIcon--043a4{
+  padding-left:var(--trigger-button-start-icon-padding-xsmall, var(--bp-space-020));
 }
 
-.bp_toolbar_module_toggleGroup--5aae4{
-  display:flex;
-  gap:var(--toolbar-toggle-group-gap);
+.bp_inline_trigger_button_module_contentSlot--043a4{
+  flex:1 1 auto;
+  max-width:100%;
+  min-width:0;
+  width:100%;
 }
 
-.bp_toolbar_module_toolbarItem--5aae4{
+.bp_inline_trigger_button_module_content--043a4{
+  align-content:flex-start;
   align-items:center;
-  background:var(--toolbar-button-color, var(--toolbar-item-background));
-  border:var(--toolbar-item-border);
-  border-radius:var(--toolbar-item-border-radius);
-  color:var(--toolbar-item-text-color);
-  cursor:pointer;
+  box-sizing:border-box;
   display:flex;
-  gap:var(--toolbar-scroll-button-gap);
-  justify-content:center;
-  min-height:var(--toolbar-item-min-height);
-  min-width:var(--toolbar-item-min-width);
-  outline:none;
-  padding-inline:var(--toolbar-item-padding-inline);
-  text-indent:var(--toolbar-item-text-indent);
-  -webkit-user-select:none;
-          user-select:none;
-}
-.bp_toolbar_module_toolbarItem--5aae4[data-disabled]{
-  background:var(--toolbar-item-background);
-  opacity:var(--toolbar-item-disabled-opacity);
-  pointer-events:none;
-}
-.bp_toolbar_module_toolbarItem--5aae4: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--5aae4: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_toolbarToggle--5aae4[data-state=on]{
-  background:var(--toolbar-toggle-on-pressed-background);
-  border:var(--toolbar-toggle-on-pressed-border);
-}
-.bp_toolbar_module_toolbarToggle--5aae4[data-state=on] svg *{
-  fill:var(--toolbar-toggle-icon-fill);
-}
-.bp_toolbar_module_toolbarToggle--5aae4[data-state=on]:not([data-disabled]):hover{
-  background:var(--toolbar-toggle-on-hover-background);
-  border:var(--toolbar-toggle-on-hover-border);
+  flex-wrap:wrap;
+  gap:var(--bp-space-010);
+  max-width:100%;
+  min-width:0;
+  overflow-wrap:break-word;
+  text-align:start;
+  width:100%;
 }
 
-.bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on] .bp_toolbar_module_dropdownIndicator--5aae4 path{
-  fill:var(--icon-icon-on-light);
-}
-.bp_toolbar_module_triggerButtonSelectedWithColor--5aae4[data-state=on]:hover{
-  background-color:var(--toolbar-button-color);
-  border-color:var(--toolbar-button-color);
-  opacity:var(--trigger-button-hover-opacity);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_extraSmall--043a4 .bp_inline_trigger_button_module_content--043a4{
+  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_toolbarIcon--5aae4{
+.bp_inline_trigger_button_module_caretCorner--043a4{
   align-items:center;
+  align-self:flex-start;
   display:flex;
-  height:var(--toolbar-icon-height);
-  justify-content:center;
-  width:var(--toolbar-icon-width);
+  flex-shrink:0;
+  font-weight:var(--bp-font-weight-regular);
+  margin-left:auto;
+  min-height:var(--bp-font-line-height-04);
+  opacity:0;
+  transition:opacity var(--bp-duration-short, .12s) var(--bp-curve-small-off, ease-out);
 }
 
-.bp_toolbar_module_toolbarTextToggleItem--5aae4{
-  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--5aae4:hover{
-  background:var(--toolbar-text-toggle-hover-background);
-  border-color:var(--toolbar-text-toggle-hover-border-color);
-}
-.bp_toolbar_module_toolbarTextToggleItem--5aae4:active{
-  background:var(--toolbar-text-toggle-active-background);
-  border-color:var(--toolbar-text-toggle-active-border-color);
-}
-.bp_toolbar_module_toolbarTextToggleItem--5aae4[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_inline_trigger_button_module_inlineTriggerButton--043a4 .bp_inline_trigger_button_module_startIcon--043a4{
+  align-self:center;
+  font-weight:var(--bp-font-weight-regular);
 }
-.bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]:hover{
-  background:var(--toolbar-text-toggle-checked-hover-background);
-  border-color:var(--toolbar-text-toggle-checked-hover-border-color);
+
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4.bp_inline_trigger_button_module_endIconAlwaysVisible--043a4 .bp_inline_trigger_button_module_caretCorner--043a4,.bp_inline_trigger_button_module_inlineTriggerButton--043a4:not(:disabled):hover .bp_inline_trigger_button_module_caretCorner--043a4,.bp_inline_trigger_button_module_inlineTriggerButton--043a4:not(:disabled)[data-focus-visible] .bp_inline_trigger_button_module_caretCorner--043a4{
+  opacity:1;
 }
-.bp_toolbar_module_toolbarTextToggleItem--5aae4[aria-checked=true]:active{
-  background:var(--toolbar-text-toggle-checked-active-background);
-  border-color:var(--toolbar-text-toggle-checked-active-border-color);
+.bp_inline_trigger_button_module_inlineTriggerButton--043a4:not(:disabled)[data-inline-trigger-loading=true] .bp_inline_trigger_button_module_caretCorner--043a4,.bp_inline_trigger_button_module_inlineTriggerButton--043a4:not(:disabled)[data-inline-trigger-loading=true]:hover .bp_inline_trigger_button_module_caretCorner--043a4,.bp_inline_trigger_button_module_inlineTriggerButton--043a4:not(:disabled)[data-inline-trigger-loading=true][data-focus-visible] .bp_inline_trigger_button_module_caretCorner--043a4{
+  opacity:0;
 }

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

@@ -77,6 +77,7 @@ export * from './time-picker';
 export * from './toolbar';
 export * from './tooltip';
 export * from './trigger-button';
+export * from './inline-trigger-button';
 export * from './util-components/interactive-icon';
 export * from './util-components/labelable';
 export * from './util-components/list-checkbox';

package/dist/lib-esm/index.js

@@ -99,6 +99,7 @@ export { TimePicker } from './time-picker/time-picker.js';
 export { Toolbar } from './toolbar/index.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';
+export { InlineTriggerButton } from './inline-trigger-button/inline-trigger-button.js';
 export { InteractiveIcon } from './util-components/interactive-icon/interactive-icon.js';
 export { useLabelable } from './util-components/labelable/useLabelable.js';
 export { ListCheckbox } from './util-components/list-checkbox/list-checkbox.js';

package/dist/lib-esm/inline-trigger-button/index.d.ts

@@ -0,0 +1,2 @@
+export { InlineTriggerButton } from './inline-trigger-button';
+export type { InlineTriggerButtonProps } from './inline-trigger-button-types';

package/dist/lib-esm/inline-trigger-button/inline-trigger-button-types.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { type BaseButtonIconProps, type BaseButtonProps } from '../primitives/base-button';
+/** Same `loading` / `loadingAriaLabel` contract as {@link BaseButton} and {@link TriggerButton} (`RequireAllOrNone`). */
+export type InlineTriggerButtonProps = Omit<BaseButtonProps, 'size' | 'variant' | 'children'> & {
+    /** Visual style; only secondary and tertiary are supported. */
+    variant?: 'secondary' | 'tertiary';
+    caretDirection: 'up' | 'down';
+    startIcon?: BaseButtonIconProps['icon'];
+    /**
+     * Extra props for `startIcon` (merged after default size/color on the SVG). Use for stroke icons (`strokeWidth`),
+     * filters, opacity, or `className`. For fill/path icons, visual weight is usually a different asset (e.g. Fill vs Medium).
+     */
+    startIconProps?: BaseButtonIconProps['iconProps'];
+    /** Optional custom right icon; when omitted, caret direction icon is used. */
+    endIcon?: BaseButtonIconProps['icon'];
+    /** Same as `startIconProps` for the end/caret slot (default chevrons or `endIcon`). */
+    endIconProps?: BaseButtonIconProps['iconProps'];
+    /** When true, end icon stays visible when idle or disabled; hidden while `loading`. */
+    alwaysShowEndIcon?: boolean;
+    /** Custom row UI (chips, styled text, etc.). There is no separate string `label` API. */
+    children: ReactNode;
+};

package/dist/lib-esm/inline-trigger-button/inline-trigger-button.d.ts

@@ -0,0 +1,7 @@
+import { type InlineTriggerButtonProps } from './inline-trigger-button-types';
+/**
+ * Extra-small trigger for a **custom content row** (`children` only — e.g. chips). `secondary` and `tertiary` only.
+ * Supports optional `endIcon` override on the right side.
+ * For a standard text label + caret at any size, use {@link TriggerButton}.
+ */
+export declare const InlineTriggerButton: import("react").ForwardRefExoticComponent<Omit<InlineTriggerButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/lib-esm/inline-trigger-button/inline-trigger-button.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { BaseButton } from '../primitives/base-button/index.js';
+import styles from './inline-trigger-button.module.js';
+
+const SECONDARY_ICON_COLOR = 'var(--bp-icon-icon-on-light-secondary)';
+function caretIconForDirection(caretDirection) {
+  return caretDirection === 'up' ? ChevronUp : ChevronDown;
+}
+/**
+ * Extra-small trigger for a **custom content row** (`children` only — e.g. chips). `secondary` and `tertiary` only.
+ * Supports optional `endIcon` override on the right side.
+ * For a standard text label + caret at any size, use {@link TriggerButton}.
+ */
+const InlineTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    caretDirection,
+    children,
+    startIcon,
+    startIconProps,
+    endIcon,
+    endIconProps,
+    alwaysShowEndIcon = false,
+    className,
+    variant = 'secondary',
+    style,
+    loading,
+    ...rest
+  } = props;
+  const RightIcon = endIcon ?? caretIconForDirection(caretDirection);
+  const iconColor = variant === 'secondary' ? SECONDARY_ICON_COLOR : undefined;
+  const baseButtonProps = {
+    ...rest,
+    className: clsx(styles.inlineTriggerButton, styles.extraSmall, styles[variant], styles.row, {
+      [styles.startIcon]: !!startIcon,
+      [styles.endIconAlwaysVisible]: alwaysShowEndIcon && !loading
+    }, className),
+    'data-inline-trigger-loading': loading ? 'true' : undefined,
+    loading,
+    size: 'small',
+    style,
+    variant
+  };
+  return jsxs(BaseButton, {
+    ref: forwardedRef,
+    ...baseButtonProps,
+    children: [startIcon ? jsx(BaseButton.Icon, {
+      className: styles.startIcon,
+      icon: startIcon,
+      iconProps: {
+        ...(iconColor ? {
+          color: iconColor
+        } : {}),
+        height: 'var(--bp-size-040, 1rem)',
+        width: 'var(--bp-size-040, 1rem)',
+        ...startIconProps
+      }
+    }) : null, jsx(BaseButton.Label, {
+      className: styles.contentSlot,
+      children: jsx("span", {
+        className: styles.content,
+        children: children
+      })
+    }), jsx(BaseButton.Icon, {
+      className: styles.caretCorner,
+      icon: RightIcon,
+      iconProps: {
+        ...(iconColor ? {
+          color: iconColor
+        } : {}),
+        height: 'var(--bp-size-030, 0.75rem)',
+        width: 'var(--bp-size-030, 0.75rem)',
+        ...endIconProps
+      }
+    })]
+  });
+});
+InlineTriggerButton.displayName = 'InlineTriggerButton';
+
+export { InlineTriggerButton };

package/dist/lib-esm/inline-trigger-button/inline-trigger-button.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"inlineTriggerButton":"bp_inline_trigger_button_module_inlineTriggerButton--043a4","secondary":"bp_inline_trigger_button_module_secondary--043a4","tertiary":"bp_inline_trigger_button_module_tertiary--043a4","extraSmall":"bp_inline_trigger_button_module_extraSmall--043a4","startIcon":"bp_inline_trigger_button_module_startIcon--043a4","row":"bp_inline_trigger_button_module_row--043a4","contentSlot":"bp_inline_trigger_button_module_contentSlot--043a4","content":"bp_inline_trigger_button_module_content--043a4","caretCorner":"bp_inline_trigger_button_module_caretCorner--043a4","endIconAlwaysVisible":"bp_inline_trigger_button_module_endIconAlwaysVisible--043a4"};
+
+export { styles as default };

package/dist/lib-esm/primitives/base-button/base-button-icon.js

@@ -9,7 +9,8 @@ import { buttonVariantToIconColorMap, getIconSize } from './utils.js';
 const BaseButtonIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     icon,
-    iconProps
+    iconProps,
+    className
   } = props;
   const {
     loading,
@@ -40,7 +41,7 @@ const BaseButtonIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }, [icon, isIconOnly, ariaLabel, size, loading, variant, iconProps, enableModernizedComponents]);
   return jsx("span", {
     ref: forwardedRef,
-    className: clsx(styles.icon, {
+    className: clsx(styles.icon, className, {
       [styles.isIconButton]: isIconOnly,
       [styles.loading]: loading
     }),

package/dist/lib-esm/primitives/base-button/types.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
-import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactNode, type SVGProps } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
 export interface Loading {
     /** Whether the button is loading. */
@@ -16,7 +16,7 @@ export interface BaseButtonInterface extends AriakitButtonProps {
 export type BaseButtonProps = BaseButtonInterface & RequireAllOrNone<Loading, keyof Loading>;
 export type BaseButtonPropsAll = BaseButtonInterface & Required<Loading>;
 export type BaseButtonLabelProps = ComponentPropsWithRef<'span'> & {
-    children: string | string[];
+    children: string | string[] | ReactNode;
 };
 export type BaseButtonIconProps = ComponentPropsWithRef<'span'> & {
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;

package/package.json

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