@box/blueprint-web 12.137.0 → 12.138.0

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export interface AccordionItemHeaderProps {
+    title: string;
+    status?: number;
+    iconVariant?: 'alert-error' | 'status-pending' | 'status-modified';
+    iconAriaLabel?: string;
+    error?: string;
+}
+export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export interface AccordionActionSlotProps {
+    action?: ReactNode;
+}
+export declare const AccordionActionSlot: ({ action }: AccordionActionSlotProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ClockBadge, Alert } from '@box/blueprint-web-assets/icons/Fill';
+import { bpSurfaceBadgeSurfaceModified, Orange100, GrayWhite, SurfaceBadgeErrorSurface, SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { createElement } from 'react';
+import { Status } from '../status/status.js';
+import { isDefined } from '../utils/isDefined.js';
+import styles from './accordion.module.js';
+
+const accordionIconVariantToIconProps = {
+  'alert-error': {
+    icon: Alert,
+    iconColor: GrayWhite,
+    backgroundColor: SurfaceBadgeErrorSurface
+  },
+  'status-pending': {
+    icon: ClockBadge,
+    iconColor: GrayWhite,
+    backgroundColor: Orange100
+  },
+  'status-modified': {
+    backgroundColor: bpSurfaceBadgeSurfaceModified
+  }
+};
+const statusColors = {
+  error: SurfaceStatusSurfaceRed,
+  default: SurfaceStatusSurfaceLightBlue
+};
+const AccordionItemHeader = ({
+  title,
+  status,
+  iconVariant,
+  iconAriaLabel,
+  error
+}) => {
+  const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
+  const {
+    backgroundColor,
+    iconColor,
+    icon
+  } = iconProps ?? {};
+  return jsxs("h4", {
+    className: styles.accordionHeader,
+    children: [jsx("span", {
+      children: title
+    }), isDefined(status) && jsx("span", {
+      className: styles.accordionHeaderInfoSlot,
+      children: jsx(Status, {
+        color: error ? statusColors.error : statusColors.default,
+        text: `${status}`
+      })
+    }), isDefined(backgroundColor) && jsx("span", {
+      className: styles.accordionHeaderInfoSlot,
+      children: jsx("div", {
+        "aria-hidden": iconAriaLabel ? 'false' : 'true',
+        ...(iconAriaLabel ? {
+          role: 'img',
+          'aria-label': iconAriaLabel
+        } : {}),
+        className: clsx(styles.accordionIconWrapper, {
+          [styles.bgOnly]: !icon,
+          [styles.withIcon]: icon
+        }),
+        style: {
+          backgroundColor
+        },
+        children: icon && /*#__PURE__*/createElement(icon, {
+          color: iconColor,
+          'aria-hidden': 'true',
+          height: '0.75rem',
+          width: '0.75rem'
+        })
+      })
+    })]
+  });
+};
+const AccordionActionSlot = ({
+  action
+}) => {
+  if (!action) {
+    return null;
+  }
+  return jsx("span", {
+    className: styles.accordionSlot,
+    children: action
+  });
+};
+
+export { AccordionActionSlot, AccordionItemHeader };

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

@@ -1,32 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ClockBadge, Alert, PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
+import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
 import { ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
-import { bpSurfaceBadgeSurfaceModified, Orange100, GrayWhite, SurfaceBadgeErrorSurface, SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import clsx from 'clsx';
-import { createElement } from 'react';
+import { useRef } from 'react';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Ghost } from '../ghost/ghost.js';
 import { InlineNotice } from '../inline-notice/inline-notice.js';
-import { Status } from '../status/status.js';
-import { isDefined } from '../utils/isDefined.js';
+import { AccordionItemHeader, AccordionActionSlot } from './accordion-item-header.js';
 import styles from './accordion.module.js';
 
-const accordionIconVariantToIconProps = {
-  'alert-error': {
-    icon: Alert,
-    iconColor: GrayWhite,
-    backgroundColor: SurfaceBadgeErrorSurface
-  },
-  'status-pending': {
-    icon: ClockBadge,
-    iconColor: GrayWhite,
-    backgroundColor: Orange100
-  },
-  'status-modified': {
-    backgroundColor: bpSurfaceBadgeSurfaceModified
-  }
-};
 /**
  * The root component that contains all the parts of a accordion.
  *
@@ -58,6 +41,7 @@ const Item = props => {
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const triggerRef = useRef(null);
   if (loading) {
     return jsx("div", {
       ...rest,
@@ -87,11 +71,6 @@ const Item = props => {
       })
     });
   }
-  const statusColors = {
-    error: SurfaceStatusSurfaceRed,
-    default: SurfaceStatusSurfaceLightBlue
-  };
-  // TODO: [DSYS-549] Refactor - spread props in a single place
   const {
     status,
     iconVariant,
@@ -100,61 +79,50 @@ const Item = props => {
     disabled,
     error,
     errorIconAriaLabel,
+    action,
     ...itemRest
   } = props;
-  const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
-  const {
-    backgroundColor,
-    iconColor,
-    icon
-  } = iconProps ?? {};
+  const chevronIcon = enableModernizedComponents ? jsx(ChevronRight, {
+    "aria-hidden": "true",
+    className: styles.accordionTriggerIcon,
+    color: "var(--bp-icon-icon-on-light-secondary)"
+  }) : jsx(PointerChevron, {
+    "aria-hidden": "true",
+    className: styles.accordionTriggerIcon,
+    color: "var(--bp-gray-100)"
+  });
+  const handleChevronClick = () => {
+    triggerRef.current?.click();
+  };
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
     className: accordionItemClasses,
     "data-modern": enableModernizedComponents ? 'true' : 'false',
     children: [jsx(RadixAccordion.Header, {
       asChild: true,
-      children: jsx(RadixAccordion.Trigger, {
-        className: styles.accordionTrigger,
-        disabled: disabled,
-        children: jsxs("h4", {
-          className: styles.accordionHeader,
-          children: [jsx("span", {
-            children: title
-          }), jsxs("div", {
-            className: styles.accordionHeaderTrigger,
-            children: [isDefined(status) && jsx(Status, {
-              className: styles.accordionStatus,
-              color: error ? statusColors.error : statusColors.default,
-              text: `${status}`
-            }), isDefined(backgroundColor) && jsx("div", {
-              "aria-label": iconAriaLabel,
-              className: clsx(styles.accordionIconWrapper, {
-                [styles.bgOnly]: !icon,
-                [styles.withIcon]: icon
-              }),
-              role: "img",
-              style: {
-                backgroundColor
-              },
-              children: icon && /*#__PURE__*/createElement(icon, {
-                color: iconColor,
-                role: 'img',
-                height: '0.75rem',
-                width: '0.75rem',
-                'aria-label': iconAriaLabel
-              })
-            }), enableModernizedComponents ? jsx(ChevronRight, {
-              "aria-hidden": "true",
-              className: styles.accordionTriggerIcon,
-              color: "var(--bp-icon-icon-on-light-secondary)"
-            }) : jsx(PointerChevron, {
-              "aria-hidden": "true",
-              className: styles.accordionTriggerIcon,
-              color: "var(--bp-gray-100)"
-            })]
-          })]
-        })
+      children: jsxs("div", {
+        className: styles.accordionHeaderContainer,
+        children: [jsx(RadixAccordion.Trigger, {
+          ref: triggerRef,
+          className: clsx(styles.accordionTrigger, {
+            [styles.disabled]: disabled
+          }),
+          disabled: disabled,
+          children: jsx(AccordionItemHeader, {
+            error: error,
+            iconAriaLabel: iconAriaLabel,
+            iconVariant: iconVariant,
+            status: status,
+            title: title
+          })
+        }), jsx(AccordionActionSlot, {
+          action: action
+        }), jsx("span", {
+          "aria-hidden": "true",
+          className: styles.accordionChevronWrapper,
+          onClick: handleChevronClick,
+          children: chevronIcon
+        })]
       })
     }), jsxs(RadixAccordion.Content, {
       className: clsx(children && styles.accordionContent),

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

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

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

@@ -26,13 +26,23 @@ interface IconProps {
      * */
     iconAriaLabel: string;
 }
-type StatusProps = {
+/**
+ * Only one header slot is allowed at a time: `status`, `iconVariant`, or `action`.
+ */
+type HeaderSlotProps = {
     status?: number;
     iconVariant?: never;
     iconAriaLabel?: never;
+    action?: never;
 } | ({
     status?: never;
-} & RequireAllOrNone<IconProps, keyof IconProps>);
+    action?: never;
+} & RequireAllOrNone<IconProps, keyof IconProps>) | {
+    status?: never;
+    iconVariant?: never;
+    iconAriaLabel?: never;
+    action?: React.ReactNode;
+};
 export type AccordionBaseItem = {
     /**
      * Content of the accordion item that is displayed when the section is expanded
@@ -54,7 +64,7 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Disabled state of the section.
      */
     disabled?: boolean;
-} & StatusProps;
+} & HeaderSlotProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
 export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;

package/dist/lib-esm/index.css

@@ -1446,7 +1446,7 @@
   background-color:var(--status-interactive-background-green-focus);
 }
 
-.bp_accordion_module_accordionItem--a8cec[data-modern=false]{
+.bp_accordion_module_accordionItem--9048c[data-modern=false]{
   --accordion-min-width:320px;
   --accordion-item-radius:none;
   --accordion-item-radius-expanded:none;
@@ -1465,15 +1465,13 @@
   --accordion-fixed-content-padding-block:var(--space-5);
   --accordion-fixed-content-padding-inline:var(--space-4);
   --accordion-header-text-color:var(--text-text-on-light);
-  --accordion-status-margin:var(--space-2);
   --accordion-icon-size:var(--size-4);
   --accordion-bg-only-status-size:var(--size-4);
   --accordion-icon-radius:var(--radius-half);
-  --accordion-icon-margin:var(--space-2);
   --accordion-trigger-border:none;
   --accordion-trigger-expanded-border:none;
   --accordion-trigger-border-hover:none;
-  --accordion-trigger-padding:var(--space-4) var(--space-6) var(--space-4) var(--space-4);
+  --accordion-trigger-padding:var(--space-4) 0 var(--space-4) var(--space-4);
   --accordion-trigger-background-active:var(--surface-surface);
   --accordion-trigger-collapsed-background-hover:var(--surface-accordion-surface-hover);
   --accordion-trigger-expanded-background-hover:var(--surface-accordion-surface-hover);
@@ -1487,7 +1485,7 @@
   --accordion-item-header-min-height:unset;
 }
 
-.bp_accordion_module_accordionItem--a8cec[data-modern=true]{
+.bp_accordion_module_accordionItem--9048c[data-modern=true]{
   --accordion-min-width:320px;
   --accordion-item-radius:var(--bp-radius-08);
   --accordion-item-radius-expanded:var(--bp-radius-10);
@@ -1506,15 +1504,13 @@
   --accordion-fixed-content-padding-block:0.625rem;
   --accordion-fixed-content-padding-inline:0.625rem;
   --accordion-header-text-color:var(--bp-text-text-on-light);
-  --accordion-status-margin:var(--bp-space-020);
   --accordion-icon-size:var(--bp-size-050);
   --accordion-bg-only-status-size:var(--bp-size-040);
   --accordion-icon-radius:var(--bp-radius-16);
-  --accordion-icon-margin:var(--bp-space-020);
   --accordion-trigger-border:none;
   --accordion-trigger-expanded-border:var(--bp-border-01) solid var(--bp-surface-accordion-surface-expanded);
   --accordion-trigger-border-hover:none;
-  --accordion-trigger-padding:var(--bp-space-030) var(--bp-space-040) var(--bp-space-030) var(--bp-space-040);
+  --accordion-trigger-padding:var(--bp-space-030) 0 var(--bp-space-030) var(--bp-space-040);
   --accordion-trigger-background-active:var(--bp-surface-accordion-surface-collapsed);
   --accordion-trigger-collapsed-background-hover:var(--bp-surface-accordion-surface-collapsed-hover);
   --accordion-trigger-expanded-background-hover:var(--bp-surface-accordion-surface-expanded-hover);
@@ -1528,19 +1524,19 @@
   --accordion-item-header-min-height:var(--bp-size-080);
 }
 
-.bp_accordion_module_accordionContent--a8cec[data-state=open]{
-  animation:bp_accordion_module_slideDown--a8cec .15s ease-out;
+.bp_accordion_module_accordionContent--9048c[data-state=open]{
+  animation:bp_accordion_module_slideDown--9048c .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--a8cec[data-state=closed]{
-  animation:bp_accordion_module_slideUp--a8cec .15s ease-out;
+.bp_accordion_module_accordionContent--9048c[data-state=closed]{
+  animation:bp_accordion_module_slideUp--9048c .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--a8cec{
+.bp_accordion_module_accordionContent--9048c{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--a8cec{
+@keyframes bp_accordion_module_slideDown--9048c{
   from{
     height:0;
   }
@@ -1548,7 +1544,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--a8cec{
+@keyframes bp_accordion_module_slideUp--9048c{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -1556,14 +1552,14 @@
     height:0;
   }
 }
-.bp_accordion_module_accordion--a8cec{
+.bp_accordion_module_accordion--9048c{
   display:flex;
   flex-direction:column;
   gap:var(--bp-space-030);
   padding:var(--bp-space-030);
 }
 
-.bp_accordion_module_accordionContentWrapper--a8cec{
+.bp_accordion_module_accordionContentWrapper--9048c{
   display:flex;
   flex-direction:column;
   gap:var(--accordion-content-gap);
@@ -1572,26 +1568,26 @@
   padding-inline:var(--accordion-content-padding-inline);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--a8cec{
+.bp_accordion_module_accordionInlineErrorWrapper--9048c{
   padding-block-start:var(--accordion-error-padding-block-start);
   padding-inline:var(--accordion-error-padding-inline);
 }
 
-.bp_accordion_module_accordionItem--a8cec{
+.bp_accordion_module_accordionItem--9048c{
   -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--a8cec[data-state=open]{
+.bp_accordion_module_accordionItem--9048c[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--a8cec{
+.bp_accordion_module_accordionFixedContent--9048c{
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
   border-radius:var(--accordion-item-radius);
@@ -1602,7 +1598,7 @@
   padding-inline:var(--accordion-fixed-content-padding-inline);
 }
 
-.bp_accordion_module_accordionHeader--a8cec{
+.bp_accordion_module_accordionHeader--9048c{
   align-items:center;
   display:flex;
   justify-content:space-between;
@@ -1612,7 +1608,13 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionItem--a8cec[data-modern=false] .bp_accordion_module_accordionHeader--a8cec{
+.bp_accordion_module_accordionHeaderInfoSlot--9048c{
+  align-items:center;
+  display:flex;
+  margin-inline-start:var(--accordion-chevron-margin-inline-start);
+}
+
+.bp_accordion_module_accordionItem--9048c[data-modern=false] .bp_accordion_module_accordionHeader--9048c{
   color:var(--accordion-header-text-color);
   font-family:var(--title-small-font-family);
   font-size:var(--title-small-font-size);
@@ -1624,7 +1626,7 @@
   text-transform:var(--title-small-text-case);
 }
 
-.bp_accordion_module_accordionItem--a8cec[data-modern=true] .bp_accordion_module_accordionHeader--a8cec{
+.bp_accordion_module_accordionItem--9048c[data-modern=true] .bp_accordion_module_accordionHeader--9048c{
   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);
@@ -1634,78 +1636,115 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_accordion_module_accordionHeaderTrigger--a8cec{
+.bp_accordion_module_accordionSlot--9048c{
+  align-items:center;
+  display:flex;
+}
+
+.bp_accordion_module_accordionChevronWrapper--9048c{
   align-items:center;
+  cursor:pointer;
   display:flex;
+  padding-inline-end:var(--space-6);
+}
+.bp_accordion_module_accordionChevronWrapper--9048c .bp_accordion_module_accordionTriggerIcon--9048c{
+  flex-shrink:0;
+  transform:var(--accordion-trigger-icon-transform-collapsed);
 }
 
-.bp_accordion_module_accordionStatus--a8cec{
-  margin-inline-start:var(--accordion-status-margin);
+.bp_accordion_module_accordionItem--9048c[data-modern=true] .bp_accordion_module_accordionChevronWrapper--9048c{
+  padding-inline-end:var(--bp-space-040);
 }
 
-.bp_accordion_module_accordionIconWrapper--a8cec{
+.bp_accordion_module_accordionItem--9048c[data-state=open] .bp_accordion_module_accordionChevronWrapper--9048c .bp_accordion_module_accordionTriggerIcon--9048c{
+  transform:var(--accordion-trigger-icon-transform-expanded);
+}
+
+.bp_accordion_module_accordionIconWrapper--9048c{
   align-items:center;
   border-radius:var(--accordion-icon-radius);
   display:flex;
   height:var(--accordion-icon-size);
   justify-content:center;
-  margin-inline-start:var(--accordion-icon-margin);
   width:var(--accordion-icon-size);
 }
-.bp_accordion_module_accordionIconWrapper--a8cec.bp_accordion_module_bgOnly--a8cec{
+.bp_accordion_module_accordionIconWrapper--9048c.bp_accordion_module_bgOnly--9048c{
   height:var(--accordion-bg-only-status-size);
   width:var(--accordion-bg-only-status-size);
 }
-.bp_accordion_module_accordionIconWrapper--a8cec.bp_accordion_module_withIcon--a8cec{
+.bp_accordion_module_accordionIconWrapper--9048c.bp_accordion_module_withIcon--9048c{
   height:var(--accordion-icon-size);
   width:var(--accordion-icon-size);
 }
 
-.bp_accordion_module_accordionTrigger--a8cec{
+.bp_accordion_module_accordionTrigger--9048c{
   align-items:center;
-  background-color:var(--accordion-item-background-collapsed);
-  border:var(--accordion-trigger-border);
-  border-radius:var(--accordion-item-radius);
+  background:#0000;
+  border:none;
+  border-radius:inherit;
   display:flex;
+  flex:1;
   height:100%;
   padding:var(--accordion-trigger-padding);
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--a8cec:disabled{
+.bp_accordion_module_accordionTrigger--9048c.bp_accordion_module_disabled--9048c,.bp_accordion_module_accordionTrigger--9048c:disabled{
   cursor:default;
   opacity:.3;
+  pointer-events:none;
 }
-.bp_accordion_module_accordionTrigger--a8cec:focus-visible{
+.bp_accordion_module_accordionTrigger--9048c:focus-visible{
+  outline:none;
+}
+.bp_accordion_module_accordionTrigger--9048c:hover:not(:disabled, .bp_accordion_module_disabled--9048c){
+  cursor:pointer;
+}
+
+.bp_accordion_module_accordionHeaderContainer--9048c{
+  align-items:stretch;
+  background-color:var(--accordion-item-background-collapsed);
+  border:var(--accordion-trigger-border);
+  border-radius:var(--accordion-item-radius);
+  display:flex;
+  gap:var(--accordion-chevron-margin-inline-start);
+}
+
+.bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c.bp_accordion_module_disabled--9048c),.bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c:disabled){
+  cursor:default;
+}
+.bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c.bp_accordion_module_disabled--9048c) > .bp_accordion_module_accordionChevronWrapper--9048c,.bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c:disabled) > .bp_accordion_module_accordionChevronWrapper--9048c{
+  opacity:.3;
+  pointer-events:none;
+}
+
+.bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c[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--9048c:has(.bp_accordion_module_accordionTrigger--9048c: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_accordionTrigger--a8cec:hover:not(:disabled){
+
+.bp_accordion_module_accordionHeaderContainer--9048c:hover:not(:has(.bp_accordion_module_accordionTrigger--9048c:disabled), :has(.bp_accordion_module_accordionTrigger--9048c.bp_accordion_module_disabled--9048c)){
   background-color:var(--accordion-trigger-collapsed-background-hover);
   border:var(--accordion-trigger-border-hover);
   cursor:pointer;
 }
-.bp_accordion_module_accordionTrigger--a8cec[data-state=open]{
-  background-color:var(--accordion-item-background-expanded);
-  border:var(--accordion-trigger-expanded-border);
-  border-radius:var(--accordion-item-radius-expanded) var(--accordion-item-radius-expanded) 0 0;
-}
-.bp_accordion_module_accordionTrigger--a8cec[data-state=open]:focus-visible{
+
+.bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c[data-state=open]):has(.bp_accordion_module_accordionTrigger--9048c:focus-visible){
   background-color:var(--accordion-trigger-expanded-background-focus);
-  border:var(--accordion-trigger-expanded-border);
-}
-.bp_accordion_module_accordionTrigger--a8cec[data-state=open]:hover:not(:disabled){
-  background-color:var(--accordion-trigger-expanded-background-hover);
-  border:var(--accordion-trigger-expanded-border);
-}
-.bp_accordion_module_accordionTrigger--a8cec .bp_accordion_module_accordionTriggerIcon--a8cec{
-  flex-shrink:0;
-  margin-inline-start:var(--accordion-chevron-margin-inline-start);
-  transform:var(--accordion-trigger-icon-transform-collapsed);
+  border:none;
 }
-.bp_accordion_module_accordionTrigger--a8cec[data-state=open] .bp_accordion_module_accordionTriggerIcon--a8cec{
-  transform:var(--accordion-trigger-icon-transform-expanded);
+
+.bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--9048c:disabled),
+:has(.bp_accordion_module_accordionTrigger--9048c.bp_accordion_module_disabled--9048c)){
+  background-color:initial;
+  border:none;
 }
 .bp_avatar_module_avatar--1c846[data-modern=false]{
   --avatar-background-color:var(--gray-10);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.137.0",
+    "version": "12.138.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.101.6",
+        "@box/blueprint-web-assets": "^4.101.7",
         "@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.43",
+        "@box/storybook-utils": "^0.16.44",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",