novo-elements 13.2.0 → 13.4.0

package/elements/common/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, ElementRef, OnInit, EventEmitter, OnDestroy, ChangeDetectorRef, Renderer2, DoCheck, ViewContainerRef, InjectionToken, AfterViewChecked, QueryList, NgZone } from '@angular/core';
+import { TemplateRef, ElementRef, OnInit, OnDestroy, ChangeDetectorRef, Renderer2, DoCheck, ViewContainerRef, PipeTransform, InjectionToken, AfterViewChecked, EventEmitter, QueryList, NgZone } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import * as i3 from '@angular/common';
 import { NgSwitch } from '@angular/common';
@@ -247,11 +247,14 @@ interface ThemeChangeEvent {
 declare class NovoTheme {
     private _defaultTheme;
     private _currentTheme;
-    onThemeChange: EventEmitter<ThemeChangeEvent>;
+    currentTheme: i0.Signal<NovoThemeOptions>;
+    onThemeChange: Observable<ThemeChangeEvent>;
+    document: Document;
     /** Name of the theme being used. defaults to `bh2022-light`. */
     get themeName(): string;
     set themeName(value: string);
     use(options: NovoThemeOptions): Observable<any>;
+    isBh2026: i0.Signal<boolean>;
     /**
      * Changes the current theme
      */
@@ -325,6 +328,13 @@ declare class VisibleDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<VisibleDirective, "[visible]", never, { "visible": { "alias": "visible"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+declare class If2026ThemePipe implements PipeTransform {
+    theme: NovoTheme;
+    transform(value: any, elseVal?: any): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<If2026ThemePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<If2026ThemePipe, "ifBh2026Theme", false>;
+}
+
 /** @docs-private */
 type Constructor<T> = new (...args: any[]) => T;
 /**
@@ -568,7 +578,7 @@ declare class NovoOptionModule {
 
 declare class NovoCommonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCommonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCommonModule, [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective], [typeof i3.CommonModule, typeof NovoOptionModule], [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCommonModule, [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective, typeof If2026ThemePipe], [typeof i3.CommonModule, typeof NovoOptionModule], [typeof NovoTemplate, typeof NovoText, typeof NovoTitle, typeof NovoCaption, typeof NovoLabel, typeof NovoLink, typeof MarginDirective, typeof PaddingDirective, typeof BackgroundColorDirective, typeof TextColorDirective, typeof BorderDirective, typeof GapDirective, typeof AccentColorDirective, typeof FillColorDirective, typeof FlexDirective, typeof ThemeColorDirective, typeof SwitchCasesDirective, typeof VisibleDirective, typeof If2026ThemePipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoCommonModule>;
 }
 
@@ -749,5 +759,5 @@ type HasTabIndexCtor = Constructor<HasTabIndex>;
 /** Mixin to augment a directive with a `tabIndex` property. */
 declare function mixinTabIndex<T extends AbstractConstructor<CanDisable>>(base: T, defaultTabIndex?: number): HasTabIndexCtor & T;
 
-export { AccentColorDirective, BackgroundColorDirective, BorderDirective, DEFAULT_THEME, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, normalizeThemeName };
+export { AccentColorDirective, BackgroundColorDirective, BorderDirective, DEFAULT_THEME, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, If2026ThemePipe, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, normalizeThemeName };
 export type { AbstractConstructor, CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanRequire, CanRequireCtor, CanSize, CanSizeCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, Constructor, ElementSize, HasElementRef, HasErrorState, HasOverlay, HasOverlayCtor, HasTabIndex, HasTabIndexCtor, NovoOptionParentComponent, NovoPseudoCheckboxShape, NovoPseudoCheckboxState, ThemeChangeEvent, ThemeName, ThemePalette, TypographyLength, TypographySize, TypographyWeight };

package/elements/common/option/option.component.scss

@@ -83,3 +83,14 @@
 .novo-option-pseudo-checkbox {
   margin-inline-end: calc(var(--menu-side-padding) / 2);
 }
+
+// bh2026: white dropdown bg needs explicit hover — --background-main resolves to white
+[data-theme='bh2026'] .novo-option {
+  &:hover:not(.novo-option-inert) {
+    background: var(--color-background-subtle);
+  }
+  &:active:not(.novo-option-inert),
+  &.novo-active:not(.novo-option-inert) {
+    background: var(--color-background-subtle-hover);
+  }
+}

package/elements/common/typography/text.mixins.scss

@@ -156,7 +156,7 @@
 @mixin novo-label-text() {
   font-weight: 500;
   // text-transform: uppercase;
-  word-break: word-break;
+  word-break: break-word;
   overflow-wrap: break-word;
   line-height: 1.375;
   color: var(--text-muted);

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

@@ -618,11 +618,89 @@ novo-data-table {
   }
 }
 
-// bh2026: stronger, subtler column headers
+// bh2026: banded rows, horizontal borders, modern spacing
 [data-theme='bh2026'] {
   .novo-data-table-header-cell,
   .novo-data-table-header-cell > label {
-    font-weight: 600;
-    color: var(--color-content-subtle, #8ca1b9);
+    font-weight: var(--typography-font-weight-600);
+    font-size: var(--font-size-caption);
+    color: var(--color-text-subtle);
+  }
+
+  .novo-data-table-row,
+  .novo-data-table-header-row {
+    border-bottom: var(--border-width-border-default) solid var(--color-border-subtle);
+  }
+
+  .novo-data-table-cell,
+  .novo-data-table-header-cell {
+    padding: var(--spacing-padding-sm) var(--spacing-padding-md);
+    color: var(--color-text-body);
+  }
+
+  // Restore zero vertical padding on action/control cells — the general rule above overrides
+  // the base .button-cell / .dropdown-cell padding: 0 5px, putting 8px above/below the button.
+  .novo-data-table-cell {
+    &.button-cell,
+    &.dropdown-cell,
+    &.expand-cell,
+    &.checkbox-cell {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .novo-data-table-cell.clickable {
+    color: var(--color-text-link);
+  }
+
+  cdk-table {
+    > .novo-data-table-row:nth-of-type(odd) {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        // To enable every-other "banded" styling change to --color-background-muted
+        background-color: var(--background-body);
+      }
+      + .novo-data-table-detail-row {
+        // To enable every-other "banded" styling change to --color-background-muted
+        background-color: var(--background-body);
+      }
+    }
+    > .novo-data-table-row:nth-of-type(even) {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--background-body);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--background-body);
+      }
+    }
+    > .novo-data-table-row:hover {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--color-background-subtle);
+      }
+    }
+    > .novo-data-table-row.active {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: var(--color-utility-blue-100);
+      }
+      + .novo-data-table-detail-row {
+        background-color: var(--color-utility-blue-100);
+      }
+    }
   }
 }

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/date-picker/DatePicker.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   .date-picker-container {
-    border-radius: var(--border-radius-default, 4px);
+    border-radius: var(--border-radius-sm, 4px);
     width: min-content;
     text-align: center;
     background: var(--background-main);
@@ -219,8 +219,3 @@
     display: block;
   }
 }
-
-// bh2026: rounder calendar
-:host-context([data-theme='bh2026']) .date-picker-container {
-  border-radius: var(--calendar-radius, 0.8rem);
-}

package/elements/date-picker/DatePickerInput.scss

@@ -42,5 +42,10 @@
     top: 0px;
     font-size: var(--font-size-sm);
     cursor: pointer;
+
+    [data-theme='bh2026'] & {
+      font-size: var(--typography-body-lg-font-size);
+      line-height: normal;
+    }
   }
 }

package/elements/date-time-picker/_DateTimePicker.scss

@@ -6,7 +6,7 @@ $time-select-height: 45px;
   display: block;
   width: min-content;
   overflow: hidden;
-  border-radius: var(--border-radius-default, 4px);
+  border-radius: var(--border-radius-sm, 4px);
   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(max);

package/elements/dropdown/Dropdown.scss

@@ -16,13 +16,29 @@
       font-size: 0.8em !important;
       width: 1em !important;
       height: 1em !important;
-      margin: 0 0.5em;
+      margin: 0 var(--button-icon-margin, 0.5em);
     }
   }
 }
 
+// bh2026: swap out the collapse icon for the sort-desc icon and style to ensure proper placement
+:host-context([data-theme='bh2026']) {
+  ::ng-deep .novo-button-icon {
+    font-size: 1em !important;
+  }
+  ::ng-deep i.bhi-collapse {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+  ::ng-deep i.bhi-collapse::before {
+    content: "\f226"; // bhi-sort-desc - all code points are fixed in bullhorn-icons
+  }
+}
+
 .dropdown-container {
   background-color: var(--background-bright, $color-bright);
+  border-radius: var(--border-radius-sm);
   list-style: none;
   margin: 0;
   padding: 0;

package/elements/field/field.scss

@@ -109,15 +109,19 @@
   }
 }
 
-// bh2026: lighter label
+// bh2026: uppercase label + tighter value typography
 :host-context([data-theme='bh2026']) {
   .novo-field-label {
-    font-weight: 600;
-    font-size: 1rem;
-    color: var(--color-content-subtle, #8ca1b9);
+      text-transform: var(--typography-input-label-sm-text-transform);
+    ::ng-deep novo-label {
+      font-weight: var(--typography-input-label-sm-font-weight);
+      font-size: var(--typography-input-label-sm-font-size);
+      letter-spacing: var(--typography-input-label-sm-letter-spacing);
+      color: var(--color-text-body);
+    }
   }
   .novo-field-input ::ng-deep .novo-input-element {
-    font-size: 1.4rem;
-    font-weight: 500;
+    font-size: var(--typography-input-value-default-font-size);
+    font-weight: var(--typography-input-value-default-font-weight);
   }
 }

package/elements/field/hint/hint.scss

@@ -16,3 +16,9 @@
     justify-content: flex-end;
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  font-size: var(--typography-input-value-sm-font-size);
+  font-weight: var(--typography-input-value-sm-font-weight);
+  color: var(--color-text-subtle);
+}

package/elements/form/ControlGroup.scss

@@ -50,6 +50,19 @@ novo-control-group {
     }
   }
 
+  // bh2026: description text and column-header labels match decoration weight/size of hint and field-message
+  [data-theme='bh2026'] & {
+    .novo-section-header label.novo-control-group-description {
+      font-size: var(--typography-input-value-sm-font-size);
+      font-weight: var(--typography-input-value-sm-font-weight);
+      color: var(--color-text-subtle);
+    }
+    .novo-control-group-labels .novo-control-group-control-label > span {
+      font-size: var(--typography-input-value-sm-font-size);
+      font-weight: var(--typography-input-value-sm-font-weight);
+    }
+  }
+
   .novo-control-group-controls {
     display: flex;
     flex-wrap: nowrap;

package/elements/form/Form.scss

@@ -801,7 +801,7 @@ control-prompt-modal {
 
 .novo-form-control-label {
   font-weight: 500;
-  word-break: word-break;
+  word-break: break-word;
   overflow-wrap: break-word;
   line-height: 1.375;
   color: var(--text-muted);
@@ -819,3 +819,262 @@ control-prompt-modal {
     min-width: 110px;
   }
 }
+
+// Control types that should not receive the bh2026 bordered-input treatment
+$bh2026-borderless-types: ('quick-note', 'checkbox', 'checklist', 'editor', 'tiles', 'switch', 'file', 'address');
+$bh2026-not-borderless: '';
+@each $type in $bh2026-borderless-types {
+  $bh2026-not-borderless: $bh2026-not-borderless + ':not(.#{$type})';
+}
+
+// bh2026: uppercase label + tighter value typography
+// ViewEncapsulation.None: use plain selectors (not :host-context which is Shadow DOM only)
+:root[data-theme='bh2026'] {
+  label.novo-control-label {
+    &.novo-control-filled,
+    &.novo-control-focused,
+    &.novo-control-always-active {
+      font-weight: var(--typography-input-label-md-font-weight) !important;
+      font-size: var(--typography-input-label-md-font-size) !important;
+      letter-spacing: var(--typography-input-label-md-letter-spacing);
+      text-transform: var(--typography-input-label-sm-text-transform);
+      color: var(--color-text-body) !important;
+    }
+  }
+  .novo-form-control-label {
+    font-weight: var(--typography-input-label-md-font-weight) !important;
+    font-size: var(--typography-input-label-md-font-size) !important;
+    letter-spacing: var(--typography-input-label-md-letter-spacing);
+    text-transform: var(--typography-input-label-sm-text-transform);
+    color: var(--color-text-body) !important;
+    margin-right: var(--spacing-gap-lg);
+    max-width: 128px;
+    min-width: 128px;
+  }
+  .novo-control-outer-container input:not([type='checkbox']):not([type='radio']) {
+    font-size: var(--typography-input-value-default-font-size) !important;
+    font-weight: var(--typography-input-value-default-font-weight) !important;
+  }
+  .field-message,
+  novo-tip-well.active {
+    font-size: var(--typography-input-value-sm-font-size);
+    font-weight: var(--typography-input-value-sm-font-weight);
+    color: var(--color-text-subtle);
+
+    // $grey is a compile-time SCSS variable — explicit selectors required to override
+    .character-count,
+    .record-count {
+      font-size: var(--typography-input-value-sm-font-size);
+      color: var(--color-text-subtle);
+    }
+  }
+  .error-message {
+    .character-count {
+      font-size: var(--typography-input-value-sm-font-size);
+      color: var(--color-text-subtle);
+    }
+  }
+
+  // Bordered input container (excludes $bh2026-borderless-types)
+  .novo-control-input#{$bh2026-not-borderless} {
+    border: var(--field-border-width-default) solid var(--field-color-border-default);
+    border-radius: var(--field-border-radius-default);
+    background: var(--field-color-background-default);
+    padding: var(--field-spacing-padding-vertical) var(--field-spacing-padding-horizontal);
+    min-height: 4rem;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: var(--field-color-border-hover);
+    }
+    &:focus-within {
+      border-width: var(--field-border-width-focus);
+      border-color: var(--field-color-border-focus);
+    }
+
+    // Container owns the border; suppress inner element bottom-borders
+    input,
+    textarea,
+    novo-chips,
+    novo-select > .novo-select-trigger {
+      border: none !important;
+      &:hover,
+      &:focus {
+        border: none !important;
+      }
+    }
+    div[type="button"] {
+      border-bottom: none !important;
+    }
+
+    // Correction for search icon in chips pickers
+    novo-chips.with-value > i {
+      bottom: 8px;
+    }
+  }
+
+  .novo-select-list.active {
+    margin-block: 1.4rem !important; // results in 2px difference between border and overlay
+  }
+
+  // Suppress input-level error border-bottom (container handles it)
+  input.ng-touched.ng-invalid:not(.ng-pristine):not(.novo-control-container),
+  novo-picker.ng-touched.ng-invalid:not(.ng-pristine) input,
+  textarea.ng-touched.ng-invalid:not(.ng-pristine):not(.ng-valid) {
+    border-bottom: none !important;
+  }
+
+  // Error: move negative border to container
+  div.novo-control-input#{$bh2026-not-borderless}:has(input.ng-touched.ng-invalid:not(.ng-pristine)),
+  div.novo-control-input#{$bh2026-not-borderless}:has(textarea.ng-touched.ng-invalid:not(.ng-pristine):not(.ng-valid)) {
+    border-width: var(--field-border-width-negative);
+    border-color: var(--field-color-border-negative);
+    &:hover {
+      border-color: var(--field-color-border-negative);
+    }
+  }
+
+  // Disabled container
+  novo-control.disabled .novo-control-input#{$bh2026-not-borderless},
+  novo-custom-control-container.disabled .novo-control-input#{$bh2026-not-borderless} {
+    border-color: var(--field-color-border-disabled);
+    border-style: dashed;
+    background: var(--field-color-background-disabled);
+
+    input,
+    textarea {
+      border: none !important;
+    }
+    div[type="button"] {
+      border-bottom: none !important;
+    }
+  }
+
+  // Suppress all address input borders when in bh2026
+  novo-form,
+  novo-dynamic-form {
+    .novo-form-container form {
+      div.novo-form-row,
+      div.novo-control-group-control,
+      td.novo-form-row {
+        novo-control,
+        novo-custom-control-container {
+          > div.novo-control-container > div.novo-control-outer-container .novo-control-inner-container .novo-control-inner-input-container > div.novo-control-input.address {
+            input {
+              border: none !important;
+              border-bottom: none !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Pickers show up with a 2px space between them and the active control
+  checklist-picker-results,
+  distribution-list-picker-results,
+  entity-picker-results,
+  grouped-multi-picker-results,
+  mixed-multi-picker-results,
+  novo-date-picker,
+  novo-date-time-picker,
+  novo-time-picker,
+  picker-results,
+  skill-specialty-picker-results {
+    margin-block: var(--spacing-12) !important;
+  }
+
+  // Picker overlay styling within forms
+  picker-results,
+  entity-picker-results {
+    border: 1px solid var(--color-border-default);
+    background: var(--background-bright);
+
+    .novo-list,
+    novo-list,
+    ul {
+      border: none;
+      box-shadow: none;
+    }
+
+    picker-error,
+    picker-loader,
+    picker-null-recent-results,
+    picker-null-results,
+    .picker-error,
+    .picker-loader,
+    .picker-null-recent-results,
+    .picker-null-results {
+      border: none;
+      box-shadow: none;
+      padding: var(--spacing-padding-md) var(--spacing-padding-lg);
+    }
+
+    > p {
+      margin: 0;
+      padding: var(--spacing-padding-md) var(--spacing-padding-lg);
+    }
+  }
+
+  // Card styling of fieldsets
+  .novo-fieldset-container.card-section,
+  novo-form .novo-form-container.card-section {
+    border-radius: var(--border-radius-md);
+    border: 1px solid var(--color-border-default);
+    box-shadow: var(--shadow-2);
+    background: var(--color-background-default);
+    padding-bottom: var(--spacing-padding-md);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    .novo-form-row {
+      padding-left: var(--spacing-padding-lg);
+      padding-right: var(--spacing-padding-lg);
+    }
+
+    novo-control,
+    novo-custom-control-container {
+      margin-top: 0 !important;
+    }
+  }
+
+  .novo-fieldset-container.card-section {
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+    margin-top: var(--spacing-margin);
+    margin-bottom: 0;
+
+    &:not(:has(> novo-fieldset-header)) {
+      padding-top: var(--spacing-padding-lg);
+    }
+  }
+
+  novo-form .novo-form-container.card-section {
+    padding-top: var(--spacing-padding-md);
+  }
+
+  novo-form,
+  novo-dynamic-form {
+    max-width: 720px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .novo-form-container form {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    novo-fieldset {
+      margin-top: 0;
+    }
+  }
+
+  .novo-form-row.hidden {
+    display: none;
+  }
+}