novo-elements 13.1.0 → 13.2.0-next.2

package/elements/tabbed-group-picker/TabbedGroupPicker.scss

@@ -29,7 +29,10 @@
       box-shadow: none;
       box-sizing: content-box;
       transition: all 300ms;
-      color: $dark;
+      color: var(--font-color-base);
+      &.chip-list-input {
+        flex: 1 0 20px;
+      }
       &::placeholder {
         color: var(--form-placeholder);
       }
@@ -40,12 +43,18 @@
       bottom: 1em;
       right: 0.5em;
       color: $grey;
-      font-size: 1.2rem;
+      font-size: var(--font-size-sm);
       margin-right: 1em;
     }
     i.bhi-times {
       cursor: pointer;
     }
+    .hidden-chips-toggle {
+      cursor: pointer;
+    }
+    &.use-chips {
+      max-width: 500px;
+    }
   }
 
   .footer {
@@ -67,7 +76,7 @@
       align-items: center;
 
       &.left {
-        border-right: 1px solid $light;
+        border-right: 1px solid var(--color-border);
         justify-content: space-between;
 
         .clear-all-button {
@@ -94,7 +103,7 @@
               &:hover {
                 .novo-tab-link {
                   font-weight: 400;
-                  color: $positive;
+                  color: var(--color-positive);
                 }
               }
             }
@@ -119,14 +128,14 @@
 
           .quick-select-label {
             padding: 0.7em 1.9em 0 1.9em;
-            background: lighten($light, 10%);
+            background: brightenLive('--color-light', 10);
             text-transform: uppercase;
             font-size: 0.8em;
           }
 
           .quick-select-list {
             .quick-select-item {
-              background: lighten($light, 10%);
+              background: brightenLive('--color-light', 10);
               padding: 0.5em 0.8em;
               border-bottom: none;
             }
@@ -143,7 +152,7 @@
 
           novo-option {
             &:hover.novo-option-inert {
-              background: var(--background-main, rgba($ocean, 0.1));
+              background: var(--background-main, rgb(from var(--color-ocean) r g b / 0.1));
             }
           }
         }
@@ -163,7 +172,7 @@
           }
           .empty-item-main-message {
             font-weight: 500;
-            color: $dark;
+            color: var(--font-color-base);
           }
           .empty-item-sub-message {
             font-size: 0.9em;
@@ -173,3 +182,44 @@
     }
   }
 }
+
+// bh2026: Half-pill shaped indicator, updated colors
+::ng-deep [data-theme='bh2026'] .dropdown-container {
+  .tabbed-group-picker-search {
+    padding-left: var(--spacing-lg);
+  }
+  .tabbed-group-picker-column.left {
+    novo-nav > novo-tab {
+      margin-right: 0;
+
+      .novo-tab-link {
+        margin-left: var(--spacing-sm);
+        margin-right: var(--spacing-sm);
+
+        i {
+          padding-left: var(--spacing-sm);
+        }
+      }
+
+      &.active {
+        .novo-tab-link {
+          font-weight: var(--typography-tabs-active-font-weight);
+          color: var(--color-text-body);
+        }
+
+        .indicator {
+          background: var(--novo-tabbed-picker-accent, var(--color-border-utility-positive));
+          border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
+        }
+
+        &:hover .novo-tab-link {
+          font-weight: var(--typography-tabs-active-font-weight);
+          color: var(--color-text-body);
+        }
+      }
+    }
+  }
+  .tabbed-group-picker-column.right {
+    padding-top: var(--spacing-sm);
+  }
+}

package/elements/tabbed-group-picker/index.d.ts

@@ -1,18 +1,20 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { OnDestroy, OnInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { NovoLabelService } from 'novo-elements/services';
-import * as i9 from 'novo-elements/elements/dropdown';
+import * as i12 from 'novo-elements/elements/dropdown';
 import { NovoDropdownElement } from 'novo-elements/elements/dropdown';
 import * as i2 from '@angular/common';
 import * as i3 from '@angular/forms';
 import * as i4 from '@angular/cdk/scrolling';
-import * as i5 from 'novo-elements/elements/tabs';
-import * as i6 from 'novo-elements/elements/list';
-import * as i7 from 'novo-elements/elements/form';
-import * as i8 from 'novo-elements/elements/button';
-import * as i10 from 'novo-elements/elements/common';
-import * as i11 from 'novo-elements/elements/checkbox';
+import * as i5 from 'novo-elements/elements/chips';
+import * as i6 from 'novo-elements/elements/common';
+import * as i7 from 'novo-elements/elements/icon';
+import * as i8 from 'novo-elements/elements/tabs';
+import * as i9 from 'novo-elements/elements/list';
+import * as i10 from 'novo-elements/elements/form';
+import * as i11 from 'novo-elements/elements/button';
+import * as i13 from 'novo-elements/elements/checkbox';
 
 type TabbedGroupPickerTab = {
     typeName: string;
@@ -20,7 +22,7 @@ type TabbedGroupPickerTab = {
     valueField: string;
     labelField: string;
     scrollOffset?: number;
-    icon?: string;
+    icon?: any;
 } & (ParentTab | ChildTab);
 type ParentTab = {
     childTypeName: string;
@@ -76,11 +78,15 @@ declare class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
     tabs: TabbedGroupPickerTab[];
     quickSelectConfig: QuickSelectConfig;
     showFooter: boolean;
+    useChips: _angular_core.InputSignal<boolean>;
+    maxChips: _angular_core.InputSignal<number>;
+    chipSize: _angular_core.InputSignal<string>;
     selectionEnabled: boolean;
     activation: EventEmitter<any>;
     selectionChange: EventEmitter<TabbedGroupPickerTab[]>;
     applyChange: EventEmitter<any>;
     cancelChange: EventEmitter<any>;
+    tabSelect: EventEmitter<any>;
     displayTabs: TabbedGroupPickerTab[];
     displayTabIndex: number;
     filterText: BehaviorSubject<string>;
@@ -90,6 +96,11 @@ declare class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
     appliedState: TabbedGroupPickerTab[];
     scrollViewportHeight: number;
     virtualScrollItemSize: number;
+    selectedChips: _angular_core.WritableSignal<any[]>;
+    showAllChips: _angular_core.WritableSignal<boolean>;
+    displayedChips: _angular_core.Signal<any[]>;
+    hiddenChips: _angular_core.Signal<any[]>;
+    chipsInputPlaceholder: _angular_core.Signal<string>;
     constructor(labelService: NovoLabelService, ref: ChangeDetectorRef);
     get displayTab(): TabbedGroupPickerTab;
     set displayTab(tab: TabbedGroupPickerTab);
@@ -97,6 +108,7 @@ declare class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
     get maxBufferPx(): number;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    showAllChipsToggle(event: any): void;
     loadValues(): void;
     changeTab(tab: TabbedGroupPickerTab): void;
     getPixelHeight(element: HTMLElement): number;
@@ -114,6 +126,7 @@ declare class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
     onDropdownToggle(event: any): void;
     activateItem(item: any, tab?: TabbedGroupPickerTab): void;
     onItemToggled(item: Option): void;
+    toggleChip(item: Option): void;
     initializeDescendantSelection(): void;
     updateDescendants(parentIsSelected: boolean, children: Option[]): void;
     updateClearAll(itemWasJustSelected?: boolean): void;
@@ -133,14 +146,14 @@ declare class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
         };
     }): void;
     filter: (searchTerm: string) => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NovoTabbedGroupPickerElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoTabbedGroupPickerElement, "novo-tabbed-group-picker", never, { "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; "quickSelectConfig": { "alias": "quickSelectConfig"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "selectionEnabled": { "alias": "selectionEnabled"; "required": false; }; }, { "activation": "activation"; "selectionChange": "selectionChange"; "applyChange": "applyChange"; "cancelChange": "cancelChange"; }, never, ["*"], false, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NovoTabbedGroupPickerElement, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NovoTabbedGroupPickerElement, "novo-tabbed-group-picker", never, { "buttonConfig": { "alias": "buttonConfig"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; "quickSelectConfig": { "alias": "quickSelectConfig"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "useChips": { "alias": "useChips"; "required": false; "isSignal": true; }; "maxChips": { "alias": "maxChips"; "required": false; "isSignal": true; }; "chipSize": { "alias": "chipSize"; "required": false; "isSignal": true; }; "selectionEnabled": { "alias": "selectionEnabled"; "required": false; }; }, { "activation": "activation"; "selectionChange": "selectionChange"; "applyChange": "applyChange"; "cancelChange": "cancelChange"; "tabSelect": "tabSelect"; }, never, ["*"], false, never>;
 }
 
 declare class NovoTabbedGroupPickerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NovoTabbedGroupPickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoTabbedGroupPickerModule, [typeof NovoTabbedGroupPickerElement], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.ScrollingModule, typeof i5.NovoTabModule, typeof i6.NovoListModule, typeof i7.NovoFormExtrasModule, typeof i8.NovoButtonModule, typeof i9.NovoDropdownModule, typeof i10.NovoOptionModule, typeof i11.NovoCheckboxModule], [typeof NovoTabbedGroupPickerElement]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NovoTabbedGroupPickerModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NovoTabbedGroupPickerModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NovoTabbedGroupPickerModule, [typeof NovoTabbedGroupPickerElement], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.ScrollingModule, typeof i5.NovoChipsModule, typeof i6.NovoCommonModule, typeof i7.NovoIconModule, typeof i8.NovoTabModule, typeof i9.NovoListModule, typeof i10.NovoFormExtrasModule, typeof i11.NovoButtonModule, typeof i12.NovoDropdownModule, typeof i6.NovoOptionModule, typeof i13.NovoCheckboxModule], [typeof NovoTabbedGroupPickerElement]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NovoTabbedGroupPickerModule>;
 }
 
 export { NovoTabbedGroupPickerElement, NovoTabbedGroupPickerModule };

package/elements/tabs/tab-nav.scss

@@ -10,7 +10,7 @@
 
   &[type="button-bar"] {
     display: inline-flex;
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     border: 2px solid #fff;
   }
 
@@ -23,12 +23,12 @@
   }
 
   &[theme="white"] {
-    background-color: $white;
+    background-color: var(--background-body);
     &[direction="vertical"] {
       background: transparent;
     }
     &[type="button-bar"] {
-      border: 2px solid $light;
+      border: 2px solid var(--color-border);
     }
   }
 

package/elements/tabs/tab.scss

@@ -22,12 +22,14 @@
   .novo-tab-link {
     @include novo-label-text();
     font-size: var(--font-size-tab);
-    padding: $spacing-md;
+    padding: var(--spacing-md);
     display: flex;
     align-items: center;
-    gap: $spacing-xs;
+    gap: var(--spacing-xs);
     cursor: pointer;
     text-transform: uppercase;
+    -webkit-user-select: none;
+    user-select: none;
     &:focus {
       outline: none;
     }
@@ -76,7 +78,7 @@
     width: 100%;
     display: flex;
     flex-flow: row nowrap;
-    gap: $spacing-xs;
+    gap: var(--spacing-xs);
     max-width: 90%;
     white-space: nowrap;
     overflow: hidden;
@@ -157,6 +159,35 @@
   }
 }
 
+// bh2026: subtle default text, body text when active/hover, blue indicator only
+:host-context([data-theme='bh2026']) {
+  margin-right: var(--spacing-gap-lg);
+
+  .novo-tab-link {
+    color: var(--color-text-subtle);
+    // Tabs are Title Case, not uppercase.
+    text-transform: none;
+    font-weight: var(--typography-tabs-default-font-weight);
+  }
+
+  &.active,
+  &.router-link-active {
+    .novo-tab-link {
+      color: var(--color-text-body);
+      font-weight: var(--typography-tabs-active-font-weight);
+    }
+    .indicator {
+      background: var(--tab-indicator-color, var(--color-border-utility-positive));
+      border-radius: 999px 999px 0 0;
+    }
+  }
+
+  &:hover {
+    .novo-tab-link {
+      color: var(--color-text-body);
+    }
+  }
+}
 
 :host-context(novo-nav[theme="color"]),
 :host-context(novo-nav[theme="neutral"]) {
@@ -183,8 +214,8 @@
 }
 
 :host-context(novo-nav.condensed) {
-  font-size: 1rem;
+  font-size: var(--font-size-xs);
   .novo-tab-link {
-    padding: $spacing-sm;
+    padding: var(--spacing-sm);
   }
 }

package/elements/tiles/Tiles.scss

@@ -9,10 +9,10 @@
     position: absolute;
   }
   & > .tile-container {
-    background: $white;
+    background: var(--background-bright);
     display: flex;
-    border: solid thin $slate;
-    border-radius: 3px;
+    border: solid thin var(--color-slate);
+    border-radius: var(--border-radius-sm);
     .tile {
       margin: 2px;
       gap: .5rem;
@@ -20,7 +20,7 @@
         margin-right: 3px;
       }
       &.defaultColor.active {
-          background: darken($ocean, 20%);
+          background: darkenLive('--color-ocean', 20);
       }
       &.disabled {
         cursor: not-allowed;
@@ -34,7 +34,7 @@
       }
     }
     &.disabled {
-      border-color: lighten($grey, 20%);
+      border-color: brightenLive('--color-grey', 20);
       opacity: 0.4;
       pointer-events: auto;
       cursor: not-allowed;
@@ -45,3 +45,30 @@
     }
   }
 }
+
+// bh2026: pill track, subtle-hover selected state (toggle-style, not primary blue)
+:host-context([data-theme='bh2026']) > .tile-container {
+  background: var(--color-gray-0);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-pill);
+  padding: var(--spacing-padding-xsm);
+  gap: var(--spacing-gap-sm);
+
+  .tile {
+    border-radius: var(--border-radius-pill);
+    margin: 0;
+    color: var(--color-text-subtle);
+    i { color: var(--color-text-subtle); }
+
+    &:not(:last-child) {
+      margin-right: 0;
+    }
+  }
+
+  .tile.defaultColor.active {
+    background: var(--color-background-subtle-hover);
+    box-shadow: inset 0 4px 8px 0 var(--color-transparency-charcoal-08);
+    color: var(--color-text-subtle);
+    i { color: var(--color-text-subtle); }
+  }
+}

package/elements/time-picker/TimePicker.scss

@@ -4,7 +4,7 @@
   display: block;
   width: min-content;
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: var(--border-radius-sm);
   background-color: var(--background-bright);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 7px rgba(0, 0, 0, 0.1);
   z-index: z(overlay);
@@ -165,7 +165,7 @@
       display: block;
       right: 3.2rem;
       top: 50%;
-      margin-top: -1.5rem;
+      margin-top: calc(-1 * var(--spacing-xl));
       border-radius: 50%;
       position: absolute;
       border: 3px solid var(--selection);
@@ -277,7 +277,7 @@
     margin-left: 1px;
     display: block;
     position: absolute;
-    background-color: $background;
+    background-color: var(--background-main);
   }
   .analog--hour,
   .analog--minute {
@@ -299,7 +299,7 @@
     }
   }
   .analog--minute {
-    font-size: 1rem;
+    font-size: var(--font-size-xs);
     margin-left: -20px;
     margin-top: -16px;
   }
@@ -364,7 +364,7 @@
   }
 
   &.hasButtons {
-    border-radius: 4px 4px 0 0;
+    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
 
     &.military {
       .increments--hour,
@@ -379,7 +379,7 @@
       justify-content: flex-end;
       padding: 1rem;
       gap: .5rem;
-      border-radius: 0 0 4px 4px;
+      border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
       box-shadow: 0 1px 3px #00000026, 0 2px 7px #0000001a;
     }
   }

package/elements/time-picker/TimePickerInput.scss

@@ -36,7 +36,7 @@
     position: absolute;
     right: 0;
     top: 0px;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
   }
   > i.bhi-times {
     cursor: pointer;

package/elements/tip-well/TipWell.scss

@@ -4,22 +4,21 @@
 :host {
   &.active {
     display: inline-block;
-    margin-bottom: $spacing-md;
+    margin-bottom: var(--spacing-md);
   }
   > div {
     display: inline-block;
-    border-radius: 0.25rem;
-    background-color: var(--background-main, $off-white);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--background-main, $color-off-white);
     color: var(--text-main, $dark);
-    padding: $spacing-lg;
+    padding: var(--spacing-lg);
     text-align: right;
     > div {
       display: flex;
       > i {
         flex-shrink: 0;
         text-align: center;
-        margin-top: 0.3rem;
-        margin-right: $spacing-md;
+        margin-right: var(--spacing-md);
         color: #aaaaaa;
       }
       > p {

package/elements/toast/Toast.scss

@@ -8,10 +8,11 @@
   align-content: center;
   align-items: center;
   position: relative;
-  background: $navy;
-  color: $white;
-  padding: $spacing-md;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  background: var(--color-toast);
+  color: var(--text-bg-contrast);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow-1);
+  border-radius: var(--border-radius-sm);
 
   &.show {
     display: grid !important;
@@ -31,7 +32,7 @@
     width: 32px;
     height: 32px;
     background: rgba(0, 0, 0, 0.15);
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm);
   }
 
   .close-icon {
@@ -48,7 +49,7 @@
   .close-icon i {
     display: flex;
     position: relative;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
     line-height: 1.2;
   }
 
@@ -60,7 +61,7 @@
         input {
           background: transparent !important;
           border: none;
-          border-bottom: 1px solid lighten($dark, 45%);
+          border-bottom: 1px solid brightenLive('--color-dark', 45);
           border-radius: 0;
           outline: none;
           height: 2rem;
@@ -73,10 +74,10 @@
           color: $white;
           text-overflow: ellipsis;
           &:focus {
-            background-color: $positive;
+            background-color: var(--color-positive);
           }
           &:hover {
-            border-bottom: 1px solid lighten($dark, 15%);
+            border-bottom: 1px solid brightenLive('--color-dark', 15);
           }
         }
       }
@@ -104,19 +105,19 @@
   }
 
   &.text {
-    background: $dark;
+    background: var(--color-dark);
   }
   &.neutral {
-    background: $neutral;
+    background: var(--color-neutral);
   }
   &.background {
-    background: $off-white;
+    background: var(--background-main);
     .toast-content > h5 {
-      color: $dark !important;
+      color: var(--text-main) !important;
     }
     i,
     p {
-      color: $dark;
+      color: var(--text-main);
     }
   }
 
@@ -173,7 +174,7 @@
   }
 
   &[class*="growl"] {
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     max-width: 350px;
   }
 
@@ -255,12 +256,12 @@
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.#{$name} {
       color: getContrastColor($name);
-      background: $color;
+      background: getCssVarname($name);
     }
     &.novo-accent-#{$name} {
-      border: 1px solid $color;
+      border: 1px solid getCssVarname($name);
       background: getPaleColor($name);
-      color: $dark;
+      color: var(--font-color-base);
     }
   }
 }

package/elements/toolbar/toolbar.component.scss

@@ -7,7 +7,7 @@
     box-sizing: border-box;
     background-color: var(--background-bright);
     color: var(--text-main);
-    padding: 0 $spacing-md;
+    padding: 0 var(--spacing-md);
     width: 100%;
     // Flexbox Vertical Alignment
     flex-direction: row;
@@ -24,17 +24,19 @@
       min-height: inherit;
     }
 
-    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+    @include theme-colors() using($name, $color, $contrast, $tint, $shade, $pale) {
       &.novo-color-#{$name},
       &.novo-theme-#{$name} {
-        color: $contrast;
-        background: $color;
+        color: getContrastColor($name);
+        background: getCssVarname($name);
+
         & > novo-text,
         & > novo-label,
         & > novo-icon,
         & novo-title {
           color: inherit;
         }
+
         novo-action,
         .links {
           button,
@@ -42,13 +44,14 @@
             color: inherit;
           }
         }
+
         .novo-divider.novo-divider-vertical {
-          border-right-color: $tint;
+          border-right-color: getTintColor($name);
         }
       }
 
       &.novo-accent-#{$name} {
-        border-bottom: 2px solid $color;
+        border-bottom: 2px solid getCssVarname($name);
       }
     }
   }
@@ -59,4 +62,19 @@
     flex-direction: column;
     width: 100%;
   }
+
+  // bh2026: frosted translucent toolbar, no entity accent border
+  :root[data-theme='bh2026'] & {
+    background: var(--color-transparency-white-90);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 1px 2px var(--color-transparency-black-10);
+
+    .novo-toolbar-row {
+      background: transparent;
+
+      &[class*='novo-accent-'] {
+        border-bottom: none;
+      }
+    }
+  }
 }

package/elements/tooltip/Tooltip.scss

@@ -27,9 +27,9 @@ $tooltip-success-color: var(--color-shade-success, #458746);
   div {
     background: $tooltip-background;
     color: var(--color-white, #fff);
-    border-radius: var(--tooltip-border-radius, 4px);
+    border-radius: var(--border-radius-sm, 4px);
     padding: 8px 10px;
-    font-size: 12px;
+    font-size: var(--font-size-sm);
     line-height: 12px;
     white-space: nowrap;
     box-shadow: var(--shadow-2);