novo-elements 13.2.0 → 13.3.0

package/elements/search/SearchBox.scss

@@ -70,6 +70,59 @@
   }
 }
 
+:host(.has-border) {
+  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));
+  }
+
+  [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;
+    height: auto;
+
+    &::placeholder {
+      color: var(--color-text-subtle, var(--text-muted));
+    }
+  }
+}
+
+:host(.has-border.has-leading-content) {
+  > input {
+    display: none;
+  }
+}
+
+:host-context([data-theme='bh2026']) {
+  &.has-border {
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--button-radius);
+  }
+}
+
 header {
   novo-search.always-open:not(.focused) {
     button {

package/elements/search/index.d.ts

@@ -1,5 +1,5 @@
 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';
@@ -8,7 +8,15 @@ 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;
@@ -18,6 +26,8 @@ declare class NovoSearchBoxElement implements ControlValueAccessor, OnInit {
     position: string;
     placeholder: string;
     alwaysOpen: boolean;
+    bordered: boolean;
+    get hasBorder(): boolean;
     theme: string;
     color: string;
     closeOnSelect: boolean;
@@ -32,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 */
@@ -40,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;
@@ -73,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; }; "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.NovoIconModule, typeof i4.NovoPickerModule, typeof i5.NovoTooltipModule, typeof i6.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/select/Select.scss

@@ -91,6 +91,7 @@
     opacity: 1;
   }
   background-color: var(--background-bright);
+  border-radius: var(--border-radius-sm);
   cursor: default;
   list-style: none;
   overflow: auto;

package/elements/simple-table/table.scss

@@ -349,5 +349,5 @@ novo-simple-table-pagination {
 // 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);
+  color: var(--color-text-subtle);
 }

package/elements/stepper/stepper.component.scss

@@ -102,16 +102,16 @@ $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);
+    background: var(--color-text-body);
     color: #fff;
-    border: 1px solid var(--color-content-default, #282828);
+    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-content-subtle, #8ca1b9);
-    border: 1px solid var(--color-border-default, #d0d9e3);
+    color: var(--color-text-subtle);
+    border: 1px solid var(--color-border-default);
     border-radius: 50%;
     box-shadow: none;
   }

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;
+    }
   }
 }

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

@@ -182,3 +182,50 @@
     }
   }
 }
+
+// bh2026: icon-theme button must not be constrained to a square when it carries chips/label content
+::ng-deep [data-theme='bh2026'] novo-button.tabbed-group-picker-button[theme='icon'] {
+  width: auto;
+  min-width: max-content;
+}
+
+// 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/tabs/tab.scss

@@ -28,6 +28,8 @@
     gap: var(--spacing-xs);
     cursor: pointer;
     text-transform: uppercase;
+    -webkit-user-select: none;
+    user-select: none;
     &:focus {
       outline: none;
     }
@@ -157,44 +159,45 @@
   }
 }
 
-// bh2026: charcoal tabs, near-black active text + rounded neutral indicator
+// 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-content-link, #282828);
+    color: var(--color-text-subtle);
     // Tabs are Title Case, not uppercase.
     text-transform: none;
-    font-weight: 400;
+    font-weight: var(--typography-tabs-default-font-weight);
   }
 
   &.active,
   &.router-link-active {
-    color: var(--color-content-link-hover, #221f1f);
     .novo-tab-link {
-      color: var(--color-content-link-hover, #221f1f);
-      font-weight: 500;
+      color: var(--color-text-body);
+      font-weight: var(--typography-tabs-active-font-weight);
     }
     .indicator {
-      background: var(--color-content-link-hover, #221f1f);
-      border-radius: 999px;
-      // Quarter round from the top, flat on bottom
-      border-radius: 3px 3px 0 0 / 100% 100% 0 0;
+      background: var(--tab-indicator-color, var(--color-border-utility-positive));
+      border-radius: 999px 999px 0 0;
     }
   }
 
-  &:hover {
+  &:hover:not(.active):not(.router-link-active):not(.disabled) {
     .novo-tab-link {
-      font-weight: 500;
+      color: var(--color-text-body);
+      font-weight: var(--typography-tabs-default-font-weight) !important;
     }
   }
 }
 
+:host-context([data-theme='bh2026'] novo-nav[direction=vertical]) {
+  margin-right: 0;
+}
 
 :host-context(novo-nav[theme="color"]),
 :host-context(novo-nav[theme="neutral"]) {
   .novo-tab-link {
-    color: #fff;
+    color: #fff !important;
   }
   &.active,
   &.router-link-active {

package/elements/tiles/Tiles.scss

@@ -46,7 +46,29 @@
   }
 }
 
-// bh2026: neutral border
+// bh2026: pill track, subtle-hover selected state (toggle-style, not primary blue)
 :host-context([data-theme='bh2026']) > .tile-container {
-  border-color: var(--color-border-default, #f0f5f9);
+  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

@@ -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/tip-well/TipWell.scss

@@ -29,5 +29,39 @@
         white-space: pre-line;
       }
     }
+    :root[data-theme='bh2026'] & {
+      background-color: var(--background-muted);
+    }
+  }
+
+  // Icon variant styling
+  &[data-variant='icon'] {
+    margin: 0 auto 0 var(--spacing-lg);
+    pointer-events: auto;
+    cursor: default;
+
+    > div {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--spacing-sm) var(--spacing-md);
+      border-radius: var(--border-radius-md);
+      border: 0.0625rem solid var(--tip-well-icon-border-color, #0066cc);
+      background-color: var(--tip-well-icon-background-color, #f0f4ff);
+      text-align: center;
+
+      i {
+        color: $charcoal !important;
+        margin-right: 0;
+      }
+
+      p {
+        display: none;
+      }
+
+      button {
+        margin-left: var(--spacing-md);
+        color: $charcoal;
+      }
+    }
   }
 }

package/elements/tip-well/index.d.ts

@@ -12,8 +12,12 @@ declare class NovoTipWellElement implements OnInit {
     tip: string;
     buttonText: string;
     button: boolean;
+    buttonIcon: string;
     icon: string;
     sanitize: boolean;
+    variant: string;
+    buttonTheme: string;
+    buttonSize: string;
     confirmed: EventEmitter<any>;
     isActive: boolean;
     isLocalStorageEnabled: any;
@@ -25,7 +29,7 @@ declare class NovoTipWellElement implements OnInit {
     ngOnInit(): void;
     hideTip(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoTipWellElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoTipWellElement, "novo-tip-well", never, { "name": { "alias": "name"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "button": { "alias": "button"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "sanitize": { "alias": "sanitize"; "required": false; }; }, { "confirmed": "confirmed"; }, never, ["novo-icon", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoTipWellElement, "novo-tip-well", never, { "name": { "alias": "name"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "button": { "alias": "button"; "required": false; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "sanitize": { "alias": "sanitize"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "buttonTheme": { "alias": "buttonTheme"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; }, { "confirmed": "confirmed"; }, never, ["novo-icon", "*"], false, never>;
 }
 
 declare class NovoTipWellModule {

package/elements/toolbar/toolbar.component.scss

@@ -62,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,7 +27,7 @@ $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: var(--font-size-sm);
     line-height: 12px;
@@ -160,8 +160,3 @@ $tooltip-success-color: var(--color-shade-success, #458746);
     }
   }
 }
-
-// bh2026: rounder tooltip
-:host-context([data-theme='bh2026']) div {
-  border-radius: var(--tooltip-radius, 0.8rem);
-}