@box/blueprint-web 12.27.0 → 12.28.0

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

@@ -7,6 +7,7 @@ import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { Slot } from '../primitives/slot.js';
 import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
 import styles from './collapsible-section.module.js';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 
 const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -18,6 +19,9 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     children,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
   const [headerSlot, contentSlot] = useNamedSlots(children, ['header', 'content']);
   useEffect(() => {
@@ -31,6 +35,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.collapsibleSection, className),
+    "data-modern": enableModernizedComponents,
     onOpenChange: onCollapsibleOpenChanged,
     open: collapsibleSectionOpen,
     children: [jsx(Collapsible.Trigger, {

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--cc646","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--cc646","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--cc646","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--cc646","slideDown":"bp_collapsible_section_module_slideDown--cc646","slideUp":"bp_collapsible_section_module_slideUp--cc646","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--cc646"};
+var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--e6aba","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--e6aba","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--e6aba","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--e6aba","slideDown":"bp_collapsible_section_module_slideDown--e6aba","slideUp":"bp_collapsible_section_module_slideUp--e6aba","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--e6aba"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -1723,70 +1723,96 @@
   height:var(--icon-button-size-x-small);
   width:var(--icon-button-size-x-small);
 }
-.bp_collapsible_section_module_collapsibleSection--cc646{
+.bp_collapsible_section_module_collapsibleSection--e6aba[data-modern=false]{
+  --collapsible-section-padding:var(--space-5);
+  --collapsible-section-border-radius:var(--radius-3);
+  --collapsible-section-outline-border-radius:var(--radius-2);
+  --collapsible-section-background-color:var(--surface-surface);
+  --collapsible-section-border:var(--border-1) solid var(--border-collapsible-border);
+  --collapsible-section-outline-width:var(--border-2);
+  --collapsible-section-outline-offset:var(--space-05);
+  --collapsible-section-header-focus-color:var(--outline-focus-on-light);
+  --collapsible-section-header-background-color:var(--surface-surface);
+  --collapsible-section-content-background-color:var(--surface-surface);
+}
+
+.bp_collapsible_section_module_collapsibleSection--e6aba[data-modern=true]{
+  --collapsible-section-padding:var(--bp-space-050);
+  --collapsible-section-border-radius:var(--bp-radius-10);
+  --collapsible-section-outline-border-radius:var(--bp-radius-03);
+  --collapsible-section-background-color:var(--bp-surface-surface);
+  --collapsible-section-border:var(--bp-border-01) solid var(--bp-border-collapsible-border);
+  --collapsible-section-outline-width:var(--bp-border-02);
+  --collapsible-section-outline-offset:var(--bp-space-005);
+  --collapsible-section-header-focus-color:var(--bp-outline-focus-on-light);
+  --collapsible-section-header-background-color:var(--bp-surface-surface);
+  --collapsible-section-content-background-color:var(--bp-surface-surface);
+}
+
+.bp_collapsible_section_module_collapsibleSection--e6aba{
   width:100%;
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--cc646{
+.bp_collapsible_section_module_collapsibleSectionHeader--e6aba{
   align-items:center;
-  background:var(--surface-surface);
-  border:var(--border-1) solid var(--border-collapsible-border);
-  border-radius:var(--radius-3);
+  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(--space-5);
-  padding-inline:var(--space-5);
+  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--cc646:focus::before{
-  border:var(--border-2) solid var(--outline-focus-on-light);
-  border-radius:var(--radius-2);
-  bottom:var(--space-05);
+.bp_collapsible_section_module_collapsibleSectionHeader--e6aba:focus::before{
+  border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
+  border-radius:var(--collapsible-section-outline-border-radius);
+  bottom:var(--collapsible-section-outline-offset);
   content:"";
-  left:var(--space-05);
+  left:var(--collapsible-section-outline-offset);
   position:absolute;
-  right:var(--space-05);
-  top:var(--space-05);
+  right:var(--collapsible-section-outline-offset);
+  top:var(--collapsible-section-outline-offset);
 }
-.bp_collapsible_section_module_collapsibleSectionHeader--cc646[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--cc646[aria-expanded=true]::before{
+.bp_collapsible_section_module_collapsibleSectionHeader--e6aba[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--e6aba[aria-expanded=true]::before{
   border-end-end-radius:0;
   border-end-start-radius:0;
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--cc646{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--e6aba{
   display:block;
-  margin-inline-start:var(--space-5);
+  margin-inline-start:var(--collapsible-section-padding);
 }
-.bp_collapsible_section_module_collapsibleSectionHeaderArrow--cc646 > svg{
+.bp_collapsible_section_module_collapsibleSectionHeaderArrow--e6aba > svg{
   vertical-align:middle;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--cc646{
+.bp_collapsible_section_module_collapsibleSectionContent--e6aba{
   overflow:hidden;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--cc646[data-state=open]{
-  animation:bp_collapsible_section_module_slideDown--cc646 .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--e6aba[data-state=open]{
+  animation:bp_collapsible_section_module_slideDown--e6aba .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionContent--cc646[data-state=closed]{
-  animation:bp_collapsible_section_module_slideUp--cc646 .25s ease-out;
+.bp_collapsible_section_module_collapsibleSectionContent--e6aba[data-state=closed]{
+  animation:bp_collapsible_section_module_slideUp--e6aba .25s ease-out;
 }
-.bp_collapsible_section_module_collapsibleSectionBody--cc646{
+.bp_collapsible_section_module_collapsibleSectionBody--e6aba{
   align-items:center;
-  background:var(--surface-surface);
-  border:var(--border-1) solid var(--border-collapsible-border);
-  border-end-end-radius:var(--radius-3);
-  border-end-start-radius:var(--radius-3);
+  background:var(--collapsible-section-content-background-color);
+  border:var(--collapsible-section-border);
+  border-end-end-radius:var(--collapsible-section-border-radius);
+  border-end-start-radius:var(--collapsible-section-border-radius);
   border-top:none;
   display:flex;
   justify-content:space-between;
-  padding-block:var(--space-5);
-  padding-inline:var(--space-5);
+  padding-block:var(--collapsible-section-padding);
+  padding-inline:var(--collapsible-section-padding);
 }
 
-@keyframes bp_collapsible_section_module_slideDown--cc646{
+@keyframes bp_collapsible_section_module_slideDown--e6aba{
   from{
     height:0;
   }
@@ -1794,7 +1820,7 @@
     height:var(--radix-collapsible-content-height);
   }
 }
-@keyframes bp_collapsible_section_module_slideUp--cc646{
+@keyframes bp_collapsible_section_module_slideUp--e6aba{
   from{
     height:var(--radix-collapsible-content-height);
   }

package/package.json

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