@box/blueprint-web 13.6.0 → 13.7.0

package/dist/lib-esm/accordion/accordion-item-header.d.ts

@@ -5,8 +5,9 @@ export interface AccordionItemHeaderProps {
     iconVariant?: 'alert-error' | 'status-pending' | 'status-modified';
     iconAriaLabel?: string;
     error?: string;
+    startElement?: ReactNode;
 }
-export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error, startElement, }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export interface AccordionActionSlotProps {
     action?: ReactNode;
 }

package/dist/lib-esm/accordion/accordion-item-header.js

@@ -31,7 +31,8 @@ const AccordionItemHeader = ({
   status,
   iconVariant,
   iconAriaLabel,
-  error
+  error,
+  startElement
 }) => {
   const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
   const {
@@ -41,8 +42,14 @@ const AccordionItemHeader = ({
   } = iconProps ?? {};
   return jsxs("h4", {
     className: styles.accordionHeader,
-    children: [jsx("span", {
-      children: title
+    children: [jsxs("span", {
+      className: styles.accordionTitleGroup,
+      children: [startElement && jsx("span", {
+        className: styles.accordionStartElement,
+        children: startElement
+      }), jsx("span", {
+        children: title
+      })]
     }), isDefined(status) && jsx("span", {
       className: styles.accordionHeaderInfoSlot,
       children: jsx(Status, {

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

@@ -76,6 +76,7 @@ const Item = props => {
     iconVariant,
     iconAriaLabel,
     title,
+    startElement,
     disabled,
     error,
     errorIconAriaLabel,
@@ -113,7 +114,8 @@ const Item = props => {
             iconAriaLabel: iconAriaLabel,
             iconVariant: iconVariant,
             status: status,
-            title: title
+            title: title,
+            startElement: startElement
           })
         }), jsx(AccordionActionSlot, {
           action: action

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionItem":"bp_accordion_module_accordionItem--0d368","accordionContent":"bp_accordion_module_accordionContent--0d368","accordion":"bp_accordion_module_accordion--0d368","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--0d368","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--0d368","accordionFixedContent":"bp_accordion_module_accordionFixedContent--0d368","accordionHeader":"bp_accordion_module_accordionHeader--0d368","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--0d368","accordionSlot":"bp_accordion_module_accordionSlot--0d368","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--0d368","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--0d368","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--0d368","bgOnly":"bp_accordion_module_bgOnly--0d368","withIcon":"bp_accordion_module_withIcon--0d368","accordionTrigger":"bp_accordion_module_accordionTrigger--0d368","disabled":"bp_accordion_module_disabled--0d368","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--0d368"};
+var styles = {"accordionItem":"bp_accordion_module_accordionItem--a6392","accordionContent":"bp_accordion_module_accordionContent--a6392","accordion":"bp_accordion_module_accordion--a6392","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--a6392","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--a6392","accordionFixedContent":"bp_accordion_module_accordionFixedContent--a6392","accordionHeader":"bp_accordion_module_accordionHeader--a6392","accordionTitleGroup":"bp_accordion_module_accordionTitleGroup--a6392","accordionStartElement":"bp_accordion_module_accordionStartElement--a6392","accordionHeaderInfoSlot":"bp_accordion_module_accordionHeaderInfoSlot--a6392","accordionSlot":"bp_accordion_module_accordionSlot--a6392","accordionChevronWrapper":"bp_accordion_module_accordionChevronWrapper--a6392","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--a6392","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--a6392","bgOnly":"bp_accordion_module_bgOnly--a6392","withIcon":"bp_accordion_module_withIcon--a6392","accordionTrigger":"bp_accordion_module_accordionTrigger--a6392","disabled":"bp_accordion_module_disabled--a6392","accordionHeaderContainer":"bp_accordion_module_accordionHeaderContainer--a6392"};
 
 export { styles as default };

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

@@ -64,6 +64,10 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Disabled state of the section.
      */
     disabled?: boolean;
+    /**
+     * Element displayed to the left of the title.
+     */
+    startElement?: React.ReactNode;
 } & HeaderSlotProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;

package/dist/lib-esm/collapsible/collapsible-section.d.ts

@@ -1,5 +1,5 @@
 import { type CollapsibleSectionProps } from './types';
-type CollapsibleSectionSlotName = 'header' | 'content';
+type CollapsibleSectionSlotName = 'header' | 'content' | 'action';
 export declare const CollapsibleSection: import("react").ForwardRefExoticComponent<Omit<CollapsibleSectionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Slot: (props: {
         name: CollapsibleSectionSlotName;

package/dist/lib-esm/collapsible/collapsible-section.js

@@ -26,7 +26,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     enableModernizedComponents
   } = useBlueprintModernization();
   const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
-  const [headerSlot, contentSlot] = useNamedSlots(children, ['header', 'content']);
+  const [headerSlot, contentSlot, actionSlot] = useNamedSlots(children, ['header', 'content', 'action']);
   useEffect(() => {
     setCollapsibleSectionOpen(open);
   }, [open]);
@@ -56,20 +56,30 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     "data-variant": variant,
     onOpenChange: onCollapsibleOpenChanged,
     open: collapsibleSectionOpen,
-    children: [jsx(Collapsible.Trigger, {
+    children: [isBorderless ? jsxs("div", {
+      className: styles.collapsibleSectionHeaderRow,
+      children: [jsx(Collapsible.Trigger, {
+        asChild: true,
+        children: jsxs("div", {
+          "aria-label": iconAriaLabel,
+          className: styles.collapsibleSectionHeader,
+          onKeyDown: handleKeyDown,
+          role: "button",
+          tabIndex: 0,
+          children: [headerSlot?.props.children, jsx(BorderlessIcon, {
+            "aria-hidden": true,
+            className: styles.collapsibleSectionHeaderArrow,
+            height: Size4,
+            width: Size4
+          })]
+        })
+      }), collapsibleSectionOpen && actionSlot?.props.children]
+    }) : jsx(Collapsible.Trigger, {
       asChild: true,
       children: jsxs("div", {
-        "aria-label": isBorderless ? iconAriaLabel : undefined,
         className: styles.collapsibleSectionHeader,
-        onKeyDown: isBorderless ? handleKeyDown : undefined,
         role: "button",
-        tabIndex: isBorderless ? 0 : undefined,
-        children: [headerSlot?.props.children, isBorderless ? jsx(BorderlessIcon, {
-          "aria-hidden": true,
-          className: styles.collapsibleSectionHeaderArrow,
-          height: Size4,
-          width: Size4
-        }) : jsx(IconButton, {
+        children: [headerSlot?.props.children, jsx(IconButton, {
           "aria-label": iconAriaLabel,
           className: styles.collapsibleSectionHeaderArrow,
           icon: collapsibleSectionOpen ? icon.up : icon.down,

package/dist/lib-esm/collapsible/collapsible-section.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--acc50","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--acc50","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--acc50","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--acc50","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--acc50"};
+var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--8d19b","collapsibleSectionHeaderRow":"bp_collapsible_section_module_collapsibleSectionHeaderRow--8d19b","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--8d19b","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--8d19b","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--8d19b","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--8d19b"};
 
 export { styles as default };

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

@@ -12,7 +12,8 @@ export type CollapsibleSectionProps = RadixCollapsibleSectionProps & React.Compo
     /**
      * Visual variant of the collapsible section
      * - default: Full width with border and background
-     * - borderless: No border, header fits content width
+     * - borderless: No border, header fits content width. Supports an optional
+     *   "action" slot rendered beside the header, visible only when the section is open.
      * @default 'default'
      */
     variant?: CollapsibleSectionVariant;

package/dist/lib-esm/index.css

@@ -1458,7 +1458,7 @@
   background-color:var(--status-interactive-background-green-focus);
 }
 
-.bp_accordion_module_accordionItem--0d368[data-modern=false]{
+.bp_accordion_module_accordionItem--a6392[data-modern=false]{
   --accordion-min-width:320px;
   --accordion-item-radius:none;
   --accordion-item-radius-expanded:none;
@@ -1497,7 +1497,7 @@
   --accordion-item-header-min-height:unset;
 }
 
-.bp_accordion_module_accordionItem--0d368[data-modern=true]{
+.bp_accordion_module_accordionItem--a6392[data-modern=true]{
   --accordion-min-width:320px;
   --accordion-item-radius:var(--bp-radius-08);
   --accordion-item-radius-expanded:var(--bp-radius-10);
@@ -1536,19 +1536,19 @@
   --accordion-item-header-min-height:var(--bp-size-080);
 }
 
-.bp_accordion_module_accordionContent--0d368[data-state=open]{
-  animation:bp_accordion_module_slideDown--0d368 .15s ease-out;
+.bp_accordion_module_accordionContent--a6392[data-state=open]{
+  animation:bp_accordion_module_slideDown--a6392 .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--0d368[data-state=closed]{
-  animation:bp_accordion_module_slideUp--0d368 .15s ease-out;
+.bp_accordion_module_accordionContent--a6392[data-state=closed]{
+  animation:bp_accordion_module_slideUp--a6392 .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--0d368{
+.bp_accordion_module_accordionContent--a6392{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--0d368{
+@keyframes bp_accordion_module_slideDown--a6392{
   from{
     height:0;
   }
@@ -1556,7 +1556,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--0d368{
+@keyframes bp_accordion_module_slideUp--a6392{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -1564,14 +1564,14 @@
     height:0;
   }
 }
-.bp_accordion_module_accordion--0d368{
+.bp_accordion_module_accordion--a6392{
   display:flex;
   flex-direction:column;
   gap:var(--bp-space-030);
   padding:var(--bp-space-030);
 }
 
-.bp_accordion_module_accordionContentWrapper--0d368{
+.bp_accordion_module_accordionContentWrapper--a6392{
   display:flex;
   flex-direction:column;
   gap:var(--accordion-content-gap);
@@ -1580,26 +1580,26 @@
   padding-inline:var(--accordion-content-padding-inline);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--0d368{
+.bp_accordion_module_accordionInlineErrorWrapper--a6392{
   padding-block-start:var(--accordion-error-padding-block-start);
   padding-inline:var(--accordion-error-padding-inline);
 }
 
-.bp_accordion_module_accordionItem--0d368{
+.bp_accordion_module_accordionItem--a6392{
   -webkit-tap-highlight-color:transparent;
   background:none;
   border-bottom:var(--accordion-item-border);
   border-radius:var(--accordion-item-radius);
   min-width:var(--accordion-min-width);
 }
-.bp_accordion_module_accordionItem--0d368[data-state=open]{
+.bp_accordion_module_accordionItem--a6392[data-state=open]{
   background-color:var(--accordion-item-background-expanded);
   border:var(--accordion-item-border-expanded);
   border-bottom:var(--accordion-item-border-bottom-expanded);
   border-radius:var(--accordion-item-radius-expanded);
 }
 
-.bp_accordion_module_accordionFixedContent--0d368{
+.bp_accordion_module_accordionFixedContent--a6392{
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
   border-radius:var(--accordion-item-radius);
@@ -1610,7 +1610,7 @@
   padding-inline:var(--accordion-fixed-content-padding-inline);
 }
 
-.bp_accordion_module_accordionHeader--0d368{
+.bp_accordion_module_accordionHeader--a6392{
   align-items:center;
   display:flex;
   justify-content:space-between;
@@ -1620,13 +1620,26 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionHeaderInfoSlot--0d368{
+.bp_accordion_module_accordionTitleGroup--a6392{
+  align-items:center;
+  display:flex;
+  gap:var(--bp-space-020, .5rem);
+  min-width:0;
+}
+
+.bp_accordion_module_accordionStartElement--a6392{
+  align-items:center;
+  display:flex;
+  flex-shrink:0;
+}
+
+.bp_accordion_module_accordionHeaderInfoSlot--a6392{
   align-items:center;
   display:flex;
   margin-inline-start:var(--accordion-chevron-margin-inline-start);
 }
 
-.bp_accordion_module_accordionItem--0d368[data-modern=false] .bp_accordion_module_accordionHeader--0d368{
+.bp_accordion_module_accordionItem--a6392[data-modern=false] .bp_accordion_module_accordionHeader--a6392{
   color:var(--accordion-header-text-color);
   font-family:var(--title-small-font-family);
   font-size:var(--title-small-font-size);
@@ -1637,7 +1650,7 @@
   text-transform:var(--title-small-text-case);
 }
 
-.bp_accordion_module_accordionItem--0d368[data-modern=true] .bp_accordion_module_accordionHeader--0d368{
+.bp_accordion_module_accordionItem--a6392[data-modern=true] .bp_accordion_module_accordionHeader--a6392{
   color:var(--accordion-header-text-color);
   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-06);
@@ -1647,31 +1660,31 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_accordion_module_accordionSlot--0d368{
+.bp_accordion_module_accordionSlot--a6392{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionChevronWrapper--0d368{
+.bp_accordion_module_accordionChevronWrapper--a6392{
   align-items:center;
   cursor:pointer;
   display:flex;
   padding-inline-end:var(--space-6);
 }
-.bp_accordion_module_accordionChevronWrapper--0d368 .bp_accordion_module_accordionTriggerIcon--0d368{
+.bp_accordion_module_accordionChevronWrapper--a6392 .bp_accordion_module_accordionTriggerIcon--a6392{
   flex-shrink:0;
   transform:var(--accordion-trigger-icon-transform-collapsed);
 }
 
-.bp_accordion_module_accordionItem--0d368[data-modern=true] .bp_accordion_module_accordionChevronWrapper--0d368{
+.bp_accordion_module_accordionItem--a6392[data-modern=true] .bp_accordion_module_accordionChevronWrapper--a6392{
   padding-inline-end:var(--bp-space-040);
 }
 
-.bp_accordion_module_accordionItem--0d368[data-state=open] .bp_accordion_module_accordionChevronWrapper--0d368 .bp_accordion_module_accordionTriggerIcon--0d368{
+.bp_accordion_module_accordionItem--a6392[data-state=open] .bp_accordion_module_accordionChevronWrapper--a6392 .bp_accordion_module_accordionTriggerIcon--a6392{
   transform:var(--accordion-trigger-icon-transform-expanded);
 }
 
-.bp_accordion_module_accordionIconWrapper--0d368{
+.bp_accordion_module_accordionIconWrapper--a6392{
   align-items:center;
   border-radius:var(--accordion-icon-radius);
   display:flex;
@@ -1679,16 +1692,16 @@
   justify-content:center;
   width:var(--accordion-icon-size);
 }
-.bp_accordion_module_accordionIconWrapper--0d368.bp_accordion_module_bgOnly--0d368{
+.bp_accordion_module_accordionIconWrapper--a6392.bp_accordion_module_bgOnly--a6392{
   height:var(--accordion-bg-only-status-size);
   width:var(--accordion-bg-only-status-size);
 }
-.bp_accordion_module_accordionIconWrapper--0d368.bp_accordion_module_withIcon--0d368{
+.bp_accordion_module_accordionIconWrapper--a6392.bp_accordion_module_withIcon--a6392{
   height:var(--accordion-icon-size);
   width:var(--accordion-icon-size);
 }
 
-.bp_accordion_module_accordionTrigger--0d368{
+.bp_accordion_module_accordionTrigger--a6392{
   align-items:center;
   background:#0000;
   border:none;
@@ -1699,19 +1712,19 @@
   padding:var(--accordion-trigger-padding);
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--0d368.bp_accordion_module_disabled--0d368,.bp_accordion_module_accordionTrigger--0d368:disabled{
+.bp_accordion_module_accordionTrigger--a6392.bp_accordion_module_disabled--a6392,.bp_accordion_module_accordionTrigger--a6392:disabled{
   cursor:default;
   opacity:.3;
   pointer-events:none;
 }
-.bp_accordion_module_accordionTrigger--0d368:focus-visible{
+.bp_accordion_module_accordionTrigger--a6392:focus-visible{
   outline:none;
 }
-.bp_accordion_module_accordionTrigger--0d368:hover:not(:disabled, .bp_accordion_module_disabled--0d368){
+.bp_accordion_module_accordionTrigger--a6392:hover:not(:disabled, .bp_accordion_module_disabled--a6392){
   cursor:pointer;
 }
 
-.bp_accordion_module_accordionHeaderContainer--0d368{
+.bp_accordion_module_accordionHeaderContainer--a6392{
   align-items:stretch;
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
@@ -1720,40 +1733,40 @@
   gap:var(--accordion-chevron-margin-inline-start);
 }
 
-.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368.bp_accordion_module_disabled--0d368),.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368:disabled){
+.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392.bp_accordion_module_disabled--a6392),.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392:disabled){
   cursor:default;
 }
-.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368.bp_accordion_module_disabled--0d368) > .bp_accordion_module_accordionChevronWrapper--0d368,.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368:disabled) > .bp_accordion_module_accordionChevronWrapper--0d368{
+.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392.bp_accordion_module_disabled--a6392) > .bp_accordion_module_accordionChevronWrapper--a6392,.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392:disabled) > .bp_accordion_module_accordionChevronWrapper--a6392{
   opacity:.3;
   pointer-events:none;
 }
 
-.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368[data-state=open]){
+.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392[data-state=open]){
   background-color:initial;
   border:none;
   border-radius:var(--accordion-item-radius-expanded) var(--accordion-item-radius-expanded) 0 0;
 }
 
-.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368:focus-visible){
+.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392:focus-visible){
   background-color:var(--accordion-trigger-collapsed-background-focus);
   border:var(--accordion-trigger-border-hover);
   box-shadow:var(--accordion-trigger-box-shadow);
   outline:none;
 }
 
-.bp_accordion_module_accordionHeaderContainer--0d368:hover:not(:has(.bp_accordion_module_accordionTrigger--0d368:disabled), :has(.bp_accordion_module_accordionTrigger--0d368.bp_accordion_module_disabled--0d368)){
+.bp_accordion_module_accordionHeaderContainer--a6392:hover:not(:has(.bp_accordion_module_accordionTrigger--a6392:disabled), :has(.bp_accordion_module_accordionTrigger--a6392.bp_accordion_module_disabled--a6392)){
   background-color:var(--accordion-trigger-collapsed-background-hover);
   border:var(--accordion-trigger-border-hover);
   cursor:pointer;
 }
 
-.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368[data-state=open]):has(.bp_accordion_module_accordionTrigger--0d368:focus-visible){
+.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392[data-state=open]):has(.bp_accordion_module_accordionTrigger--a6392:focus-visible){
   background-color:var(--accordion-trigger-expanded-background-focus);
   border:none;
 }
 
-.bp_accordion_module_accordionHeaderContainer--0d368:has(.bp_accordion_module_accordionTrigger--0d368[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--0d368:disabled),
-:has(.bp_accordion_module_accordionTrigger--0d368.bp_accordion_module_disabled--0d368)){
+.bp_accordion_module_accordionHeaderContainer--a6392:has(.bp_accordion_module_accordionTrigger--a6392[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--a6392:disabled),
+:has(.bp_accordion_module_accordionTrigger--a6392.bp_accordion_module_disabled--a6392)){
   background-color:initial;
   border:none;
 }
@@ -3254,7 +3267,7 @@
     transition:none;
   }
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-modern=false]{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-modern=false]{
   --collapsible-section-header-padding:var(--space-5);
   --collapsible-section-body-padding:var(--space-5);
   --collapsible-section-padding:var(--space-5);
@@ -3269,7 +3282,7 @@
   --collapsible-section-header-expanded-border-bottom:var(--border-1) solid var(--border-collapsible-border);
 }
 
-.bp_collapsible_section_module_collapsibleSection--acc50[data-modern=true]{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-modern=true]{
   --collapsible-section-header-padding:var(--bp-space-050) var(--bp-space-020);
   --collapsible-section-body-padding:var(--bp-space-040) var(--bp-space-050);
   --collapsible-section-padding:var(--bp-space-050);
@@ -3284,7 +3297,7 @@
   --collapsible-section-header-expanded-border-bottom:none;
 }
 
-.bp_collapsible_section_module_collapsibleSection--acc50[data-modern=false][data-variant=borderless]{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-modern=false][data-variant=borderless]{
   --collapsible-section-border:none;
   --collapsible-section-header-background-color:#0000;
   --collapsible-section-content-background-color:#0000;
@@ -3298,7 +3311,7 @@
   --collapsible-section-borderless-header-hover-background:var(--surface-cta-surface-tertiary-hover);
 }
 
-.bp_collapsible_section_module_collapsibleSection--acc50[data-modern=true][data-variant=borderless]{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-modern=true][data-variant=borderless]{
   --collapsible-section-border:none;
   --collapsible-section-header-background-color:#0000;
   --collapsible-section-content-background-color:#0000;
@@ -3312,81 +3325,83 @@
   --collapsible-section-borderless-header-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
 }
 
-.bp_collapsible_section_module_collapsibleSection--acc50{
+.bp_collapsible_section_module_collapsibleSection--8d19b{
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--acc50{
+.bp_collapsible_section_module_collapsibleSectionHeader--8d19b,.bp_collapsible_section_module_collapsibleSectionHeaderRow--8d19b{
   align-items:center;
+  display:flex;
+  justify-content:space-between;
+  width:100%;
+}
+.bp_collapsible_section_module_collapsibleSectionHeader--8d19b{
   background:var(--collapsible-section-header-background-color);
   border:var(--collapsible-section-border);
   border-radius:var(--collapsible-section-border-radius);
   box-sizing:border-box;
   cursor:pointer;
-  display:flex;
-  justify-content:space-between;
   outline:0;
   padding-block:var(--collapsible-section-padding);
   padding-inline:var(--collapsible-section-padding);
   position:relative;
   -webkit-user-select:none;
           user-select:none;
-  width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--acc50:focus::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--8d19b:focus::before{
   border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
   border-radius:var(--collapsible-section-outline-border-radius);
   content:"";
   inset:var(--collapsible-section-outline-offset);
   position:absolute;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--acc50[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--acc50[aria-expanded=true]::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--8d19b[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--8d19b[aria-expanded=true]::before{
   border-end-end-radius:0;
   border-end-start-radius:0;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--acc50[aria-expanded=true]{
+.bp_collapsible_section_module_collapsibleSectionHeader--8d19b[aria-expanded=true]{
   border-bottom:var(--collapsible-section-header-expanded-border-bottom);
   padding-block:var(--collapsible-section-header-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--acc50{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--8d19b{
   display:block;
   margin-inline-start:var(--collapsible-section-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--acc50 > svg{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--8d19b > svg{
   vertical-align:middle;
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeaderArrow--acc50{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeaderArrow--8d19b{
   margin-inline-start:var(--collapsible-section-borderless-arrow-margin);
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--acc50{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--8d19b{
   margin-inline-start:calc(var(--collapsible-section-padding)*-1);
   padding-block:var(--collapsible-section-borderless-header-padding-block);
   padding-inline:var(--collapsible-section-borderless-header-padding-inline-start) .875rem;
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--acc50:focus-visible,.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--acc50:hover{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--8d19b:focus-visible,.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--8d19b:hover{
   background:var(--collapsible-section-borderless-header-hover-background);
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--acc50:focus-visible{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--8d19b:focus-visible{
   outline:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
   outline-offset:var(--collapsible-section-outline-offset);
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--acc50:focus::before{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--8d19b:focus::before{
   display:none;
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--acc50[aria-expanded=false],.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--acc50[aria-expanded=true]{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--8d19b[aria-expanded=false],.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--8d19b[aria-expanded=true]{
   border-radius:var(--collapsible-section-border-radius);
 }
-.bp_collapsible_section_module_collapsibleSectionContent--acc50{
+.bp_collapsible_section_module_collapsibleSectionContent--8d19b{
   overflow:hidden;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--acc50[data-state=open]{
-  animation:bp_collapsible_section_module_slideDown--acc50 .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--8d19b[data-state=open]{
+  animation:bp_collapsible_section_module_slideDown--8d19b .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--acc50[data-state=closed]{
-  animation:bp_collapsible_section_module_slideUp--acc50 .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--8d19b[data-state=closed]{
+  animation:bp_collapsible_section_module_slideUp--8d19b .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionBody--acc50{
+.bp_collapsible_section_module_collapsibleSectionBody--8d19b{
   align-items:center;
   background:var(--collapsible-section-content-background-color);
   border:var(--collapsible-section-border);
@@ -3398,11 +3413,11 @@
   padding-block:var(--collapsible-section-body-padding);
   padding-inline:var(--collapsible-section-padding);
 }
-.bp_collapsible_section_module_collapsibleSection--acc50[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionBody--acc50{
+.bp_collapsible_section_module_collapsibleSection--8d19b[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionBody--8d19b{
   padding-inline:0;
 }
 
-@keyframes bp_collapsible_section_module_slideDown--acc50{
+@keyframes bp_collapsible_section_module_slideDown--8d19b{
   from{
     height:0;
   }
@@ -3410,7 +3425,7 @@
     height:var(--radix-collapsible-content-height);
   }
 }
-@keyframes bp_collapsible_section_module_slideUp--acc50{
+@keyframes bp_collapsible_section_module_slideUp--8d19b{
   from{
     height:var(--radix-collapsible-content-height);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "13.6.0",
+    "version": "13.7.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.104.9",
+        "@box/blueprint-web-assets": "^4.104.11",
         "@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.16.70",
+        "@box/storybook-utils": "^0.16.72",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",