novo-elements 13.1.0 → 13.2.0

package/elements/query-builder/index.d.ts

@@ -1,40 +1,40 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewContainerRef, OnInit, OnChanges, AfterContentInit, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef, SimpleChanges, QueryList, InputSignal, Signal, AfterContentChecked, InjectionToken } from '@angular/core';
-import * as i15 from '@angular/forms';
+import { TemplateRef, ViewContainerRef, OnInit, OnChanges, AfterContentInit, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef, SimpleChanges, QueryList, InputSignal, Signal, AfterContentChecked, PipeTransform, InjectionToken } from '@angular/core';
+import * as i16 from '@angular/forms';
 import { FormGroup, FormControl, ControlContainer, FormControlName, UntypedFormGroup, AbstractControl, FormBuilder, FormArray } from '@angular/forms';
 import { NovoLabelService } from 'novo-elements/services';
 import { Subject, Subscription } from 'rxjs';
 import { Day } from 'date-fns';
-import * as i25 from 'novo-elements/elements/field';
+import * as i26 from 'novo-elements/elements/field';
 import { NovoPickerToggleElement } from 'novo-elements/elements/field';
-import * as i18 from 'novo-elements/elements/places';
-import { PlacesListComponent } from 'novo-elements/elements/places';
-import * as i23 from 'novo-elements/elements/select';
+import * as i19 from 'novo-elements/elements/places';
+import { PlacesListComponent, PlacesSettings } from 'novo-elements/elements/places';
+import * as i24 from 'novo-elements/elements/select';
 import { NovoSelectElement } from 'novo-elements/elements/select';
-import * as i28 from 'novo-elements/elements/tabbed-group-picker';
+import * as i29 from 'novo-elements/elements/tabbed-group-picker';
 import { NovoTabbedGroupPickerElement, TabbedGroupPickerTab, TabbedGroupPickerButtonConfig } from 'novo-elements/elements/tabbed-group-picker';
-import * as i14 from '@angular/common';
-import * as i16 from '@angular/cdk/drag-drop';
-import * as i17 from '@angular/cdk/table';
-import * as i19 from 'novo-elements/elements/autocomplete';
-import * as i20 from 'novo-elements/elements/button';
-import * as i21 from 'novo-elements/elements/common';
-import * as i22 from 'novo-elements/elements/form';
-import * as i24 from 'novo-elements/elements/non-ideal-state';
-import * as i26 from 'novo-elements/elements/flex';
-import * as i27 from 'novo-elements/elements/tabs';
-import * as i29 from 'novo-elements/elements/loading';
-import * as i30 from 'novo-elements/elements/card';
-import * as i31 from 'novo-elements/elements/date-picker';
-import * as i32 from 'novo-elements/elements/date-time-picker';
-import * as i33 from 'novo-elements/elements/icon';
-import * as i34 from 'novo-elements/elements/radio';
-import * as i35 from 'novo-elements/elements/search';
-import * as i36 from 'novo-elements/elements/switch';
-import * as i37 from 'novo-elements/elements/chips';
-import * as i38 from 'novo-elements/elements/select-search';
-import * as i39 from 'novo-elements/elements/dropdown';
-import * as i40 from 'novo-elements/elements/tooltip';
+import * as i15 from '@angular/common';
+import * as i17 from '@angular/cdk/drag-drop';
+import * as i18 from '@angular/cdk/table';
+import * as i20 from 'novo-elements/elements/autocomplete';
+import * as i21 from 'novo-elements/elements/button';
+import * as i22 from 'novo-elements/elements/common';
+import * as i23 from 'novo-elements/elements/form';
+import * as i25 from 'novo-elements/elements/non-ideal-state';
+import * as i27 from 'novo-elements/elements/flex';
+import * as i28 from 'novo-elements/elements/tabs';
+import * as i30 from 'novo-elements/elements/loading';
+import * as i31 from 'novo-elements/elements/card';
+import * as i32 from 'novo-elements/elements/date-picker';
+import * as i33 from 'novo-elements/elements/date-time-picker';
+import * as i34 from 'novo-elements/elements/icon';
+import * as i35 from 'novo-elements/elements/radio';
+import * as i36 from 'novo-elements/elements/search';
+import * as i37 from 'novo-elements/elements/switch';
+import * as i38 from 'novo-elements/elements/chips';
+import * as i39 from 'novo-elements/elements/select-search';
+import * as i40 from 'novo-elements/elements/dropdown';
+import * as i41 from 'novo-elements/elements/tooltip';
 
 /** Base interface for a condidation template directives. */
 interface ConditionDef {
@@ -129,6 +129,7 @@ declare enum Operator {
     isEmpty = "isEmpty",
     isNull = "isNull",
     lessThan = "lessThan",
+    like = "like",
     outsideRadius = "outsideRadius",
     radius = "radius",
     within = "within"
@@ -176,15 +177,35 @@ interface FieldConfig<T extends BaseFieldDef> {
     find: (name: string) => T;
 }
 interface AddressData {
-    address_components: AddressComponent[];
-    formatted_address: string;
-    geometry: AddressGeometry;
+    address_components?: AddressComponent[];
+    formatted_address?: string;
+    geometry?: AddressGeometry;
     name?: string;
-    place_id: string;
+    place_id?: string;
+    address1?: string;
+    address2?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+    countryName?: string;
+    countryCode?: string;
+    formattedAddress?: string;
+    location?: AddressGeoPoint;
+    viewport?: AddressDetailViewport;
+    placeId?: string;
+    postalCodes?: string[];
     radius?: AddressRadius;
     postal_codes?: string[];
     types?: string[];
 }
+interface AddressGeoPoint {
+    latitude: number;
+    longitude: number;
+}
+interface AddressDetailViewport {
+    northeast: AddressGeoPoint;
+    southwest: AddressGeoPoint;
+}
 interface AddressRadius {
     value: number;
     units: AddressRadiusUnitsName;
@@ -431,6 +452,7 @@ declare class NovoDefaultAddressConditionDef extends AbstractConditionFieldDef i
     term: string;
     private _addressChangesSubscription;
     element: ElementRef<any>;
+    protected readonly addressConfig: PlacesSettings;
     constructor(labelService: NovoLabelService);
     ngOnDestroy(): void;
     onKeyup(event: any, viewIndex: any): void;
@@ -629,9 +651,19 @@ declare class CriteriaBuilderComponent implements OnInit, OnDestroy, AfterConten
     static ɵcmp: i0.ɵɵComponentDeclaration<CriteriaBuilderComponent, "novo-criteria-builder", never, { "config": { "alias": "config"; "required": false; }; "controlName": { "alias": "controlName"; "required": false; }; "allowedGroupings": { "alias": "allowedGroupings"; "required": false; }; "editTypeFn": { "alias": "editTypeFn"; "required": false; }; "addressConfig": { "alias": "addressConfig"; "required": false; }; "dateConfig": { "alias": "dateConfig"; "required": false; }; "canBeEmpty": { "alias": "canBeEmpty"; "required": false; }; "HideFirstOperator": { "alias": "hideFirstOperator"; "required": false; }; }, {}, ["_contentFieldDefs"], never, false, never>;
 }
 
+/**
+ * Resolves a display label from an address value. Google client-SDK results use formatted_address;
+ * address-search-service results use formattedAddress.
+ */
+declare class AddressLabelPipe implements PipeTransform {
+    transform(item: AddressData): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AddressLabelPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AddressLabelPipe, "addressLabel", false>;
+}
+
 declare class NovoQueryBuilderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoQueryBuilderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoQueryBuilderModule, [typeof CriteriaBuilderComponent, typeof ConditionBuilderComponent, typeof ConditionInputOutlet, typeof ConditionOperatorOutlet, typeof ConditionGroupComponent, typeof NovoDefaultAddressConditionDef, typeof NovoDefaultBooleanConditionDef, typeof NovoDefaultDateConditionDef, typeof NovoDefaultDateTimeConditionDef, typeof NovoConditionOperatorsDef, typeof NovoConditionInputDef, typeof NovoConditionFieldDef, typeof NovoDefaultStringConditionDef, typeof NovoDefaultNumberConditionDef, typeof NovoDefaultIdConditionDef, typeof NovoDefaultPickerConditionDef, typeof NovoConditionTemplatesComponent], [typeof i14.CommonModule, typeof i15.FormsModule, typeof i15.ReactiveFormsModule, typeof i16.DragDropModule, typeof i17.CdkTableModule, typeof i18.GooglePlacesModule, typeof i19.NovoAutoCompleteModule, typeof i20.NovoButtonModule, typeof i21.NovoCommonModule, typeof i22.NovoFormModule, typeof i23.NovoSelectModule, typeof i24.NovoNonIdealStateModule, typeof i25.NovoFieldModule, typeof i21.NovoOptionModule, typeof i26.NovoFlexModule, typeof i27.NovoTabModule, typeof i28.NovoTabbedGroupPickerModule, typeof i29.NovoLoadingModule, typeof i30.NovoCardModule, typeof i31.NovoDatePickerModule, typeof i32.NovoDateTimePickerModule, typeof i33.NovoIconModule, typeof i21.NovoOverlayModule, typeof i34.NovoRadioModule, typeof i35.NovoSearchBoxModule, typeof i36.NovoSwitchModule, typeof i37.NovoChipsModule, typeof i38.NovoSelectSearchModule, typeof i39.NovoDropdownModule, typeof i22.NovoFormExtrasModule, typeof i40.NovoTooltipModule], [typeof CriteriaBuilderComponent, typeof ConditionBuilderComponent, typeof NovoDefaultAddressConditionDef, typeof NovoDefaultBooleanConditionDef, typeof NovoDefaultDateConditionDef, typeof NovoDefaultDateTimeConditionDef, typeof NovoConditionOperatorsDef, typeof NovoConditionInputDef, typeof NovoConditionFieldDef, typeof NovoDefaultStringConditionDef, typeof NovoDefaultNumberConditionDef, typeof NovoDefaultIdConditionDef, typeof NovoDefaultPickerConditionDef, typeof NovoConditionTemplatesComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoQueryBuilderModule, [typeof AddressLabelPipe, typeof CriteriaBuilderComponent, typeof ConditionBuilderComponent, typeof ConditionInputOutlet, typeof ConditionOperatorOutlet, typeof ConditionGroupComponent, typeof NovoDefaultAddressConditionDef, typeof NovoDefaultBooleanConditionDef, typeof NovoDefaultDateConditionDef, typeof NovoDefaultDateTimeConditionDef, typeof NovoConditionOperatorsDef, typeof NovoConditionInputDef, typeof NovoConditionFieldDef, typeof NovoDefaultStringConditionDef, typeof NovoDefaultNumberConditionDef, typeof NovoDefaultIdConditionDef, typeof NovoDefaultPickerConditionDef, typeof NovoConditionTemplatesComponent], [typeof i15.CommonModule, typeof i16.FormsModule, typeof i16.ReactiveFormsModule, typeof i17.DragDropModule, typeof i18.CdkTableModule, typeof i19.GooglePlacesModule, typeof i20.NovoAutoCompleteModule, typeof i21.NovoButtonModule, typeof i22.NovoCommonModule, typeof i23.NovoFormModule, typeof i24.NovoSelectModule, typeof i25.NovoNonIdealStateModule, typeof i26.NovoFieldModule, typeof i22.NovoOptionModule, typeof i27.NovoFlexModule, typeof i28.NovoTabModule, typeof i29.NovoTabbedGroupPickerModule, typeof i30.NovoLoadingModule, typeof i31.NovoCardModule, typeof i32.NovoDatePickerModule, typeof i33.NovoDateTimePickerModule, typeof i34.NovoIconModule, typeof i22.NovoOverlayModule, typeof i35.NovoRadioModule, typeof i36.NovoSearchBoxModule, typeof i37.NovoSwitchModule, typeof i38.NovoChipsModule, typeof i39.NovoSelectSearchModule, typeof i40.NovoDropdownModule, typeof i23.NovoFormExtrasModule, typeof i41.NovoTooltipModule], [typeof CriteriaBuilderComponent, typeof ConditionBuilderComponent, typeof NovoDefaultAddressConditionDef, typeof NovoDefaultBooleanConditionDef, typeof NovoDefaultDateConditionDef, typeof NovoDefaultDateTimeConditionDef, typeof NovoConditionOperatorsDef, typeof NovoConditionInputDef, typeof NovoConditionFieldDef, typeof NovoDefaultStringConditionDef, typeof NovoDefaultNumberConditionDef, typeof NovoDefaultIdConditionDef, typeof NovoDefaultPickerConditionDef, typeof NovoConditionTemplatesComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoQueryBuilderModule>;
 }
 
@@ -640,4 +672,4 @@ declare const NOVO_CRITERIA_BUILDER: InjectionToken<any>;
 declare const NOVO_CONDITION_BUILDER: InjectionToken<any>;
 
 export { AbstractConditionFieldDef, BaseConditionFieldDef, ConditionBuilderComponent, ConditionInputOutlet, ConditionOperatorOutlet, Conjunction, CriteriaBuilderComponent, NOVO_CONDITION_BUILDER, NOVO_CRITERIA_BUILDER, NOVO_QUERY_BUILDER, NovoConditionFieldDef, NovoConditionInputDef, NovoConditionOperatorsDef, NovoConditionTemplatesComponent, NovoDefaultAddressConditionDef, NovoDefaultBooleanConditionDef, NovoDefaultDateConditionDef, NovoDefaultDateTimeConditionDef, NovoDefaultIdConditionDef, NovoDefaultNumberConditionDef, NovoDefaultPickerConditionDef, NovoDefaultStringConditionDef, NovoQueryBuilderModule, Operator, RadiusUnits };
-export type { AddressComponent, AddressCriteriaConfig, AddressData, AddressGeometry, AddressGeometryLocation, AddressGeometryViewport, AddressRadius, AddressRadiusUnitsName, BaseFieldDef, Condition, ConditionDef, ConditionGroup, ConditionOrConditionGroup, ConditionType, Criteria, DateCriteriaConfig, FieldConfig, NestedConditionGroup, NestedCriteria, OperatorName, QueryBuilderConfig, QueryFilterOutlet };
+export type { AddressComponent, AddressCriteriaConfig, AddressData, AddressDetailViewport, AddressGeoPoint, AddressGeometry, AddressGeometryLocation, AddressGeometryViewport, AddressRadius, AddressRadiusUnitsName, BaseFieldDef, Condition, ConditionDef, ConditionGroup, ConditionOrConditionGroup, ConditionType, Criteria, DateCriteriaConfig, FieldConfig, NestedConditionGroup, NestedCriteria, OperatorName, QueryBuilderConfig, QueryFilterOutlet };

package/elements/radio/Radio.scss

@@ -10,7 +10,7 @@
     }
     &[theme="icon"] {
       margin-right: 0;
-      border: 1px solid $positive;
+      border: 1px solid var(--color-positive);
     }
   }
   &:first-child {
@@ -38,7 +38,7 @@
 :host-context(novo-radio-group.novo-radio-group-appearance-horizontal) {
   :host:not(:last-child) {
     .novo-radio-button-label {
-      margin-right: 1rem;
+      margin-right: var(--spacing-md);
     }
   }
 }
@@ -57,7 +57,7 @@
       i {
         &.bhi-radio-empty,
         &.bhi-radio-filled {
-          color: $positive;
+          color: var(--color-positive);
         }
       }
     }
@@ -77,7 +77,7 @@
       }
       &.bhi-checkbox-filled,
       &.bhi-radio-filled {
-        color: $positive;
+        color: var(--color-positive);
       }
     }
     &.disabled {
@@ -91,19 +91,19 @@
   }
   novo-button[theme].has-icon {
     transition: all 100ms ease-in-out;
-    color: $positive;
+    color: var(--color-positive);
     background: $white;
     opacity: 1;
     &.checked {
       color: $white;
-      background: $positive;
+      background: var(--color-positive);
     }
 
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.checked[color="#{$name}"] {
         color: $white;
-        background: $color;
+        background: getCssVarname($name);
       }
     }
   }
-}
+}

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,7 +63,7 @@
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &[color="#{$name}"] {
         > novo-icon {
-          color: $color !important;
+          color: getCssVarname($name) !important;
         }
       }
     }
@@ -75,14 +74,14 @@ 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/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;
     }
@@ -98,7 +98,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 +111,7 @@
   button {
     text-transform: uppercase;
     &.header {
-      color: $positive;
+      color: var(--color-positive);
       position: relative;
       text-align: left;
       cursor: pointer;
@@ -123,13 +123,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 +157,9 @@
       }
     }
     button.primary {
-      color: $positive;
+      color: var(--color-positive);
       &:hover {
-        color: darken($positive, 15%);
+        color: darkenLive('--color-positive', 15);
       }
     }
     input {
@@ -179,7 +179,7 @@
       cursor: pointer;
       text-transform: none;
       padding-top: 10px;
-      font-size: 1rem;
+      font-size: var(--font-size-xs);
       &.empty {
         color: #a9a9a9;
       }
@@ -187,7 +187,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-content-subtle, #8ca1b9);
+}

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-content-default, #282828);
+    color: #fff;
+    border: 1px solid var(--color-content-default, #282828);
+    border-radius: 50%;
+    box-shadow: none;
+  }
+  .novo-step-icon-not-touched .novo-step-number {
+    background: transparent;
+    color: var(--color-content-subtle, #8ca1b9);
+    border: 1px solid var(--color-border-default, #d0d9e3);
+    border-radius: 50%;
+    box-shadow: none;
+  }
+}