benivo-ui-library 1.10.21 → 1.10.24

package/avatar.less

@@ -20,6 +20,16 @@
     font-family: @font-family;
     overflow: visible; // status markers sit outside the circle
 
+    // Photo fills the circle; the wrapper keeps overflow visible for status
+    // markers, so the image clips itself.
+    &__photo {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
     &__initials {
         font-weight: 600;
         line-height: 1;

package/checkboxGroup.less

@@ -113,7 +113,10 @@
         display: flex;
         align-items: flex-start;
         gap: 6px;
-        white-space: nowrap; // title + subtext share one line
+        // Title + subtext share one line when there is room; when a leading
+        // media element leaves the slot too narrow (media-card variant), the
+        // text wraps instead of pushing the card past the viewport.
+        flex-wrap: wrap;
     }
 
     &__title {
@@ -121,6 +124,7 @@
         line-height: 24px;
         font-weight: 600;
         color: var(--black);
+        min-width: 0; // allow the title to shrink and wrap in a narrow slot
     }
 
     &__subtext {
@@ -128,6 +132,7 @@
         line-height: 24px;
         font-weight: 500;
         color: var(--text-400);
+        min-width: 0; // allow the subtext to shrink and wrap in a narrow slot
     }
 
     &__supporting {

package/currencyInput.less

@@ -25,7 +25,7 @@
         }
 
         &:focus-within:not(.disabled) {
-            border-color: var(--primary-main, #2970ff);
+            border-color: var(--primary);
             box-shadow: @form-focus-box-shadow;
             // Symbol + field + currency select read as one control, so the WCAG 1.4.11 indicator
             // goes on the container; the halo alone is 1.37:1.
@@ -187,7 +187,20 @@
     &.currency-input-menu--portal {
         position: fixed;
         top: auto;
-        z-index: @zindex-modal;
+        // Portaled to <body>, so it must clear @zindex-modal (1060) to show above modals.
+        z-index: @zindex-popover;
+    }
+
+    // BPO-17756 (WCAG 2.1.1 / 2.4.7): the listbox takes focus and tracks the highlighted option
+    // with aria-activedescendant, so the visible indicator belongs on that option, not on the
+    // list's own box. Inset, because the list clips its overflow.
+    &:focus {
+        outline: none;
+    }
+
+    &:focus .currency-input-option.active {
+        outline: @focus-outline;
+        outline-offset: @focus-outline-offset-inset;
     }
 }
 
@@ -197,12 +210,13 @@
     cursor: pointer;
     white-space: nowrap;
 
-    &:hover {
-        background: var(--bg-50);
+    &:hover,
+    &.active {
+        background: var(--primary-light);
     }
 
     &.selected {
         font-weight: @font-weight-semibold;
-        background: var(--bg-50);
+        background: var(--primary-light);
     }
 }

package/datePicker.less

@@ -141,6 +141,22 @@
     clip-path: inset(50%);
 }
 
+// Polite live region for the Clear confirmation (BPO-17723, 4.1.3). Visually hidden with the same
+// pattern as the live region above - NOT display:none, which would drop it from the accessibility
+// tree and silence the announcement. Empty (and therefore invisible) whenever nothing was cleared.
+.bn-datepicker__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+}
+
 // The popover is portalled to <body> (portalId in DatePicker.jsx) to escape overflow-clipping
 // ancestors. At <body> it sits outside any modal's stacking context, so — like the header's
 // month/year menus, which portal into the same tier — it needs a z-index above the modal layer

package/emptyState.less

@@ -32,14 +32,33 @@
 
     // --- the decorative pattern ------------------------------------------
     //
-    // Deliberately NOT clipped. Figma's frames let the 480px art run past the
-    // component's bounds and rely on the radial fade to end it, so clipping
-    // here would cut the pattern off part-way through the fade — which is
-    // exactly how it looked before. This layer only exists to give the art a
-    // box to centre itself in.
+    // Not clipped to the component. Figma's frames let the 480px art run past
+    // the component's bounds and rely on the radial fade to end it, so clipping
+    // at the component would cut the pattern off part-way through the fade —
+    // which is exactly how it looked before.
+    //
+    // Sideways, though, it is clipped to the screen (BPO-17750). On a 375px
+    // phone the 480px art is wider than the viewport and the whole page scrolls
+    // sideways. So this layer is as wide as the art, or the screen if that is
+    // narrower, centred on the component, and clips only along x. `overflow-x:
+    // clip` (unlike `hidden`) leaves y visible, so the fade above and below is
+    // untouched. At 480px and wider the layer is exactly the art's box and
+    // nothing is cut.
+    //
+    // `cqw` falls back to the viewport when no ancestor is a size container,
+    // which is the normal case. Inside one, the art clips to that container
+    // instead — that is also what lets Storybook show a phone-width frame.
     &__pattern {
         position: absolute;
-        inset: 0;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        // A browser without `cqw` drops the next line; without this one the
+        // layer would shrink to 0 and clip the pattern away entirely.
+        width: 480px;
+        width: min(480px, 100cqw);
+        transform: translateX(-50%);
+        overflow-x: clip;
         pointer-events: none;
         z-index: 0;
     }