novo-elements 13.2.0 → 13.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "novo-elements",
-  "version": "13.2.0",
+  "version": "13.4.0",
   "sideEffects": true,
   "peerDependencies": {
     "@angular/animations": ">=20",

package/styles/content/links.scss

@@ -14,3 +14,7 @@ a {
     color: darken($font-color-link, 10%);
   }
 }
+
+[data-theme='bh2026'] a {
+  font-weight: unset;
+}

package/styles/themes/bh2026.scss

@@ -1,12 +1,12 @@
-// Maps design tokens (Figma "subatomic") onto the semantic CSS-variable contract for novo-elements components.
+// Maps design tokens onto the semantic CSS-variable contract for novo-elements components.
 @mixin bh2026-variables {
   // Live color-math direction (light): elevate() brightens, recede() darkens.
   --bg-fade-multiplier: 1;
 
   // Typeface — modern uses Inter (classic uses Montserrat). Override BOTH --font-family-base
   // (html) and --font-family-body (body, used by most content) so all text picks up Inter.
-  --font-family-base: var(--typography-font-family-base, Inter), Helvetica, Arial, sans-serif;
-  --font-family-body: var(--typography-font-family-base, Inter), Helvetica, Arial, sans-serif;
+  --font-family-base: var(--typography-font-family-base), Helvetica, Arial, sans-serif;
+  --font-family-body: var(--typography-font-family-base), Helvetica, Arial, sans-serif;
 
   // bh2026 tokens are authored at a 16px rem base (web standard), unlike bh2022's 10px,
   // but the conversion to 16px base would be a massive rewrite, so spacing gets corrected here.
@@ -19,66 +19,141 @@
   --spacing-3xl: 4rem;
 
   // --- Surfaces ---
-  --background-body:   var(--color-gray-white, #ffffff);
-  --background-main:   var(--color-background-default, #f8fafc);
-  --background-bright: var(--color-gray-white, #ffffff);
-  --background-dark:   var(--color-background-subtle-hover, #e2e2e2);
-  --background-muted:  var(--color-background-subtle, #f1f5fc);
+  --background-body:   var(--color-gray-0);
+  --background-main:   var(--color-background-default);
+  --background-bright: var(--color-gray-0);
+  --background-dark:   var(--color-background-subtle-hover);
+  --background-muted:  var(--color-background-subtle);
 
   // --- Text / content ---
-  --text-main:      var(--color-content-headline, #282828);
-  --text-secondary: var(--color-content-body, #314158);
-  --text-muted:     var(--color-content-subtle, #8ca1b9);
-  --text-disabled:  var(--color-content-disabled, #707070);
+  --text-main:      var(--color-text-headline);
+  --text-secondary: var(--color-text-body);
+  --text-muted:     var(--color-text-subtle);
+  --text-disabled:  var(--color-text-disabled);
+
+  // Transition aliases — color.content.* was renamed to color.text.* in the subatomic
+  // token update. Keeps migrated components working without per-component changes.
+  --color-content-headline:   var(--color-text-headline);
+  --color-content-body:       var(--color-text-body);
+  --color-content-default:    var(--color-text-body);
+  --color-content-link:       var(--color-text-link);
+  --color-content-link-hover: var(--color-text-link-hover);
+  --color-content-subtle:     var(--color-text-subtle);
+  --color-content-disabled:   var(--color-text-disabled);
+
+  // Transition aliases — flat palette tokens removed in subatomic 1.1.0 export.
+  // Non-bh2026-migrated components (Form, Toast, Stepper, Tiles, etc.) reference these via
+  // the global `:root` (bh2022) values; these overrides ensure bh2026 surfaces stay consistent.
+  --color-border:     var(--color-border-default);
+  --color-dark:       var(--color-text-body);
+  --color-negative:   var(--color-border-utility-negative);
+  --color-positive:   var(--color-border-utility-positive);
+  --color-slate:      var(--color-gray-600);
+  --color-success:    var(--color-border-utility-success);
+  --color-warning:    var(--color-border-utility-warning);
 
   // --- Borders ---
-  --border:              var(--color-border-default, #f0f5f9);
-  --border-2:            var(--color-border-subtle, #f0f5f9);
-  --border-hard:         var(--color-border-emphasized, #282828);
+  --border:              var(--color-border-default);
+  --border-2:            var(--color-border-subtle);
+  --border-hard:         var(--color-border-control);
+  --border-radius-sm:    0.8rem;
+  --border-radius-md:    1.6rem;
   --border-radius-round: var(--border-radius-sm);
+  --border-radius-pill:  999px;
+
+  // Transition aliases — color.border.emphasized/strong renamed in subatomic update.
+  --color-border-emphasized: var(--color-border-control);
+  --color-border-strong:     var(--color-border-utility-positive);
 
   // --- Interactive ---
-  --links:     var(--color-content-link, #282828);
-  --focus:     var(--color-border-strong, #314158);
-  --selection: var(--color-border-strong, #314158);
+  --links:     var(--color-text-link);
+  --focus:     var(--color-border-utility-positive);
+  --selection: var(--color-border-utility-positive);
 
   // --- Typography scale (map semantic sizes onto modern composite roles) ---
-  --font-size-caption: var(--typography-meta-default-font-size, 1.4rem);
-  --font-size-label:   var(--typography-label-lg-font-size, 1.4rem);
-  --font-size-text:    var(--typography-body-default-font-size, 1.4rem);
-  --font-size-button:  var(--typography-button-font-size, 1.2rem);
-  --font-size-title:   var(--typography-title-font-size, 2.4rem);
-  --font-size-tab:     var(--typography-tabs-default-font-size, 1.4rem);
+  --font-size-body:    var(--typography-body-default-font-size); // 1.4rem = 14px; overrides body's 1.2rem default
+  --font-size-caption: var(--typography-meta-default-font-size);
+  --font-size-label:   var(--typography-input-label-lg-font-size);
+  --font-size-text:    var(--typography-body-default-font-size);
+  --font-size-button:  var(--typography-body-default-font-size);
+  --font-size-title:   var(--typography-title-default-font-size);
+  --font-size-tab:     var(--typography-tabs-default-font-size);
 
   // --- Button ---
-  --button-background:     var(--color-grayscale-white, #ffffff);
-  --button-color:          var(--color-content-link, #282828);
-  --button-font-weight:    var(--typography-font-weight-400, 400);
-  --button-gap:            var(--spacing-8, 0.8rem);
+  --button-background:     var(--color-background-subtle);
+  --button-color:          var(--color-text-subtle);
+  --button-focus-ring:     0 2px 2px 0 var(--color-transparency-charcoal-04), 0 0 0 2px var(--color-utility-blue-400);
+  --button-font-weight:    var(--typography-font-weight-400);
+  --button-gap:            var(--spacing-gap-sm);
   --button-height:         3.5rem;
-  --button-letter-spacing: var(--typography-letter-spacing-half, 0.05rem);
-  --button-padding-x:      var(--spacing-16, 1.6rem);
-  --button-padding-y:      var(--spacing-8, 0.8rem);
+  --button-icon-margin:    0;
+  --button-letter-spacing: var(--typography-button-default-letter-spacing);
+  --button-padding-x:      var(--spacing-padding-md);
+  --button-padding-y:      var(--spacing-padding-sm);
   --button-radius:         999px;
   --button-text-transform: none;
-  --button-text:           var(--color-content-link, #282828);
+  --button-text:           var(--color-text-subtle);
+
+  // Button hover/active state colors (shared across base, standard, dialogue, tiles)
+  --button-hover-background: var(--color-background-subtle-hover);
+
+  // Button elevation shadows
+  --button-shadow:        0 2px 2px 0 var(--color-transparency-charcoal-04);
+  --button-shadow-hover:  4px 8px 12px 0 var(--color-transparency-charcoal-08), 0 2px 4px 0 var(--color-transparency-charcoal-04);
+  --button-shadow-active: 4px 8px 12px 0 var(--color-transparency-charcoal-08), 0 2px 4px 0 var(--color-transparency-charcoal-04), inset 0 4px 8px 0 var(--color-transparency-charcoal-08);
+
+  // Dropdown / overlay elevation shadow
+  --shadow-dropdown: 0px 24px 88px -16px var(--color-transparency-charcoal-20);
 
   // Button variants
-  --button-primary-background: var(--button-background);
-  --button-primary-color:      var(--button-color);
-  --button-primary-border:     1px solid var(--border);
-  --button-secondary-text:     var(--button-text);
-  --button-secondary-border:   1px solid var(--border);
-
-  // Best guess currently at the refresh accent color
-  --color-positive: #0095da;
+  --button-primary-background:       var(--color-utility-blue-600);
+  --button-primary-background-hover: var(--color-utility-blue-700);
+  --button-primary-color:            var(--color-gray-0);
+  --button-primary-border:           none;
+  --button-primary-filter-hover:     none;
+  --button-primary-filter-active:    none;
+  --button-secondary-text:           var(--button-text);
+  --button-secondary-border:         1px solid var(--color-border-subtle);
+  --button-secondary-hover-background: var(--color-background-subtle-hover);
+  --button-secondary-border-hover:   1px solid var(--color-gray-300);
+  --button-dialogue-hover-background: var(--color-background-subtle-hover);
+
+  --color-content-icon: var(--color-gray-500, #89909A);
+  --color-text-body: var(--color-gray-800, #3d464d);
 }
 
-:root[data-theme='bh2026'],
-:root.theme-bh2026 {
+:root[data-theme='bh2026'] {
   @include bh2026-variables();
 }
 
+// bh2026: primary icon defaults to left. row-reverse moves the default right-side icon
+// visually before the text. Explicit side="left" reverts to row (icon already first in DOM).
+:root[data-theme='bh2026'] [theme="primary"] {
+  flex-direction: row-reverse;
+
+  &[side="left"] {
+    flex-direction: row;
+  }
+}
+
+// Dropdown trigger buttons keep the collapse icon on the right.
+// This override wins over the base rule (0,3,1 > 0,3,0).
+:root[data-theme='bh2026'] novo-dropdown [theme="primary"] {
+  flex-direction: row;
+}
+
+// bh2026: dialogue does not share pill format on hover
+:root[data-theme='bh2026'] [theme="dialogue"] {
+  border-radius: var(--border-radius-sm);
+}
+
+// bh2026: primary disabled uses a lighter blue at full opacity instead of the default 0.5 opacity dimming
+:root[data-theme='bh2026'] [theme="primary"][disabled],
+:root[data-theme='bh2026'] [theme="primary"].novo-button-disabled {
+  background: var(--color-utility-blue-300);
+  opacity: 1;
+}
+
 // bh2026 dark
 :root[data-theme='bh2026'].theme-dark {
   @include dark-variables();
@@ -92,15 +167,18 @@
   --button-background: var(--button-background);
   --button-color:      var(--button-text);
 
-  // bh2026 components color text via the modern `--color-content-*` tokens (charcoal in
-  // light), not the classic `--text-*` vars — so `dark-variables` alone leaves them dark
-  // (e.g. tab labels stay black-on-dark). Remap the content ramp onto the shared dark text
-  // palette so tabs/stepper/field/table/breadcrumbs/data-table all flip to light.
-  --color-content-headline:   var(--text-main);
-  --color-content-body:       var(--text-main);
-  --color-content-default:    var(--text-main);
-  --color-content-link:       var(--text-main);
-  --color-content-link-hover: var(--text-main);
-  --color-content-subtle:     var(--text-muted);
-  --color-content-disabled:   var(--text-disabled);
+  // bh2026 components color text via the modern --color-text-* tokens (dark in light mode),
+  // not the classic --text-* vars — so dark-variables alone leaves them dark
+  // (e.g. tab labels stay black-on-dark). Remap onto the shared dark text palette
+  // so tabs/stepper/field/table/breadcrumbs/data-table all flip to light.
+  --color-text-headline:   var(--text-main);
+  --color-text-body:       var(--text-main);
+  --color-text-link:       var(--text-main);
+  --color-text-link-hover: var(--text-main);
+  --color-text-subtle:     var(--text-muted);
+  --color-text-disabled:   var(--text-disabled);
+}
+
+:root:not([data-theme='bh2026']) .showInBh2026Only {
+  display: none !important;
 }

package/styles/typography.scss

@@ -142,3 +142,9 @@ span {
 span > span {
   vertical-align: baseline;
 }
+
+:root[data-theme=bh2026] {
+  h5, h6 {
+    font-size: 1.2rem;
+  }
+}

package/styles/variables.scss

@@ -98,6 +98,7 @@ $analytics-colors: (
 );
 // Entity Color Map
 $entity-colors: (
+  "appointment": $color-neutral,
   "star": $color-placement,
   "person": $color-contact,
   "company": $color-company,
@@ -118,6 +119,7 @@ $entity-colors: (
   "credential": $color-neutral,
   "user": $color-neutral,
   "corporateuser": $color-neutral,
+  "neutral": $color-neutral,
   "contract": $color-contract,
   "jobCode": $color-job-code,
   "earnCode": $color-earn-code,

package/utils/index.d.ts

@@ -445,7 +445,7 @@ declare class Color {
 /**
  * AUTOGENERATED FILE - DO NOT EDIT
  * Generated by: https://bhsource.bullhorn.com/DEV_WORKSPACE/country-state-parser
- * Last generated on: Fri Apr 12 2024 10:17:16 GMT-0400 (Eastern Daylight Time)
+ * Last generated on: Fri Jul 31 2026 09:10:54 GMT-0400 (Eastern Daylight Time)
  */
 declare const COUNTRIES: Country[];
 /**
@@ -1626,7 +1626,7 @@ declare class OutsideClick implements OnDestroy {
      */
     handleOutsideClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OutsideClick, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<OutsideClick>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<OutsideClick, never, never, {}, { "onOutsideClick": "onOutsideClick"; "onActiveChange": "onActiveChange"; }, never, never, true, never>;
 }
 
 export { AppBridge, AppBridgeHandler, AppBridgeService, BaseRenderer, BooleanInput, COUNTRIES, CalendarEventResponse, Can, Color, DateRange, DateUtil, Deferred, DevAppBridge, DevAppBridgeService, HTTP_VERBS, Helpers, Key, KeyCodes, MESSAGE_TYPES, OutsideClick, binarySearch, can, convertTokens, findByCountryCode, findByCountryId, findByCountryName, fixCkEditorInputEvent, formatZonedTime, getCountries, getDayView, getDayViewHourGrid, getMonthView, getStateObjects, getStates, getWeekView, getWeekViewEventOffset, getWeekViewHeader, isAlphaNumeric, legacyParse, notify, splitDateString };