novo-elements 13.2.0-next.13 → 13.2.0-next.15

package/elements/agenda/week/AgendaWeekView.scss

@@ -59,7 +59,7 @@
             text-overflow: ellipsis;
           }
           .cal-event-description {
-            font-size: var(--font-size-xs);
+            font-size: var(--font-size-sm);
             line-height: 13px;
             padding: 0px 0px 0px 10px;
             overflow: hidden;

package/elements/button/styles/button.scss

@@ -42,7 +42,7 @@
 
   &[size="small"],
   &[size="sm"] {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-sm);
     padding: 0 var(--spacing-md);
     height: 2.4rem;
     gap: var(--spacing-sm);

package/elements/card/Card.scss

@@ -124,7 +124,7 @@
 :host-context([data-theme='bh2026']) {
   border-radius: var(--border-radius-md);
   border: 1px solid var(--color-border-default);
-  box-shadow: 0 1px 2px var(--color-transparency-black-10);
+  box-shadow: 0 1px 2px var(--color-transparency-charcoal-08);
 
   div.card-loading-container {
     border-radius: var(--border-radius-md);

package/elements/chips/Chip.scss

@@ -187,3 +187,47 @@ $chip-spacing: (
     }
   }
 }
+
+:root[data-theme='bh2026'] {
+  .novo-chip {
+    background: var(--chip-color-background-default-default);
+    border: var(--chip-border-width) solid var(--chip-color-border-default-default);
+    border-radius: var(--chip-border-radius);
+    color: var(--chip-color-content-default);
+    gap: var(--chip-spacing-md-gap);
+    padding: var(--chip-spacing-md-padding-vertical) var(--chip-spacing-md-padding-horizontal);
+    max-height: var(--chip-spacing-md-max-height);
+    font-size: var(--typography-meta-default-font-size);
+    font-weight: var(--typography-meta-default-font-weight);
+    line-height: var(--typography-meta-default-line-height);
+
+    &:hover:not(.novo-chip-disabled) {
+      background: var(--chip-color-background-default-hover);
+      border-color: var(--chip-color-border-default-hover);
+      color: var(--chip-color-content-hover);
+    }
+
+    &.novo-chip-selectable:focus {
+      outline: none;
+      background: var(--chip-color-background-default-focus);
+      border-width: var(--chip-border-focus-width);
+      border-color: var(--chip-color-border-default-focus);
+      color: var(--chip-color-content-focus);
+      &::after {
+        opacity: 0;
+      }
+    }
+
+    &.novo-chip-disabled {
+      background: var(--chip-color-background-default-disabled);
+      border-color: var(--chip-color-border-default-disabled);
+      color: var(--chip-color-content-disabled);
+      opacity: 1;
+    }
+
+    .novo-chip-remove,
+    .novo-chip-trailing-icon {
+      color: inherit;
+    }
+  }
+}

package/elements/chips/Chips.scss

@@ -68,6 +68,11 @@
     cursor: pointer;
     display: flex;
     align-items: center;
+
+    [data-theme='bh2026'] & {
+      bottom: -27px;
+    }
+
     i {
       font-size: 0.7rem;
       padding-bottom: 2px;
@@ -80,6 +85,10 @@
     right: 0;
     font-size: 1.1em;
     color: var(--font-color-base);
+
+    [data-theme='bh2026'] & {
+      bottom: 4px;
+    }
   }
 
   & + i {

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/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/field/field.scss

@@ -109,7 +109,7 @@
   }
 }
 
-// bh2026: uppercase label + tighter value typography per Figma "Value - Finalized" spec
+// bh2026: uppercase label + tighter value typography
 :host-context([data-theme='bh2026']) {
   .novo-field-label {
       text-transform: var(--typography-input-label-sm-text-transform);

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);
@@ -820,24 +820,31 @@ control-prompt-modal {
   }
 }
 
-// bh2026: uppercase label + tighter value typography per Figma "Value - Finalized" spec
+// 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-sm-font-weight) !important;
-      font-size: var(--typography-input-label-sm-font-size) !important;
-      letter-spacing: var(--typography-input-label-sm-letter-spacing);
+      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-sm-font-weight) !important;
-    font-size: var(--typography-input-label-sm-font-size) !important;
-    letter-spacing: var(--typography-input-label-sm-letter-spacing);
+    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);
@@ -868,17 +875,159 @@ control-prompt-modal {
     }
   }
 
+  // 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: 0 4px 8px 0 var(--color-transparency-charcoal-charcoal-08);
+    box-shadow: var(--shadow-2);
     background: var(--color-background-default);
     padding-bottom: var(--spacing-padding-md);
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-gap-md);
+    gap: 0;
 
     .novo-form-row {
       padding-left: var(--spacing-padding-lg);
@@ -895,10 +1044,11 @@ control-prompt-modal {
     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-md);
+      padding-top: var(--spacing-padding-lg);
     }
   }
 
@@ -917,7 +1067,7 @@ control-prompt-modal {
   .novo-form-container form {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-gutter);
+    gap: 0;
 
     novo-fieldset {
       margin-top: 0;

package/elements/form/extras/address/Address.scss

@@ -148,3 +148,80 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  gap: var(--field-spacing-gap);
+
+  // Take out the space that the overlay template takes up between the fields
+  novo-overlay-template {
+    display: none;
+  }
+
+  // Each sub-field gets its own bordered input treatment
+  .street-address,
+  .apt,
+  .city,
+  .state,
+  .zip,
+  .country-name {
+    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) !important;
+    min-height: 4rem;
+    box-sizing: border-box;
+    gap: var(--field-spacing-gap);
+
+    &:hover {
+      border-color: var(--field-color-border-hover);
+    }
+    &:focus-within {
+      border-width: var(--field-border-width-focus);
+      border-color: var(--field-color-border-focus);
+    }
+
+    input,
+    novo-picker > ::ng-deep input {
+      border: none !important;
+      border-bottom: none !important;
+      &:hover,
+      &:focus {
+        border: none !important;
+        border-bottom: none !important;
+      }
+    }
+    div[type="button"] {
+      border-bottom: none !important;
+      padding: 0 !important;
+    }
+
+    &.disabled {
+      border-color: var(--field-color-border-disabled);
+      border-style: dashed;
+      background: var(--field-color-background-disabled);
+    }
+
+    &.invalid {
+      border-color: var(--field-color-border-negative);
+    }
+
+    i {
+      border-bottom: none !important;
+
+      &.required-indicator.bhi-circle {
+        line-height: 1rem;
+      }
+      &.required-indicator.bhi-check {
+        line-height: 1.8rem;
+      }
+    }
+  }
+
+  // address1 full width on its own row; address2 full width on the row below
+  .street-address {
+    flex: 0 0 100%;
+  }
+  .apt {
+    flex: 0 0 100%;
+  }
+}

package/elements/form/fieldset-header.scss

@@ -17,11 +17,8 @@
 }
 
 :host-context([data-theme='bh2026'] .card-section) {
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  padding: var(--spacing-padding-md) var(--spacing-padding-lg);
+  padding: var(--card-spacing-header-padding-vertical) var(--card-spacing-header-padding-horizontal);
+  margin: 0 0 var(--card-spacing-header-padding-vertical);
   background: var(--background-bright);
   border-bottom: 1px solid var(--color-border-default);
   align-items: center;

package/elements/header/Header.scss

@@ -170,7 +170,7 @@
   &[class*='novo-accent-'] {
     background: var(--header-background, var(--color-transparency-white-90));
     backdrop-filter: blur(12px);
-    box-shadow: 0 1px 2px var(--color-transparency-black-10);
+    box-shadow: 0 1px 2px var(--color-transparency-charcoal-08);
     padding-top: var(--spacing-md);
     padding-left: var(--spacing-lg);
     padding-right: var(--spacing-lg);

package/elements/picker/Picker.scss

@@ -6,16 +6,17 @@ novo-picker {
   align-items: center;
   flex-wrap: wrap;
   justify-content: flex-start;
-  padding-bottom: 5px;
+  padding-bottom: 0;
   transition: all 200ms ease-in-out;
   position: relative;
+
   &.selected,
   &.selected:hover {
     & + i {
       color: var(--color-positive);
     }
   }
-  padding-bottom: 0;
+
   &.ng-touched.ng-invalid:not(.ng-pristine) {
     > input,
     > input:hover,
@@ -23,6 +24,7 @@ novo-picker {
       border-bottom-color: transparent !important;
     }
   }
+
   input {
     font-size: 1em;
     background: transparent !important;
@@ -38,26 +40,33 @@ novo-picker {
     box-sizing: content-box;
     transition: all 300ms;
     color: #26282b;
+
     &:hover {
       border-bottom: 1px solid brightenLive('--color-dark', 15);
     }
+
     &:focus {
       border-bottom: 1px solid var(--color-positive);
     }
+
     &:invalid {
       border-bottom: 1px solid #da4453;
     }
+
     &.entity-picker {
       padding-left: 2em;
     }
+
     &.entity-selected {
       padding-left: 2.5em;
       background: var(--background-main) !important;
     }
+
     &:disabled {
       border-bottom: 1px dashed brightenLive('--color-dark', 45) !important;
     }
   }
+
   i.bhi-more {
     position: absolute;
     left: 0;
@@ -67,6 +76,7 @@ novo-picker {
     border-radius: var(--border-radius-sm, 3px);
     padding: 3px;
   }
+
   i.entity-icon {
     position: absolute;
     left: 5px;
@@ -76,28 +86,39 @@ novo-picker {
     padding: 3px;
     color: $white;
 
-    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+    @include theme-colors() using($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
         background: getCssVarname($name);
       }
     }
   }
+
   i.bhi-search,
   i.bhi-times {
     position: absolute;
     right: 0;
     color: var(--font-color-base);
+
     &.entity-selected {
       right: 5px;
     }
   }
+
   i.bhi-search {
-    top: 0px;
+    top: 0;
     font-size: var(--font-size-sm);
   }
+
   i.bhi-times {
-    top: 0px;
+    top: 0;
     cursor: pointer;
     font-size: var(--font-size-sm);
   }
+
+  [data-theme='bh2026'] & {
+    i {
+      font-size: var(--typography-body-lg-font-size);
+      line-height: normal;
+    }
+  }
 }

package/elements/picker/extras/picker-results/PickerResults.scss

@@ -309,7 +309,8 @@ distribution-list-picker-results {
 // not on children (where overflow:hidden + border-radius clips the corners)
 :root[data-theme='bh2026'] {
   picker-results,
-  entity-picker-results {
+  entity-picker-results,
+  skill-specialty-picker-results {
     border: 1px solid var(--color-border-default);
     margin-block: var(--spacing-gap-sm);
     background: var(--background-bright);

package/elements/select/Select.scss

@@ -84,7 +84,6 @@
     z-index: z(overlay);
     max-height: 219px;
     min-width: 200px;
-    width: 100%;
     max-width: 800px;
     width: inherit;
     overflow: auto;

package/elements/tabs/tab.scss

@@ -179,6 +179,7 @@
     .indicator {
       background: var(--tab-indicator-color, var(--color-border-utility-positive));
       border-radius: 999px 999px 0 0;
+      height: 2px;
     }
   }
 
@@ -192,6 +193,41 @@
 
 :host-context([data-theme='bh2026'] novo-nav[direction=vertical]) {
   margin-right: 0;
+
+  &.active,
+  &.router-link-active {
+    .indicator {
+      border-radius: 0 999px 999px 0;
+    }
+  }
+}
+
+:host-context([data-theme='bh2026'] novo-nav[theme="color"]) {
+  .novo-tab-link {
+    color: var(--color-text-subtle) !important;
+    text-transform: none;
+    font-weight: var(--typography-tabs-default-font-weight);
+  }
+
+  &.active,
+  &.router-link-active {
+    .novo-tab-link {
+      color: var(--color-text-body) !important;
+      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;
+      height: 2px;
+    }
+  }
+
+  &:hover:not(.active):not(.router-link-active):not(.disabled) {
+    .novo-tab-link {
+      color: var(--color-text-body) !important;
+    }
+  }
 }
 
 :host-context(novo-nav[theme="color"]),

package/elements/time-picker/TimePickerInput.scss

@@ -35,10 +35,15 @@
   > i.bhi-calendar {
     position: absolute;
     right: 0;
-    top: 0px;
+    top: 0;
     font-size: var(--font-size-sm);
+
+    [data-theme='bh2026'] & {
+      font-size: var(--typography-body-lg-font-size);
+      line-height: normal;
+    }
   }
   > i.bhi-times {
     cursor: pointer;
   }
-}
+}

package/elements/toolbar/toolbar.component.scss

@@ -67,7 +67,7 @@
   :root[data-theme='bh2026'] & {
     background: var(--color-transparency-white-90);
     backdrop-filter: blur(12px);
-    box-shadow: 0 1px 2px var(--color-transparency-black-10);
+    box-shadow: 0 1px 2px var(--color-transparency-charcoal-08);
 
     .novo-toolbar-row {
       background: transparent;