novo-elements 13.2.0 → 13.3.0-next.2

package/addons/ckeditor/CKEditor.scss

@@ -39,6 +39,14 @@
   }
 }
 
+:host-context(:root[data-theme='bh2026']) {
+  ::ng-deep .cke {
+    border: 1px solid var(--card-color-border-default, #dee0e3);
+    border-radius: var(--field-border-radius-default, 0.4rem);
+    overflow: hidden;
+  }
+}
+
 :host-context(.theme-dark) {
   ::ng-deep .cke_button {
     filter: invert(1);

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/breadcrumbs/Breadcrumb.scss

@@ -11,5 +11,5 @@
 
 // bh2026: subtle breadcrumb text.
 :host-context([data-theme='bh2026']) {
-  color: var(--color-content-subtle, #8ca1b9);
+  color: var(--color-text-subtle);
 }

package/elements/button/styles/button-dialogue.scss

@@ -28,3 +28,15 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="dialogue"] {
+    box-shadow: none;
+    &:hover,
+    &:focus,
+    &:active {
+      background: var(--button-dialogue-hover-background);
+      box-shadow: none;
+    }
+  }
+}

package/elements/button/styles/button-icon.scss

@@ -39,3 +39,23 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="icon"] {
+    height: var(--button-height);
+    min-width: var(--button-height);
+    border-radius: var(--border-radius-sm);
+    color: var(--color-text-subtle);
+    box-shadow: none;
+
+    &:focus,
+    &:hover {
+      background: var(--color-background-subtle);
+      box-shadow: none;
+    }
+    &:active {
+      background: var(--color-background-subtle-hover);
+      box-shadow: none;
+    }
+  }
+}

package/elements/button/styles/button-primary.scss

@@ -11,7 +11,6 @@
 
     &:hover,
     &:focus {
-
       filter: brightness(1.15);
       box-shadow: var(--shadow-2), var(--shadow-1);
     }
@@ -41,3 +40,19 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="primary"] {
+    &:hover,
+    &:focus {
+      filter: none;
+      background: var(--button-primary-background-hover);
+      box-shadow: var(--button-shadow-hover);
+    }
+    &:active {
+      filter: none;
+      background: var(--button-primary-background-hover);
+      box-shadow: var(--button-shadow-active);
+    }
+  }
+}

package/elements/button/styles/button-secondary.scss

@@ -11,7 +11,6 @@
     background: var(--color-white);
     color: var(--button-secondary-text, var(--color-positive));
     border: var(--button-secondary-border, 1px solid $positive);
-    padding: 0 calc(#{var(--spacing-md)} - 1px);
 
     i.loading {
       margin-left: 0.8rem;
@@ -50,3 +49,17 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="secondary"] {
+    &:hover,
+    &:focus {
+      border: var(--button-secondary-border-hover);
+      box-shadow: var(--button-shadow-hover);
+    }
+    &:active {
+      border: var(--button-secondary-border-hover);
+      box-shadow: var(--button-shadow-active);
+    }
+  }
+}

package/elements/button/styles/button-standard.scss

@@ -15,3 +15,17 @@
     }
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  &[theme="standard"] {
+    background: var(--button-background);
+    &:hover {
+      background: var(--button-hover-background);
+      box-shadow: var(--button-shadow-hover);
+    }
+    &:active {
+      background: var(--button-hover-background);
+      box-shadow: var(--button-shadow-active);
+    }
+  }
+}

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);
@@ -115,3 +115,14 @@
     transform: rotate(360deg);
   }
 }
+
+:host-context([data-theme='bh2026']) {
+  box-shadow: var(--button-shadow);
+
+  &:hover {
+    box-shadow: var(--button-shadow-hover);
+  }
+  &:active {
+    box-shadow: var(--button-shadow-active);
+  }
+}

package/elements/card/Card.scss

@@ -8,6 +8,9 @@
   border-radius: var(--border-radius-round);
   position: relative;
   overflow-x: hidden;
+  :root[data-theme=bh2026] & {
+    --spacing-md: var(--spacing-padding-md);
+  }
 
   &.loading {
     min-height: 200px;
@@ -57,11 +60,11 @@
         text-overflow: ellipsis;
         i {
           font-size: 1.2em;
-          &.bhi-info {
-            color: $light;
-          }
         }
       }
+      :root:not([data-theme='bh2026']) & i.bhi-info {
+        color: $light;
+      }
     }
     .actions {
       color: brightenLive('--color-dark', 15);
@@ -117,37 +120,95 @@
   }
 }
 
-// bh2026: roomier, rounder card, larger title
+// bh2026: rounder card, grippy on hover
 :host-context([data-theme='bh2026']) {
-  border-radius: var(--border-radius-md, 1.6rem);
-  border: 1px solid var(--color-border-default, #f0f5f9);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--color-border-default);
+  box-shadow: 0 1px 2px var(--color-transparency-charcoal-08);
 
   div.card-loading-container {
-    border-radius: var(--border-radius-md, 1.6rem);
+    border-radius: var(--border-radius-md);
   }
 
   header {
-    padding: var(--spacing-md, 1.6rem);
-    margin-left: var(--spacing-md);
+    padding: var(--spacing-padding-md) var(--spacing-padding-lg) var(--spacing-padding-md) 0;
+    border-bottom: 1px solid var(--color-border-default);
 
     .title {
-      ::ng-deep i.bhi-move {
-        display: none;
-      }
-
+      padding-inline: var(--spacing-gutter);
       h1,
       h2,
       h3 {
-        font-size: 1.8rem;
-        font-weight: 500;
+        font-size: var(--typography-card-header-font-size, var(--typography-font-size-18));
+        font-weight: var(--typography-card-header-font-weight, var(--typography-font-weight-500));
+        ::ng-deep .card-flag-icon {
+          font-size: var(--font-size-lg);
+          vertical-align: 10%;
+        }
       }
+
+      ::ng-deep i {
+        margin: 0;
+      }
+    }
+
+    .card-move-handle {
+      position: absolute;
+      left: var(--spacing-padding-xxsm);
+      color: var(--color-content-icon, #89909A);
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-gap-sm);
     }
 
     novo-button {
-      color: rgba(var(--text-secondary), 0.7);
-      margin-left: var(--spacing-sm);
-      margin-right: var(--spacing-sm);
+      color: var(--color-text-subtle);
+    }
+    ::ng-deep .novo-card-header-text {
+      padding-inline-start: var(--spacing-padding-sm);
+    }
+  }
+  :host {
+    ::ng-deep .card-flag-icon {
+      color: var(--color-content-subtle, #5d7798);
+    }
+    &.icon-color-auto header .title ::ng-deep .card-flag-icon {
+      color: var(--page-entity-color, var(--color-content-subtle, #5d7798));
+      @each $entity, $color in $entity-colors {
+        &.bhi-#{$entity} {
+          @if ($entity == 'person') {
+            color: var(--color-entity-contact);
+          } @else if ($entity == 'notes') {
+            color: var(--color-entity-note);
+          } @else {
+            color: var(--color-entity-#{$entity});
+          }
+        }
+      }
+    }
+    &.icon-color-parent ::ng-deep .card-flag-icon {
+      color: var(--page-entity-color);
+    }
+    .novo-card-header {
+      padding-inline-start: var(--spacing-gutter);
+    }
+    // ng-deep in case this is declared within title bar implementation.
+    ::ng-deep .card-move-handle {
+      position: absolute;
+      left: var(--spacing-padding-xxsm);
+      color: var(--color-content-icon, #89909A);
+      transition: color 0.3s ease-in-out;
+    }
+    header ::ng-deep, ::ng-deep .novo-card-header {
+      &:not(:hover) .card-move-handle {
+        color: transparent;
+      }
+      .novo-icon.card-move-handle i {
+        color: inherit;
+      }
     }
   }
 }

package/elements/card/CardContent.scss

@@ -4,5 +4,8 @@
   display: block;
   &:not(.condensed) {
     padding: var(--spacing-md);
+    :root[data-theme=bh2026] & {
+      padding-inline: var(--spacing-gutter);
+    }
   }
 }

package/elements/card/CardHeader.scss

@@ -7,8 +7,31 @@
   flex-direction: row;
   align-items: center;
   gap: var(--spacing-md);
+  :root[data-theme=bh2026] & {
+    padding: var(--spacing-padding-md) var(--spacing-padding-md) 0 var(--spacing-gutter);
+    gap: 0;
+    .card-move-handle {
+      transition: color 0.3s ease-in-out;
+    }
+    &:not(:hover) {
+      .card-move-handle {
+        color: transparent;
+      }
+    }
+    .novo-card-header-text {
+      font-size: var(--typography-card-header-font-size, 1.8rem);
+      font-weight: var(--typography-card-header-font-weight, 500);
+      ::ng-deep novo-title {
+        font: inherit;
+      }
+    }
+  }
+  
 
   .novo-card-header-text {
     flex: 1 1 0px;
+    :root[data-theme=bh2026] & {
+      padding-inline-start: var(--spacing-padding-sm);
+    }
   }
 }

package/elements/card/index.d.ts

@@ -6,6 +6,7 @@ import * as i3 from 'novo-elements/elements/icon';
 import * as i4 from 'novo-elements/elements/button';
 import * as i5 from 'novo-elements/elements/loading';
 import * as i6 from 'novo-elements/elements/tooltip';
+import * as i7 from 'novo-elements/elements/common';
 
 declare class CardActionsElement {
     static ɵfac: i0.ɵɵFactoryDeclaration<CardActionsElement, never>;
@@ -37,6 +38,7 @@ declare class CardElement implements OnChanges, OnInit {
     message: string;
     messageIcon: string;
     icon: string;
+    iconColorClass: 'icon-color-auto' | 'icon-color-parent' | undefined;
     iconTooltip: string;
     refresh: boolean;
     close: boolean;
@@ -44,7 +46,7 @@ declare class CardElement implements OnChanges, OnInit {
     loading: boolean;
     inline: boolean;
     inset: string;
-    get hbInset(): string;
+    get cardClass(): string;
     onClose: EventEmitter<void>;
     onRefresh: EventEmitter<void>;
     cardAutomationId: string;
@@ -57,12 +59,12 @@ declare class CardElement implements OnChanges, OnInit {
     toggleClose(): void;
     toggleRefresh(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardElement, "novo-card", never, { "padding": { "alias": "padding"; "required": false; }; "config": { "alias": "config"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "close": { "alias": "close"; "required": false; }; "move": { "alias": "move"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; }, { "onClose": "onClose"; "onRefresh": "onRefresh"; }, never, ["novo-card-actions", "*", "footer,novo-card-footer,[novo-card-footer],[novoCardFooter]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardElement, "novo-card", never, { "padding": { "alias": "padding"; "required": false; }; "config": { "alias": "config"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColorClass": { "alias": "iconColorClass"; "required": false; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "close": { "alias": "close"; "required": false; }; "move": { "alias": "move"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; }, { "onClose": "onClose"; "onRefresh": "onRefresh"; }, never, ["novo-card-actions", "*", "footer,novo-card-footer,[novo-card-footer],[novoCardFooter]"], false, never>;
 }
 
 declare class NovoCardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCardModule, [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoButtonModule, typeof i5.NovoLoadingModule, typeof i6.NovoTooltipModule], [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCardModule, [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement], [typeof i2.CommonModule, typeof i3.NovoIconModule, typeof i4.NovoButtonModule, typeof i5.NovoLoadingModule, typeof i6.NovoTooltipModule, typeof i7.NovoCommonModule], [typeof CardElement, typeof CardActionsElement, typeof CardContentElement, typeof CardHeaderElement, typeof CardFooterElement]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoCardModule>;
 }
 

package/elements/category-dropdown/CategoryDropdown.scss

@@ -15,7 +15,7 @@
       min-width: 400px;
       display: block;
       z-index: z("max");
-      border-radius: var(--border-radius-xsm, 2px);
+      border-radius: var(--border-radius-sm, 2px);
       top: 100%;
       margin-top: 5px;
     }

package/elements/checkbox/CheckList.scss

@@ -88,3 +88,72 @@
     }
   }
 }
+
+// bh2026: CSS-based checkbox rendering — replaces icon font glyphs
+:host-context([data-theme='bh2026']) {
+  .novo-checkbox-group {
+    label i.bhi-checkbox-empty,
+    label i.bhi-checkbox-filled {
+      font-size: 0;
+      display: inline-flex;
+      align-self: center;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    label i.bhi-checkbox-empty {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: 1px solid var(--color-border-control);
+        border-radius: 2px;
+        background: white;
+      }
+    }
+
+    label i.bhi-checkbox-filled {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 4px;
+        width: 9px;
+        height: 5px;
+        border-left: 2px solid var(--color-utility-blue-600);
+        border-bottom: 2px solid var(--color-utility-blue-600);
+        transform: rotate(-45deg);
+      }
+    }
+
+    &.disabled {
+      label {
+        opacity: 1;
+      }
+      label i.bhi-checkbox-empty {
+        &::before {
+          background: var(--color-background-utility-positive);
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-filled {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+    }
+  }
+}

package/elements/checkbox/Checkbox.scss

@@ -91,3 +91,107 @@
     }
   }
 }
+
+// bh2026: CSS-based checkbox rendering — replaces icon font glyphs
+:host-context([data-theme='bh2026']) {
+  .novo-checkbox-group {
+    // Suppress glyph and establish box dimensions for all box-style states
+    label i.bhi-checkbox-empty,
+    label i.bhi-checkbox-filled,
+    label i.bhi-checkbox-indeterminate {
+      font-size: 0;
+      display: inline-flex;
+      align-self: center;
+      width: 16px;
+      height: 16px;
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    // Unchecked: white box with gray border
+    label i.bhi-checkbox-empty {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: 1px solid var(--color-border-control);
+        border-radius: 2px;
+        background: white;
+      }
+    }
+
+    // Checked: light-blue box with brand-blue border and checkmark
+    label i.bhi-checkbox-filled {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 3px;
+        top: 4px;
+        width: 9px;
+        height: 5px;
+        border-left: 2px solid var(--color-utility-blue-600);
+        border-bottom: 2px solid var(--color-utility-blue-600);
+        transform: rotate(-45deg);
+      }
+    }
+
+    // Indeterminate: light-blue box with brand-blue border and dash
+    label i.bhi-checkbox-indeterminate {
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: var(--color-background-utility-positive);
+        border: 1px solid var(--color-utility-blue-600);
+        border-radius: 2px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 2px;
+        background: var(--color-utility-blue-600);
+      }
+    }
+
+    // Disabled: override the base opacity:0.4 and use explicit muted colors
+    &.disabled {
+      label {
+        opacity: 1;
+      }
+      label i.bhi-checkbox-empty {
+        &::before {
+          background: var(--color-background-utility-positive);
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-filled {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          border-color: var(--color-border-input-disabled);
+        }
+      }
+      label i.bhi-checkbox-indeterminate {
+        &::before {
+          border-color: var(--color-border-input-disabled);
+        }
+        &::after {
+          background: var(--color-border-input-disabled);
+        }
+      }
+    }
+  }
+}

package/elements/chips/Chip.scss

@@ -46,7 +46,9 @@ $chip-spacing: (
   @include novo-body-text();
   background: var(--background-main);
   border: 1px solid transparent;
-  transition: all 200ms ease-in-out;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  transition-property: color, opacity, border-color, border-width, background-color;
   display: inline-flex;
   align-items: center;
   cursor: default;
@@ -185,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 {