novo-elements 13.2.0-next.9 → 13.3.0-next.1

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/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

@@ -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 {

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,26 +820,43 @@ 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-empty,
     &.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-control-empty {
+      transform: translateY(-100%) !important;
+      height: 1.5em !important;
+      top: 0 !important;
+      bottom: auto !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);
+    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;
@@ -864,4 +881,212 @@ control-prompt-modal {
       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)),
+  div.novo-control-input#{$bh2026-not-borderless}.control-invalid-touched {
+    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-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: var(--spacing-gap-xlg);
+    margin-right: 0;
+    margin-top: var(--spacing-margin);
+  }
+
+  .novo-form-container form {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    novo-fieldset {
+      margin-top: 0;
+    }
+
+    novo-fieldset + novo-fieldset:has(> .novo-fieldset-container.card-section) {
+      margin-top: var(--spacing-gutter);
+    }
+  }
+
+  .novo-form-row.hidden {
+    display: none;
+  }
 }

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

@@ -15,3 +15,35 @@
     display: none;
   }
 }
+
+:host-context([data-theme='bh2026'] .card-section) {
+  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;
+  gap: var(--spacing-gap-sm);
+  font-size: var(--typography-title-small-font-size, 1.8rem);
+  font-weight: 600;
+  line-height: var(--typography-title-small-line-height, 2.4rem);
+  letter-spacing: var(--typography-title-small-letter-spacing, 0);
+  text-transform: capitalize;
+  color: var(--color-text-body);
+  > span {
+    flex: 1 0 0;
+    min-width: 0;
+  }
+  ::ng-deep novo-icon {
+    font-size: 1.6rem;
+    width: 1.6rem;
+    height: 1.6rem;
+    flex-shrink: 0;
+    color: var(--color-content-icon);
+    margin: 0;
+    i {
+      font-size: 1.6rem;
+      width: 1.6rem;
+      height: 1.6rem;
+    }
+  }
+}

package/elements/form/index.d.ts

@@ -945,8 +945,10 @@ declare class NovoControlTemplates implements AfterViewInit {
 declare class NovoFieldsetHeaderElement {
     title: string;
     icon: string;
+    cardSection: boolean;
+    get cardIcon(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoFieldsetHeaderElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetHeaderElement, "novo-fieldset-header", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetHeaderElement, "novo-fieldset-header", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "cardSection": { "alias": "cardSection"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 declare class NovoFieldsetElement {
     controls: Array<any>;
@@ -958,8 +960,9 @@ declare class NovoFieldsetElement {
     isEmbedded: boolean;
     isInlineEmbedded: boolean;
     hidden: boolean;
+    cardSection: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoFieldsetElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetElement, "novo-fieldset", never, { "controls": { "alias": "controls"; "required": false; }; "form": { "alias": "form"; "required": false; }; "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "index": { "alias": "index"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "isEmbedded": { "alias": "isEmbedded"; "required": false; }; "isInlineEmbedded": { "alias": "isInlineEmbedded"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetElement, "novo-fieldset", never, { "controls": { "alias": "controls"; "required": false; }; "form": { "alias": "form"; "required": false; }; "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "index": { "alias": "index"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "isEmbedded": { "alias": "isEmbedded"; "required": false; }; "isInlineEmbedded": { "alias": "isInlineEmbedded"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "cardSection": { "alias": "cardSection"; "required": false; }; }, {}, never, never, false, never>;
 }
 declare class NovoDynamicFormElement implements OnChanges, OnInit, AfterContentInit {
     private element;
@@ -970,6 +973,7 @@ declare class NovoDynamicFormElement implements OnChanges, OnInit, AfterContentI
     layout: string;
     hideNonRequiredFields: boolean;
     autoFocusFirstField: boolean;
+    readonly hasCardSections: i0.InputSignal<boolean>;
     customTemplates: QueryList<NovoTemplate>;
     private fieldsAlreadyHidden;
     allFieldsRequired: boolean;
@@ -977,10 +981,14 @@ declare class NovoDynamicFormElement implements OnChanges, OnInit, AfterContentI
     showingAllFields: boolean;
     showingRequiredFields: boolean;
     numControls: number;
+    private readonly theme;
+    readonly effectiveCardSections: i0.Signal<boolean>;
+    get visibleFieldsets(): NovoFieldset[];
     constructor(element: ElementRef, templates: NovoTemplateService);
     ngOnInit(): void;
     ngOnChanges(changes?: SimpleChanges): void;
     ngAfterContentInit(): void;
+    hasVisibleControls(fieldset: NovoFieldset): boolean;
     showAllFields(): void;
     showOnlyRequired(hideRequiredWithValue: any): void;
     get values(): any;
@@ -988,7 +996,7 @@ declare class NovoDynamicFormElement implements OnChanges, OnInit, AfterContentI
     updatedValues(): any;
     forceValidation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoDynamicFormElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoDynamicFormElement, "novo-dynamic-form", never, { "controls": { "alias": "controls"; "required": false; }; "fieldsets": { "alias": "fieldsets"; "required": false; }; "form": { "alias": "form"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "hideNonRequiredFields": { "alias": "hideNonRequiredFields"; "required": false; }; "autoFocusFirstField": { "alias": "autoFocusFirstField"; "required": false; }; }, {}, ["customTemplates"], ["form-title", "form-subtitle"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoDynamicFormElement, "novo-dynamic-form", never, { "controls": { "alias": "controls"; "required": false; }; "fieldsets": { "alias": "fieldsets"; "required": false; }; "form": { "alias": "form"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "hideNonRequiredFields": { "alias": "hideNonRequiredFields"; "required": false; }; "autoFocusFirstField": { "alias": "autoFocusFirstField"; "required": false; }; "hasCardSections": { "alias": "hasCardSections"; "required": false; "isSignal": true; }; }, {}, ["customTemplates"], ["form-title", "form-subtitle"], false, never>;
 }
 
 interface AddressLookupResult {
@@ -1301,6 +1309,8 @@ declare class NovoFormElement implements AfterContentInit, OnInit {
     form: NovoFormGroup;
     layout: string;
     hideHeader: boolean;
+    readonly hasCardSections: i0.InputSignal<boolean>;
+    readonly effectiveCardSections: i0.Signal<boolean>;
     customTemplates: QueryList<NovoTemplate>;
     showingAllFields: boolean;
     showingRequiredFields: boolean;
@@ -1313,7 +1323,7 @@ declare class NovoFormElement implements AfterContentInit, OnInit {
     showOnlyRequired(hideRequiredWithValue: any): void;
     forceValidation(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoFormElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFormElement, "novo-form", never, { "form": { "alias": "form"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "hideHeader": { "alias": "hideHeader"; "required": false; }; }, {}, ["customTemplates"], ["form-title", "form-subtitle", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFormElement, "novo-form", never, { "form": { "alias": "form"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "hideHeader": { "alias": "hideHeader"; "required": false; }; "hasCardSections": { "alias": "hasCardSections"; "required": false; "isSignal": true; }; }, {}, ["customTemplates"], ["form-title", "form-subtitle", "*"], false, never>;
 }
 
 declare class NovoFormModule {

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);
@@ -198,4 +198,5 @@
       }
     }
   }
+  background-color: transparent;
 }