novo-elements 13.1.0 → 13.2.0-next.2

package/elements/radio/radio-group.scss

@@ -6,7 +6,7 @@
   &.novo-radio-group-appearance-horizontal {
     novo-radio:not(:last-child) {
       .novo-radio-button-label {
-        margin-right: 1rem;
+        margin-right: var(--spacing-md);
       }
     }
   }
@@ -26,7 +26,7 @@
       }
       &[theme="icon"] {
         margin-right: 0;
-        border: 1px solid $positive;
+        border: 1px solid var(--color-positive);
       }
     }
     &:first-child {

package/elements/search/SearchBox.scss

@@ -7,16 +7,15 @@
   grid-template-rows: 1fr;
   align-items: center;
   height: 3.2rem;
-  background: $white;
-  font-size: 1.4rem;
-  border: 1px solid $light;
-  border-radius: 0.2rem;
+  background: var(--background-bright);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-sm);
   max-width: 400px;
   min-width: 100px;
   transition: all 250ms ease-in-out;
 
   &[size="small"] {
-    font-size: 1rem;
+    font-size: var(--font-size-xs);
     height: 2.4rem;
     grid-template-columns: 2.4rem 1fr;
   }
@@ -64,25 +63,59 @@
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &[color="#{$name}"] {
         > novo-icon {
-          color: $color !important;
+          color: getCssVarname($name) !important;
         }
       }
     }
   }
 }
 
+:host(.has-search-button) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8, 0.8rem);
+  height: auto;
+  padding: var(--spacing-4, 0.4rem) 0 var(--spacing-4, 0.4rem) var(--spacing-16, 1.6rem);
+  border-radius: var(--border-radius-sm, 3px);
+  max-width: none;
+  box-shadow: 0 0.2rem 0.2rem var(--color-transparency-charcoal-04, transparent);
+
+  novo-icon:first-child {
+    flex-shrink: 0;
+    font-size: 1.6rem;
+    color: var(--color-text-subtle, var(--text-muted));
+  }
+
+  > input {
+    flex: 1 1 0;
+    min-width: 0;
+    height: auto;
+
+    &::placeholder {
+      color: var(--color-text-subtle, var(--text-muted));
+    }
+  }
+}
+
+:host-context([data-theme='bh2026']) {
+  &.has-search-button {
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--button-radius);
+  }
+}
+
 header {
   novo-search.always-open:not(.focused) {
     button {
       background: rgba($white, 0.25) !important;
-      color: rgba($positive, 0.25) !important;
+      color: rgb(from var(--color-positive) r g b / 0.25) !important;
     }
     input {
       background-color: rgba($white, 0.25) !important;
       border-color: rgba($white, 0.25) !important;
-      color: rgba($positive, 0.25) !important;
+      color: rgb(from var(--color-positive) r g b / 0.25) !important;
       &::placeholder {
-        color: $empty !important;
+        color: var(--color-empty) !important;
       }
     }
   }

package/elements/search/index.d.ts

@@ -3,10 +3,11 @@ import { OnInit, ElementRef, EventEmitter, ChangeDetectorRef, NgZone } from '@an
 import { ControlValueAccessor } from '@angular/forms';
 import { NovoLabelService } from 'novo-elements/services';
 import * as i2 from '@angular/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';
+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';
 
 declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     element: ElementRef;
@@ -18,6 +19,9 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     position: string;
     placeholder: string;
     alwaysOpen: boolean;
+    submitButton: boolean;
+    submitLabel: string;
+    submitButtonAutomationId: string;
     theme: string;
     color: string;
     closeOnSelect: boolean;
@@ -56,6 +60,7 @@ 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;
@@ -73,12 +78,12 @@ 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; }; "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; }; "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>;
 }
 
 declare class NovoSearchBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoSearchBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoSearchBoxModule, [typeof NovoSearchBoxElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoPickerModule, typeof i5.NovoTooltipModule, typeof i6.NovoOverlayModule], [typeof NovoSearchBoxElement]>;
+    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 ɵinj: i0.ɵɵInjectorDeclaration<NovoSearchBoxModule>;
 }
 

package/elements/select/Select.scss

@@ -10,7 +10,7 @@
   cursor: pointer;
 
   &:focus .novo-select-trigger {
-    border-bottom: 1px solid $positive;
+    border-bottom: 1px solid var(--color-positive);
     i {
       color: rgba(0, 0, 0, 0.73);
     }
@@ -27,7 +27,7 @@
     align-items: center;
     background-color: transparent;
     border: none;
-    border-bottom: 1px solid lighten($dark, 45%);
+    border-bottom: 1px solid brightenLive('--color-dark', 45);
     color: var(--text-main, $dark);
     height: 2.05rem;
     position: relative;
@@ -36,7 +36,7 @@
     z-index: z(default);
     cursor: pointer;
     text-transform: none;
-    padding: 0 $spacing-md 0 $spacing-sm;
+    padding: 0 var(--spacing-md) 0 var(--spacing-sm);
     margin-bottom: -1px;
     -webkit-appearance: none;
 
@@ -44,7 +44,7 @@
       color: #a9a9a9;
     }
     &:hover {
-      border-bottom: 1px solid lighten($dark, 15%);
+      border-bottom: 1px solid brightenLive('--color-dark', 15);
     }
 
     .novo-select-placeholder {
@@ -53,7 +53,7 @@
 
     i {
       font-size: 0.8em;
-      color: $dark;
+      color: var(--font-color-base);
       position: absolute;
       right: 0px;
     }
@@ -91,6 +91,7 @@
     opacity: 1;
   }
   background-color: var(--background-bright);
+  border-radius: var(--border-radius-sm);
   cursor: default;
   list-style: none;
   overflow: auto;
@@ -98,7 +99,7 @@
   padding: 0;
   width: 100%;
   box-shadow: 0 -1px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  font-size: 1rem;
+  font-size: var(--font-size-xs);
   z-index: z(below);
   opacity: 0;
 
@@ -111,7 +112,7 @@
   button {
     text-transform: uppercase;
     &.header {
-      color: $positive;
+      color: var(--color-positive);
       position: relative;
       text-align: left;
       cursor: pointer;
@@ -123,13 +124,13 @@
       display: block;
       align-items: center;
       justify-content: space-between;
-      font-size: 1rem;
+      font-size: var(--font-size-xs);
       &:focus,
       &:hover {
-        color: darken($light, 55%);
+        color: darkenLive('--color-light', 55);
       }
       i {
-        color: $positive;
+        color: var(--color-positive);
         padding-right: 10px;
       }
       span {
@@ -157,9 +158,9 @@
       }
     }
     button.primary {
-      color: $positive;
+      color: var(--color-positive);
       &:hover {
-        color: darken($positive, 15%);
+        color: darkenLive('--color-positive', 15);
       }
     }
     input {
@@ -179,7 +180,7 @@
       cursor: pointer;
       text-transform: none;
       padding-top: 10px;
-      font-size: 1rem;
+      font-size: var(--font-size-xs);
       &.empty {
         color: #a9a9a9;
       }
@@ -187,7 +188,7 @@
         outline: none;
       }
       &:hover {
-        border-bottom: 1px solid $positive;
+        border-bottom: 1px solid var(--color-positive);
       }
       &.invalid {
         border-bottom: 1px solid #da4453;

package/elements/select-search/select-search.component.scss

@@ -64,7 +64,7 @@ $novo-select-search-toggle-all-checkbox-x: 16px;
 
 ::ng-deep .novo-option.contains-novo-select-search {
   /* let move novo-select-search at the top of the dropdown. As option is disabled, there will be no-ripple hence safe. */
-  padding: 0 !important; // Option group padding was being applied as well. 
+  padding: 0 !important; // Option group padding was being applied as well.
   border: none;
 
   .novo-icon {

package/elements/simple-table/PaginationOld.scss

@@ -9,7 +9,7 @@ novo-pagination {
   }
   h5.rows {
     padding: 0;
-    font-size: 1rem;
+    font-size: var(--font-size-xs);
     opacity: 0.75;
     letter-spacing: 0.1px;
   }
@@ -43,11 +43,11 @@ novo-pagination {
       padding: 0 10px;
       line-height: 2.4rem;
       font-size: var(--font-size-text);
-      border-radius: 2px;
+      border-radius: var(--border-radius-xsm, 2px);
       text-align: center;
       list-style-type: none;
       cursor: pointer;
-      color: $company;
+      color: var(--color-company);
       &:last-child {
         padding-right: 0;
       }
@@ -57,8 +57,8 @@ novo-pagination {
       }
     }
     .page.active {
-      color: $company;
-      background-color: $off-white;
+      color: var(--color-company);
+      background-color: var(--background-main);
       opacity: 1;
     }
   }

package/elements/simple-table/table.scss

@@ -1,7 +1,6 @@
 @import "../../styles/variables.scss";
 @import "../../styles/reset";
 
-$table-bg-accent: #f4f4f4;
 $novo-row-horizontal-padding: 20px;
 $breakpoint: 1000px;
 
@@ -19,14 +18,14 @@ novo-simple-table {
   .novo-simple-button-cell,
   .novo-simple-dropdown-cell,
   .novo-simple-checkbox-cell {
-      background-color: $table-bg-accent;
+      background-color: var(--background-muted);
     }
     &.active {
       .novo-simple-cell,
       .novo-simple-button-cell,
       .novo-simple-dropdown-cell,
       .novo-simple-checkbox-cell {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
     }
   }
@@ -35,14 +34,14 @@ novo-simple-table {
   .novo-simple-button-cell,
   .novo-simple-dropdown-cell,
   .novo-simple-checkbox-cell {
-      background-color: $white;
+      background-color: var(--background-body);
     }
     &.active {
       .novo-simple-cell,
       .novo-simple-button-cell,
       .novo-simple-dropdown-cell,
       .novo-simple-checkbox-cell {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
     }
   }
@@ -56,7 +55,7 @@ novo-simple-table {
   .novo-simple-header-cell,
   novo-simple-empty-header-cell,
   .novo-simple-checkbox-header-cell {
-    border-bottom: 1px solid $off-white;
+    border-bottom: 1px solid var(--border-2);
   }
 }
 
@@ -76,7 +75,7 @@ novo-simple-table {
     display: inline-block;
   }
   button.active {
-    color: $positive;
+    color: var(--color-positive);
   }
   &.clickable {
     cursor: pointer;
@@ -92,7 +91,7 @@ novo-simple-table {
 }
 
 .novo-simple-header-cell {
-  border-left: 1px solid $off-white;
+  border-left: 1px solid var(--border-2);
   white-space: nowrap;
   display: flex;
   align-items: center;
@@ -172,7 +171,7 @@ novo-activity-table {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    border-bottom: 1px solid $off-white;
+    border-bottom: 1px solid var(--border-2);
     > [novo-activity-table-custom-header] {
       flex: 1;
     }
@@ -249,7 +248,7 @@ novo-activity-table {
     display: flex;
     flex: 1;
     .novo-activity-table-custom-filter {
-      border-right: 1px solid $off-white;
+      border-right: 1px solid var(--border-2);
       novo-date-picker {
         .calendar {
           box-shadow: none;
@@ -346,3 +345,9 @@ novo-simple-table-pagination {
     font-weight: 500;
   }
 }
+
+// bh2026: subtle, medium-weight column headers (matches data-table).
+[data-theme='bh2026'] .novo-simple-header-cell {
+  font-weight: 600;
+  color: var(--color-text-subtle);
+}

package/elements/stepper/step-header.component.scss

@@ -6,7 +6,7 @@ $novo-stepper-label-min-width: 50px !default;
 $novo-stepper-side-gap: 24px !default;
 $novo-vertical-stepper-content-margin: 36px !default;
 $novo-stepper-line-gap: 8px !default;
-$novo-step-optional-font-size: 12px;
+$novo-step-optional-font-size: var(--font-size-sm);
 $novo-step-header-icon-size: 1em !default;
 
 :host {
@@ -36,19 +36,19 @@ $novo-step-header-icon-size: 1em !default;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 4px;
+      border-radius: var(--border-radius-default, 4px);
     }
   }
 
   .novo-step-icon {
     .novo-step-number {
-      background: $positive;
+      background: var(--color-positive);
       color: $white;
     }
   }
   .novo-step-icon-not-touched {
     .novo-step-number {
-      background: $submission;
+      background: var(--color-submission);
       color: $white;
     }
   }
@@ -119,7 +119,7 @@ $novo-step-header-icon-size: 1em !default;
           display: block;
           width: calc(50% - 8px);
           margin-right: 8px;
-          border-bottom: 1px solid $light;
+          border-bottom: 1px solid var(--color-border);
         }
         &:after {
           content: "";
@@ -127,19 +127,19 @@ $novo-step-header-icon-size: 1em !default;
           width: calc(50% - 8px);
           margin-left: calc(50% + 8px);
           margin-top: -1px;
-          border-top: 1px solid $light;
+          border-top: 1px solid var(--color-border);
         }
         &.edit {
           &:before {
-            border-bottom: 1px solid $positive;
+            border-bottom: 1px solid var(--color-positive);
           }
         }
         &.done {
           &:before {
-            border-bottom: 1px solid $positive;
+            border-bottom: 1px solid var(--color-positive);
           }
           &:after {
-            border-top: 1px solid $positive;
+            border-top: 1px solid var(--color-positive);
           }
         }
       }

package/elements/stepper/stepper.component.scss

@@ -19,14 +19,14 @@ $novo-stepper-line-gap: 8px !default;
     align-items: center;
     justify-content: center;
     margin-bottom: 1em;
-    background: $background;
+    background: var(--background-main);
     .novo-stepper-horizontal-line {
-      border-bottom: $novo-stepper-line-width solid $light;
+      border-bottom: $novo-stepper-line-width solid var(--color-border);
       flex: auto;
       min-width: 0px;
       height: $novo-horizontal-stepper-header-height;
       &.complete {
-        border-bottom: $novo-stepper-line-width solid $positive;
+        border-bottom: $novo-stepper-line-width solid var(--color-positive);
       }
     }
   }
@@ -66,7 +66,7 @@ $novo-stepper-line-gap: 8px !default;
       z-index: z(below);
       border-left-width: $novo-stepper-line-width;
       border-left-style: solid;
-      border-left-color: $light;
+      border-left-color: var(--color-border);
 
       [dir="rtl"] & {
         left: auto;
@@ -75,15 +75,15 @@ $novo-stepper-line-gap: 8px !default;
     }
     &.edit {
       &:before {
-        border-left-color: 1px solid $positive;
+        border-left-color: 1px solid var(--color-positive);
       }
     }
     &.done {
       &:before {
-        border-left-color: 1px solid $positive;
+        border-left-color: 1px solid var(--color-positive);
       }
       &:after {
-        border-left-color: 1px solid $positive;
+        border-left-color: 1px solid var(--color-positive);
       }
     }
   }
@@ -98,3 +98,21 @@ $novo-stepper-line-gap: 8px !default;
     }
   }
 }
+
+// bh2026: neutral progress circles
+:host-context([data-theme='bh2026']) {
+  .novo-step-icon .novo-step-number {
+    background: var(--color-text-body);
+    color: #fff;
+    border: 1px solid var(--color-text-body);
+    border-radius: 50%;
+    box-shadow: none;
+  }
+  .novo-step-icon-not-touched .novo-step-number {
+    background: transparent;
+    color: var(--color-text-subtle);
+    border: 1px solid var(--color-border-default);
+    border-radius: 50%;
+    box-shadow: none;
+  }
+}

package/elements/switch/Switch.scss

@@ -53,7 +53,7 @@ $switch-thumb-size: 20px !default;
     width: $switch-width - 2px;
     top: calc($switch-height / 2) - calc($switch-bar-height / 2);
     height: $switch-bar-height;
-    border-radius: 8px;
+    border-radius: var(--border-radius-lg, 8px);
     position: absolute;
   }
   .novo-switch-thumb-container {
@@ -79,7 +79,7 @@ $switch-thumb-size: 20px !default;
     height: $switch-thumb-size;
     width: $switch-thumb-size;
     border-radius: 50%;
-    box-shadow: $shadow-1; // todo
+    box-shadow: var(--shadow-1); // todo
     color: getContrastColor("light");
 
     .novo-icon {
@@ -112,7 +112,7 @@ $switch-thumb-size: 20px !default;
   // Loop through analytics colors and make a switch color class for each
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.#{$name} {
-      @include novo-switch-style($color, lighten($color, 18%));
+      @include novo-switch-style($color, brightenLive('--color-#{$name}', 18));
       &[aria-checked="true"] {
         .novo-switch-thumb {
           color: getContrastColor($name);
@@ -122,22 +122,30 @@ $switch-thumb-size: 20px !default;
   }
 
   &.dark {
-    @include novo-switch-style($dark, darken($dark, 5%));
+    @include novo-switch-style($dark, darkenLive('--color-dark', 5));
   }
   &.light {
-    @include novo-switch-style(darken($light, 3%), $light);
+    @include novo-switch-style(darkenLive('--color-light', 3), $light);
   }
 
   .novo-switch-thumb {
     background-color: $light;
   }
   .novo-switch-bar {
-    background-color: lighten($light, 10%);
+    background-color: brightenLive('--color-light', 10);
   }
 
   &:focus {
     .novo-switch-label:not(:empty) {
-      border: 1px dotted $light;
+      border: 1px dotted var(--color-border);
     }
   }
 }
+
+// bh2026: outlined toggle — white track + 1px neutral border in the off state
+:host-context([data-theme='bh2026']) {
+  .novo-switch-bar {
+    background-color: var(--toggle-color-background, #ffffff);
+    border: 1px solid var(--toggle-color-border, var(--color-border-default, #f0f5f9));
+  }
+}