@box/blueprint-web 12.137.0 → 12.139.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/lib-esm/accordion/accordion-item-header.d.ts +13 -0
  2. package/dist/lib-esm/accordion/accordion-item-header.js +89 -0
  3. package/dist/lib-esm/accordion/accordion.js +40 -72
  4. package/dist/lib-esm/accordion/accordion.module.js +1 -1
  5. package/dist/lib-esm/accordion/types.d.ts +13 -3
  6. package/dist/lib-esm/button/button.figma.d.ts +1 -0
  7. package/dist/lib-esm/index.css +95 -56
  8. package/package.json +3 -3
package/dist/lib-esm/accordion/accordion-item-header.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { type ReactNode } from 'react';
2
+ export interface AccordionItemHeaderProps {
3
+ title: string;
4
+ status?: number;
5
+ iconVariant?: 'alert-error' | 'status-pending' | 'status-modified';
6
+ iconAriaLabel?: string;
7
+ error?: string;
8
+ }
9
+ export declare const AccordionItemHeader: ({ title, status, iconVariant, iconAriaLabel, error }: AccordionItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
10
+ export interface AccordionActionSlotProps {
11
+ action?: ReactNode;
12
+ }
13
+ export declare const AccordionActionSlot: ({ action }: AccordionActionSlotProps) => import("react/jsx-runtime").JSX.Element | null;
package/dist/lib-esm/accordion/accordion-item-header.js ADDED
@@ -0,0 +1,89 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { ClockBadge, Alert } from '@box/blueprint-web-assets/icons/Fill';
3
+ import { bpSurfaceBadgeSurfaceModified, Orange100, GrayWhite, SurfaceBadgeErrorSurface, SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
4
+ import clsx from 'clsx';
5
+ import { createElement } from 'react';
6
+ import { Status } from '../status/status.js';
7
+ import { isDefined } from '../utils/isDefined.js';
8
+ import styles from './accordion.module.js';
9
+
10
+ const accordionIconVariantToIconProps = {
11
+ 'alert-error': {
12
+ icon: Alert,
13
+ iconColor: GrayWhite,
14
+ backgroundColor: SurfaceBadgeErrorSurface
15
+ },
16
+ 'status-pending': {
17
+ icon: ClockBadge,
18
+ iconColor: GrayWhite,
19
+ backgroundColor: Orange100
20
+ },
21
+ 'status-modified': {
22
+ backgroundColor: bpSurfaceBadgeSurfaceModified
23
+ }
24
+ };
25
+ const statusColors = {
26
+ error: SurfaceStatusSurfaceRed,
27
+ default: SurfaceStatusSurfaceLightBlue
28
+ };
29
+ const AccordionItemHeader = ({
30
+ title,
31
+ status,
32
+ iconVariant,
33
+ iconAriaLabel,
34
+ error
35
+ }) => {
36
+ const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
37
+ const {
38
+ backgroundColor,
39
+ iconColor,
40
+ icon
41
+ } = iconProps ?? {};
42
+ return jsxs("h4", {
43
+ className: styles.accordionHeader,
44
+ children: [jsx("span", {
45
+ children: title
46
+ }), isDefined(status) && jsx("span", {
47
+ className: styles.accordionHeaderInfoSlot,
48
+ children: jsx(Status, {
49
+ color: error ? statusColors.error : statusColors.default,
50
+ text: `${status}`
51
+ })
52
+ }), isDefined(backgroundColor) && jsx("span", {
53
+ className: styles.accordionHeaderInfoSlot,
54
+ children: jsx("div", {
55
+ "aria-hidden": iconAriaLabel ? 'false' : 'true',
56
+ ...(iconAriaLabel ? {
57
+ role: 'img',
58
+ 'aria-label': iconAriaLabel
59
+ } : {}),
60
+ className: clsx(styles.accordionIconWrapper, {
61
+ [styles.bgOnly]: !icon,
62
+ [styles.withIcon]: icon
63
+ }),
64
+ style: {
65
+ backgroundColor
66
+ },
67
+ children: icon && /*#__PURE__*/createElement(icon, {
68
+ color: iconColor,
69
+ 'aria-hidden': 'true',
70
+ height: '0.75rem',
71
+ width: '0.75rem'
72
+ })
73
+ })
74
+ })]
75
+ });
76
+ };
77
+ const AccordionActionSlot = ({
78
+ action
79
+ }) => {
80
+ if (!action) {
81
+ return null;
82
+ }
83
+ return jsx("span", {
84
+ className: styles.accordionSlot,
85
+ children: action
86
+ });
87
+ };
88
+
89
+ export { AccordionActionSlot, AccordionItemHeader };
package/dist/lib-esm/accordion/accordion.js CHANGED
@@ -1,32 +1,15 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { ClockBadge, Alert, PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
2
+ import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
3
3
  import { ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
4
- import { bpSurfaceBadgeSurfaceModified, Orange100, GrayWhite, SurfaceBadgeErrorSurface, SurfaceStatusSurfaceRed, SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
5
4
  import * as RadixAccordion from '@radix-ui/react-accordion';
6
5
  import clsx from 'clsx';
7
- import { createElement } from 'react';
6
+ import { useRef } from 'react';
8
7
  import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
9
8
  import { Ghost } from '../ghost/ghost.js';
10
9
  import { InlineNotice } from '../inline-notice/inline-notice.js';
11
- import { Status } from '../status/status.js';
12
- import { isDefined } from '../utils/isDefined.js';
10
+ import { AccordionItemHeader, AccordionActionSlot } from './accordion-item-header.js';
13
11
  import styles from './accordion.module.js';
14
12
 
15
- const accordionIconVariantToIconProps = {
16
- 'alert-error': {
17
- icon: Alert,
18
- iconColor: GrayWhite,
19
- backgroundColor: SurfaceBadgeErrorSurface
20
- },
21
- 'status-pending': {
22
- icon: ClockBadge,
23
- iconColor: GrayWhite,
24
- backgroundColor: Orange100
25
- },
26
- 'status-modified': {
27
- backgroundColor: bpSurfaceBadgeSurfaceModified
28
- }
29
- };
30
13
  /**
31
14
  * The root component that contains all the parts of a accordion.
32
15
  *
@@ -58,6 +41,7 @@ const Item = props => {
58
41
  const {
59
42
  enableModernizedComponents
60
43
  } = useBlueprintModernization();
44
+ const triggerRef = useRef(null);
61
45
  if (loading) {
62
46
  return jsx("div", {
63
47
  ...rest,
@@ -87,11 +71,6 @@ const Item = props => {
87
71
  })
88
72
  });
89
73
  }
90
- const statusColors = {
91
- error: SurfaceStatusSurfaceRed,
92
- default: SurfaceStatusSurfaceLightBlue
93
- };
94
- // TODO: [DSYS-549] Refactor - spread props in a single place
95
74
  const {
96
75
  status,
97
76
  iconVariant,
@@ -100,61 +79,50 @@ const Item = props => {
100
79
  disabled,
101
80
  error,
102
81
  errorIconAriaLabel,
82
+ action,
103
83
  ...itemRest
104
84
  } = props;
105
- const iconProps = iconVariant ? accordionIconVariantToIconProps[iconVariant] : undefined;
106
- const {
107
- backgroundColor,
108
- iconColor,
109
- icon
110
- } = iconProps ?? {};
85
+ const chevronIcon = enableModernizedComponents ? jsx(ChevronRight, {
86
+ "aria-hidden": "true",
87
+ className: styles.accordionTriggerIcon,
88
+ color: "var(--bp-icon-icon-on-light-secondary)"
89
+ }) : jsx(PointerChevron, {
90
+ "aria-hidden": "true",
91
+ className: styles.accordionTriggerIcon,
92
+ color: "var(--bp-gray-100)"
93
+ });
94
+ const handleChevronClick = () => {
95
+ triggerRef.current?.click();
96
+ };
111
97
  return jsxs(RadixAccordion.Item, {
112
98
  ...itemRest,
113
99
  className: accordionItemClasses,
114
100
  "data-modern": enableModernizedComponents ? 'true' : 'false',
115
101
  children: [jsx(RadixAccordion.Header, {
116
102
  asChild: true,
117
- children: jsx(RadixAccordion.Trigger, {
118
- className: styles.accordionTrigger,
119
- disabled: disabled,
120
- children: jsxs("h4", {
121
- className: styles.accordionHeader,
122
- children: [jsx("span", {
123
- children: title
124
- }), jsxs("div", {
125
- className: styles.accordionHeaderTrigger,
126
- children: [isDefined(status) && jsx(Status, {
127
- className: styles.accordionStatus,
128
- color: error ? statusColors.error : statusColors.default,
129
- text: `${status}`
130
- }), isDefined(backgroundColor) && jsx("div", {
131
- "aria-label": iconAriaLabel,
132
- className: clsx(styles.accordionIconWrapper, {
133
- [styles.bgOnly]: !icon,
134
- [styles.withIcon]: icon
135
- }),
136
- role: "img",
137
- style: {
138
- backgroundColor
139
- },
140
- children: icon && /*#__PURE__*/createElement(icon, {
141
- color: iconColor,
142
- role: 'img',
143
- height: '0.75rem',
144
- width: '0.75rem',
145
- 'aria-label': iconAriaLabel
146
- })
147
- }), enableModernizedComponents ? jsx(ChevronRight, {
148
- "aria-hidden": "true",
149
- className: styles.accordionTriggerIcon,
150
- color: "var(--bp-icon-icon-on-light-secondary)"
151
- }) : jsx(PointerChevron, {
152
- "aria-hidden": "true",
153
- className: styles.accordionTriggerIcon,
154
- color: "var(--bp-gray-100)"
155
- })]
156
- })]
157
- })
103
+ children: jsxs("div", {
104
+ className: styles.accordionHeaderContainer,
105
+ children: [jsx(RadixAccordion.Trigger, {
106
+ ref: triggerRef,
107
+ className: clsx(styles.accordionTrigger, {
108
+ [styles.disabled]: disabled
109
+ }),
110
+ disabled: disabled,
111
+ children: jsx(AccordionItemHeader, {
112
+ error: error,
113
+ iconAriaLabel: iconAriaLabel,
114
+ iconVariant: iconVariant,
115
+ status: status,
116
+ title: title
117
+ })
118
+ }), jsx(AccordionActionSlot, {
119
+ action: action
120
+ }), jsx("span", {
121
+ "aria-hidden": "true",
122
+ className: styles.accordionChevronWrapper,
123
+ onClick: handleChevronClick,
124
+ children: chevronIcon
125
+ })]
158
126
  })
159
127
  }), jsxs(RadixAccordion.Content, {
160
128
  className: clsx(children && styles.accordionContent),
package/dist/lib-esm/accordion/accordion.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- 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"};
2
+ 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"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/accordion/types.d.ts CHANGED
@@ -26,13 +26,23 @@ interface IconProps {
26
26
  * */
27
27
  iconAriaLabel: string;
28
28
  }
29
- type StatusProps = {
29
+ /**
30
+ * Only one header slot is allowed at a time: `status`, `iconVariant`, or `action`.
31
+ */
32
+ type HeaderSlotProps = {
30
33
  status?: number;
31
34
  iconVariant?: never;
32
35
  iconAriaLabel?: never;
36
+ action?: never;
33
37
  } | ({
34
38
  status?: never;
35
- } & RequireAllOrNone<IconProps, keyof IconProps>);
39
+ action?: never;
40
+ } & RequireAllOrNone<IconProps, keyof IconProps>) | {
41
+ status?: never;
42
+ iconVariant?: never;
43
+ iconAriaLabel?: never;
44
+ action?: React.ReactNode;
45
+ };
36
46
  export type AccordionBaseItem = {
37
47
  /**
38
48
  * Content of the accordion item that is displayed when the section is expanded
@@ -54,7 +64,7 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
54
64
  * Disabled state of the section.
55
65
  */
56
66
  disabled?: boolean;
57
- } & StatusProps;
67
+ } & HeaderSlotProps;
58
68
  export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
59
69
  export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
60
70
  export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;
package/dist/lib-esm/button/button.figma.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/lib-esm/index.css CHANGED
@@ -1446,7 +1446,7 @@
1446
1446
  background-color:var(--status-interactive-background-green-focus);
1447
1447
  }
1448
1448
 
1449
- .bp_accordion_module_accordionItem--a8cec[data-modern=false]{
1449
+ .bp_accordion_module_accordionItem--9048c[data-modern=false]{
1450
1450
  --accordion-min-width:320px;
1451
1451
  --accordion-item-radius:none;
1452
1452
  --accordion-item-radius-expanded:none;
@@ -1465,15 +1465,13 @@
1465
1465
  --accordion-fixed-content-padding-block:var(--space-5);
1466
1466
  --accordion-fixed-content-padding-inline:var(--space-4);
1467
1467
  --accordion-header-text-color:var(--text-text-on-light);
1468
- --accordion-status-margin:var(--space-2);
1469
1468
  --accordion-icon-size:var(--size-4);
1470
1469
  --accordion-bg-only-status-size:var(--size-4);
1471
1470
  --accordion-icon-radius:var(--radius-half);
1472
- --accordion-icon-margin:var(--space-2);
1473
1471
  --accordion-trigger-border:none;
1474
1472
  --accordion-trigger-expanded-border:none;
1475
1473
  --accordion-trigger-border-hover:none;
1476
- --accordion-trigger-padding:var(--space-4) var(--space-6) var(--space-4) var(--space-4);
1474
+ --accordion-trigger-padding:var(--space-4) 0 var(--space-4) var(--space-4);
1477
1475
  --accordion-trigger-background-active:var(--surface-surface);
1478
1476
  --accordion-trigger-collapsed-background-hover:var(--surface-accordion-surface-hover);
1479
1477
  --accordion-trigger-expanded-background-hover:var(--surface-accordion-surface-hover);
@@ -1487,7 +1485,7 @@
1487
1485
  --accordion-item-header-min-height:unset;
1488
1486
  }
1489
1487
 
1490
- .bp_accordion_module_accordionItem--a8cec[data-modern=true]{
1488
+ .bp_accordion_module_accordionItem--9048c[data-modern=true]{
1491
1489
  --accordion-min-width:320px;
1492
1490
  --accordion-item-radius:var(--bp-radius-08);
1493
1491
  --accordion-item-radius-expanded:var(--bp-radius-10);
@@ -1506,15 +1504,13 @@
1506
1504
  --accordion-fixed-content-padding-block:0.625rem;
1507
1505
  --accordion-fixed-content-padding-inline:0.625rem;
1508
1506
  --accordion-header-text-color:var(--bp-text-text-on-light);
1509
- --accordion-status-margin:var(--bp-space-020);
1510
1507
  --accordion-icon-size:var(--bp-size-050);
1511
1508
  --accordion-bg-only-status-size:var(--bp-size-040);
1512
1509
  --accordion-icon-radius:var(--bp-radius-16);
1513
- --accordion-icon-margin:var(--bp-space-020);
1514
1510
  --accordion-trigger-border:none;
1515
1511
  --accordion-trigger-expanded-border:var(--bp-border-01) solid var(--bp-surface-accordion-surface-expanded);
1516
1512
  --accordion-trigger-border-hover:none;
1517
- --accordion-trigger-padding:var(--bp-space-030) var(--bp-space-040) var(--bp-space-030) var(--bp-space-040);
1513
+ --accordion-trigger-padding:var(--bp-space-030) 0 var(--bp-space-030) var(--bp-space-040);
1518
1514
  --accordion-trigger-background-active:var(--bp-surface-accordion-surface-collapsed);
1519
1515
  --accordion-trigger-collapsed-background-hover:var(--bp-surface-accordion-surface-collapsed-hover);
1520
1516
  --accordion-trigger-expanded-background-hover:var(--bp-surface-accordion-surface-expanded-hover);
@@ -1528,19 +1524,19 @@
1528
1524
  --accordion-item-header-min-height:var(--bp-size-080);
1529
1525
  }
1530
1526
 
1531
- .bp_accordion_module_accordionContent--a8cec[data-state=open]{
1532
- animation:bp_accordion_module_slideDown--a8cec .15s ease-out;
1527
+ .bp_accordion_module_accordionContent--9048c[data-state=open]{
1528
+ animation:bp_accordion_module_slideDown--9048c .15s ease-out;
1533
1529
  }
1534
1530
 
1535
- .bp_accordion_module_accordionContent--a8cec[data-state=closed]{
1536
- animation:bp_accordion_module_slideUp--a8cec .15s ease-out;
1531
+ .bp_accordion_module_accordionContent--9048c[data-state=closed]{
1532
+ animation:bp_accordion_module_slideUp--9048c .15s ease-out;
1537
1533
  }
1538
1534
 
1539
- .bp_accordion_module_accordionContent--a8cec{
1535
+ .bp_accordion_module_accordionContent--9048c{
1540
1536
  overflow:hidden;
1541
1537
  }
1542
1538
 
1543
- @keyframes bp_accordion_module_slideDown--a8cec{
1539
+ @keyframes bp_accordion_module_slideDown--9048c{
1544
1540
  from{
1545
1541
  height:0;
1546
1542
  }
@@ -1548,7 +1544,7 @@
1548
1544
  height:var(--radix-accordion-content-height);
1549
1545
  }
1550
1546
  }
1551
- @keyframes bp_accordion_module_slideUp--a8cec{
1547
+ @keyframes bp_accordion_module_slideUp--9048c{
1552
1548
  from{
1553
1549
  height:var(--radix-accordion-content-height);
1554
1550
  }
@@ -1556,14 +1552,14 @@
1556
1552
  height:0;
1557
1553
  }
1558
1554
  }
1559
- .bp_accordion_module_accordion--a8cec{
1555
+ .bp_accordion_module_accordion--9048c{
1560
1556
  display:flex;
1561
1557
  flex-direction:column;
1562
1558
  gap:var(--bp-space-030);
1563
1559
  padding:var(--bp-space-030);
1564
1560
  }
1565
1561
 
1566
- .bp_accordion_module_accordionContentWrapper--a8cec{
1562
+ .bp_accordion_module_accordionContentWrapper--9048c{
1567
1563
  display:flex;
1568
1564
  flex-direction:column;
1569
1565
  gap:var(--accordion-content-gap);
@@ -1572,26 +1568,26 @@
1572
1568
  padding-inline:var(--accordion-content-padding-inline);
1573
1569
  }
1574
1570
 
1575
- .bp_accordion_module_accordionInlineErrorWrapper--a8cec{
1571
+ .bp_accordion_module_accordionInlineErrorWrapper--9048c{
1576
1572
  padding-block-start:var(--accordion-error-padding-block-start);
1577
1573
  padding-inline:var(--accordion-error-padding-inline);
1578
1574
  }
1579
1575
 
1580
- .bp_accordion_module_accordionItem--a8cec{
1576
+ .bp_accordion_module_accordionItem--9048c{
1581
1577
  -webkit-tap-highlight-color:transparent;
1582
1578
  background:none;
1583
1579
  border-bottom:var(--accordion-item-border);
1584
1580
  border-radius:var(--accordion-item-radius);
1585
1581
  min-width:var(--accordion-min-width);
1586
1582
  }
1587
- .bp_accordion_module_accordionItem--a8cec[data-state=open]{
1583
+ .bp_accordion_module_accordionItem--9048c[data-state=open]{
1588
1584
  background-color:var(--accordion-item-background-expanded);
1589
1585
  border:var(--accordion-item-border-expanded);
1590
1586
  border-bottom:var(--accordion-item-border-bottom-expanded);
1591
1587
  border-radius:var(--accordion-item-radius-expanded);
1592
1588
  }
1593
1589
 
1594
- .bp_accordion_module_accordionFixedContent--a8cec{
1590
+ .bp_accordion_module_accordionFixedContent--9048c{
1595
1591
  background-color:var(--accordion-item-background-collapsed);
1596
1592
  border:var(--accordion-trigger-border);
1597
1593
  border-radius:var(--accordion-item-radius);
@@ -1602,7 +1598,7 @@
1602
1598
  padding-inline:var(--accordion-fixed-content-padding-inline);
1603
1599
  }
1604
1600
 
1605
- .bp_accordion_module_accordionHeader--a8cec{
1601
+ .bp_accordion_module_accordionHeader--9048c{
1606
1602
  align-items:center;
1607
1603
  display:flex;
1608
1604
  justify-content:space-between;
@@ -1612,7 +1608,13 @@
1612
1608
  width:100%;
1613
1609
  }
1614
1610
 
1615
- .bp_accordion_module_accordionItem--a8cec[data-modern=false] .bp_accordion_module_accordionHeader--a8cec{
1611
+ .bp_accordion_module_accordionHeaderInfoSlot--9048c{
1612
+ align-items:center;
1613
+ display:flex;
1614
+ margin-inline-start:var(--accordion-chevron-margin-inline-start);
1615
+ }
1616
+
1617
+ .bp_accordion_module_accordionItem--9048c[data-modern=false] .bp_accordion_module_accordionHeader--9048c{
1616
1618
  color:var(--accordion-header-text-color);
1617
1619
  font-family:var(--title-small-font-family);
1618
1620
  font-size:var(--title-small-font-size);
@@ -1624,7 +1626,7 @@
1624
1626
  text-transform:var(--title-small-text-case);
1625
1627
  }
1626
1628
 
1627
- .bp_accordion_module_accordionItem--a8cec[data-modern=true] .bp_accordion_module_accordionHeader--a8cec{
1629
+ .bp_accordion_module_accordionItem--9048c[data-modern=true] .bp_accordion_module_accordionHeader--9048c{
1628
1630
  color:var(--accordion-header-text-color);
1629
1631
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
1630
1632
  font-size:var(--bp-font-size-06);
@@ -1634,78 +1636,115 @@
1634
1636
  line-height:var(--bp-font-line-height-04);
1635
1637
  }
1636
1638
 
1637
- .bp_accordion_module_accordionHeaderTrigger--a8cec{
1639
+ .bp_accordion_module_accordionSlot--9048c{
1640
+ align-items:center;
1641
+ display:flex;
1642
+ }
1643
+
1644
+ .bp_accordion_module_accordionChevronWrapper--9048c{
1638
1645
  align-items:center;
1646
+ cursor:pointer;
1639
1647
  display:flex;
1648
+ padding-inline-end:var(--space-6);
1649
+ }
1650
+ .bp_accordion_module_accordionChevronWrapper--9048c .bp_accordion_module_accordionTriggerIcon--9048c{
1651
+ flex-shrink:0;
1652
+ transform:var(--accordion-trigger-icon-transform-collapsed);
1640
1653
  }
1641
1654
 
1642
- .bp_accordion_module_accordionStatus--a8cec{
1643
- margin-inline-start:var(--accordion-status-margin);
1655
+ .bp_accordion_module_accordionItem--9048c[data-modern=true] .bp_accordion_module_accordionChevronWrapper--9048c{
1656
+ padding-inline-end:var(--bp-space-040);
1644
1657
  }
1645
1658
 
1646
- .bp_accordion_module_accordionIconWrapper--a8cec{
1659
+ .bp_accordion_module_accordionItem--9048c[data-state=open] .bp_accordion_module_accordionChevronWrapper--9048c .bp_accordion_module_accordionTriggerIcon--9048c{
1660
+ transform:var(--accordion-trigger-icon-transform-expanded);
1661
+ }
1662
+
1663
+ .bp_accordion_module_accordionIconWrapper--9048c{
1647
1664
  align-items:center;
1648
1665
  border-radius:var(--accordion-icon-radius);
1649
1666
  display:flex;
1650
1667
  height:var(--accordion-icon-size);
1651
1668
  justify-content:center;
1652
- margin-inline-start:var(--accordion-icon-margin);
1653
1669
  width:var(--accordion-icon-size);
1654
1670
  }
1655
- .bp_accordion_module_accordionIconWrapper--a8cec.bp_accordion_module_bgOnly--a8cec{
1671
+ .bp_accordion_module_accordionIconWrapper--9048c.bp_accordion_module_bgOnly--9048c{
1656
1672
  height:var(--accordion-bg-only-status-size);
1657
1673
  width:var(--accordion-bg-only-status-size);
1658
1674
  }
1659
- .bp_accordion_module_accordionIconWrapper--a8cec.bp_accordion_module_withIcon--a8cec{
1675
+ .bp_accordion_module_accordionIconWrapper--9048c.bp_accordion_module_withIcon--9048c{
1660
1676
  height:var(--accordion-icon-size);
1661
1677
  width:var(--accordion-icon-size);
1662
1678
  }
1663
1679
 
1664
- .bp_accordion_module_accordionTrigger--a8cec{
1680
+ .bp_accordion_module_accordionTrigger--9048c{
1665
1681
  align-items:center;
1666
- background-color:var(--accordion-item-background-collapsed);
1667
- border:var(--accordion-trigger-border);
1668
- border-radius:var(--accordion-item-radius);
1682
+ background:#0000;
1683
+ border:none;
1684
+ border-radius:inherit;
1669
1685
  display:flex;
1686
+ flex:1;
1670
1687
  height:100%;
1671
1688
  padding:var(--accordion-trigger-padding);
1672
1689
  width:100%;
1673
1690
  }
1674
- .bp_accordion_module_accordionTrigger--a8cec:disabled{
1691
+ .bp_accordion_module_accordionTrigger--9048c.bp_accordion_module_disabled--9048c,.bp_accordion_module_accordionTrigger--9048c:disabled{
1675
1692
  cursor:default;
1676
1693
  opacity:.3;
1694
+ pointer-events:none;
1677
1695
  }
1678
- .bp_accordion_module_accordionTrigger--a8cec:focus-visible{
1696
+ .bp_accordion_module_accordionTrigger--9048c:focus-visible{
1697
+ outline:none;
1698
+ }
1699
+ .bp_accordion_module_accordionTrigger--9048c:hover:not(:disabled, .bp_accordion_module_disabled--9048c){
1700
+ cursor:pointer;
1701
+ }
1702
+
1703
+ .bp_accordion_module_accordionHeaderContainer--9048c{
1704
+ align-items:stretch;
1705
+ background-color:var(--accordion-item-background-collapsed);
1706
+ border:var(--accordion-trigger-border);
1707
+ border-radius:var(--accordion-item-radius);
1708
+ display:flex;
1709
+ gap:var(--accordion-chevron-margin-inline-start);
1710
+ }
1711
+
1712
+ .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){
1713
+ cursor:default;
1714
+ }
1715
+ .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{
1716
+ opacity:.3;
1717
+ pointer-events:none;
1718
+ }
1719
+
1720
+ .bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c[data-state=open]){
1721
+ background-color:initial;
1722
+ border:none;
1723
+ border-radius:var(--accordion-item-radius-expanded) var(--accordion-item-radius-expanded) 0 0;
1724
+ }
1725
+
1726
+ .bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c:focus-visible){
1679
1727
  background-color:var(--accordion-trigger-collapsed-background-focus);
1680
1728
  border:var(--accordion-trigger-border-hover);
1681
1729
  box-shadow:var(--accordion-trigger-box-shadow);
1682
1730
  outline:none;
1683
1731
  }
1684
- .bp_accordion_module_accordionTrigger--a8cec:hover:not(:disabled){
1732
+
1733
+ .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)){
1685
1734
  background-color:var(--accordion-trigger-collapsed-background-hover);
1686
1735
  border:var(--accordion-trigger-border-hover);
1687
1736
  cursor:pointer;
1688
1737
  }
1689
- .bp_accordion_module_accordionTrigger--a8cec[data-state=open]{
1690
- background-color:var(--accordion-item-background-expanded);
1691
- border:var(--accordion-trigger-expanded-border);
1692
- border-radius:var(--accordion-item-radius-expanded) var(--accordion-item-radius-expanded) 0 0;
1693
- }
1694
- .bp_accordion_module_accordionTrigger--a8cec[data-state=open]:focus-visible{
1738
+
1739
+ .bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c[data-state=open]):has(.bp_accordion_module_accordionTrigger--9048c:focus-visible){
1695
1740
  background-color:var(--accordion-trigger-expanded-background-focus);
1696
- border:var(--accordion-trigger-expanded-border);
1697
- }
1698
- .bp_accordion_module_accordionTrigger--a8cec[data-state=open]:hover:not(:disabled){
1699
- background-color:var(--accordion-trigger-expanded-background-hover);
1700
- border:var(--accordion-trigger-expanded-border);
1701
- }
1702
- .bp_accordion_module_accordionTrigger--a8cec .bp_accordion_module_accordionTriggerIcon--a8cec{
1703
- flex-shrink:0;
1704
- margin-inline-start:var(--accordion-chevron-margin-inline-start);
1705
- transform:var(--accordion-trigger-icon-transform-collapsed);
1741
+ border:none;
1706
1742
  }
1707
- .bp_accordion_module_accordionTrigger--a8cec[data-state=open] .bp_accordion_module_accordionTriggerIcon--a8cec{
1708
- transform:var(--accordion-trigger-icon-transform-expanded);
1743
+
1744
+ .bp_accordion_module_accordionHeaderContainer--9048c:has(.bp_accordion_module_accordionTrigger--9048c[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--9048c:disabled),
1745
+ :has(.bp_accordion_module_accordionTrigger--9048c.bp_accordion_module_disabled--9048c)){
1746
+ background-color:initial;
1747
+ border:none;
1709
1748
  }
1710
1749
  .bp_avatar_module_avatar--1c846[data-modern=false]{
1711
1750
  --avatar-background-color:var(--gray-10);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.137.0",
3
+ "version": "12.139.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.101.6",
50
+ "@box/blueprint-web-assets": "^4.101.8",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.16.43",
80
+ "@box/storybook-utils": "^0.16.45",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",