@box/blueprint-web 12.76.1 → 12.76.2

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PointerChevron, Alert, ClockBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
 import { SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue, GrayWhite, SurfaceBadgeErrorSurface, Orange100, bpSurfaceBadgeSurfaceModified } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import clsx from 'clsx';
@@ -128,7 +129,10 @@ const Item = props => {
               text: `${status}`
             }), isDefined(backgroundColor) && jsx("div", {
               "aria-label": iconAriaLabel,
-              className: styles.accordionIconWrapper,
+              className: clsx(styles.accordionIconWrapper, {
+                [styles.bgOnly]: !icon,
+                [styles.withIcon]: icon
+              }),
               role: "img",
               style: {
                 backgroundColor
@@ -140,10 +144,14 @@ const Item = props => {
                 width: '0.75rem',
                 'aria-label': iconAriaLabel
               })
-            }), jsx(PointerChevron, {
+            }), enableModernizedComponents ? jsx(ChevronRight, {
               "aria-hidden": "true",
               className: styles.accordionTriggerIcon,
-              color: enableModernizedComponents ? 'var(--bp-icon-icon-on-light-secondary)' : 'var(--bp-gray-100)'
+              color: "var(--bp-icon-icon-on-light-secondary)"
+            }) : jsx(PointerChevron, {
+              "aria-hidden": "true",
+              className: styles.accordionTriggerIcon,
+              color: "var(--bp-gray-100)"
             })]
           })]
         })

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionItem":"bp_accordion_module_accordionItem--2c42d","accordionContent":"bp_accordion_module_accordionContent--2c42d","slideDown":"bp_accordion_module_slideDown--2c42d","slideUp":"bp_accordion_module_slideUp--2c42d","accordion":"bp_accordion_module_accordion--2c42d","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--2c42d","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--2c42d","accordionFixedContent":"bp_accordion_module_accordionFixedContent--2c42d","accordionHeader":"bp_accordion_module_accordionHeader--2c42d","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--2c42d","accordionStatus":"bp_accordion_module_accordionStatus--2c42d","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--2c42d","accordionTrigger":"bp_accordion_module_accordionTrigger--2c42d","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--2c42d"};
+var styles = {"accordionItem":"bp_accordion_module_accordionItem--d621f","accordionContent":"bp_accordion_module_accordionContent--d621f","slideDown":"bp_accordion_module_slideDown--d621f","slideUp":"bp_accordion_module_slideUp--d621f","accordion":"bp_accordion_module_accordion--d621f","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--d621f","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--d621f","accordionFixedContent":"bp_accordion_module_accordionFixedContent--d621f","accordionHeader":"bp_accordion_module_accordionHeader--d621f","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--d621f","accordionStatus":"bp_accordion_module_accordionStatus--d621f","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--d621f","bgOnly":"bp_accordion_module_bgOnly--d621f","withIcon":"bp_accordion_module_withIcon--d621f","accordionTrigger":"bp_accordion_module_accordionTrigger--d621f","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--d621f"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -900,9 +900,10 @@
   background-color:var(--status-interactive-background-green-focus);
 }
 
-.bp_accordion_module_accordionItem--2c42d[data-modern=false]{
+.bp_accordion_module_accordionItem--d621f[data-modern=false]{
   --accordion-min-width:320px;
   --accordion-item-radius:none;
+  --accordion-item-radius-expanded:none;
   --accordion-item-background-collapsed:var(--surface-accordion-surface);
   --accordion-item-background-expanded:var(--surface-accordion-surface);
   --accordion-item-border:var(--border-1) solid var(--border-divider-border);
@@ -920,6 +921,7 @@
   --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;
@@ -935,11 +937,14 @@
   --accordion-trigger-icon-margin:var(--space-3);
   --accordion-trigger-icon-transform-collapsed:none;
   --accordion-trigger-icon-transform-expanded:rotate(180deg);
+  --accordion-chevron-margin-inline-start:var(--space-3);
+  --accordion-item-header-min-height:unset;
 }
 
-.bp_accordion_module_accordionItem--2c42d[data-modern=true]{
+.bp_accordion_module_accordionItem--d621f[data-modern=true]{
   --accordion-min-width:320px;
   --accordion-item-radius:var(--bp-radius-08);
+  --accordion-item-radius-expanded:var(--bp-radius-10);
   --accordion-item-background-collapsed:var(--bp-surface-accordion-surface-collapsed);
   --accordion-item-background-expanded:var(--bp-surface-accordion-surface-expanded);
   --accordion-item-border:none;
@@ -957,11 +962,12 @@
   --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:var(--bp-border-01) solid var(--bp-black-opacity-04);
+  --accordion-trigger-border:none;
   --accordion-trigger-expanded-border:var(--bp-border-01) solid var(--bp-surface-accordion-surface-expanded);
-  --accordion-trigger-border-hover:var(--bp-border-01) solid var(--bp-black-opacity-08);
+  --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-background-active:var(--bp-surface-accordion-surface-collapsed);
   --accordion-trigger-collapsed-background-hover:var(--bp-surface-accordion-surface-collapsed-hover);
@@ -970,23 +976,25 @@
   --accordion-trigger-expanded-background-focus:var(--bp-surface-accordion-surface-expanded-hover);
   --accordion-trigger-box-shadow:inset 0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
   --accordion-trigger-icon-margin:var(--bp-space-030);
-  --accordion-trigger-icon-transform-collapsed:rotate(270deg);
-  --accordion-trigger-icon-transform-expanded:rotate(360deg);
+  --accordion-trigger-icon-transform-collapsed:none;
+  --accordion-trigger-icon-transform-expanded:rotate(90deg);
+  --accordion-chevron-margin-inline-start:var(--bp-space-020);
+  --accordion-item-header-min-height:var(--bp-size-080);
 }
 
-.bp_accordion_module_accordionContent--2c42d[data-state=open]{
-  animation:bp_accordion_module_slideDown--2c42d .15s ease-out;
+.bp_accordion_module_accordionContent--d621f[data-state=open]{
+  animation:bp_accordion_module_slideDown--d621f .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--2c42d[data-state=closed]{
-  animation:bp_accordion_module_slideUp--2c42d .15s ease-out;
+.bp_accordion_module_accordionContent--d621f[data-state=closed]{
+  animation:bp_accordion_module_slideUp--d621f .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--2c42d{
+.bp_accordion_module_accordionContent--d621f{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--2c42d{
+@keyframes bp_accordion_module_slideDown--d621f{
   from{
     height:0;
   }
@@ -994,7 +1002,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--2c42d{
+@keyframes bp_accordion_module_slideUp--d621f{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -1002,14 +1010,14 @@
     height:0;
   }
 }
-.bp_accordion_module_accordion--2c42d{
+.bp_accordion_module_accordion--d621f{
   display:flex;
   flex-direction:column;
   gap:var(--bp-space-030);
   padding:var(--bp-space-030);
 }
 
-.bp_accordion_module_accordionContentWrapper--2c42d{
+.bp_accordion_module_accordionContentWrapper--d621f{
   display:flex;
   flex-direction:column;
   gap:var(--accordion-content-gap);
@@ -1018,24 +1026,25 @@
   padding-inline:var(--accordion-content-padding-inline);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--2c42d{
+.bp_accordion_module_accordionInlineErrorWrapper--d621f{
   padding-block-start:var(--accordion-error-padding-block-start);
   padding-inline:var(--accordion-error-padding-inline);
 }
 
-.bp_accordion_module_accordionItem--2c42d{
+.bp_accordion_module_accordionItem--d621f{
   -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--2c42d[data-state=open]{
+.bp_accordion_module_accordionItem--d621f[data-state=open]{
   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--2c42d{
+.bp_accordion_module_accordionFixedContent--d621f{
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
   border-radius:var(--accordion-item-radius);
@@ -1046,15 +1055,17 @@
   padding-inline:var(--accordion-fixed-content-padding-inline);
 }
 
-.bp_accordion_module_accordionHeader--2c42d{
+.bp_accordion_module_accordionHeader--d621f{
+  align-items:center;
   display:flex;
   justify-content:space-between;
   margin:0;
+  min-height:var(--accordion-item-header-min-height);
   text-align:initial;
   width:100%;
 }
 
-.bp_accordion_module_accordionItem--2c42d[data-modern=false] .bp_accordion_module_accordionHeader--2c42d{
+.bp_accordion_module_accordionItem--d621f[data-modern=false] .bp_accordion_module_accordionHeader--d621f{
   color:var(--accordion-header-text-color);
   font-family:var(--title-small-font-family);
   font-size:var(--title-small-font-size);
@@ -1066,7 +1077,7 @@
   text-transform:var(--title-small-text-case);
 }
 
-.bp_accordion_module_accordionItem--2c42d[data-modern=true] .bp_accordion_module_accordionHeader--2c42d{
+.bp_accordion_module_accordionItem--d621f[data-modern=true] .bp_accordion_module_accordionHeader--d621f{
   color:var(--accordion-header-text-color);
   font-family:var(--title-medium-font-family);
   font-size:var(--title-medium-font-size);
@@ -1079,16 +1090,16 @@
   text-transform:var(--title-medium-text-case);
 }
 
-.bp_accordion_module_accordionHeaderTrigger--2c42d{
+.bp_accordion_module_accordionHeaderTrigger--d621f{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionStatus--2c42d{
+.bp_accordion_module_accordionStatus--d621f{
   margin-inline-start:var(--accordion-status-margin);
 }
 
-.bp_accordion_module_accordionIconWrapper--2c42d{
+.bp_accordion_module_accordionIconWrapper--d621f{
   align-items:center;
   border-radius:var(--accordion-icon-radius);
   display:flex;
@@ -1097,8 +1108,16 @@
   margin-inline-start:var(--accordion-icon-margin);
   width:var(--accordion-icon-size);
 }
+.bp_accordion_module_accordionIconWrapper--d621f.bp_accordion_module_bgOnly--d621f{
+  height:var(--accordion-bg-only-status-size);
+  width:var(--accordion-bg-only-status-size);
+}
+.bp_accordion_module_accordionIconWrapper--d621f.bp_accordion_module_withIcon--d621f{
+  height:var(--accordion-icon-size);
+  width:var(--accordion-icon-size);
+}
 
-.bp_accordion_module_accordionTrigger--2c42d{
+.bp_accordion_module_accordionTrigger--d621f{
   align-items:center;
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
@@ -1109,41 +1128,43 @@
   text-transform:capitalize;
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--2c42d:disabled{
+.bp_accordion_module_accordionTrigger--d621f:disabled{
   cursor:default;
   opacity:.3;
 }
-.bp_accordion_module_accordionTrigger--2c42d:focus-visible{
+.bp_accordion_module_accordionTrigger--d621f: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--2c42d:hover:not(:disabled){
+.bp_accordion_module_accordionTrigger--d621f:hover:not(:disabled){
   background-color:var(--accordion-trigger-collapsed-background-hover);
   border:var(--accordion-trigger-border-hover);
   cursor:pointer;
 }
-.bp_accordion_module_accordionTrigger--2c42d[data-state=open]{
+.bp_accordion_module_accordionTrigger--d621f[data-state=open]{
   background-color:var(--accordion-item-background-expanded);
   border:var(--accordion-trigger-expanded-border);
   border-bottom-left-radius:0;
   border-bottom-right-radius:0;
+  border-top-left-radius:var(--accordion-item-radius-expanded);
+  border-top-right-radius:var(--accordion-item-radius-expanded);
 }
-.bp_accordion_module_accordionTrigger--2c42d[data-state=open]:focus-visible{
+.bp_accordion_module_accordionTrigger--d621f[data-state=open]:focus-visible{
   background-color:var(--accordion-trigger-expanded-background-focus);
   border:var(--accordion-trigger-expanded-border);
 }
-.bp_accordion_module_accordionTrigger--2c42d[data-state=open]:hover:not(:disabled){
+.bp_accordion_module_accordionTrigger--d621f[data-state=open]:hover:not(:disabled){
   background-color:var(--accordion-trigger-expanded-background-hover);
   border:var(--accordion-trigger-expanded-border);
 }
-.bp_accordion_module_accordionTrigger--2c42d .bp_accordion_module_accordionTriggerIcon--2c42d{
+.bp_accordion_module_accordionTrigger--d621f .bp_accordion_module_accordionTriggerIcon--d621f{
   flex-shrink:0;
-  margin-inline-start:var(--space-3);
+  margin-inline-start:var(--accordion-chevron-margin-inline-start);
   transform:var(--accordion-trigger-icon-transform-collapsed);
 }
-.bp_accordion_module_accordionTrigger--2c42d[data-state=open] .bp_accordion_module_accordionTriggerIcon--2c42d{
+.bp_accordion_module_accordionTrigger--d621f[data-state=open] .bp_accordion_module_accordionTriggerIcon--d621f{
   transform:var(--accordion-trigger-icon-transform-expanded);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.76.1",
+    "version": "12.76.2",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {