benivo-ui-library 1.9.77 → 1.10.1

package/accordion.less

@@ -64,12 +64,13 @@
         text-align: left;
         font-family: @font-family;
 
-        // Keyboard only, so clicking a row does not leave a ring behind. Written
-        // out rather than sharing the button restyle's variables, which are not on
-        // main yet — worth folding together once that lands.
+        // Keyboard only, so clicking a row does not leave a ring behind. This used to
+        // write the values out because the shared focus variables were not on main yet;
+        // BPO-14843 is the branch that comment was waiting for, so it is folded on now
+        // and a change to the indicator colour reaches this rule too.
         &:focus-visible {
-            outline: 2px solid var(--brand-400);
-            outline-offset: 2px;
+            outline: @focus-outline;
+            outline-offset: @focus-outline-offset;
         }
     }
 

package/asideSummaryCard.less

@@ -1,12 +1,30 @@
+//
+// AsideSummaryCard — new Figma "Summary card". BPO-15015. Node 10995:49133.
+//
+// Contract-preserving restyle: the card stays fluid (a sidebar sizes it, not the
+// Figma fixed 376px) and keeps its `.summary-card*` classes. The card itself
+// carries NO horizontal padding — each block (title, header, section) is inset
+// 32px, so a section's divider can run full width while its text sits inset,
+// exactly as Figma draws it. Blocks are spaced by a 20px column gap.
+//
 .summary-card {
     background: var(--white);
-    padding: 24px;
     border: 1px solid var(--border-200);
-    .border-radius(@border-radius);
+    .border-radius(16px);
+    padding: 26px 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
 
     &__title {
-        font-size: @font-size;
-        margin-bottom: 20px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 32px;
+        font-size: @font-size; // 16
+        line-height: 1.5rem; // 24
+        color: var(--black);
         font-weight: @font-weight-semibold;
     }
 
@@ -16,4 +34,49 @@
             padding-left: 15px;
         }
     }
-}
+
+    // ---- Opt-in: summary header (Figma "Summary header") -----------------
+    // Type=Assignment composes FlagFeatureIcon; Type=Feature icon composes
+    // FeaturedIcon; Type=Text passes no icon. The icon is a node either way.
+    &__header {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 32px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        &-icon {
+            flex-shrink: 0;
+            display: inline-flex;
+        }
+
+        &-text {
+            display: flex;
+            flex-direction: column;
+            min-width: 0; // let long titles/meta ellipsis rather than push width
+        }
+
+        &-title {
+            font-size: @h4-font-size; // 18 — DS has no dedicated 18px text token; h4 carries 18/28
+            line-height: @h4-line-height; // 28
+            color: var(--black);
+            font-weight: @font-weight-semibold;
+        }
+
+        &-meta {
+            font-size: @font-size; // 16
+            line-height: 1.5rem; // 24
+            color: var(--text-600);
+        }
+    }
+
+    // ---- Opt-in: empty state ---------------------------------------------
+    &__empty {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 6px 32px;
+        display: flex;
+        justify-content: center;
+    }
+}

package/asideSummaryCardSection.less

@@ -1,33 +1,66 @@
+//
+// AsideSummaryCardSection — new Figma "Summary card" section + rows.
+// BPO-15015. Nodes 10995:49049 (section) / 10995:49013 (input).
+//
+// Contract-preserving restyle: every `.summary-card-section*` class is kept, so
+// consumers inherit the new look with no code change. Content is inset 32px; the
+// section title's divider runs full width. Rows STACK (label 16/24 Text/600 over
+// value 16/24 black, 4px apart) — the only layout. Blocks are spaced by a 20px
+// column gap.
+//
 .summary-card-section {
-    font-size: @font-size-xs;
-    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    font-size: @font-size; // 16
+    line-height: 1.5rem; // 24
 
     &__title {
-        font-size: @font-size-xs;
+        box-sizing: border-box;
+        padding: 0 32px 12px;
         border-bottom: 1px solid var(--border-200);
-        padding-bottom: 6px;
-        margin-bottom: 20px;
+        font-size: @font-size; // 16
+        line-height: 1.5rem; // 24
+        color: var(--black);
         font-weight: @font-weight-semibold;
     }
 
+    &__content {
+        box-sizing: border-box;
+        padding: 0 32px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        // Intro copy and step lists are supporting text — Text/600, not black.
+        p,
+        ol,
+        ul {
+            color: var(--text-600);
+        }
+    }
+
+    // Full-width "View more" toggle (DS Button carries no fullWidth prop).
+    &__more {
+        width: 100%;
+    }
+
+    // Stacked rows — the new default. Label above value, 4px apart.
+    // `!important` intentionally overrides the legacy inline `display` some
+    // consumers set on hand-written `__detail` rows, so the new stacked layout
+    // wins without touching their markup.
     &__detail {
         display: flex !important;
-        justify-content: space-between;
-        margin-bottom: 20px;
+        flex-direction: column;
+        gap: 4px;
 
         &__label {
-            display: inline-block;
             color: var(--text-600);
-            flex-basis: 50%;
-            padding-right: 10px;
         }
 
         &__value {
-            display: inline-block;
-            text-align: right;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            color: var(--black);
 
             i {
                 font-size: @font-size-xs;
@@ -35,4 +68,50 @@
             }
         }
     }
-}
+
+    // ---- Opt-in: avatar / user row (Figma "Summary input" Type=User) -----
+    &__user {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        &-label {
+            color: var(--text-600);
+        }
+
+        &-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        &-info {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+        }
+
+        &-name {
+            font-size: @font-size-sm; // 14
+            line-height: 1.25rem; // 20
+            color: var(--black);
+            font-weight: @font-weight-semibold;
+        }
+
+        &-email {
+            font-size: @font-size-sm; // 14
+            line-height: 1.25rem; // 20
+            color: var(--text-600);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    // ---- Opt-in: tag chips (Figma "Summary tags") ------------------------
+    &__tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+}

package/avatar.less

@@ -144,11 +144,12 @@
     }
     &:focus-visible {
         // Figma spec used a faint grey ring (rgba(152,162,179,0.14)) that fails
-        // WCAG 1.4.11/2.4.7 (~1.1:1) and diverges from DS focus rule. Use the
-        // DS-standard focus ring; the transparent outline keeps it visible in
-        // Windows High-Contrast / forced-colors mode (box-shadow is dropped there).
-        outline: 2px solid transparent;
-        outline-offset: 2px;
+        // WCAG 1.4.11/2.4.7 (~1.1:1) and diverges from DS focus rule. The DS halo
+        // is no better on its own at 1.37:1, so @focus-outline (--brand-500,
+        // 3.23:1) is the indicator; it also survives Windows High-Contrast /
+        // forced-colors mode, where the box-shadow is dropped.
+        outline: @focus-outline;
+        outline-offset: @focus-outline-offset;
         box-shadow: @form-focus-box-shadow;
     }
     &:disabled {

package/benivo-ui-lib.less

@@ -8,6 +8,7 @@
 @import '../components/checkbox/checkbox.less';
 @import '../components/radiobutton/radiobutton.less';
 @import '../components/checkboxGroup/checkboxGroup.less';
+@import '../components/buttonGroup/buttonGroup.less';
 @import '../components/slider/slider.less';
 @import '../components/progress/progress.less';
 @import '../icons/featuredIcon/featuredIcon.less';
@@ -21,12 +22,15 @@
 @import '../components/badge/badge.less';
 @import '../components/activityFeed/activityFeed.less';
 @import '../components/notificationCard/notificationCard.less';
+@import '../components/cardHeader/cardHeader.less';
 @import '../components/alertBanner/alertBanner.less';
 @import '../components/alert/alert.less';
 @import '../icons/pageHeaderIcon/pageHeaderIcon.less';
 @import '../components/breadcrumbs/breadcrumbs.less';
+@import '../components/pageHeader/pageHeader.less';
 @import '../components/pageIndicator/pageIndicator.less';
 @import '../components/fileUpload/fileUpload.less';
+@import '../components/contentDivider/contentDivider.less';
 @import '../components/pagination/pagination.less';
 @import '../components/shared/optionList.less';
 @import '../components/select/select.less';
@@ -34,17 +38,22 @@
 @import '../components/navigation/navigation.less';
 @import '../components/swiperSlider/swiper/swiper.less';
 @import '../components/select/TagsSelect/tagsSelect.less';
+@import '../components/dataGrid/dataGrid.less';
 @import '../components/copyInput/copyInput.less';
 @import '../components/currencyInput/currencyInput.less';
 @import '../components/phoneNumber/phoneNumber.less';
 @import '../components/emptyState/emptyState.less';
 @import '../components/emptyState/illustration/illustration.less';
 @import '../components/menu/menu.less';
+@import '../components/metric/metric.less';
 @import '../components/heroInput/heroInput.less';
 @import '../components/formSection/formSection.less';
+@import '../components/sectionHeader/sectionHeader.less';
 @import '../components/verificationCode/verificationCode.less';
 @import '../components/avatar/avatar.less';
 @import '../components/tag/tag.less';
+@import '../components/asideSummaryCard/asideSummaryCard.less';
+@import '../components/asideSummaryCardSection/asideSummaryCardSection.less';
 @import '../components/tab/tabs/tabs.less';
 @import '../components/tab/tabGroup/tabGroup.less';
 @import '../components/accordion/accordion.less';
@@ -52,7 +61,14 @@
 @import '../components/flag/flag.less';
 @import '../components/textarea/textarea.less';
 @import '../components/modal/modal.less';
+@import '../components/workspaceModal/workspaceModal.less';
 @import '../components/fileCard/fileCard.less';
+@import '../components/detailCard/detailCard.less';
+@import '../components/checklistCard/checklistCard.less';
+@import '../components/progressSteps/progressSteps.less';
+@import '../components/footer/footer.less';
+@import '../components/filePreview/filePreview.less';
+@import '../components/charts/charts.less';
 @import './forms.less';
 @import './spacing.less';
 @import './typography.less';

package/button.less

@@ -511,10 +511,16 @@
     // question rather than reproduced.
 
     // --- Destructive primary ---------------------------------------------
+    // BPO-14879 / BPO-14810 row 110161 (WCAG 1.4.3): white text on --error-main is 3.76:1, measured
+    // in a running app, and 16px/400 is normal-size text so it needs 4.5:1. The resting state was
+    // therefore non-conformant while :hover, already a step darker at 6.16:1, passed — the button was
+    // only accessible while the pointer was on it. --error-700 is 6.57:1 and is the closer hue match
+    // to --error-main than the more magenta --rose-* steps. Only the CONTAINED variant changes: the
+    // outlined and text danger variants put the colour on white as text and were fixed separately.
     &.btn-variant-contained.btn-color-danger {
         color: var(--white);
-        background: var(--error-main);
-        border-color: var(--error-main);
+        background: var(--error-700);
+        border-color: var(--error-700);
         box-shadow: @btn-shadow;
 
         &:hover {

package/buttonGroup.less

@@ -0,0 +1,236 @@
+//
+// Button group — segmented control (single-select)
+//
+// Joined buttons that share borders, exactly one Current (selected). Each
+// segment is a real radio (see ButtonGroupItem.jsx); everything here is the
+// button skin laid over it. The visual language is the DS Button's
+// "Secondary grey" hierarchy — white fill, Text/300 border, the shared
+// @focus-ring — reused through the @btn-* / @focus-* tokens rather than
+// re-derived, so the group and a standalone Button stay in step.
+//
+// Figma: `_Button group base` 1046-9312 / `Button group` 1046-10171 (node 16-399).
+//   segment   white bg · Text/300 border · Text/600 label · Semibold
+//   current   Grey/100 fill · black label       (the selected segment)
+//   hover     Grey/50 fill                       (unselected only)
+//   focus     the DS 2px outline + grey halo, raised above the shared borders
+//   disabled  Text/400 label, no hover/pointer
+//   joined    borders collapse (-1px) so adjacent segments share one line;
+//             only the two ends are rounded.
+
+// The field wrapper (present only when a visible group label is passed).
+.bnv-button-group-field {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.375rem; // label -> control
+}
+
+.bnv-button-group__group-label {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: @font-weight-semibold;
+    color: var(--black);
+}
+
+.bnv-button-group {
+    display: inline-flex;
+    align-items: stretch;
+    // The subtle DS button elevation, on the group as a whole.
+    box-shadow: @btn-shadow;
+    .border-radius(@btn-brd-radius);
+    // A new stacking context so a focused segment's z-index stays local.
+    isolation: isolate;
+}
+
+.bnv-button-group__segment {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    background: var(--white);
+    // Figma strokes the segments with Text/300 (as the DS Secondary-grey
+    // button does); there is no border token at that step.
+    border: @btn-brd solid var(--text-300);
+    color: var(--text-600);
+    font-family: @btn-font-family;
+    font-weight: @btn-font-weight;
+    font-size: @btn-md-font-size;
+    line-height: @btn-md-line-height;
+    text-align: center;
+    white-space: nowrap;
+    .user-select(none);
+    .transition(@btn-transition);
+
+    // Collapse the shared border so neighbours draw one line, not two.
+    &:not(:first-child) {
+        margin-left: calc(-1 * @btn-brd);
+    }
+    &:first-child {
+        .border-radius(@btn-brd-radius 0 0 @btn-brd-radius);
+    }
+    &:last-child {
+        .border-radius(0 @btn-brd-radius @btn-brd-radius 0);
+    }
+}
+
+// --- segment contents (elements of the block, siblings of __segment) -----
+.bnv-button-group__content {
+    display: inline-flex;
+    align-items: center;
+    gap: @btn-md-gap;
+}
+
+.bnv-button-group__icon {
+    display: inline-flex;
+    align-items: center;
+    font-size: @btn-icon-size;
+
+    svg {
+        width: @btn-icon-size;
+        height: @btn-icon-size;
+    }
+}
+
+// Leading status dot; inherits the label colour unless dotColor is set.
+.bnv-button-group__dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+    flex: 0 0 auto;
+}
+
+.bnv-button-group__label {
+    display: inline-block;
+}
+
+// --- sizes ---------------------------------------------------------------
+// Heights track the DS Button scale (sm 40 / md 44 / lg 48); horizontal
+// padding tracks @btn-*-padding. Font stays 1rem across sizes, as the DS
+// Button does for sm/md/lg.
+.bnv-button-group__segment {
+    &--sm {
+        height: 40px;
+        padding: 0 0.875rem;
+    }
+    &--md {
+        height: 44px;
+        padding: 0 1rem;
+    }
+    &--lg {
+        height: 48px;
+        padding: 0 1.125rem;
+    }
+
+    // Icon-only segments are square, so the group reads as even tiles.
+    &--icon-only {
+        &.bnv-button-group__segment--sm {
+            width: 40px;
+            padding: 0;
+        }
+        &.bnv-button-group__segment--md {
+            width: 44px;
+            padding: 0;
+        }
+        &.bnv-button-group__segment--lg {
+            width: 48px;
+            padding: 0;
+        }
+    }
+}
+
+// --- the native radio, visually hidden but still focusable ---------------
+// display:none would drop it out of the tab order and kill the browser's
+// arrow-key radio-group behaviour, so it is clipped instead. Clicks land on
+// the wrapping label, which toggles it natively.
+.bnv-button-group__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+}
+
+// --- states --------------------------------------------------------------
+// Hover: unselected segments fill Grey/50 (the DS Secondary-grey hover).
+.bnv-button-group__segment:hover:not([data-disabled='true']):not([data-selected='true']) {
+    background: var(--bg-50);
+    color: var(--black);
+    z-index: 1; // lift the hovered border above its neighbours
+}
+
+// Current: the one selected segment. A darker fill than hover (Grey/100 vs
+// Grey/50) so "selected" reads distinctly from "hovered", plus a black label.
+.bnv-button-group__segment[data-selected='true'] {
+    background: var(--bg-100);
+    color: var(--black);
+    z-index: 1;
+}
+
+// Focus: the DS focus treatment (2px outline for the 3:1 WCAG indicator plus
+// the grey halo) painted on an overlay so it clears the shared borders. Keyed
+// off :focus-visible on the input, so a mouse click leaves no ring behind.
+.bnv-button-group__focus {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+}
+
+.bnv-button-group__input:focus-visible ~ .bnv-button-group__focus {
+    outline: @focus-outline;
+    outline-offset: @focus-outline-offset;
+    box-shadow: @focus-ring-grey;
+}
+
+// Raise the whole segment while focused so the ring is never clipped by the
+// neighbouring segment's border.
+.bnv-button-group__segment:has(.bnv-button-group__input:focus-visible) {
+    z-index: 2;
+}
+
+// Disabled: greyed label, no hover, no pointer. A disabled radio is already
+// skipped by the browser's arrow-key navigation. The label uses --text-500,
+// not --text-400: --text-400 measures 2.575:1 and fails WCAG 1.4.3, which is
+// exactly why DS Button's disabled labels moved to --text-500 (BPO-14588).
+.bnv-button-group__segment[data-disabled='true'] {
+    color: var(--text-500);
+    cursor: not-allowed;
+    background: var(--white);
+
+    .bnv-button-group__input {
+        cursor: not-allowed;
+    }
+}
+
+// Disabled + Current: keep the selection fill (greyed via the disabled label
+// colour) so the current segment is still identifiable — matching CheckboxGroup,
+// where a disabled+selected item keeps its indicator rather than losing it. The
+// disabled rule above resets the background, so re-assert the fill here (it has
+// higher specificity, and comes later, so it wins).
+.bnv-button-group__segment[data-disabled='true'][data-selected='true'] {
+    background: var(--bg-100);
+}
+
+// Windows High Contrast / forced-colors forces every background-color to the
+// theme's Canvas, so the Current segment's Grey/100 fill vanishes and it becomes
+// indistinguishable from the unselected ones (the radio is opacity:0, so it is
+// no fallback). Rebuild the state from the platform's own selection pair
+// Highlight / HighlightText — the same fix radiobutton.less carries (BPO-14588).
+@media (forced-colors: active) {
+    .bnv-button-group__segment[data-selected='true'] {
+        background: Highlight;
+        color: HighlightText;
+    }
+
+    .bnv-button-group__segment[data-disabled='true'] {
+        color: GrayText;
+    }
+}