@box/blueprint-web 14.27.0 → 14.30.1

package/dist/lib-esm/breadcrumb/breadcrumb.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import noop from 'lodash/noop';
 import { forwardRef, useRef } from 'react';
 import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
+import { Taxonomy } from '@box/blueprint-web-assets/icons/Medium';
 import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { EllipsisTruncationView } from './ellipsis-truncation-view.js';
@@ -14,6 +15,26 @@ import { getContainerHeight, getRootIconSize } from './utils.js';
 import styles from './breadcrumb.module.js';
 
 const ELLIPSIS_TRUNCATION_THRESHOLD = 7;
+const renderRootIcon = (variant, size) => {
+  switch (variant) {
+    case 'home':
+      return jsx(Home, {
+        height: size,
+        width: size
+      });
+    case 'taxonomy':
+      return jsx(Taxonomy, {
+        height: size,
+        width: size
+      });
+    case 'folder-tree':
+    default:
+      return jsx(FolderTree, {
+        height: size,
+        width: size
+      });
+  }
+};
 const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     breadcrumbAriaLabel,
@@ -38,6 +59,10 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     visibleCrumbCount
   } = useFolderTreeTruncation(breadcrumbListRef, crumbs, isMobile);
   const hasTruncation = isMobile || truncationMethod === 'ellipsis' && crumbs.length > ELLIPSIS_TRUNCATION_THRESHOLD || truncationMethod === 'folder-tree' && isTruncationRequired;
+  // For the `taxonomy` variant the dropdown trigger IS the root icon, so suppress the
+  // decorative one to avoid two Taxonomy icons in a row. `home`/`folder-tree` keep both.
+  const isFolderTreeTruncationActive = !isMobile && truncationMethod === 'folder-tree' && isTruncationRequired;
+  const shouldHideRootIconForTaxonomyTrigger = rootIconVariant === 'taxonomy' && isFolderTreeTruncationActive;
   const rootIconSize = getRootIconSize(size, hasTruncation);
   const containerHeight = getContainerHeight(size, hasTruncation);
   if (!crumbs || crumbs.length === 0) {
@@ -68,6 +93,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       iconButtonRef: iconButtonRef,
       isInteractive: isInteractive,
       onPageLinkClick: onPageLinkClick,
+      rootIconVariant: rootIconVariant,
       size: size,
       truncatedLinksIconAriaLabel: truncatedLinksIconAriaLabel,
       visibleCrumbCount: visibleCrumbCount
@@ -92,16 +118,10 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children: jsxs("ol", {
       ref: breadcrumbListRef,
       className: styles.breadcrumb,
-      children: [!isMobile && rootIconVariant && jsxs("li", {
+      children: [!isMobile && rootIconVariant && !shouldHideRootIconForTaxonomyTrigger && jsxs("li", {
         "aria-hidden": "true",
         className: styles.pageLink,
-        children: [rootIconVariant === 'home' ? jsx(Home, {
-          height: rootIconSize,
-          width: rootIconSize
-        }) : jsx(FolderTree, {
-          height: rootIconSize,
-          width: rootIconSize
-        }), jsx(BreadcrumbItemSeparator, {
+        children: [renderRootIcon(rootIconVariant, rootIconSize), jsx(BreadcrumbItemSeparator, {
           isInteractive: isInteractive,
           size: size
         })]

package/dist/lib-esm/breadcrumb/folder-tree-truncation-view.d.ts

@@ -1,2 +1,2 @@
 import { type FolderTreeTruncationViewProps } from './types';
-export declare const FolderTreeTruncationView: ({ crumbs, ellipsizeLastCrumb, iconButtonRef, isInteractive, onPageLinkClick, size, truncatedLinksIconAriaLabel, visibleCrumbCount, }: FolderTreeTruncationViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FolderTreeTruncationView: ({ crumbs, ellipsizeLastCrumb, iconButtonRef, isInteractive, onPageLinkClick, rootIconVariant, size, truncatedLinksIconAriaLabel, visibleCrumbCount, }: FolderTreeTruncationViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/breadcrumb/folder-tree-truncation-view.js

@@ -1,28 +1,37 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
+import { Taxonomy } from '@box/blueprint-web-assets/icons/Medium';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
 import { PageLink } from './page-link.js';
 import { getIconButtonSize } from './utils.js';
 
+const getDropdownTriggerIcon = rootIconVariant => {
+  if (rootIconVariant === 'taxonomy') {
+    return Taxonomy;
+  }
+  return FolderTree;
+};
 const FolderTreeTruncationView = ({
   crumbs,
   ellipsizeLastCrumb,
   iconButtonRef,
   isInteractive,
   onPageLinkClick,
+  rootIconVariant,
   size,
   truncatedLinksIconAriaLabel,
   visibleCrumbCount
 }) => {
   const visibleCrumbs = crumbs.slice(-visibleCrumbCount);
   const hiddenCrumbs = crumbs.slice(0, -visibleCrumbCount);
+  const TriggerIcon = getDropdownTriggerIcon(rootIconVariant);
   return jsxs(Fragment, {
     children: [jsx(BreadcrumbDropdown, {
       crumbsToRender: hiddenCrumbs,
       iconButton: jsx(IconButton, {
         "aria-label": truncatedLinksIconAriaLabel,
-        icon: FolderTree,
+        icon: TriggerIcon,
         size: getIconButtonSize(size)
       }),
       isInteractive: isInteractive,

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

@@ -44,7 +44,7 @@ type RootIconProps = {
      */
     rootIconAriaLabel?: string;
     /** Determines which icon is displayed at the root. */
-    rootIconVariant: 'home' | 'folder-tree';
+    rootIconVariant: 'home' | 'folder-tree' | 'taxonomy';
 };
 export interface BreadcrumbViewProps {
     crumbs: Crumb[];
@@ -56,6 +56,7 @@ export interface BreadcrumbViewProps {
 }
 export interface FolderTreeTruncationViewProps extends BreadcrumbViewProps {
     iconButtonRef: React.RefObject<HTMLLIElement>;
+    rootIconVariant?: BreadcrumbProps['rootIconVariant'];
     visibleCrumbCount: number;
 }
 /**

package/dist/lib-esm/index.css

@@ -8747,7 +8747,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   display:inline;
 }
 
-.bp_modal_module_overlay--e96d7[data-modern=false]{
+.bp_modal_module_overlay--178e7[data-modern=false]{
   --modal-body-text-color:var(--text-text-on-light);
   --modal-overlay-background:var(--overlay-modal-overlay);
   --modal-content-background:var(--gray-white);
@@ -8788,7 +8788,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.bp_modal_module_overlay--e96d7[data-modern=true]{
+.bp_modal_module_overlay--178e7[data-modern=true]{
   --modal-overlay-background:var(--bp-overlay-modal-overlay);
   --modal-content-background:var(--bp-surface-modal-surface);
   --modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
@@ -8829,7 +8829,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.bp_modal_module_overlay--e96d7{
+.bp_modal_module_overlay--178e7{
   background-color:var(--modal-overlay-background);
   display:grid;
   inset:0;
@@ -8837,15 +8837,15 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   z-index:370;
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--e96d7{
+  .bp_modal_module_overlay--178e7{
     place-items:center;
   }
 }
 
-.bp_modal_module_headerDividerLine--e96d7{
+.bp_modal_module_headerDividerLine--178e7{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--e96d7::after{
+.bp_modal_module_headerDividerLine--178e7::after{
   border-bottom:var(--modal-divider-line-border);
   bottom:0;
   content:"";
@@ -8854,16 +8854,16 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   right:var(--modal-divider-line-offset-right);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--e96d7::after{
+  .bp_modal_module_headerDividerLine--178e7::after{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--e96d7{
+.bp_modal_module_footerDividerLine--178e7{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--e96d7::before{
+.bp_modal_module_footerDividerLine--178e7::before{
   border-bottom:var(--modal-divider-line-border);
   content:"";
   left:var(--modal-divider-line-offset-left);
@@ -8872,13 +8872,13 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--e96d7::before{
+  .bp_modal_module_footerDividerLine--178e7::before{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_content--e96d7{
+.bp_modal_module_content--178e7{
   display:flex;
   flex-direction:column;
   height:100vh;
@@ -8886,15 +8886,15 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--e96d7{
+  .bp_modal_module_content--178e7{
     overflow:hidden;
   }
 }
-.bp_modal_module_content--e96d7{
+.bp_modal_module_content--178e7{
   background-color:var(--modal-content-background);
 }
 @media (width > 459px){
-  .bp_modal_module_content--e96d7{
+  .bp_modal_module_content--178e7{
     border-radius:var(--modal-border-radius);
     height:auto;
     margin:var(--modal-margin);
@@ -8902,96 +8902,97 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
     min-width:var(--modal-min-width-non-fullscreen);
     transition:max-width var(--modal-loading-animation), max-height var(--modal-loading-animation);
   }
-  .bp_modal_module_content--e96d7.bp_modal_module_smallSizeModal--e96d7{
+  .bp_modal_module_content--178e7.bp_modal_module_smallSizeModal--178e7{
     max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--e96d7.bp_modal_module_mediumSizeModal--e96d7{
+  .bp_modal_module_content--178e7.bp_modal_module_mediumSizeModal--178e7{
     max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--e96d7.bp_modal_module_largeSizeModal--e96d7{
+  .bp_modal_module_content--178e7.bp_modal_module_largeSizeModal--178e7{
     max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--e96d7.bp_modal_module_xlargeSizeModal--e96d7{
+  .bp_modal_module_content--178e7.bp_modal_module_xlargeSizeModal--178e7{
     max-width:var(--modal-max-width-xlarge);
   }
 }
-.bp_modal_module_content--e96d7:has(.bp_modal_module_loadingContainerActive--e96d7) .bp_modal_module_footerDividerLine--e96d7::before,.bp_modal_module_content--e96d7:has(.bp_modal_module_loadingContainerActive--e96d7) .bp_modal_module_headerDividerLine--e96d7::after{
+.bp_modal_module_content--178e7:has(.bp_modal_module_loadingContainerActive--178e7) .bp_modal_module_footerDividerLine--178e7::before,.bp_modal_module_content--178e7:has(.bp_modal_module_loadingContainerActive--178e7) .bp_modal_module_headerDividerLine--178e7::after{
   display:none;
 }
 @media (width > 459px){
-  .bp_modal_module_content--e96d7:has(.bp_modal_module_loadingContainerActive--e96d7){
+  .bp_modal_module_content--178e7:has(.bp_modal_module_loadingContainerActive--178e7){
     max-height:var(--modal-max-height-loading);
     max-width:var(--modal-max-width-loading);
   }
 }
 
-.bp_modal_module_overlay--e96d7[data-modern=false] .bp_modal_module_content--e96d7,.bp_modal_module_overlay--e96d7[data-modern=true] .bp_modal_module_content--e96d7[data-bp-animated=false]{
-  animation:bp_modal_module_popup_bounce_in--e96d7 var(--animation-duration-3);
+.bp_modal_module_overlay--178e7[data-modern=false] .bp_modal_module_content--178e7,.bp_modal_module_overlay--178e7[data-modern=true] .bp_modal_module_content--178e7[data-bp-animated=false]{
+  animation:bp_modal_module_popup_bounce_in--178e7 var(--animation-duration-3);
 }
 
-.bp_modal_module_overlay--e96d7[data-modern=true] .bp_modal_module_content--e96d7[data-bp-animated=true][data-state=open]{
+.bp_modal_module_overlay--178e7[data-modern=true] .bp_modal_module_content--178e7[data-bp-animated=true][data-state=open]{
   animation-duration:var(--bp-duration-long);
   animation-fill-mode:both;
-  animation-name:bp_modal_module_bpModalEnter--e96d7;
+  animation-name:bp_modal_module_bpModalEnter--178e7;
   animation-timing-function:var(--bp-curve-large-on);
 }
-.bp_modal_module_overlay--e96d7[data-modern=true] .bp_modal_module_content--e96d7[data-bp-animated=true][data-state=closed]{
+
+.bp_modal_module_overlay--178e7[data-modern=true] .bp_modal_module_content--178e7[data-bp-animated=true][data-state=closed],.bp_modal_module_overlay--178e7[data-modern=true][data-bp-animated=true][data-state=closed]{
   animation-duration:var(--bp-duration-medium);
   animation-fill-mode:forwards;
-  animation-name:bp_modal_module_bpModalExit--e96d7;
+  animation-name:bp_modal_module_bpModalExit--178e7;
   animation-timing-function:var(--bp-curve-large-off);
 }
 
-.bp_modal_module_scrollableContainer--e96d7{
+.bp_modal_module_scrollableContainer--178e7{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--e96d7{
+  .bp_modal_module_scrollableContainer--178e7{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--e96d7 .bp_modal_module_close--e96d7{
+.bp_modal_module_content--178e7 .bp_modal_module_close--178e7{
   position:fixed;
 }
 @media (width > 374px){
-  .bp_modal_module_content--e96d7 .bp_modal_module_close--e96d7{
+  .bp_modal_module_content--178e7 .bp_modal_module_close--178e7{
     position:absolute;
   }
 }
-.bp_modal_module_content--e96d7 .bp_modal_module_close--e96d7{
+.bp_modal_module_content--178e7 .bp_modal_module_close--178e7{
   color:var(--modal-close-button-color);
   right:var(--modal-close-button-offset-right);
   top:var(--modal-close-button-offset-top);
 }
 
-.bp_modal_module_close--e96d7.bp_modal_module_onColor--e96d7{
+.bp_modal_module_close--178e7.bp_modal_module_onColor--178e7{
   background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--e96d7.bp_modal_module_onColor--e96d7:hover{
+.bp_modal_module_close--178e7.bp_modal_module_onColor--178e7:hover{
   background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--e96d7.bp_modal_module_onColor--e96d7:active{
+.bp_modal_module_close--178e7.bp_modal_module_onColor--178e7:active{
   background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--e96d7 .bp_modal_module_backButton--e96d7{
+.bp_modal_module_content--178e7 .bp_modal_module_backButton--178e7{
   color:var(--modal-back-button-color);
   margin-block-start:var(--modal-back-button-margin-top-start);
   margin-inline-start:var(--modal-back-button-margin-inline-start);
 }
 @media (width > 459px){
-  .bp_modal_module_content--e96d7 .bp_modal_module_backButton--e96d7{
+  .bp_modal_module_content--178e7 .bp_modal_module_backButton--178e7{
     height:var(--modal-back-button-size-non-fullscreen);
     width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--e96d7{
+.bp_modal_module_modalHeader--178e7{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--e96d7{
+.bp_modal_module_modalTitle--178e7{
   display:flex;
   flex-direction:column;
   gap:var(--modal-title-gap);
@@ -8999,80 +9000,80 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   padding:var(--modal-title-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--e96d7{
+  .bp_modal_module_modalTitle--178e7{
     padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--e96d7{
+.bp_modal_module_body--178e7{
   color:var(--modal-body-text-color);
   padding:var(--modal-body-padding-fullscreen);
 }
 @media (width > 459px){
-  .bp_modal_module_body--e96d7{
+  .bp_modal_module_body--178e7{
     padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footer--e96d7{
+.bp_modal_module_footer--178e7{
   display:flex;
   justify-content:flex-end;
   padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--e96d7{
+  .bp_modal_module_footer--178e7{
     padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerButton--e96d7 + .bp_modal_module_footerButton--e96d7{
+.bp_modal_module_footerButton--178e7 + .bp_modal_module_footerButton--178e7{
   margin-inline-start:var(--modal-footer-button-margin-inline-start);
 }
 
-.bp_modal_module_loadingContainer--e96d7{
+.bp_modal_module_loadingContainer--178e7{
   display:flex;
   flex-direction:column;
   flex-grow:1;
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContainer--e96d7{
+  .bp_modal_module_loadingContainer--178e7{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContainerActive--e96d7{
+.bp_modal_module_loadingContainerActive--178e7{
   overflow:hidden;
 }
 
-.bp_modal_module_loading--e96d7{
+.bp_modal_module_loading--178e7{
   align-items:center;
   display:flex;
 }
 
-.bp_modal_module_loadingOverlay--e96d7{
+.bp_modal_module_loadingOverlay--178e7{
   background-color:var(--modal-content-background);
   inset:0;
   position:absolute;
   z-index:1;
 }
 
-.bp_modal_module_loadingContent--e96d7{
+.bp_modal_module_loadingContent--178e7{
   display:flex;
   flex-direction:column;
   visibility:hidden;
 }
 @media (width > 374px){
-  .bp_modal_module_loadingContent--e96d7{
+  .bp_modal_module_loadingContent--178e7{
     min-height:0;
   }
 }
 
-.bp_modal_module_loadingContentVisible--e96d7{
+.bp_modal_module_loadingContentVisible--178e7{
   visibility:visible;
 }
 
-@keyframes bp_modal_module_popup_bounce_in--e96d7{
+@keyframes bp_modal_module_popup_bounce_in--178e7{
   0%{
     transform:scale3d(.1, .1, 1);
   }
@@ -9080,7 +9081,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
     transform:scaleX(1);
   }
 }
-@keyframes bp_modal_module_bpModalEnter--e96d7{
+@keyframes bp_modal_module_bpModalEnter--178e7{
   from{
     opacity:var(--bp-opacity-hidden);
     transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
@@ -9090,7 +9091,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
     transform:translateY(0) var(--bp-scale-default);
   }
 }
-@keyframes bp_modal_module_bpModalExit--e96d7{
+@keyframes bp_modal_module_bpModalExit--178e7{
   from{
     opacity:var(--bp-opacity-visible);
   }

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

@@ -1,22 +1,15 @@
 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`). */
+/** Same loading contract as {@link BaseButton} (`loading` + `loadingAriaLabel`). */
 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).
-     */
+    /** Merged after default icon size/color (stroke width, className, etc.). */
     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`. */
+    /** Keeps end icon 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

@@ -1,7 +1,9 @@
 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}.
+ * Extra-small trigger for arbitrary row content (`children`). Only `secondary` and `tertiary`.
+ * Optional `startIcon` / `endIcon`; otherwise shows chevrons from `caretDirection`.
+ * Prefer {@link TriggerButton} for a simple label + caret.
+ *
+ * @see {@link BaseButton} for `loading` / `loadingAriaLabel` and focus behavior.
  */
 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

@@ -1,18 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
+import { bpSize040, bpSize030 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } 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)';
+const TERTIARY_ICON_COLOR = 'var(--bp-text-cta-link)';
 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}.
+ * Extra-small trigger for arbitrary row content (`children`). Only `secondary` and `tertiary`.
+ * Optional `startIcon` / `endIcon`; otherwise shows chevrons from `caretDirection`.
+ * Prefer {@link TriggerButton} for a simple label + caret.
+ *
+ * @see {@link BaseButton} for `loading` / `loadingAriaLabel` and focus behavior.
  */
 const InlineTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -30,33 +34,39 @@ const InlineTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const RightIcon = endIcon ?? caretIconForDirection(caretDirection);
-  const iconColor = variant === 'secondary' ? SECONDARY_ICON_COLOR : undefined;
+  const iconColor = variant === 'secondary' ? SECONDARY_ICON_COLOR : TERTIARY_ICON_COLOR;
+  const resolvedClassName = clsx(styles.inlineTriggerButton, styles.extraSmall, styles[variant], styles.row, {
+    [styles.startIcon]: !!startIcon,
+    [styles.endIconAlwaysVisible]: alwaysShowEndIcon && !loading
+  }, className);
   const baseButtonProps = {
     ...rest,
-    className: clsx(styles.inlineTriggerButton, styles.extraSmall, styles[variant], styles.row, {
-      [styles.startIcon]: !!startIcon,
-      [styles.endIconAlwaysVisible]: alwaysShowEndIcon && !loading
-    }, className),
+    className: resolvedClassName,
     'data-inline-trigger-loading': loading ? 'true' : undefined,
     loading,
     size: 'small',
     style,
     variant
   };
+  const resolvedStartIconProps = useMemo(() => ({
+    color: iconColor,
+    height: bpSize040,
+    width: bpSize040,
+    ...startIconProps
+  }), [iconColor, startIconProps]);
+  const resolvedEndIconProps = useMemo(() => ({
+    color: iconColor,
+    height: bpSize030,
+    width: bpSize030,
+    ...endIconProps
+  }), [endIconProps, iconColor]);
   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
-      }
+      iconProps: resolvedStartIconProps
     }) : null, jsx(BaseButton.Label, {
       className: styles.contentSlot,
       children: jsx("span", {
@@ -66,14 +76,7 @@ const InlineTriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }), 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
-      }
+      iconProps: resolvedEndIconProps
     })]
   });
 });

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

@@ -30,6 +30,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
     container: container,
     children: jsx(RadixDialog.Overlay, {
       className: styles.overlay,
+      "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "data-modern": enableModernizedComponents ? 'true' : 'false',
       children: jsx(RadixDialog.Content, {
         ...props,

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.27.0",
+    "version": "14.30.1",
     "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.116.6",
+        "@box/blueprint-web-assets": "^4.117.3",
         "@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.20",
+        "@box/storybook-utils": "^0.19.3",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",