novo-elements 13.2.0-next.3 → 13.2.0-next.5

package/elements/checkbox/CheckList.scss

@@ -88,3 +88,72 @@
     }
   }
 }
+
+// bh2026: CSS-based checkbox rendering — replaces icon font glyphs
+:host-context([data-theme='bh2026']) {
+  .novo-checkbox-group {
+    label i.bhi-checkbox-empty,
+    label i.bhi-checkbox-filled {
+      font-size: 0;
+      display: inline-flex;
+      align-self: center;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    label i.bhi-checkbox-empty {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: 1px solid var(--color-border-control);
+        border-radius: 2px;
+        background: white;
+      }
+    }
+
+    label i.bhi-checkbox-filled {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 4px;
+        width: 9px;
+        height: 5px;
+        border-left: 2px solid var(--color-utility-blue-600);
+        border-bottom: 2px solid var(--color-utility-blue-600);
+        transform: rotate(-45deg);
+      }
+    }
+
+    &.disabled {
+      label {
+        opacity: 1;
+      }
+      label i.bhi-checkbox-empty {
+        &::before {
+          background: var(--color-background-utility-positive);
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-filled {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+    }
+  }
+}

package/elements/checkbox/Checkbox.scss

@@ -91,3 +91,107 @@
     }
   }
 }
+
+// bh2026: CSS-based checkbox rendering — replaces icon font glyphs
+:host-context([data-theme='bh2026']) {
+  .novo-checkbox-group {
+    // Suppress glyph and establish box dimensions for all box-style states
+    label i.bhi-checkbox-empty,
+    label i.bhi-checkbox-filled,
+    label i.bhi-checkbox-indeterminate {
+      font-size: 0;
+      display: inline-flex;
+      align-self: center;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    // Unchecked: white box with gray border
+    label i.bhi-checkbox-empty {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: 1px solid var(--color-border-control);
+        border-radius: 2px;
+        background: white;
+      }
+    }
+
+    // Checked: light-blue box with brand-blue border and checkmark
+    label i.bhi-checkbox-filled {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 4px;
+        width: 9px;
+        height: 5px;
+        border-left: 2px solid var(--color-utility-blue-600);
+        border-bottom: 2px solid var(--color-utility-blue-600);
+        transform: rotate(-45deg);
+      }
+    }
+
+    // Indeterminate: light-blue box with brand-blue border and dash
+    label i.bhi-checkbox-indeterminate {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 2px;
+        background: var(--color-utility-blue-600);
+      }
+    }
+
+    // Disabled: override the base opacity:0.4 and use explicit muted colors
+    &.disabled {
+      label {
+        opacity: 1;
+      }
+      label i.bhi-checkbox-empty {
+        &::before {
+          background: var(--color-background-utility-positive);
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-filled {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-indeterminate {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          background: var(--color-border-input-disabled);
+        }
+      }
+    }
+  }
+}

package/elements/data-table/pagination/data-table-pagination.component.scss

@@ -107,6 +107,7 @@ $breakpoint: 1000px;
         font-size: var(--font-size-text);
         border-radius: var(--border-radius-xsm, 2px);
         list-style-type: none;
+        margin-top: 3px;
         cursor: pointer;
         color: var(--color-company);
         &.disabled {
@@ -126,3 +127,75 @@ $breakpoint: 1000px;
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &.standard {
+    align-items: center;
+    border-top: 1px solid var(--pagination-color-border-default, var(--border));
+    padding: var(--spacing-padding-sm) var(--spacing-padding-sm) 0 var(--spacing-padding-md);
+
+    > * {
+      margin: 0;
+    }
+
+    h5.rows {
+      color: var(--pagination-color-content-label, var(--text-muted));
+      font-size: var(--typography-font-size-12);
+      font-weight: var(--typography-meta-sm-font-weight);
+      letter-spacing: var(--typography-meta-sm-letter-spacing);
+      line-height: var(--typography-meta-sm-line-height);
+      margin-right: var(--spacing-gap-sm);
+      opacity: 1;
+      padding: 0;
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+
+    novo-select {
+      color: var(--text-muted);
+      max-width: 60px;
+      min-width: 60px;
+      margin-right: var(--spacing-gap-sm);
+
+      ::ng-deep .novo-select-trigger {
+        height: var(--spacing-padding-xlg);
+        width: 5rem;
+
+        i.bhi-collapse::before {
+          content: "\f226"; // bhi-sort-desc - all code points are fixed in bullhorn-icons
+        }
+
+        span.text-ellipsis {
+          color: var(--button-color-select-color-content-value, var(--text-secondary));
+          font-size: var(--typography-button-default-font-size, var(--font-size-body));
+          font-weight: var(--typography-button-default-font-weight, var(--typography-body-default-font-weight));
+          letter-spacing: var(--typography-button-default-letter-spacing, var(--typography-body-default-letter-spacing));
+          line-height: var(--typography-button-default-line-height, var(--typography-line-height-20));
+        }
+      }
+    }
+
+    .novo-data-table-of-total-amount {
+      color: var(--pagination-color-content-label, var(--text-muted));
+      font-size: var(--typography-font-size-12);
+      font-weight: var(--typography-meta-sm-font-weight);
+    }
+
+    .pager {
+      gap: var(--data-table-spacing-gap, 0);
+
+      .page {
+        border-radius: var(--border-radius-xsm);
+        color: var(--pagination-color-content-label, var(--text-muted));
+        font-size: var(--typography-font-size-12);
+        font-weight: var(--typography-meta-sm-font-weight);
+
+        &.active {
+          background: var(--color-background-subtle, var(--background-muted));
+          border: 1px solid var(--pagination-color-border-default, var(--border));
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

package/elements/dropdown/Dropdown.scss

@@ -39,7 +39,6 @@
 .dropdown-container {
   background-color: var(--background-bright, $color-bright);
   border-radius: var(--border-radius-sm);
-  overflow: hidden;
   list-style: none;
   margin: 0;
   padding: 0;

package/elements/header/Header.scss

@@ -168,7 +168,7 @@
   }
 
   &[class*='novo-accent-'] {
-    background: var(--color-transparency-white-90);
+    background: var(--header-background, var(--color-transparency-white-90));
     backdrop-filter: blur(12px);
     box-shadow: 0 1px 2px var(--color-transparency-black-10);
     padding-top: var(--spacing-md);

package/elements/list/list-item-content.scss

@@ -3,12 +3,7 @@
 @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
   // Wonky deprecation: For 2026, stringently avoid using * selectors to apply font/color changes - prefer inherit functionality
   // This setup made it very hard to provide overrides.
-  :host-context([theme="#{$name}"]):host-context(:root:not([data-theme='bh2026'])) {
-    &.novo-item-content > ::ng-deep *:not(.xxxx) {
-    color: rgba(#fff, 0.65);
-    }
-  }
-  :host-context([theme="#{$name}"]):host-context(:root[data-theme='bh2026']).novo-item-content {
+  :host-context([theme="#{$name}"]).novo-item-content {
     color: rgba(#fff, 0.65);
   }
 }
@@ -21,16 +16,13 @@
   display: flex;
   margin-left: 0.2em;
   
-  :root:not([data-theme='bh2026']) &.novo-item-content > ::ng-deep *:not(.yyy) {
+  &.novo-item-content {
     color: rgba(#434343, 0.85);
-  }
-  :root[data-theme='bh2026'] &.novo-item-content {
-    color: rgba(#434343, 0.85);
-  }
-  &.novo-item-content ::ng-deep i {
-    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-      &.#{$name} {
-        color: getCssVarname($name);
+    ::ng-deep i {
+      @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+        &.#{$name} {
+          color: getCssVarname($name);
+        }
       }
     }
   }

package/elements/search/SearchBox.scss

@@ -70,7 +70,7 @@
   }
 }
 
-:host(.has-search-button) {
+:host(.has-border) {
   display: flex;
   align-items: center;
   gap: var(--spacing-8, 0.8rem);
@@ -86,6 +86,19 @@
     color: var(--color-text-subtle, var(--text-muted));
   }
 
+  [novo-search-trailing-action] {
+    flex-shrink: 0;
+    cursor: pointer;
+    color: var(--color-text-subtle, var(--text-muted));
+  }
+
+  ::ng-deep [novo-search-leading-content] {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+  }
+
   > input {
     flex: 1 1 0;
     min-width: 0;
@@ -97,8 +110,14 @@
   }
 }
 
+:host(.has-border.has-leading-content) {
+  > input {
+    display: none;
+  }
+}
+
 :host-context([data-theme='bh2026']) {
-  &.has-search-button {
+  &.has-border {
     border: 1px solid var(--color-border-default);
     border-radius: var(--button-radius);
   }

package/elements/search/index.d.ts

@@ -1,15 +1,22 @@
 import * as i0 from '@angular/core';
-import { OnInit, ElementRef, EventEmitter, ChangeDetectorRef, NgZone } from '@angular/core';
+import { OnInit, AfterContentChecked, ElementRef, EventEmitter, ChangeDetectorRef, NgZone } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { NovoLabelService } from 'novo-elements/services';
 import * as i2 from '@angular/common';
-import * as i3 from 'novo-elements/elements/button';
-import * as i4 from 'novo-elements/elements/icon';
-import * as i5 from 'novo-elements/elements/picker';
-import * as i6 from 'novo-elements/elements/tooltip';
-import * as i7 from 'novo-elements/elements/common';
+import * as i3 from 'novo-elements/elements/icon';
+import * as i4 from 'novo-elements/elements/picker';
+import * as i5 from 'novo-elements/elements/tooltip';
+import * as i6 from 'novo-elements/elements/common';
 
-declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
+/**
+ * Marker directive for content projected into the leading (left) area of `novo-search`.
+ * When present, the text input is hidden and the projected content fills its space.
+ */
+declare class NovoSearchLeadingContentDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchLeadingContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NovoSearchLeadingContentDirective, "[novo-search-leading-content]", never, {}, {}, never, never, false, never>;
+}
+declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit, AfterContentChecked {
     element: ElementRef;
     labels: NovoLabelService;
     private _changeDetectorRef;
@@ -19,9 +26,8 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     position: string;
     placeholder: string;
     alwaysOpen: boolean;
-    submitButton: boolean;
-    submitLabel: string;
-    submitButtonAutomationId: string;
+    bordered: boolean;
+    get hasBorder(): boolean;
     theme: string;
     color: string;
     closeOnSelect: boolean;
@@ -36,6 +42,8 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     applySearch: EventEmitter<KeyboardEvent>;
     focused: boolean;
     value: any;
+    leadingContent: NovoSearchLeadingContentDirective;
+    get hasLeadingContent(): boolean;
     /** View -> model callback called when value changes */
     _onChange: (value: any) => void;
     /** View -> model callback called when autocomplete has been touched */
@@ -44,12 +52,10 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     overlay: any;
     input: any;
     private debounceSearchChange;
+    private _hasLeadingContent;
     constructor(element: ElementRef, labels: NovoLabelService, _changeDetectorRef: ChangeDetectorRef, _zone: NgZone);
     ngOnInit(): void;
-    /**
-     * @name showFasterFind
-     * @description This function shows the picker and adds the active class (for animation)
-     */
+    ngAfterContentChecked(): void;
     showSearch(event?: any, forceClose?: boolean): void;
     onFocus(): void;
     onBlur(): void;
@@ -60,7 +66,6 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     get panelOpen(): boolean;
     get active(): boolean;
     /** END: Convenient Panel Methods. */
-    onSubmitClick(event: MouseEvent): void;
     _handleKeydown(event: KeyboardEvent): void;
     _handleInput(event: KeyboardEvent): void;
     writeValue(value: any): void;
@@ -78,13 +83,13 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
      */
     clearValue(skip: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchBoxElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoSearchBoxElement, "novo-search", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "alwaysOpen": { "alias": "alwaysOpen"; "required": false; }; "submitButton": { "alias": "submitButton"; "required": false; }; "submitLabel": { "alias": "submitLabel"; "required": false; }; "submitButtonAutomationId": { "alias": "submitButtonAutomationId"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "color": { "alias": "color"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "keepOpen": { "alias": "keepOpen"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "allowPropagation": { "alias": "allowPropagation"; "required": false; }; "overrideElement": { "alias": "overrideElement"; "required": false; }; }, { "searchChanged": "searchChanged"; "applySearch": "applySearch"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoSearchBoxElement, "novo-search", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "alwaysOpen": { "alias": "alwaysOpen"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "color": { "alias": "color"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "keepOpen": { "alias": "keepOpen"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "allowPropagation": { "alias": "allowPropagation"; "required": false; }; "overrideElement": { "alias": "overrideElement"; "required": false; }; }, { "searchChanged": "searchChanged"; "applySearch": "applySearch"; }, ["leadingContent"], ["[novo-search-leading-content]", "[novo-search-trailing-action]", "*"], false, never>;
 }
 
 declare class NovoSearchBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoSearchBoxModule, [typeof NovoSearchBoxElement], [typeof i2.CommonModule, typeof i3.NovoButtonModule, typeof i4.NovoIconModule, typeof i5.NovoPickerModule, typeof i6.NovoTooltipModule, typeof i7.NovoOverlayModule], [typeof NovoSearchBoxElement]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoSearchBoxModule, [typeof NovoSearchBoxElement, typeof NovoSearchLeadingContentDirective], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoPickerModule, typeof i5.NovoTooltipModule, typeof i6.NovoOverlayModule], [typeof NovoSearchBoxElement, typeof NovoSearchLeadingContentDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoSearchBoxModule>;
 }
 
-export { NovoSearchBoxElement, NovoSearchBoxModule };
+export { NovoSearchBoxElement, NovoSearchBoxModule, NovoSearchLeadingContentDirective };

package/elements/switch/Switch.scss

@@ -142,10 +142,46 @@ $switch-thumb-size: 20px !default;
   }
 }
 
-// bh2026: outlined toggle — white track + 1px neutral border in the off state
+// bh2026: 32×20 pill track, 16×16 thumb, always white — per Figma spec
 :host-context([data-theme='bh2026']) {
+  .novo-switch-container {
+    width: 32px;
+    height: 20px;
+  }
   .novo-switch-bar {
-    background-color: var(--toggle-color-background, #ffffff);
-    border: 1px solid var(--toggle-color-border, var(--color-border-default, #f0f5f9));
+    top: 0;
+    left: 0;
+    width: 32px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: white;
+    border: 1px solid var(--color-border-input);
+  }
+  .novo-switch-thumb-container {
+    top: 2px;
+    left: 2px;
+    width: 12px; // travel: 32 - 16 - 4px padding = 12px
+  }
+  .novo-switch-thumb {
+    height: 16px;
+    width: 16px;
+    background-color: white;
+    border: 1px solid var(--color-border-input);
+    box-shadow: 0px 2px 4px 0px var(--color-transparency-charcoal-04);
+
+    novo-icon {
+      display: none;
+    }
+  }
+
+  &[aria-checked="true"] {
+    .novo-switch-bar {
+      background-color: var(--color-utility-blue-600);
+      border: none;
+    }
+    .novo-switch-thumb {
+      background-color: white;
+      border: none;
+    }
   }
 }