@box/blueprint-web 12.108.4 → 12.109.0

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { FolderTree, PointerRight } from '@box/blueprint-web-assets/icons/Fill';
 import { Ellipsis } from '@box/blueprint-web-assets/icons/Medium';
 import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
@@ -9,6 +9,7 @@ import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { Text } from '../text/text.js';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { PageLink } from './page-link.js';
+import { useFolderTreeTruncation } from './useFolderTreeTruncation.js';
 import styles from './breadcrumb.module.js';
 import { getSeparatorSize } from './utils.js';
 
@@ -33,17 +34,28 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const breakpoint = useBreakpoint();
   const isMobile = isResponsiveEnabled || breakpoint <= Breakpoint.Medium;
   // If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
-  const shouldTruncateCrumbs = crumbs.length > 7;
-  const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && shouldTruncateCrumbs;
+  const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && crumbs && crumbs.length > 7;
   // Get the current page (last crumb) and all ancestors (all crumbs except last)
   const currentPage = crumbs[crumbs.length - 1];
   const ancestorCrumbs = crumbs.slice(0, -1);
+  // Folder-tree truncation: detect overflow and show up to 3 visible crumbs
+  const breadcrumbListRef = useRef(null);
+  const isFolderTreeTruncationEnabled = !isMobile && truncationMethod === 'folder-tree';
+  const {
+    isTruncationRequired,
+    visibleCrumbCount,
+    iconButtonRef
+  } = useFolderTreeTruncation(breadcrumbListRef, crumbs, isFolderTreeTruncationEnabled);
+  const shouldUseFolderTreeTruncation = isFolderTreeTruncationEnabled && isTruncationRequired && crumbs;
+  const visibleCrumbs = shouldUseFolderTreeTruncation ? crumbs.slice(-visibleCrumbCount) : [];
+  const hiddenCrumbs = shouldUseFolderTreeTruncation ? crumbs.slice(0, -visibleCrumbCount) : [];
   return jsx("nav", {
     ref: forwardedRef,
     "aria-label": breadcrumbAriaLabel,
     className: styles.container,
     ...rest,
     children: jsxs("ol", {
+      ref: breadcrumbListRef,
       className: styles.breadcrumb,
       children: [!isMobile && rootIconVariant && jsxs("li", {
         className: styles.pageLink,
@@ -134,7 +146,40 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           onPageLinkClick: onPageLinkClick,
           size: size
         })]
-      }), !isMobile && !shouldUseEllipsisTruncation && crumbs.map((crumb, index) => {
+      }), shouldUseFolderTreeTruncation && jsxs(Fragment, {
+        children: [jsxs("li", {
+          ref: iconButtonRef,
+          className: styles.pageLink,
+          children: [jsxs(DropdownMenu.Root, {
+            children: [jsx(DropdownMenu.Trigger, {
+              children: jsx(IconButton, {
+                "aria-label": truncatedLinksIconAriaLabel,
+                icon: FolderTree,
+                size: "small"
+              })
+            }), jsx(DropdownMenu.Content, {
+              align: "start",
+              children: hiddenCrumbs.map(crumb => jsx(DropdownMenu.Item, {
+                onSelect: handlePageLinkClick(crumb.id),
+                children: jsx(Text, {
+                  as: "span",
+                  children: crumb.name
+                })
+              }, crumb.id))
+            })]
+          }), jsx(PointerRight, {
+            height: getSeparatorSize(size),
+            role: "presentation",
+            width: getSeparatorSize(size)
+          })]
+        }), visibleCrumbs.map((crumb, index) => jsx(PageLink, {
+          crumb: crumb,
+          isInteractive: isInteractive,
+          isLast: index === visibleCrumbs.length - 1,
+          onPageLinkClick: onPageLinkClick,
+          size: size
+        }, crumb.id))]
+      }), !isMobile && !shouldUseEllipsisTruncation && !shouldUseFolderTreeTruncation && crumbs?.map((crumb, index) => {
         return jsx(PageLink, {
           crumb: crumb,
           isInteractive: isInteractive,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_breadcrumb_module_container--51e29","breadcrumb":"bp_breadcrumb_module_breadcrumb--51e29","pageLink":"bp_breadcrumb_module_pageLink--51e29","linkWithHover":"bp_breadcrumb_module_linkWithHover--51e29"};
+var styles = {"container":"bp_breadcrumb_module_container--bac4c","breadcrumb":"bp_breadcrumb_module_breadcrumb--bac4c","pageLink":"bp_breadcrumb_module_pageLink--bac4c","linkWithHover":"bp_breadcrumb_module_linkWithHover--bac4c"};
 
 export { styles as default };

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

@@ -25,9 +25,9 @@ export type BreadcrumbProps = {
     truncatedLinksIconAriaLabel: string;
     /** Controls behavior when there are too many crumbs to display.
      * Ellipsis shows the crumbs at the beginning and end, with an ellipsis icon in between.
-     * Folder shows only the last crumb, preceded by a folder tree icon.
+     * Folder-tree dynamically detects container overflow and shows up to 3 visible crumbs with a folder tree icon dropdown.
      */
-    truncationMethod?: 'ellipsis' | 'folder';
+    truncationMethod?: 'ellipsis' | 'folder-tree';
 } & RequireAllOrNone<rootIconProps, keyof rootIconProps>;
 /** Props for the root icon. These can be ommitted entirely to show no root icon. */
 export interface rootIconProps {

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

@@ -0,0 +1,25 @@
+import { type Crumb } from './types';
+interface FolderTreeTruncationState {
+    /** Whether the breadcrumb content would exceed the container width IF no truncation was being applied */
+    isTruncationRequired: boolean;
+    /** Number of visible crumbs (not in dropdown) to show (1-3) */
+    visibleCrumbCount: number;
+}
+interface FolderTreeTruncationResult extends FolderTreeTruncationState {
+    /** Ref to attach to the icon button container li element for width measurement */
+    iconButtonRef: React.RefObject<HTMLLIElement>;
+}
+/**
+ * Hook which calculates how many crumbs can be displayed when folder-tree truncation is enabled.
+ *
+ * ## Truncation Rules
+ * - **≤3 crumbs**: Render all crumbs first, detect overflow, truncate only if needed
+ * - **>3 crumbs**: Render truncated state immediately, show icon button + up to 3 crumbs
+ *
+ * @param containerRef - Ref to the main ol element
+ * @param crumbs - Array of breadcrumb items
+ * @param isEnabled - Whether folder-tree truncation is enabled. Can be false when responsive behavior is triggered
+ * @returns Object containing wouldCrumbsOverflow, visibleCrumbCount, and iconButtonRef
+ */
+export declare const useFolderTreeTruncation: (containerRef: React.RefObject<HTMLOListElement>, crumbs: Crumb[], isEnabled: boolean) => FolderTreeTruncationResult;
+export {};

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

@@ -0,0 +1,244 @@
+import noop from 'lodash/noop';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const getInitialState = (crumbCount, isTruncationRequiredBasedOnCrumbCount) => ({
+  isTruncationRequired: isTruncationRequiredBasedOnCrumbCount,
+  visibleCrumbCount: isTruncationRequiredBasedOnCrumbCount ? 3 : crumbCount
+});
+const calculateVisibleCrumbCount = (crumbWidths, availableWidth, gap, maxVisible) => {
+  let crumbWidthWithoutGaps = 0;
+  let visibleCount = 0;
+  for (let i = crumbWidths.length - 1; i >= 0 && visibleCount < maxVisible; i -= 1) {
+    const gapWidthsAfterAddingCrumb = gap * visibleCount; // This adds a gap for the space between the previous crumb and the proposed new crumb
+    const totalWidthAfterAddingCrumb = crumbWidthWithoutGaps + crumbWidths[i] + gapWidthsAfterAddingCrumb;
+    if (totalWidthAfterAddingCrumb <= availableWidth) {
+      crumbWidthWithoutGaps += crumbWidths[i];
+      visibleCount += 1;
+    } else {
+      break;
+    }
+  }
+  return Math.max(1, visibleCount);
+};
+const measureCrumbWidths = (children, totalCrumbCount) => {
+  // The first child is the icon button when we always truncate
+  const crumbs = children.slice(1);
+  const widths = [];
+  const startIndex = totalCrumbCount - crumbs.length;
+  crumbs.forEach((crumb, i) => {
+    widths[startIndex + i] = crumb.offsetWidth;
+  });
+  return widths;
+};
+/**
+ * Calculate total width of crumbs including gaps
+ */
+const calculateTotalWidth = (widths, gap) => {
+  const totalCrumbsWidth = widths.reduce((sum, width) => sum + width, 0);
+  const totalGapWidth = gap * Math.max(0, widths.length - 1);
+  return totalCrumbsWidth + totalGapWidth;
+};
+/**
+ * Handle >3 crumbs case: Always truncate, show icon button + up to 3 crumbs
+ */
+const handleAlwaysTruncate = (children, context) => {
+  const {
+    containerWidth,
+    gap,
+    iconButtonWidth,
+    crumbCount,
+    storedCrumbWidths
+  } = context;
+  // If we don't have stored crumb widths yet, measure them
+  const crumbWidths = storedCrumbWidths.length < crumbCount ? measureCrumbWidths(children, crumbCount) : storedCrumbWidths;
+  // Icon button not yet rendered - use conservative fallback
+  if (iconButtonWidth === 0) {
+    return {
+      state: {
+        isTruncationRequired: true,
+        visibleCrumbCount: 1
+      },
+      crumbWidths
+    };
+  }
+  const availableWidth = containerWidth - iconButtonWidth - gap;
+  const visibleCount = calculateVisibleCrumbCount(crumbWidths, availableWidth, gap, 3);
+  return {
+    state: {
+      isTruncationRequired: true,
+      visibleCrumbCount: visibleCount
+    },
+    crumbWidths
+  };
+};
+/**
+ * Get crumb widths for total width calculation
+ * Factored out into its own function to reduce cognitive complexity
+ */
+const getCrumbWidths = (children, storedWidths, crumbCount, isCurrentlyTruncated) => {
+  if (storedWidths.length === crumbCount) {
+    return storedWidths; // Already have all widths
+  }
+  // The first child could be the icon button, so we don't want to measure it as part of the crumbs
+  const crumbElements = isCurrentlyTruncated ? children.slice(1) : children;
+  return crumbElements.map(crumbElement => crumbElement.offsetWidth);
+};
+/**
+ * Handle ≤3 crumbs case: Render all first, detect overflow, truncate if needed
+ */
+const handleConditionalTruncate = (children, context, isCurrentlyTruncated) => {
+  const {
+    containerWidth,
+    gap,
+    iconButtonWidth,
+    crumbCount,
+    storedCrumbWidths
+  } = context;
+  // Get crumb widths when all crumbs are visible (not truncated)
+  const crumbWidths = !isCurrentlyTruncated && children.length === crumbCount ? children.map(crumbElement => crumbElement.offsetWidth) // fresh measurement
+  : storedCrumbWidths; // Reuse stored
+  // Calculate total width to check for overflow
+  const widthsForCalculation = getCrumbWidths(children, crumbWidths, crumbCount, isCurrentlyTruncated);
+  const totalWidth = calculateTotalWidth(widthsForCalculation, gap);
+  const areCrumbsOverflowingWithoutTruncation = totalWidth > containerWidth;
+  // No overflow - show all crumbs
+  if (!areCrumbsOverflowingWithoutTruncation) {
+    return {
+      state: {
+        isTruncationRequired: false,
+        visibleCrumbCount: crumbCount
+      },
+      crumbWidths
+    };
+  }
+  // If we are overflowing, now calculate how many crumbs fit with icon button
+  // Icon button not yet rendered - use conservative fallback
+  if (iconButtonWidth === 0) {
+    return {
+      state: {
+        isTruncationRequired: true,
+        visibleCrumbCount: 1
+      },
+      crumbWidths
+    };
+  }
+  const availableWidth = containerWidth - iconButtonWidth - gap;
+  const visibleCount = calculateVisibleCrumbCount(crumbWidths, availableWidth, gap, crumbCount);
+  return {
+    state: {
+      isTruncationRequired: true,
+      visibleCrumbCount: visibleCount
+    },
+    crumbWidths
+  };
+};
+/**
+ * Measures DOM elements and calculates truncation state
+ */
+const performTruncationCalculation = ({
+  container,
+  iconButtonRef,
+  measuredIconButtonWidth,
+  storedCrumbWidths,
+  crumbCount,
+  isTruncationRequiredBaseOnCrumbLength,
+  isTruncationRequired,
+  setState
+}) => {
+  const containerWidth = container.clientWidth;
+  const children = Array.from(container.children);
+  const computedStyle = getComputedStyle(container);
+  const gap = parseFloat(computedStyle.gap) || 0;
+  if (iconButtonRef.current) {
+    measuredIconButtonWidth.current = iconButtonRef.current.offsetWidth;
+  }
+  const context = {
+    containerWidth,
+    gap,
+    iconButtonWidth: measuredIconButtonWidth.current,
+    crumbCount,
+    storedCrumbWidths: storedCrumbWidths.current
+  };
+  const result = isTruncationRequiredBaseOnCrumbLength ? handleAlwaysTruncate(children, context) : handleConditionalTruncate(children, context, isTruncationRequired);
+  storedCrumbWidths.current = result.crumbWidths;
+  setState(result.state);
+};
+/**
+ * Hook which calculates how many crumbs can be displayed when folder-tree truncation is enabled.
+ *
+ * ## Truncation Rules
+ * - **≤3 crumbs**: Render all crumbs first, detect overflow, truncate only if needed
+ * - **>3 crumbs**: Render truncated state immediately, show icon button + up to 3 crumbs
+ *
+ * @param containerRef - Ref to the main ol element
+ * @param crumbs - Array of breadcrumb items
+ * @param isEnabled - Whether folder-tree truncation is enabled. Can be false when responsive behavior is triggered
+ * @returns Object containing wouldCrumbsOverflow, visibleCrumbCount, and iconButtonRef
+ */
+const useFolderTreeTruncation = (containerRef, crumbs, isEnabled) => {
+  const isTruncationRequiredBaseOnCrumbLength = crumbs.length > 3;
+  const [state, setState] = useState(() => getInitialState(crumbs.length, isTruncationRequiredBaseOnCrumbLength));
+  const animationFrameId = useRef(null);
+  const iconButtonRef = useRef(null);
+  // Refs are used here to persist values
+  const measuredIconButtonWidth = useRef(0);
+  const storedCrumbWidths = useRef([]);
+  const prevCrumbsLength = useRef(crumbs.length);
+  // Clear stored widths when user navigates and the visible crumbs change
+  if (prevCrumbsLength.current !== crumbs.length) {
+    storedCrumbWidths.current = [];
+    setState(getInitialState(crumbs.length, isTruncationRequiredBaseOnCrumbLength));
+    prevCrumbsLength.current = crumbs.length;
+  }
+  const calculateTruncation = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    animationFrameId.current = requestAnimationFrame(() => {
+      performTruncationCalculation({
+        container,
+        iconButtonRef,
+        measuredIconButtonWidth,
+        storedCrumbWidths,
+        crumbCount: crumbs.length,
+        isTruncationRequiredBaseOnCrumbLength,
+        isTruncationRequired: state.isTruncationRequired,
+        setState
+      });
+    });
+  }, [containerRef, crumbs.length, state.isTruncationRequired, isTruncationRequiredBaseOnCrumbLength]);
+  useEffect(() => {
+    // Reset state when truncation is disabled (e.g., responsive breakpoint triggers mobile view)
+    if (!isEnabled) {
+      setState({
+        isTruncationRequired: false,
+        visibleCrumbCount: crumbs.length
+      });
+      measuredIconButtonWidth.current = 0;
+      storedCrumbWidths.current = [];
+      return noop;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return noop;
+    }
+    const observer = new ResizeObserver(() => {
+      calculateTruncation();
+    });
+    observer.observe(container);
+    calculateTruncation();
+    return () => {
+      observer.disconnect();
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+    };
+  }, [containerRef, isEnabled, calculateTruncation, crumbs.length]);
+  return {
+    ...state,
+    iconButtonRef
+  };
+};
+
+export { useFolderTreeTruncation };

package/dist/lib-esm/index.css

@@ -2405,28 +2405,33 @@
   text-decoration-thickness:auto;
   text-underline-offset:auto;
 }
-.bp_breadcrumb_module_container--51e29{
+.bp_breadcrumb_module_container--bac4c{
   height:var(--bp-size-060);
+  width:100%;
 }
-.bp_breadcrumb_module_container--51e29 .bp_breadcrumb_module_breadcrumb--51e29{
+.bp_breadcrumb_module_container--bac4c .bp_breadcrumb_module_breadcrumb--bac4c{
   align-items:center;
   display:flex;
+  flex-wrap:nowrap;
   gap:var(--bp-size-010);
   height:100%;
   list-style:none;
   margin:0;
+  overflow:hidden;
   padding:0;
 }
-.bp_breadcrumb_module_container--51e29 .bp_breadcrumb_module_pageLink--51e29{
+.bp_breadcrumb_module_container--bac4c .bp_breadcrumb_module_pageLink--bac4c{
   align-items:center;
   display:flex;
+  flex-shrink:0;
   gap:var(--bp-size-010);
+  white-space:nowrap;
 }
 
-.bp_breadcrumb_module_linkWithHover--51e29{
+.bp_breadcrumb_module_linkWithHover--bac4c{
   position:relative;
 }
-.bp_breadcrumb_module_linkWithHover--51e29::after{
+.bp_breadcrumb_module_linkWithHover--bac4c::after{
   background-color:var(--bp-text-text-on-light-secondary);
   bottom:0;
   content:"";
@@ -2438,7 +2443,7 @@
   transition:transform var(--animation-duration-2) var(--animation-easing-ease-base);
   width:100%;
 }
-.bp_breadcrumb_module_linkWithHover--51e29:hover::after{
+.bp_breadcrumb_module_linkWithHover--bac4c:hover::after{
   transform:scaleX(1);
 }
 .bp_button_wrapper_module_buttonWrapper--b0897{
@@ -7949,7 +7954,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
 .bp_base_text_input_module_textInputContainerOuter--93760 .bp_base_text_input_module_inlineError--93760,.bp_base_text_input_module_textInputContainerOuter--93760 .bp_base_text_input_module_subtext--93760{
   margin-block-start:var(--text-input-inline-error-subtext-block-margin);
 }
-.bp_chip_module_chip--1f41c[data-modern=false]{
+.bp_chip_module_chip--7e98e[data-modern=false]{
   --chip-gap:var(--space-2);
   --chip-height:var(--size-8);
   --chip-radius:var(--radius-half);
@@ -7967,10 +7972,12 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   --chip-button-background-hover:var(--surface-chip-button-surface-hover);
   --chip-button-status-text-color:var(--text-text-on-dark);
   --chip-button-status-background:var(--box-blue-100);
+  --chip-button-icon-color:var(--icon-icon-on-light);
   --chip-button-focus-box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   --chip-button-outline-width:var(--border-2);
   --chip-button-outline-color:var(--outline-focus-on-light);
   --chip-single-select-background:var(--surface-filterchip-surface-single);
+  --chip-single-select-icon-color:var(--icon-icon-on-light);
   --chip-single-select-background-hover:var(--surface-filterchip-surface-single-hover);
   --chip-single-select-background-selected:var(--surface-filterchip-surface-single-on);
   --chip-single-select-background-selected-hover:var(--surface-filterchip-surface-single-on-hover);
@@ -7996,7 +8003,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_chip_module_chip--1f41c[data-modern=false].bp_chip_module_chipButton--1f41c,.bp_chip_module_chip--1f41c[data-modern=false].bp_chip_module_multiSelectChip--1f41c{
+.bp_chip_module_chip--7e98e[data-modern=false].bp_chip_module_chipButton--7e98e,.bp_chip_module_chip--7e98e[data-modern=false].bp_chip_module_multiSelectChip--7e98e{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -8006,7 +8013,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_chip_module_chip--1f41c[data-modern=false].bp_chip_module_multiSelectChip--1f41c span::before,.bp_chip_module_chip--1f41c[data-modern=false].bp_chip_module_multiSelectChip--1f41c[data-state=on]{
+.bp_chip_module_chip--7e98e[data-modern=false].bp_chip_module_multiSelectChip--7e98e span::before,.bp_chip_module_chip--7e98e[data-modern=false].bp_chip_module_multiSelectChip--7e98e[data-state=on]{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -8016,7 +8023,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_chip_module_chip--1f41c[data-modern=false] .bp_chip_module_chipStatus--1f41c{
+.bp_chip_module_chip--7e98e[data-modern=false] .bp_chip_module_chipStatus--7e98e{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -8027,7 +8034,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   text-transform:var(--label-bold-text-case);
 }
 
-.bp_chip_module_chip--1f41c[data-modern=true]{
+.bp_chip_module_chip--7e98e[data-modern=true]{
   --chip-gap:var(--bp-space-020);
   --chip-height:var(--bp-size-090);
   --chip-radius:var(--bp-radius-16);
@@ -8045,10 +8052,12 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   --chip-button-background-hover:var(--bp-surface-chip-button-surface-hover);
   --chip-button-status-text-color:var(--bp-text-text-on-dark);
   --chip-button-status-background:var(--bp-surface-status-surface-boxblue);
+  --chip-button-icon-color:var(--bp-icon-icon-on-light);
   --chip-button-focus-box-shadow:0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
   --chip-button-outline-width:var(--bp-border-02);
   --chip-button-outline-color:var(--bp-outline-focus-on-light);
   --chip-single-select-background:var(--bp-surface-filter-chip-surface-single);
+  --chip-single-select-icon-color:var(--bp-icon-icon-on-light);
   --chip-single-select-background-hover:var(--bp-surface-filter-chip-surface-single-hover);
   --chip-single-select-background-selected:var(--bp-surface-filter-chip-surface-single-on);
   --chip-single-select-background-selected-hover:var(--bp-surface-filter-chip-surface-single-on-hover);
@@ -8072,7 +8081,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-.bp_chip_module_chip--1f41c[data-modern=true].bp_chip_module_chipButton--1f41c,.bp_chip_module_chip--1f41c[data-modern=true].bp_chip_module_multiSelectChip--1f41c{
+.bp_chip_module_chip--7e98e[data-modern=true].bp_chip_module_chipButton--7e98e,.bp_chip_module_chip--7e98e[data-modern=true].bp_chip_module_multiSelectChip--7e98e{
   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;
@@ -8080,7 +8089,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-.bp_chip_module_chip--1f41c[data-modern=true].bp_chip_module_multiSelectChip--1f41c span::before,.bp_chip_module_chip--1f41c[data-modern=true].bp_chip_module_multiSelectChip--1f41c[data-state=on]{
+.bp_chip_module_chip--7e98e[data-modern=true].bp_chip_module_multiSelectChip--7e98e span::before,.bp_chip_module_chip--7e98e[data-modern=true].bp_chip_module_multiSelectChip--7e98e[data-state=on]{
   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;
@@ -8088,7 +8097,7 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-.bp_chip_module_chip--1f41c[data-modern=true] .bp_chip_module_chipStatus--1f41c{
+.bp_chip_module_chip--7e98e[data-modern=true] .bp_chip_module_chipStatus--7e98e{
   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-02);
   font-style:normal;
@@ -8097,22 +8106,22 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   line-height:var(--bp-font-line-height-03);
 }
 
-.bp_chip_module_chip--1f41c{
+.bp_chip_module_chip--7e98e{
   padding-inline:var(--chip-padding-inline);
 }
-.bp_chip_module_chip--1f41c .bp_chip_module_labelText--1f41c:first-child{
+.bp_chip_module_chip--7e98e .bp_chip_module_labelText--7e98e:first-child{
   margin-inline-start:var(--chip-label-inline-padding);
 }
-.bp_chip_module_chip--1f41c .bp_chip_module_labelText--1f41c:last-child{
+.bp_chip_module_chip--7e98e .bp_chip_module_labelText--7e98e:last-child{
   margin-inline-end:var(--chip-label-inline-padding);
 }
-.bp_chip_module_chip--1f41c .bp_chip_module_chipStatus--1f41c:first-child,.bp_chip_module_chip--1f41c svg:first-child{
+.bp_chip_module_chip--7e98e .bp_chip_module_chipStatus--7e98e:first-child,.bp_chip_module_chip--7e98e svg:first-child{
   margin-inline-start:var(--chip-item-inline-padding);
 }
-.bp_chip_module_chip--1f41c .bp_chip_module_chipStatus--1f41c:last-child,.bp_chip_module_chip--1f41c svg:last-child{
+.bp_chip_module_chip--7e98e .bp_chip_module_chipStatus--7e98e:last-child,.bp_chip_module_chip--7e98e svg:last-child{
   margin-inline-end:var(--chip-item-inline-padding);
 }
-.bp_chip_module_chip--1f41c{
+.bp_chip_module_chip--7e98e{
   align-items:center;
   border:none;
   border-radius:var(--chip-radius);
@@ -8122,15 +8131,15 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   gap:var(--chip-gap);
   height:var(--chip-height);
 }
-.bp_chip_module_chip--1f41c:disabled{
+.bp_chip_module_chip--7e98e:disabled{
   color:var(--chip-text-color-disabled);
   cursor:default;
   pointer-events:none;
 }
-.bp_chip_module_chip--1f41c:disabled svg{
+.bp_chip_module_chip--7e98e:disabled svg{
   opacity:.4;
 }
-.bp_chip_module_chip--1f41c .bp_chip_module_chipStatus--1f41c{
+.bp_chip_module_chip--7e98e .bp_chip_module_chipStatus--7e98e{
   align-items:center;
   background-color:var(--chip-status-background-default);
   border-radius:var(--chip-status-radius);
@@ -8142,91 +8151,100 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   justify-content:center;
   padding:var(--chip-status-padding);
 }
-.bp_chip_module_chip--1f41c .bp_chip_module_labelText--1f41c{
+.bp_chip_module_chip--7e98e .bp_chip_module_labelText--7e98e{
   white-space:nowrap;
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c:focus-visible{
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e:focus-visible{
   box-shadow:0 0 0 var(--chip-button-outline-width) var(--chip-button-outline-width);
   outline:none;
   overflow:visible;
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c{
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e path{
+  fill:var(--chip-button-icon-color);
+}
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e{
   background-color:var(--chip-button-background);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c .bp_chip_module_chipStatus--1f41c{
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e .bp_chip_module_chipStatus--7e98e{
   background-color:var(--chip-button-status-background);
   color:var(--chip-button-status-text-color);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c:focus-visible,.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c[data-active-item]{
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e:focus-visible,.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e[data-active-item]{
   box-shadow:var(--chip-button-focus-box-shadow);
   outline:none;
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c:disabled{
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e:disabled{
   pointer-events:none;
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c:disabled .bp_chip_module_chipStatus--1f41c,.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c:disabled svg{
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e:disabled .bp_chip_module_chipStatus--7e98e,.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e:disabled svg{
   opacity:.4;
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_chipButton--1f41c:hover:enabled{
+.bp_chip_module_chip--7e98e.bp_chip_module_chipButton--7e98e:hover:enabled{
   background-color:var(--chip-button-background-hover);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_singleSelectChip--1f41c{
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e path{
+  fill:var(--chip-single-select-icon-color);
+}
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e{
   background-color:var(--chip-single-select-background);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_singleSelectChip--1f41c[data-state=on]{
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e[data-state=on] path{
+  fill:var(--chip-single-select-text-color-selected);
+}
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e[data-state=on]{
   background-color:var(--chip-single-select-background-selected);
   color:var(--chip-single-select-text-color-selected);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_singleSelectChip--1f41c[data-state=on]:hover{
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e[data-state=on]:hover{
   background-color:var(--chip-single-select-background-selected-hover);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_singleSelectChip--1f41c[data-state=on] .bp_chip_module_chipStatus--1f41c{
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e[data-state=on] .bp_chip_module_chipStatus--7e98e{
   color:var(--chip-single-select-status-text-color-selected);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_singleSelectChip--1f41c:focus-visible,.bp_chip_module_chip--1f41c.bp_chip_module_singleSelectChip--1f41c[data-active-item]{
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e:focus-visible,.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e[data-active-item]{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_singleSelectChip--1f41c:hover:not([data-state=on]){
+.bp_chip_module_chip--7e98e.bp_chip_module_singleSelectChip--7e98e:hover:not([data-state=on]){
   background-color:var(--chip-single-select-background-hover);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c path{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e path{
   fill:var(--chip-multi-select-icon-color);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e{
   background-color:var(--chip-multi-select-background);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c[data-state=on] path{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e[data-state=on] path{
   fill:var(--chip-multi-select-text-color-selected);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c[data-state=on]{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e[data-state=on]{
   background-color:var(--chip-multi-select-background-selected);
   border:var(--chip-multi-select-border-selected);
   color:var(--chip-multi-select-text-color-selected);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c[data-state=on]:hover{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e[data-state=on]:hover{
   background-color:var(--chip-multi-select-background-selected-hover);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c[data-state=on]:focus-visible,.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c[data-state=on][data-active-item]{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e[data-state=on]:focus-visible,.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e[data-state=on][data-active-item]{
   border:var(--chip-multi-select-focus-border-selected);
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--chip-multi-select-border-color-selected);
   outline-offset:calc(var(--border-2)*-1);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c[data-state=on] .bp_chip_module_chipStatus--1f41c{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e[data-state=on] .bp_chip_module_chipStatus--7e98e{
   background-color:var(--chip-multi-select-status-background-selected);
   color:var(--chip-multi-select-status-text-color-selected);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c:focus-visible:not([data-state=on]),.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c[data-active-item]:not([data-state=on]){
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e:focus-visible:not([data-state=on]),.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e[data-active-item]:not([data-state=on]){
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c:hover:not([data-state=on]){
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e:hover:not([data-state=on]){
   background-color:var(--chip-multi-select-background-hover);
 }
-.bp_chip_module_chip--1f41c.bp_chip_module_multiSelectChip--1f41c span::before{
+.bp_chip_module_chip--7e98e.bp_chip_module_multiSelectChip--7e98e span::before{
   content:attr(data-text);
   display:block;
   height:0;
@@ -8234,30 +8252,30 @@ table.bp_inline_table_module_inlineTable--fc100[data-modern=true] td:last-child,
   visibility:hidden;
 }
 
-.bp_chip_module_chipsGroup--1f41c[data-modern=false]{
+.bp_chip_module_chipsGroup--7e98e[data-modern=false]{
   --chips-group-gap:var(--space-2);
   --chips-group-small-screen-padding:var(--space-5);
 }
 
-.bp_chip_module_chipsGroup--1f41c[data-modern=true]{
+.bp_chip_module_chipsGroup--7e98e[data-modern=true]{
   --chips-group-gap:var(--bp-space-020);
   --chips-group-small-screen-padding:var(--bp-space-050);
 }
 
-.bp_chip_module_chipsGroup--1f41c{
+.bp_chip_module_chipsGroup--7e98e{
   display:flex;
   flex-wrap:wrap;
   gap:var(--chips-group-gap);
 }
 @media (max-width: 767px){
-  .bp_chip_module_chipsGroup--1f41c{
+  .bp_chip_module_chipsGroup--7e98e{
     -ms-overflow-style:none;
     scrollbar-width:none;
   }
-  .bp_chip_module_chipsGroup--1f41c::-webkit-scrollbar{
+  .bp_chip_module_chipsGroup--7e98e::-webkit-scrollbar{
     display:none;
   }
-  .bp_chip_module_chipsGroup--1f41c{
+  .bp_chip_module_chipsGroup--7e98e{
     flex-wrap:nowrap;
     overflow-x:scroll;
     padding:var(--chips-group-small-screen-padding);

package/dist/lib-esm/primitives/chips/chip.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"chip":"bp_chip_module_chip--1f41c","chipButton":"bp_chip_module_chipButton--1f41c","multiSelectChip":"bp_chip_module_multiSelectChip--1f41c","chipStatus":"bp_chip_module_chipStatus--1f41c","labelText":"bp_chip_module_labelText--1f41c","singleSelectChip":"bp_chip_module_singleSelectChip--1f41c","chipsGroup":"bp_chip_module_chipsGroup--1f41c"};
+var styles = {"chip":"bp_chip_module_chip--7e98e","chipButton":"bp_chip_module_chipButton--7e98e","multiSelectChip":"bp_chip_module_multiSelectChip--7e98e","chipStatus":"bp_chip_module_chipStatus--7e98e","labelText":"bp_chip_module_labelText--7e98e","singleSelectChip":"bp_chip_module_singleSelectChip--7e98e","chipsGroup":"bp_chip_module_chipsGroup--7e98e"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.108.4",
+    "version": "12.109.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.89.3",
+        "@box/blueprint-web-assets": "^4.89.4",
         "@internationalized/date": "^3.7.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.14.37",
+        "@box/storybook-utils": "^0.14.38",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",