@hermes-ui/angular 0.1.7 → 0.2.0

package/forms/combobox/_combobox.clarity.scss

@@ -51,6 +51,13 @@
     background-color: forms-variables.$hermes-forms-invalid-color;
   }
 
+  // Boxed fields signal focus with the frame ring (see .hermes-combobox-wrapper below), so
+  // the bottom bar is not drawn.
+  .hermes-combobox-wrapper ~ .hermes-focus-indicator,
+  .hermes-combobox-wrapper .hermes-focus-indicator {
+    display: none;
+  }
+
   .hermes-combobox-wrapper {
     position: relative;
     flex-wrap: wrap;
@@ -65,10 +72,14 @@
       calc(density.$hermes-base-vertical-offset-xs - tokens.$hermes-alias-object-border-width-100)
       combobox-variables.$hermes-combobox-trigger-padding-left;
     min-width: combobox-variables.$hermes-combobox-min-width;
+    // same height as the other boxed fields; pills wrapping onto more lines still grow it
+    min-height: forms-variables.$hermes-forms-input-wrapper-height;
+    align-content: center;
+    align-items: center;
 
     .hermes-input {
       padding: 0;
-      max-height: density.$hermes-base-row-height-xs;
+      max-height: forms-variables.$hermes-forms-input-line-height;
 
       &:not(:disabled) {
         color: combobox-variables.$hermes-combobox-text-color;
@@ -101,6 +112,7 @@
     //Mixins
 
     @include styles-mixins.form-fields-appearance();
+    @include styles-mixins.field-focus-ring();
 
     // override the above mixin for combobox-specific styles
     background-color: combobox-variables.$hermes-combobox-input-background-color;
@@ -113,15 +125,17 @@
     // must stay borderless so it doesn't render as a second nested box
     .hermes-input.hermes-combobox-input,
     .hermes-input.hermes-combobox-input:focus,
+    .hermes-input.hermes-combobox-input:focus-within,
     .hermes-input.hermes-combobox-input.hermes-focus {
       background: none;
       border: none;
       border-radius: 0;
       box-shadow: none;
+      outline: none;
     }
 
     &.invalid {
-      border-bottom-color: forms-variables.$hermes-forms-invalid-color;
+      border-color: forms-variables.$hermes-forms-invalid-color;
     }
 
     //Others
@@ -129,8 +143,8 @@
       background: none;
       border-bottom: none;
       vertical-align: middle;
-      height: density.$hermes-base-row-height-xs;
-      line-height: density.$hermes-base-typography-line-height-16;
+      height: forms-variables.$hermes-forms-input-line-height;
+      line-height: forms-variables.$hermes-forms-input-line-height;
     }
 
     .hermes-combobox-remove-btn {

package/forms/combobox/_properties.combobox.scss

@@ -17,10 +17,10 @@
 
     &,
     & [hermes-density] {
-      --hermes-combobox-font-size: #{density.$hermes-base-typography-font-size-inline};
+      --hermes-combobox-font-size: var(--hermes-forms-input-font-size);
       // shares the same rounding as input/select/textarea
-      --hermes-combobox-border-radius: var(--hermes-forms-border-radius, 0.375rem);
-      --hermes-combobox-trigger-padding-left: #{density.$hermes-base-horizontal-offset-m};
+      --hermes-combobox-border-radius: var(--hermes-forms-border-radius, #{mixins.baselinePx(6)});
+      --hermes-combobox-trigger-padding-left: #{mixins.baselinePx(16)};
       --hermes-combobox-trigger-padding-right: #{density.$hermes-base-horizontal-offset-m};
       --hermes-combobox-pill-padding: 0 #{density.$hermes-base-horizontal-offset-xs};
       --hermes-combobox-pill-height: #{density.$hermes-base-row-height-xs};
@@ -30,8 +30,8 @@
 
     &,
     & [hermes-theme] {
-      --hermes-combobox-border-color: #{tokens.$hermes-alias-object-border-color};
-      --hermes-combobox-input-background-color: #{tokens.$hermes-alias-object-container-background-tint};
+      --hermes-combobox-border-color: var(--hermes-forms-field-border-color);
+      --hermes-combobox-input-background-color: var(--hermes-forms-background-color);
       --hermes-combobox-pill-background-color: #{tokens.$hermes-alias-object-interaction-background};
       --hermes-combobox-pill-border-color: #{tokens.$hermes-alias-object-border-color};
       --hermes-combobox-pill-font-color: #{tokens.$hermes-alias-typography-color-500};

package/forms/styles/_input-group.clarity.scss

@@ -37,11 +37,17 @@
       max-width: 100%;
 
       &:not([readonly]):focus,
+      &:not([readonly]):focus-within,
       &.hermes-focus {
         background: none;
         background-size: 0;
         border: 0;
         box-shadow: none;
+        outline: none;
+      }
+
+      &:disabled {
+        background: none;
       }
     }
 
@@ -96,6 +102,7 @@
   .hermes-form-control-disabled {
     .hermes-input-group {
       border-color: forms-variables.$hermes-forms-border-disabled-color;
+      background-color: forms-variables.$hermes-forms-field-disabled-background-color;
     }
 
     .hermes-input-group-icon-action {

package/forms/styles/_mixins.forms.scss

@@ -65,19 +65,19 @@
   }
 }
 
-// shadcn-style focus ring: border changes color and a soft glow appears around the field,
-// instead of the Clarity underline growing from 0 to 100% width
-@mixin field-focus-ring($border-color: forms-variables.$hermes-forms-focused-color) {
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
+// Focus ring of boxed fields: a 2px outline offset 4px from the frame, in the focus color.
+// The frame border does not change on focus, so a validation border (error/success) stays
+// visible while the field is focused. The $ring-color argument is only kept for the
+// validation callers that used to pass their own color; the ring is always the focus color.
+@mixin field-focus-ring($ring-color: null) {
+  transition: border-color forms-variables.$hermes-forms-field-transition-duration
+    cubic-bezier(0.4, 0, 0.2, 1);
 
   &:focus,
   &.hermes-focus,
   &:focus-within {
-    border-color: $border-color;
-    box-shadow: 0 0 0 3px color-mix(in srgb, #{$border-color} 35%, transparent);
-    outline: none;
+    outline: forms-variables.$hermes-forms-focus-ring-width solid forms-variables.$hermes-forms-focused-color;
+    outline-offset: forms-variables.$hermes-forms-focus-ring-offset;
   }
 }
 
@@ -99,7 +99,7 @@
   }
 }
 @mixin form-fields-appearance(
-  $border-color: forms-variables.$hermes-forms-border-color,
+  $border-color: forms-variables.$hermes-forms-field-border-color,
   $text-color: forms-variables.$hermes-forms-text-color
 ) {
   color: $text-color;
@@ -111,6 +111,8 @@
   align-items: center;
 }
 @mixin disabled-form-fields() {
+  border-color: forms-variables.$hermes-forms-border-disabled-color;
+  background-color: forms-variables.$hermes-forms-field-disabled-background-color;
   color: forms-variables.$hermes-forms-text-disabled-color;
   cursor: not-allowed;
 }

package/forms/styles/_native-select.clarity.scss

@@ -23,7 +23,9 @@
     select {
       @include forms-mixins.custom-inputs(forms-variables.$hermes-forms-input-wrapper-height);
       @include forms-mixins.form-fields-appearance();
-      @include mixins.generate-typography-token('SECONDARY-13-RG-EXP');
+
+      font-size: forms-variables.$hermes-forms-input-font-size;
+      line-height: forms-variables.$hermes-forms-input-line-height;
 
       &:not([multiple]) {
         @include forms-mixins.field-focus-ring();
@@ -34,7 +36,11 @@
       }
 
       position: relative;
-      padding: 0 density.$hermes-base-icon-size-l 0 #{density.$hermes-base-horizontal-offset-s};
+      padding: 0
+        calc(
+          #{mixins.baselinePx(16)} + #{forms-variables.$hermes-forms-native-select-caret-size} + #{forms-variables.$hermes-forms-input-gap}
+        )
+        0 #{mixins.baselinePx(16)};
       cursor: pointer;
 
       //Moves the :after pseudo element (arrow) to the back so that clicking over it activates
@@ -76,7 +82,11 @@
       @include mixins.equilateral(forms-variables.$hermes-forms-native-select-caret-size);
 
       top: calc((100% - forms-variables.$hermes-forms-native-select-caret-size) / 2);
-      right: density.$hermes-base-horizontal-offset-s;
+      right: #{mixins.baselinePx(16)};
+      // above the select (which sits over it so the whole box opens the list), but not
+      // clickable: the click has to reach the select
+      z-index: calc(#{map.get(variables.$hermes-layers, native-select-box)} + 1);
+      pointer-events: none;
       // Using mask instead of background-image so we can use the CSS properties
       // and support both light / dark themes.
       mask: icons.generateCaretIcon();
@@ -165,9 +175,11 @@
       color: forms-variables.$hermes-forms-native-select-disabled-color;
       cursor: not-allowed;
 
+      background-color: forms-variables.$hermes-forms-field-disabled-background-color;
+
       &:hover {
-        background: none;
-        border-color: forms-variables.$hermes-forms-border-color;
+        background: forms-variables.$hermes-forms-field-disabled-background-color;
+        border-color: forms-variables.$hermes-forms-border-disabled-color;
       }
     }
   }

package/forms/styles/_properties.forms.scss

@@ -23,12 +23,12 @@
       --hermes-forms-input-group-icon-action-size: #{density.$hermes-base-icon-size-s};
       --hermes-forms-checkbox-border-radius: #{density.$hermes-base-border-radius-s};
       --hermes-forms-native-select-caret-size: #{density.$hermes-base-icon-size-xs};
-      // shadcn-style rounding, shared by every boxed text/select field (input, password,
-      // number-input, textarea, select, datalist, combobox).
-      // Kept well under half of --hermes-forms-input-wrapper-height (24px): anything close
-      // to 12px turns these short, grouped fields into a pill/stadium shape instead of a
-      // rounded rectangle.
-      --hermes-forms-border-radius: 0.375rem;
+      // Rounding shared by every boxed text/select field (input, password, number-input,
+      // textarea, select, datalist, combobox): 6px, the same as the login field frame.
+      // Kept well under half of --hermes-forms-input-wrapper-height: anything close to half
+      // turns these short, grouped fields into a pill/stadium shape instead of a rounded
+      // rectangle.
+      --hermes-forms-border-radius: #{mixins.baselinePx(6)};
       --hermes-forms-textarea-border-radius: var(--hermes-forms-border-radius);
       --hermes-forms-datalist-caret-icon-size: #{density.$hermes-base-icon-size-s};
 
@@ -53,25 +53,32 @@
     --hermes-select-item-indicator-size: #{mixins.baselinePx(14)};
 
     // Input
-    // shadcn-style default sizing (32px tall field, 12px horizontal padding, 14px/20px text),
-    // matching real shadcn Input pixel measurements. The former density-driven default
-    // (row-height-s / horizontal-offset-m / SECONDARY-13-RG-EXP type) becomes the compact
-    // variant below instead of being replaced.
+    // Field frame sizing: 32px tall, 16px horizontal padding, 16px/24px text. It is the frame
+    // of the login form fields (border, radius, height, padding and focus ring). The former
+    // density-driven default (row-height-s / horizontal-offset-m / SECONDARY-13-RG-EXP type)
+    // becomes the compact variant below instead of being replaced.
     //
     // Pixel values here MUST go through mixins.baselinePx($px), not bare rem literals: this
     // codebase's rem scale is calibrated to a 20px root font-size (--hermes-global-base: 20),
-    // not the browser's usual 16px. Writing e.g. `2.25rem` to mean shadcn's 36px renders as
-    // 2.25 * 20 = 45px instead - that's exactly how this got 25% too big the first time.
+    // not the browser's usual 16px. Writing e.g. `2.25rem` to mean 36px renders as
+    // 2.25 * 20 = 45px instead.
     //
     // The compact values are hardcoded from tokens.$hermes-global-space-9 / -5 rather than
     // density.$hermes-base-row-height-s / horizontal-offset-m: those density.* aliases are
     // `var(--hermes-base-*)` passthroughs that re-resolve against whatever density context
     // they're read in, so referencing them here would just echo compact's own (smaller) value
     // instead of the old un-densitied default.
-    --hermes-forms-input-padding: 0 #{mixins.baselinePx(12)};
+    --hermes-forms-input-padding: 0 #{mixins.baselinePx(16)};
+    --hermes-forms-input-gap: #{mixins.baselinePx(8)};
     --hermes-forms-input-wrapper-height: #{mixins.baselinePx(32)};
-    --hermes-forms-input-font-size: #{mixins.baselinePx(14)};
-    --hermes-forms-input-line-height: #{mixins.baselinePx(20)};
+    --hermes-forms-input-font-size: #{mixins.baselinePx(16)};
+    --hermes-forms-input-line-height: #{mixins.baselinePx(24)};
+
+    // Focus ring: a 2px outline offset 4px from the frame. The frame border does not change
+    // color on focus; only validation states change it.
+    --hermes-forms-focus-ring-width: #{mixins.baselinePx(2)};
+    --hermes-forms-focus-ring-offset: #{mixins.baselinePx(4)};
+    --hermes-forms-field-transition-duration: 240ms;
 
     [hermes-density='compact'] {
       --hermes-forms-input-padding: 0 #{tokens.$hermes-global-space-5};
@@ -94,9 +101,12 @@
       --hermes-forms-subtext-color: #{tokens.$hermes-alias-typography-color-300};
       --hermes-forms-placeholder-color: #{tokens.$hermes-alias-typography-color-200};
       --hermes-forms-border-color: #{tokens.$hermes-alias-object-interaction-border-color};
+      // Frame of boxed fields. Checkbox/radio keep --hermes-forms-border-color.
+      --hermes-forms-field-border-color: #{tokens.$hermes-global-color-construction-300};
+      --hermes-forms-field-disabled-background-color: #{tokens.$hermes-alias-object-container-background-tint};
       --hermes-forms-focused-color: #{tokens.$hermes-alias-object-interaction-background-highlight};
       --hermes-forms-background-color: #{tokens.$hermes-alias-object-container-background};
-      --hermes-forms-shadow: #{tokens.$hermes-alias-object-shadow-100};
+      --hermes-forms-shadow: none;
       --hermes-forms-subtext-disabled-color: #{tokens.$hermes-alias-typography-disabled};
       --hermes-forms-border-disabled-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
       --hermes-forms-text-disabled-color: #{tokens.$hermes-alias-typography-disabled};
@@ -144,7 +154,8 @@
       // Select
       --hermes-forms-native-select-hover-background: transparent;
       --hermes-forms-native-select-disabled-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
-      --hermes-forms-native-select-hover-border-color: #{tokens.$hermes-alias-object-interaction-color-hover};
+      // The field frame has no hover state: the border stays the same until focus or validation.
+      --hermes-forms-native-select-hover-border-color: var(--hermes-forms-field-border-color);
       --hermes-forms-native-select-disabled-border-color: #{tokens.$hermes-alias-object-interaction-color-disabled};
       --hermes-forms-native-select-caret-hover-color: #{tokens.$hermes-alias-object-interaction-color-hover};
       --hermes-forms-native-select-caret-color: #{tokens.$hermes-alias-object-interaction-color};
@@ -170,7 +181,7 @@
 
       // Textarea
       --hermes-forms-textarea-background-color: #{tokens.$hermes-alias-object-container-background};
-      --hermes-forms-textarea-disabled-background: #{tokens.$hermes-alias-object-container-background};
+      --hermes-forms-textarea-disabled-background: var(--hermes-forms-field-disabled-background-color);
 
       // Datalist
       --hermes-forms-datalist-caret-color: #{tokens.$hermes-alias-status-neutral};

package/forms/styles/_textarea.clarity.scss

@@ -26,14 +26,14 @@
     max-width: calc(100% - forms-variables.$hermes-forms-baseline);
     height: auto;
     resize: vertical;
-    border: tokens.$hermes-alias-object-border-width-100 solid forms-variables.$hermes-forms-border-color;
+    border: tokens.$hermes-alias-object-border-width-100 solid forms-variables.$hermes-forms-field-border-color;
     background: forms-variables.$hermes-forms-textarea-background-color;
     color: forms-variables.$hermes-forms-text-color;
     border-radius: forms-variables.$hermes-forms-textarea-border-radius;
     box-shadow: forms-variables.$hermes-forms-shadow;
-    padding: density.$hermes-base-vertical-offset-xl density.$hermes-base-horizontal-offset-xl;
-
-    @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
+    padding: mixins.baselinePx(8) mixins.baselinePx(16);
+    font-size: forms-variables.$hermes-forms-input-font-size;
+    line-height: forms-variables.$hermes-forms-input-line-height;
 
     @include forms-mixins.field-focus-ring();
 

package/forms/styles/_variables.forms.scss

@@ -26,6 +26,11 @@ $hermes-forms-placeholder-color: var(--hermes-forms-placeholder-color) !default;
 $hermes-forms-border-color: var(--hermes-forms-border-color) !default;
 $hermes-forms-focused-color: var(--hermes-forms-focused-color) !default;
 $hermes-forms-icon-color: #{tokens.$hermes-alias-object-interaction-color} !default;
+$hermes-forms-field-border-color: var(--hermes-forms-field-border-color) !default;
+$hermes-forms-field-disabled-background-color: var(--hermes-forms-field-disabled-background-color) !default;
+$hermes-forms-focus-ring-width: var(--hermes-forms-focus-ring-width) !default;
+$hermes-forms-focus-ring-offset: var(--hermes-forms-focus-ring-offset) !default;
+$hermes-forms-field-transition-duration: var(--hermes-forms-field-transition-duration) !default;
 $hermes-forms-border-radius: var(--hermes-forms-border-radius) !default;
 $hermes-forms-background-color: var(--hermes-forms-background-color) !default;
 $hermes-forms-shadow: var(--hermes-forms-shadow) !default;
@@ -38,6 +43,7 @@ $hermes-forms-placeholder-disabled-color: var(--hermes-forms-placeholder-disable
 
 // Input
 $hermes-forms-input-padding: var(--hermes-forms-input-padding);
+$hermes-forms-input-gap: var(--hermes-forms-input-gap);
 $hermes-forms-input-wrapper-height: var(--hermes-forms-input-wrapper-height);
 $hermes-forms-input-font-size: var(--hermes-forms-input-font-size);
 $hermes-forms-input-line-height: var(--hermes-forms-input-line-height);

package/layout/main-container/_properties.header.scss

@@ -5,6 +5,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
+@use 'sass:map';
 @use '../../styles/mixins';
 @use '../../styles/variables/variables';
 @use '../../styles/variables/variables.density' as density;
@@ -12,19 +13,34 @@
 
 @include mixins.exports('header.properties') {
   @include mixins.root-or-host() {
-    --hermes-header-title-font-weight: #{tokens.$hermes-alias-typography-subsection-font-weight};
+    // The header is a brand band: dark in both modes, white text, and a translucent white veil
+    // (--hermes-header-highlight-color) for hover and for the search field. No token of the
+    // light palette works over the dark band, but a white veil follows any dark background.
+    --hermes-header-title-font-weight: #{tokens.$hermes-alias-typography-font-weight-bold};
     --hermes-header-title-font-family: #{variables.$hermes-font};
     --hermes-header-search-input-font-color: #{tokens.$hermes-global-color-white};
     --hermes-header-search-placeholder-font-weight: #{tokens.$hermes-alias-typography-font-weight-regular};
-    --hermes-header-search-placeholder-text-color: #{tokens.$hermes-global-color-construction-400};
-    --hermes-header-search-border-active: #{tokens.$hermes-alias-object-border-width-100} solid Highlight;
+    --hermes-header-search-placeholder-text-color: rgb(255 255 255 / 70%);
+    --hermes-header-search-bg-color: var(--hermes-header-highlight-color);
+    --hermes-header-search-border-color: var(--hermes-header-highlight-color);
+    --hermes-header-search-border-active: #{tokens.$hermes-alias-object-border-width-100} solid
+      #{tokens.$hermes-global-color-white};
     --hermes-header-search-border-hover: #{tokens.$hermes-alias-object-border-width-100} solid
-      #{tokens.$hermes-global-color-construction-400};
+      #{tokens.$hermes-global-color-white};
     --hermes-header-divider-color: #{tokens.$hermes-global-color-construction-600};
     --hermes-header-2-bg-color: #{tokens.$hermes-global-color-construction-800};
     --hermes-header-3-bg-color: #{tokens.$hermes-global-color-azure-900};
-    --hermes-header-font-color: #{tokens.$hermes-global-color-construction-100};
-    --hermes-header-font-color-hover: #{tokens.$hermes-global-color-construction-50};
+    --hermes-header-font-color: #{tokens.$hermes-global-color-white};
+    --hermes-header-font-color-hover: #{tokens.$hermes-global-color-white};
+    --hermes-header-border-color: rgb(255 255 255 / 12%);
+    --hermes-header-highlight-color: rgb(255 255 255 / 12%);
+    --hermes-header-focus-color: var(--hermes-alias-primary);
+    --hermes-header-control-radius: #{mixins.baselinePx(6)};
+    --hermes-header-transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
+    --hermes-header-gap: #{tokens.$hermes-global-space-9};
+    --hermes-header-padding-start: #{tokens.$hermes-global-space-7};
+    --hermes-header-padding-end: #{tokens.$hermes-global-space-9};
+    --hermes-header-control-size: #{tokens.$hermes-global-space-10};
 
     &,
     & [hermes-density] {
@@ -51,5 +67,27 @@
         var(--hermes-alias-primary) 30%
       );
     }
+
+    // Dark mode: the band stays the deepest step of the page, below the app background
+    // (construction-1000 + 20% primary) and the sidenav (construction-1100 + 10% primary) —
+    // otherwise it would read as lighter than what it sits over. Measured: at 15% the band came
+    // out lighter than the sidenav. Declared after the rule above, which has the same specificity.
+    & [hermes-theme~='dark'] {
+      --hermes-header-bg-color: color-mix(
+        in oklch,
+        #{tokens.$hermes-global-color-construction-1100},
+        var(--hermes-alias-primary) 4%
+      );
+    }
+  }
+
+  // Small screens: side padding and the gap between blocks shrink, since every pixel here is
+  // width taken from the content. The bar keeps its height.
+  @media screen and (max-width: map.get(variables.$hermes-grid-breakpoints, md)) {
+    @include mixins.root-or-host() {
+      --hermes-header-gap: #{tokens.$hermes-global-space-5};
+      --hermes-header-padding-start: #{tokens.$hermes-global-space-7};
+      --hermes-header-padding-end: #{tokens.$hermes-global-space-7};
+    }
   }
 }

package/layout/main-container/_variables.header.scss

@@ -30,3 +30,14 @@ $hermes-header-search-input-font-color: var(--hermes-header-search-input-font-co
 $hermes-header-search-placeholder-text-color: var(--hermes-header-search-placeholder-text-color) !default;
 $hermes-header-search-border-active: var(--hermes-header-search-border-active) !default;
 $hermes-header-search-border-hover: var(--hermes-header-search-border-hover) !default;
+$hermes-header-search-bg-color: var(--hermes-header-search-bg-color) !default;
+$hermes-header-search-border-color: var(--hermes-header-search-border-color) !default;
+$hermes-header-border-color: var(--hermes-header-border-color) !default;
+$hermes-header-highlight-color: var(--hermes-header-highlight-color) !default;
+$hermes-header-focus-color: var(--hermes-header-focus-color) !default;
+$hermes-header-gap: var(--hermes-header-gap) !default;
+$hermes-header-padding-start: var(--hermes-header-padding-start) !default;
+$hermes-header-padding-end: var(--hermes-header-padding-end) !default;
+$hermes-header-control-size: var(--hermes-header-control-size) !default;
+$hermes-header-control-radius: var(--hermes-header-control-radius) !default;
+$hermes-header-transition: var(--hermes-header-transition) !default;

package/layout/nav/_header.clarity.scss

@@ -9,6 +9,7 @@
 @use 'sass:meta';
 @use '../../styles/mixins';
 @use '../../styles/variables/variables';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
 @use '../main-container/variables.header' as header-variables;
 @use 'mixins.header' as header-mixins;
 
@@ -18,10 +19,23 @@
   header,
   .header {
     display: flex;
+    align-items: center;
+    // The gap is the distance between the bar's blocks (brand, nav, actions), and its side
+    // padding is the screen margin. Both shrink on small screens (see the properties file).
+    gap: header-variables.$hermes-header-gap;
+    padding: 0 header-variables.$hermes-header-padding-end 0 header-variables.$hermes-header-padding-start;
     color: header-variables.$hermes-header-font-color;
     background-color: header-variables.$hermes-header-bg-color;
     height: header-variables.$hermes-header-height;
     white-space: nowrap;
+    // The bottom edge separates the band from the content below: in dark mode the two are close
+    // in tone, and the line is what gives the edge. Fixed in light mode too, at no cost.
+    border-block-end: tokens.$hermes-alias-object-border-width-100 solid header-variables.$hermes-header-border-color;
+
+    // Only shown, and only takes up room, while a sliding nav is open (see responsive-nav).
+    .header-backdrop {
+      display: none;
+    }
 
     @include header-mixins.header-backgrounds();
     @include header-mixins.header-branding();