@box/blueprint-web 14.8.0 → 14.8.1

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

@@ -81,6 +81,7 @@ const Item = props => {
     error,
     errorIconAriaLabel,
     action,
+    highlighted,
     ...itemRest
   } = props;
   const chevronIcon = enableModernizedComponents ? jsx(ChevronRight, {
@@ -97,7 +98,9 @@ const Item = props => {
   };
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
-    className: accordionItemClasses,
+    className: clsx(accordionItemClasses, {
+      [styles.highlighted]: highlighted
+    }),
     "data-modern": enableModernizedComponents ? 'true' : 'false',
     children: [jsx(RadixAccordion.Header, {
       asChild: true,

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

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

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

@@ -68,6 +68,14 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Element displayed to the left of the title.
      */
     startElement?: React.ReactNode;
+    /**
+     * When true, the item renders a colored border and tinted background when
+     * expanded to visually indicate it is the active/selected item. The border
+     * radius of the inner header container is automatically adjusted to stay
+     * flush with the border's inner edge, including the focus ring.
+     * Only applies to modernized accordion items.
+     */
+    highlighted?: boolean;
 } & HeaderSlotProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;

package/dist/lib-esm/index.css

@@ -1581,7 +1581,7 @@
   background-color:var(--status-interactive-background-green-focus);
 }
 
-.bp_accordion_module_accordionItem--4df24[data-modern=false]{
+.bp_accordion_module_accordionItem--4551e[data-modern=false]{
   --accordion-min-width:320px;
   --accordion-item-radius:none;
   --accordion-item-radius-expanded:none;
@@ -1620,7 +1620,7 @@
   --accordion-item-header-min-height:unset;
 }
 
-.bp_accordion_module_accordionItem--4df24[data-modern=true]{
+.bp_accordion_module_accordionItem--4551e[data-modern=true]{
   --accordion-min-width:320px;
   --accordion-item-radius:var(--bp-radius-08);
   --accordion-item-radius-expanded:var(--bp-radius-10);
@@ -1657,17 +1657,21 @@
   --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);
+  --accordion-item-highlight-border-width:var(--bp-border-02);
+  --accordion-item-highlight-border-color:#0000;
+  --accordion-item-highlight-background-expanded:var(--bp-box-blue-02);
+  --accordion-item-highlight-border-color-expanded:var(--bp-box-blue-100);
 }
 
-.bp_accordion_module_accordionContent--4df24[data-state=open]{
-  animation:bp_accordion_module_slideDown--4df24 .15s ease-out;
+.bp_accordion_module_accordionContent--4551e[data-state=open]{
+  animation:bp_accordion_module_slideDown--4551e .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--4df24[data-state=closed]{
-  animation:bp_accordion_module_slideUp--4df24 .15s ease-out;
+.bp_accordion_module_accordionContent--4551e[data-state=closed]{
+  animation:bp_accordion_module_slideUp--4551e .15s ease-out;
 }
 
-.bp_accordion_module_accordionContentLayout--4df24{
+.bp_accordion_module_accordionContentLayout--4551e{
   display:flex;
   flex:1 1 auto;
   flex-direction:column;
@@ -1678,26 +1682,26 @@
   padding-inline:var(--accordion-content-padding-inline);
 }
 
-.bp_accordion_module_accordionContent--4df24[data-state=closed] .bp_accordion_module_accordionContentLayout--4df24{
+.bp_accordion_module_accordionContent--4551e[data-state=closed] .bp_accordion_module_accordionContentLayout--4551e{
   overflow:hidden;
 }
 
-.bp_accordion_module_accordionContent--4df24[data-state=open] .bp_accordion_module_accordionContentLayout--4df24{
-  animation:bp_accordion_module_enableAccordionScroll--4df24 .15s step-end forwards;
+.bp_accordion_module_accordionContent--4551e[data-state=open] .bp_accordion_module_accordionContentLayout--4551e{
+  animation:bp_accordion_module_enableAccordionScroll--4551e .15s step-end forwards;
 }
 
-.bp_accordion_module_accordionContent--4df24{
+.bp_accordion_module_accordionContent--4551e{
   display:flex;
   flex:1 1 auto;
   flex-direction:column;
   min-height:0;
   overflow:hidden;
 }
-.bp_accordion_module_accordionContent--4df24[hidden]{
+.bp_accordion_module_accordionContent--4551e[hidden]{
   display:none;
 }
 
-@keyframes bp_accordion_module_slideDown--4df24{
+@keyframes bp_accordion_module_slideDown--4551e{
   from{
     height:0;
   }
@@ -1705,7 +1709,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--4df24{
+@keyframes bp_accordion_module_slideUp--4551e{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -1713,7 +1717,7 @@
     height:0;
   }
 }
-@keyframes bp_accordion_module_enableAccordionScroll--4df24{
+@keyframes bp_accordion_module_enableAccordionScroll--4551e{
   0%{
     overflow:hidden;
   }
@@ -1721,26 +1725,26 @@
     overflow:auto;
   }
 }
-.bp_accordion_module_accordion--4df24{
+.bp_accordion_module_accordion--4551e{
   display:flex;
   flex-direction:column;
   gap:var(--bp-space-030);
   padding:var(--bp-space-030);
 }
 
-.bp_accordion_module_accordionContentWrapper--4df24{
+.bp_accordion_module_accordionContentWrapper--4551e{
   display:flex;
   flex:1 1 auto;
   flex-direction:column;
   min-height:0;
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--4df24{
+.bp_accordion_module_accordionInlineErrorWrapper--4551e{
   padding-block-start:var(--accordion-error-padding-block-start);
   padding-inline:var(--accordion-error-padding-inline);
 }
 
-.bp_accordion_module_accordionItem--4df24{
+.bp_accordion_module_accordionItem--4551e{
   -webkit-tap-highlight-color:transparent;
   background:none;
   border-bottom:var(--accordion-item-border);
@@ -1750,14 +1754,23 @@
   min-width:var(--accordion-min-width);
   overflow:hidden;
 }
-.bp_accordion_module_accordionItem--4df24[data-state=open]{
+.bp_accordion_module_accordionItem--4551e[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--4df24{
+.bp_accordion_module_accordionItem--4551e[data-modern=true].bp_accordion_module_highlighted--4551e{
+  border:var(--accordion-item-highlight-border-width) solid var(--accordion-item-highlight-border-color);
+}
+
+.bp_accordion_module_accordionItem--4551e[data-modern=true].bp_accordion_module_highlighted--4551e[data-state=open]{
+  background-color:var(--accordion-item-highlight-background-expanded);
+  border-color:var(--accordion-item-highlight-border-color-expanded);
+}
+
+.bp_accordion_module_accordionFixedContent--4551e{
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
   border-radius:var(--accordion-item-radius);
@@ -1768,7 +1781,7 @@
   padding-inline:var(--accordion-fixed-content-padding-inline);
 }
 
-.bp_accordion_module_accordionHeader--4df24{
+.bp_accordion_module_accordionHeader--4551e{
   align-items:center;
   display:flex;
   justify-content:space-between;
@@ -1778,26 +1791,26 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionTitleGroup--4df24{
+.bp_accordion_module_accordionTitleGroup--4551e{
   align-items:center;
   display:flex;
   gap:var(--bp-space-020, .5rem);
   min-width:0;
 }
 
-.bp_accordion_module_accordionStartElement--4df24{
+.bp_accordion_module_accordionStartElement--4551e{
   align-items:center;
   display:flex;
   flex-shrink:0;
 }
 
-.bp_accordion_module_accordionHeaderInfoSlot--4df24{
+.bp_accordion_module_accordionHeaderInfoSlot--4551e{
   align-items:center;
   display:flex;
   margin-inline-start:var(--accordion-chevron-margin-inline-start);
 }
 
-.bp_accordion_module_accordionItem--4df24[data-modern=false] .bp_accordion_module_accordionHeader--4df24{
+.bp_accordion_module_accordionItem--4551e[data-modern=false] .bp_accordion_module_accordionHeader--4551e{
   color:var(--accordion-header-text-color);
   font-family:var(--title-small-font-family);
   font-size:var(--title-small-font-size);
@@ -1808,7 +1821,7 @@
   text-transform:var(--title-small-text-case);
 }
 
-.bp_accordion_module_accordionItem--4df24[data-modern=true] .bp_accordion_module_accordionHeader--4df24{
+.bp_accordion_module_accordionItem--4551e[data-modern=true] .bp_accordion_module_accordionHeader--4551e{
   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);
@@ -1818,31 +1831,31 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_accordion_module_accordionSlot--4df24{
+.bp_accordion_module_accordionSlot--4551e{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionChevronWrapper--4df24{
+.bp_accordion_module_accordionChevronWrapper--4551e{
   align-items:center;
   cursor:pointer;
   display:flex;
   padding-inline-end:var(--space-6);
 }
-.bp_accordion_module_accordionChevronWrapper--4df24 .bp_accordion_module_accordionTriggerIcon--4df24{
+.bp_accordion_module_accordionChevronWrapper--4551e .bp_accordion_module_accordionTriggerIcon--4551e{
   flex-shrink:0;
   transform:var(--accordion-trigger-icon-transform-collapsed);
 }
 
-.bp_accordion_module_accordionItem--4df24[data-modern=true] .bp_accordion_module_accordionChevronWrapper--4df24{
+.bp_accordion_module_accordionItem--4551e[data-modern=true] .bp_accordion_module_accordionChevronWrapper--4551e{
   padding-inline-end:var(--bp-space-040);
 }
 
-.bp_accordion_module_accordionItem--4df24[data-state=open] .bp_accordion_module_accordionChevronWrapper--4df24 .bp_accordion_module_accordionTriggerIcon--4df24{
+.bp_accordion_module_accordionItem--4551e[data-state=open] .bp_accordion_module_accordionChevronWrapper--4551e .bp_accordion_module_accordionTriggerIcon--4551e{
   transform:var(--accordion-trigger-icon-transform-expanded);
 }
 
-.bp_accordion_module_accordionIconWrapper--4df24{
+.bp_accordion_module_accordionIconWrapper--4551e{
   align-items:center;
   border-radius:var(--accordion-icon-radius);
   display:flex;
@@ -1850,16 +1863,16 @@
   justify-content:center;
   width:var(--accordion-icon-size);
 }
-.bp_accordion_module_accordionIconWrapper--4df24.bp_accordion_module_bgOnly--4df24{
+.bp_accordion_module_accordionIconWrapper--4551e.bp_accordion_module_bgOnly--4551e{
   height:var(--accordion-bg-only-status-size);
   width:var(--accordion-bg-only-status-size);
 }
-.bp_accordion_module_accordionIconWrapper--4df24.bp_accordion_module_withIcon--4df24{
+.bp_accordion_module_accordionIconWrapper--4551e.bp_accordion_module_withIcon--4551e{
   height:var(--accordion-icon-size);
   width:var(--accordion-icon-size);
 }
 
-.bp_accordion_module_accordionTrigger--4df24{
+.bp_accordion_module_accordionTrigger--4551e{
   align-items:center;
   background:#0000;
   border:none;
@@ -1870,19 +1883,19 @@
   padding:var(--accordion-trigger-padding);
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--4df24.bp_accordion_module_disabled--4df24,.bp_accordion_module_accordionTrigger--4df24:disabled{
+.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e,.bp_accordion_module_accordionTrigger--4551e:disabled{
   cursor:default;
   opacity:.3;
   pointer-events:none;
 }
-.bp_accordion_module_accordionTrigger--4df24:focus-visible{
+.bp_accordion_module_accordionTrigger--4551e:focus-visible{
   outline:none;
 }
-.bp_accordion_module_accordionTrigger--4df24:hover:not(:disabled, .bp_accordion_module_disabled--4df24){
+.bp_accordion_module_accordionTrigger--4551e:hover:not(:disabled, .bp_accordion_module_disabled--4551e){
   cursor:pointer;
 }
 
-.bp_accordion_module_accordionHeaderContainer--4df24{
+.bp_accordion_module_accordionHeaderContainer--4551e{
   align-items:stretch;
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
@@ -1891,43 +1904,47 @@
   gap:var(--accordion-chevron-margin-inline-start);
 }
 
-.bp_accordion_module_accordionHeaderContainer--4df24:has(.bp_accordion_module_accordionTrigger--4df24.bp_accordion_module_disabled--4df24),.bp_accordion_module_accordionHeaderContainer--4df24:has(.bp_accordion_module_accordionTrigger--4df24:disabled){
+.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e),.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e:disabled){
   cursor:default;
 }
-.bp_accordion_module_accordionHeaderContainer--4df24:has(.bp_accordion_module_accordionTrigger--4df24.bp_accordion_module_disabled--4df24) > .bp_accordion_module_accordionChevronWrapper--4df24,.bp_accordion_module_accordionHeaderContainer--4df24:has(.bp_accordion_module_accordionTrigger--4df24:disabled) > .bp_accordion_module_accordionChevronWrapper--4df24{
+.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e) > .bp_accordion_module_accordionChevronWrapper--4551e,.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e:disabled) > .bp_accordion_module_accordionChevronWrapper--4551e{
   opacity:.3;
   pointer-events:none;
 }
 
-.bp_accordion_module_accordionHeaderContainer--4df24:has(.bp_accordion_module_accordionTrigger--4df24[data-state=open]){
+.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e[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--4df24:has(.bp_accordion_module_accordionTrigger--4df24:focus-visible){
+.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e: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--4df24:hover:not(:has(.bp_accordion_module_accordionTrigger--4df24:disabled), :has(.bp_accordion_module_accordionTrigger--4df24.bp_accordion_module_disabled--4df24)){
+.bp_accordion_module_accordionHeaderContainer--4551e:hover:not(:has(.bp_accordion_module_accordionTrigger--4551e:disabled), :has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e)){
   background-color:var(--accordion-trigger-collapsed-background-hover);
   border:var(--accordion-trigger-border-hover);
   cursor:pointer;
 }
 
-.bp_accordion_module_accordionHeaderContainer--4df24:has(.bp_accordion_module_accordionTrigger--4df24[data-state=open]):has(.bp_accordion_module_accordionTrigger--4df24:focus-visible){
+.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e[data-state=open]):has(.bp_accordion_module_accordionTrigger--4551e:focus-visible){
   background-color:var(--accordion-trigger-expanded-background-focus);
   border:none;
 }
 
-.bp_accordion_module_accordionHeaderContainer--4df24:has(.bp_accordion_module_accordionTrigger--4df24[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--4df24:disabled),
-:has(.bp_accordion_module_accordionTrigger--4df24.bp_accordion_module_disabled--4df24)){
+.bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e[data-state=open]):hover:not(:has(.bp_accordion_module_accordionTrigger--4551e:disabled),
+:has(.bp_accordion_module_accordionTrigger--4551e.bp_accordion_module_disabled--4551e)){
   background-color:initial;
   border:none;
 }
+
+.bp_accordion_module_accordionItem--4551e[data-modern=true].bp_accordion_module_highlighted--4551e[data-state=open] .bp_accordion_module_accordionHeaderContainer--4551e:has(.bp_accordion_module_accordionTrigger--4551e[data-state=open]){
+  border-radius:calc(var(--accordion-item-radius-expanded) - var(--accordion-item-highlight-border-width)) calc(var(--accordion-item-radius-expanded) - var(--accordion-item-highlight-border-width)) 0 0;
+}
 .bp_avatar_module_avatar--a6b5d[data-modern=false]{
   --avatar-background-color:var(--gray-10);
   --avatar-xsmall-width:var(--size-5);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.8.0",
+    "version": "14.8.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.112.5",
+        "@box/blueprint-web-assets": "^4.112.6",
         "@internationalized/date": "^3.12.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.17.32",
+        "@box/storybook-utils": "^0.17.33",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",