@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/styles/Navigation.module.scss

@@ -24,20 +24,36 @@
      --nav-item-gap              gap between top-level nav items.  default: 0.5rem
      --nav-item-padding          padding on a nav item's link/span/button.
                                                         default: 0.55rem 0.7rem
-     --nav-item-font-size        nav item type size.     default: var(--font-size-sm)
-     --nav-action-size           the square action chips on the right.
-                                                                  default: 36px
+     --nav-item-font-size        nav item type size.            default: 0.9rem
+     --nav-item-radius           corner radius of the pill a nav item wears on
+                                 hover and when it is the current page.
+                                                       default: var(--radius, 6px)
+     --nav-active-bar-color      the 2px rule that marks the current page,
+                                 sitting on the bar's bottom edge.
+                                            default: var(--highlight-color, #fff)
+     --nav-action-size           the round action chips on the right.
+                                                                  default: 34px
      --nav-action-size-sm        the smaller chip variant, and the minimum slot
                                  a chip sits in.                  default: 32px
      --nav-action-gap            space between action chips.       default: 2px
      --nav-action-padding        padding of the pill that groups the action
                                  chips.                            default: 4px
+     --nav-chip-radius           corner radius of a single action chip. Fully
+                                 round by default, so the chips nest inside the
+                                 group pill at either end; a project that wants
+                                 squircles sets this once.
+                                                  default: var(--radius-pill, 999px)
      --nav-dropdown-item-padding padding on a dropdown menu row.
                                                               default: 8px 20px
      --nav-logo-height           height of the logo plate, and the same figure
                                  everywhere the rail, the content header and the
-                                 mobile drawer offset themselves by it.
-                                                                  default: 50px
+                                 mobile drawer offset themselves by it. In the
+                                 full header it is also the bar's minimum height
+                                 and the cap on the logo image, so the bar is one
+                                 predictable height rather than whatever the
+                                 tallest thing in it happens to measure. Total
+                                 bar height is this plus --nav-bar-padding: 52px
+                                 and 4px gives the 60px bar.      default: 50px
 
    Two deliberate omissions: the icon-to-label gap inside a nav item and the
    padding on the chips themselves are internal alignment, not density — the
@@ -55,8 +71,37 @@
     align-items: center;
     gap: var(--nav-bar-gap, var(--padding));
     width: 100%;
+    /* One predictable bar height. Before this the bar was as tall as whatever
+       the tallest thing in it happened to be — usually the logo image, so a
+       project swapping its mark changed the height of the whole application
+       shell. The logo is capped to the same figure below. */
+    min-height: var(--nav-logo-height, 50px);
     position: relative; /* Establish a positioning context */
 
+    /* The navigation column fills the bar's full height so the current-page
+       rule can sit on the bar's bottom edge rather than floating under the
+       item. `.navwrap` scrolls horizontally, which clips vertically too, so
+       the rule cannot simply be pushed out of the item with a negative
+       offset — the column has to actually reach that far. */
+    > .navwrap {
+        align-self: stretch;
+    }
+
+    .app-nav {
+        height: 100%;
+
+        /* Full-height items: the hover/active pill still centres inside them,
+           but the item's own box now runs bar-top to bar-bottom, which is what
+           `.active::after` anchors to. Scoped to the header — the sidebar's
+           `.app-nav` is a column and wants none of this. */
+        > .nav-item,
+        > .nav-item-alternate {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+        }
+    }
+
     .logo {
         width: var(--logo-width);
         padding: var(--nav-logo-padding, 0);
@@ -81,6 +126,10 @@
         img {
             width: 100%;
             height: auto;
+            /* Whatever the mark's aspect ratio, it sits inside the bar's
+               height instead of setting it. */
+            max-height: var(--nav-logo-height, 50px);
+            object-fit: contain;
             display: block;
             margin: 0 auto;
         }
@@ -156,8 +205,8 @@
         a,
         span,
         button {
-            font-size: var(--nav-item-font-size, var(--font-size-sm));
-            font-weight: var(--font-weight-medium);
+            font-size: var(--nav-item-font-size, 0.9rem);
+            font-weight: var(--font-weight-medium, 500);
             display: flex;
             flex-wrap: nowrap;
             align-items: center;
@@ -165,19 +214,59 @@
             box-sizing: border-box;
             /* Was 0.35em/0.5em — a tap target under the 44px guideline and
                visually cramped against the taller header. */
-            padding: var(--nav-item-padding, 0.55rem 0.7rem);
+            padding: var(--nav-item-padding, 0.5rem 0.8rem);
             margin: 0;
             line-height: 1;
             text-decoration: none;
-            border-radius: var(--radius-sm);
+            /* Was `var(--radius-sm)` with no fallback: a project that does not
+               declare that token got an INVALID declaration, which the browser
+               throws away — square corners, not the intended ones. Every
+               custom property in this file's own rules carries its default. */
+            border-radius: var(--nav-item-radius, var(--radius, 6px));
             /* `all` also animated layout properties. Only what changes. */
             transition:
-                background-color var(--speed) var(--ease),
-                color var(--speed) var(--ease);
+                background-color var(--speed, 0.18s) var(--ease, ease),
+                color var(--speed, 0.18s) var(--ease, ease);
             background: none;
             border: none;
             cursor: pointer;
             font-family: inherit;
+
+            /* Keyboard users could not see where they were: the bar suppressed
+               outlines everywhere and put nothing back. Pointer users never
+               see this. */
+            &:focus-visible {
+                outline: 2px solid
+                    var(--nav-active-bar-color, var(--highlight-color, #fff));
+                outline-offset: 2px;
+            }
+        }
+
+        /* A caret on the items that open something, so a menu is not a
+           surprise. There is no caret element in the markup and none is
+           needed — an item with children is exactly an item with a `> ul`. */
+        &:has(> ul) > a::after,
+        &:has(> ul) > span::after,
+        &:has(> ul) > button::after {
+            content: '';
+            width: 0;
+            height: 0;
+            flex: none;
+            margin-left: 0.1rem;
+            border-left: 3.5px solid transparent;
+            border-right: 3.5px solid transparent;
+            border-top: 4px solid currentColor;
+            opacity: 0.55;
+            transition:
+                opacity var(--speed, 0.18s) var(--ease, ease),
+                transform var(--speed, 0.18s) var(--ease, ease);
+        }
+
+        &:has(> ul):hover > a::after,
+        &:has(> ul):hover > span::after,
+        &:has(> ul):hover > button::after {
+            opacity: 1;
+            transform: rotate(180deg);
         }
 
         &.nav-item {
@@ -189,10 +278,10 @@
 
             /* Nothing responded to the pointer unless it was already the
                active page, so the bar felt inert. */
-            &:not(.active):hover a,
-            &:not(.active):hover span,
-            &:not(.active):hover button {
-                background: rgba(255, 255, 255, 0.12);
+            &:not(.active):hover > a,
+            &:not(.active):hover > span,
+            &:not(.active):hover > button {
+                background: rgba(255, 255, 255, 0.08);
                 color: #fff;
             }
 
@@ -202,95 +291,140 @@
                 visibility: hidden;
             }
 
-            /* Only the current page wears the brand red. Hover shared it
-               before, so pointing at any item made it look selected and the
-               real active item was impossible to pick out while moving the
-               mouse across the bar. Hover is handled above, as a quiet lift. */
-            &.active a,
-            &.active span,
-            &.active button {
-                background: var(--secondary-color);
+            /* The current page: a filled pill AND the rule below. The pill
+               alone was a solid brand-red block that fought the bar; the rule
+               alone is too quiet to find at a glance while scanning. Hover is
+               the same shape at half the weight, so moving across the bar
+               previews the selection rather than imitating it. */
+            &.active > a,
+            &.active > span,
+            &.active > button {
+                background: rgba(255, 255, 255, 0.14);
                 color: #fff;
-                font-weight: var(--font-weight-semibold);
+                font-weight: var(--font-weight-semibold, 600);
             }
 
-            &.active svg,
+            /* Sits on the bar's bottom edge, not under the item — the item is
+               stretched to the full height of the bar for exactly this. */
+            &.active::after {
+                content: '';
+                position: absolute;
+                left: 0.35rem;
+                right: 0.35rem;
+                bottom: 0;
+                height: 2px;
+                border-radius: 2px 2px 0 0;
+                background: var(
+                    --nav-active-bar-color,
+                    var(--highlight-color, #fff)
+                );
+                pointer-events: none;
+            }
+
+            &.active > svg,
             &:hover svg {
                 color: #fff;
             }
 
             > ul {
-                width: 200px;
+                width: 220px;
                 position: absolute;
+                /* Anchored explicitly rather than left wherever its static
+                   position lands: the item is now a full-height flex box, so
+                   an un-anchored absolute child is at the mercy of the flex
+                   line. */
+                top: 100%;
+                left: 0;
                 height: auto;
                 margin: 0;
-                padding: 0;
+                /* The rows used to sit flush against the panel edge, which is
+                   the only reason each one carried its own first/last corner
+                   juggling. A ring of padding lets every row wear the same
+                   radius as the nav items above it, and the special cases go
+                   away with it. */
+                padding: 4px;
                 list-style: none;
                 display: none;
                 opacity: 0;
-                background: rgba(var(--primary-rgb), 0.75);
-                border-radius: var(--br);
+                background: var(--primary-color);
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                border-radius: var(--radius, 6px);
                 overflow: visible;
-                margin-top: 1px;
-                clip-path: inset(0 0 0 0 round var(--br));
                 z-index: 1000; /* Ensure dropdown appears above other elements */
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
+                box-shadow:
+                    0 6px 16px rgba(0, 0, 0, 0.22),
+                    0 2px 4px rgba(0, 0, 0, 0.16);
 
                 li {
                     display: block;
                     position: relative;
                     margin: 1px 0;
-                    border-radius: 0;
-
-                    &:first-of-type > a {
-                        border-top-right-radius: var(--br);
-                        border-top-left-radius: var(--br);
-                        border-bottom-right-radius: 0;
-                        border-bottom-left-radius: 0;
-                    }
-
-                    &:last-of-type {
-                        margin-bottom: 0;
-
-                        > a {
-                            border-bottom-right-radius: var(--br);
-                            border-bottom-left-radius: var(--br);
-                            border-top-right-radius: 0;
-                            border-top-left-radius: 0;
-                        }
-                    }
-
-                    &:not(:first-of-type):not(:last-of-type) > a {
-                        border-radius: 0;
-                    }
 
                     > a,
                     > button {
                         width: 100%;
-                        padding: var(--nav-dropdown-item-padding, 8px 20px);
+                        padding: var(--nav-dropdown-item-padding, 8px 12px);
                         box-sizing: border-box;
                         display: block;
                         text-decoration: none;
-                        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+                        border-radius: var(
+                            --nav-item-radius,
+                            var(--radius, 6px)
+                        );
+                        transition:
+                            background-color var(--speed, 0.18s)
+                                var(--ease, ease),
+                            color var(--speed, 0.18s) var(--ease, ease);
                         outline: none;
                         margin: 0;
-                        background: rgba(var(--primary-rgb), 1);
-                        color: var(--tertiary-color) !important;
+                        background: none;
+                        /* Was `!important` over an opaque fill, so the hover
+                           and current-page colours below could never apply —
+                           the menu looked dead to the pointer. */
+                        color: rgba(255, 255, 255, 0.82);
+                        font-size: var(--nav-item-font-size, 0.9rem);
+                        font-family: inherit;
                         position: relative;
                         border: none;
                         cursor: pointer;
-                        font-family: inherit;
                         text-align: left;
+
+                        &:focus-visible {
+                            outline: 2px solid
+                                var(
+                                    --nav-active-bar-color,
+                                    var(--highlight-color, #fff)
+                                );
+                            outline-offset: -2px;
+                        }
                     }
 
-                    &:hover a,
-                    &:hover button {
-                        background: rgba(var(--primary-rgb), 1);
-                        color: var(--tertiary-color);
+                    /* Only the row for the page you are ON is emphasised;
+                       the parent's active styling is scoped to its own link
+                       (child combinators above) so the menu does not light up
+                       wholesale when the parent is active. */
+                    > a.active,
+                    > button.active {
+                        background: rgba(255, 255, 255, 0.14);
+                        color: #fff;
+                        font-weight: var(--font-weight-semibold, 600);
+                    }
+
+                    &:hover > a,
+                    &:hover > button {
+                        background: rgba(255, 255, 255, 0.1);
+                        color: #fff;
+                    }
+
+                    > a.active,
+                    > button.active {
+                        background: rgba(255, 255, 255, 0.14);
+                        color: #fff;
+                        font-weight: var(--font-weight-semibold, 600);
                     }
 
                     svg {
-                        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+                        transition: color var(--speed, 0.18s) var(--ease, ease);
                     }
                 }
             }
@@ -302,22 +436,50 @@
         }
 
         &.nav-item-alternate {
+            /* The light mirror of `.nav-item`: the same pill, the same rule on
+               the bar's bottom edge, read against a pale surface instead of
+               the brand colour. Hover and active shared one declaration here,
+               so on this theme too there was no way to tell which item was the
+               current page while the pointer was anywhere near the bar. */
             a,
-            span {
-                color: var(--paragraph-color);
-                background: var(--tertiary-color);
+            span,
+            button {
+                color: var(--paragraph-color, #2b2b2b);
+                background: none;
             }
 
             svg {
                 color: var(--secondary-color);
             }
 
-            &:hover a,
-            &.active a,
-            &:hover span,
-            &.active span {
-                background: var(--primary-color);
-                color: var(--tertiary-color);
+            &:not(.active):hover > a,
+            &:not(.active):hover > span,
+            &:not(.active):hover > button {
+                background: rgba(0, 0, 0, 0.06);
+                color: var(--primary-color);
+            }
+
+            &.active > a,
+            &.active > span,
+            &.active > button {
+                background: rgba(var(--primary-rgb), 0.1);
+                color: var(--primary-color);
+                font-weight: var(--font-weight-semibold, 600);
+            }
+
+            &.active::after {
+                content: '';
+                position: absolute;
+                left: 0.35rem;
+                right: 0.35rem;
+                bottom: 0;
+                height: 2px;
+                border-radius: 2px 2px 0 0;
+                background: var(
+                    --nav-active-bar-color,
+                    var(--highlight-color, var(--primary-color))
+                );
+                pointer-events: none;
             }
 
             &:hover svg,
@@ -326,64 +488,67 @@
             }
 
             > ul {
-                width: 200px;
+                width: 220px;
                 position: absolute;
+                top: 100%;
+                left: 0;
                 height: auto;
                 margin: 0;
-                padding: 0;
+                padding: 4px;
                 list-style: none;
                 display: none;
                 opacity: 0;
-                background: rgba(var(--primary-rgb), 0.9);
-                border-radius: var(--br);
+                background: var(--surface-color, #fff);
+                border: 1px solid rgba(0, 0, 0, 0.08);
+                border-radius: var(--radius, 6px);
                 overflow: visible;
-                margin-top: 1px;
-                clip-path: inset(0 0 0 0 round var(--br));
                 z-index: 1000; /* Ensure dropdown appears above other elements */
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Add shadow for better visibility */
+                box-shadow:
+                    0 6px 16px rgba(0, 0, 0, 0.12),
+                    0 2px 4px rgba(0, 0, 0, 0.08);
 
                 li {
                     display: block;
                     position: relative;
-                    margin-bottom: 2px;
-                    border-radius: 0;
-
-                    &:first-of-type a {
-                        border-top-right-radius: var(--br);
-                        border-top-left-radius: var(--br);
-                        border-bottom-right-radius: 0;
-                        border-bottom-left-radius: 0;
-                    }
-
-                    &:last-of-type {
-                        margin-bottom: 0;
-
-                        a {
-                            border-bottom-right-radius: var(--br);
-                            border-bottom-left-radius: var(--br);
-                            border-top-right-radius: 0;
-                            border-top-left-radius: 0;
-                        }
-                    }
-
-                    &:not(:first-of-type):not(:last-of-type) a {
-                        border-radius: 0;
-                    }
+                    margin: 1px 0;
 
                     a {
                         width: 100%;
-                        padding: var(--nav-dropdown-item-padding, 8px 20px);
+                        padding: var(--nav-dropdown-item-padding, 8px 12px);
                         box-sizing: border-box;
                         display: block;
                         text-decoration: none;
-                        background: rgba(var(--primary-rgb), 0.9);
-                        color: var(--paragraph-color);
-                        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+                        background: none;
+                        color: var(--paragraph-color, #2b2b2b);
+                        font-size: var(--nav-item-font-size, 0.9rem);
+                        border-radius: var(
+                            --nav-item-radius,
+                            var(--radius, 6px)
+                        );
+                        transition:
+                            background-color var(--speed, 0.18s)
+                                var(--ease, ease),
+                            color var(--speed, 0.18s) var(--ease, ease);
+
+                        &:focus-visible {
+                            outline: 2px solid
+                                var(
+                                    --nav-active-bar-color,
+                                    var(--highlight-color, currentColor)
+                                );
+                            outline-offset: -2px;
+                        }
                     }
 
                     &:hover a {
-                        background: rgba(var(--primary-rgb), 1.05);
-                        color: var(--secondary-color);
+                        background: rgba(0, 0, 0, 0.06);
+                        color: var(--primary-color);
+                    }
+
+                    a.active {
+                        background: rgba(var(--primary-rgb), 0.1);
+                        color: var(--primary-color);
+                        font-weight: var(--font-weight-semibold, 600);
                     }
                 }
             }
@@ -416,8 +581,15 @@
            actions here, so this is padding and a pill radius rather than
            anything sized to a fixed set. If a project mounts more than fits,
            the group scrolls instead of pushing the navigation. */
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: var(--radius-pill);
+        /* Quieter than it was, and with no border: at 0.1 with a visible
+           edge the group read as a control of its own sitting in the bar
+           rather than as the ground the chips sit on. */
+        background: rgba(255, 255, 255, 0.08);
+        /* Was `var(--radius-pill)` with no fallback. A project that does not
+           declare that token got an invalid declaration, which the browser
+           discards — so the "pill" rendered as a square box with square chips
+           inside it, which is exactly how it looked. */
+        border-radius: var(--radius-pill, 999px);
         /* An even ring around the chips; any more and the group reads as a
            separate control rather than a container for them. */
         padding: var(--nav-action-padding, 4px);
@@ -453,7 +625,22 @@
         position: relative;
         z-index: 1001;
 
-        li {
+        /* `> li`, NOT a bare `li` — for exactly the reason the `a` / `button`
+           rules below carry their exclusion, and this one was missed.
+
+           A popover mounted in this cluster brings its own markup, and a list
+           in it (the vault's results, the messaging inbox's threads) is a
+           `ul > li` several levels down. Every one of those rows was matching
+           here and inheriting `display: flex`, `justify-content: center`, a
+           32px minimum box and 2px side margins — at 0,1,2, which no single
+           module class can beat. A row laid out as a grid quietly became a
+           centred flex line, and the 2px margin is the "rows look indented"
+           in the screenshots.
+
+           The chips are always direct children of this `ul`, so scoping to
+           `> li` loses nothing and cannot reach into anything a chip opens.
+           The `:not()` is belt and braces for a project that nests a chip. */
+        > li:not([data-nav-overlay] *) {
             margin: 0 var(--nav-action-gap, 2px);
             position: relative;
             display: flex;
@@ -465,8 +652,40 @@
             z-index: 1002;
         }
 
-        a,
-        button {
+        /* Signing out is not the same kind of action as the eight chips
+           before it, and a hairline says so without a second container.
+           Positional, deliberately: whatever a project mounts last is the
+           one it wants set apart. */
+        > li:not([data-nav-overlay] *):last-child {
+            margin-left: calc(var(--nav-action-gap, 2px) + 7px);
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: calc(-1 * (var(--nav-action-gap, 2px) + 4px));
+                top: 22%;
+                bottom: 22%;
+                width: 1px;
+                background: rgba(255, 255, 255, 0.16);
+                pointer-events: none;
+            }
+        }
+
+        /* NOT a bare `a, button` — that reached into the overlays these
+           chips open. A popover mounted inside this cluster (the notification
+           dropdown, the vault quick search) is a panel of ordinary controls,
+           and every one of them was inheriting the chip's white text, its
+           fixed 36px box and its pill radius, at a specificity the popover's
+           own module classes could not beat. The vault's popover rendered as
+           blank white boxes on a white panel.
+
+           `:not([data-nav-overlay] *)` is a pure exclusion: everything that
+           matched before still matches, unless it sits inside an element
+           flagged as an open overlay — the same attribute the `:has()` rule
+           above already relies on. Triggers keep their styling, because a
+           trigger is a sibling of the overlay it opens, never inside it. */
+        a:not([data-nav-overlay] *),
+        button:not([data-nav-overlay] *) {
             color: var(--tertiary-color);
             box-sizing: border-box;
             text-decoration: none;
@@ -481,34 +700,59 @@
                position — a rounded square cut across the container's curve at
                the two ends. Also stays correct however many actions a project
                mounts, since no chip is styled by its position. */
-            border-radius: var(--radius-pill);
+            /* The fallback matters: without one, a project that has not
+               declared `--radius-pill` got an invalid declaration and square
+               chips inside a square group. */
+            border-radius: var(--nav-chip-radius, var(--radius-pill, 999px));
             /* `all` animated layout too; and the hover scale made the icons
                wobble against a static header. Colour alone is enough feedback
-               on a 36px target. */
-            transition: background-color var(--speed) var(--ease);
+               on a 34px target. */
+            transition:
+                background-color var(--speed, 0.18s) var(--ease, ease),
+                color var(--speed, 0.18s) var(--ease, ease);
             display: flex;
             align-items: center;
             justify-content: center;
             /* 32px was below the 44px guideline and awkward to hit. */
-            width: var(--nav-action-size, 36px);
-            height: var(--nav-action-size, 36px);
+            width: var(--nav-action-size, 34px);
+            height: var(--nav-action-size, 34px);
+            min-width: var(--nav-action-size, 34px);
             position: relative;
             z-index: 1003;
+            outline: none;
             appearance: none;
+            cursor: pointer;
 
-            /* Brand red on hover, matching the rest of the bar. A neutral
-               white lift read as a system default rather than a project
-               control, and left this cluster looking unrelated to everything
-               around it. */
-            &:hover,
-            &.active {
-                background: var(--secondary-color);
+            /* A lift off the group's own surface, not a second colour. The
+               brand-red fill made nine chips read as nine separate buttons
+               parked in a tray; the current one is picked out by the icon
+               taking the highlight colour instead. */
+            &:hover {
+                background: rgba(255, 255, 255, 0.14);
 
                 svg {
                     color: #fff !important;
                 }
             }
 
+            &.active,
+            &[aria-expanded='true'] {
+                background: rgba(255, 255, 255, 0.14);
+
+                svg {
+                    color: var(
+                        --nav-active-bar-color,
+                        var(--highlight-color, #fff)
+                    ) !important;
+                }
+            }
+
+            &:focus-visible {
+                outline: 2px solid
+                    var(--nav-active-bar-color, var(--highlight-color, #fff));
+                outline-offset: 2px;
+            }
+
             svg {
                 /* Components mounted here (notifications, switch account)
                    colour their own icons, which is why they hovered
@@ -522,67 +766,58 @@
            transform, against 36px flat siblings. Rather than chase each one by
            name, normalise any button nested inside a wrapper element so the
            cluster stays uniform however a project fills it. */
-        li > div,
-        li > span {
+        /* `> li >`, for the same reason: a popover row's own spans are
+           children of a `li`, and this rule was turning the text cell of a
+           grid row into a flex box — which is what stopped the ellipsis
+           engaging on a long preview. */
+        > li > div:not([data-nav-overlay] *),
+        > li > span:not([data-nav-overlay] *) {
             display: flex;
             align-items: center;
         }
 
-        li button {
-            width: var(--nav-action-size, 36px);
-            height: var(--nav-action-size, 36px);
-            min-width: var(--nav-action-size, 36px);
+        > li button:not([data-nav-overlay] *) {
+            width: var(--nav-action-size, 34px);
+            height: var(--nav-action-size, 34px);
+            min-width: var(--nav-action-size, 34px);
             padding: 0;
-            border-radius: var(--radius-pill) !important;
+            border: none;
+            border-radius: var(
+                --nav-chip-radius,
+                var(--radius-pill, 999px)
+            ) !important;
             background: none;
             transform: none !important;
             color: var(--tertiary-color);
 
             &:hover {
-                background: var(--secondary-color) !important;
+                background: rgba(255, 255, 255, 0.14) !important;
                 color: #fff;
 
                 svg {
                     color: #fff !important;
                 }
             }
-        }
 
-        button {
-            color: var(--tertiary-color);
-            box-sizing: border-box;
-            padding: 0.35rem;
-            text-decoration: none;
-            background: none;
-            border: 1px solid var(--primary-color);
-            border-radius: 100%;
-            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: var(--nav-action-size-sm, 32px); // Reduced from 36px
-            height: var(--nav-action-size-sm, 32px); // Reduced from 36px
-            outline: none;
-            appearance: none;
-            position: relative;
-            z-index: 1003;
-            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
-            will-change: transform, background-color; // Optimize for animations
-            /* Remove contain: layout to prevent rendering optimization conflicts */
-            backface-visibility: hidden; // Prevent rendering glitches
-            -webkit-backface-visibility: hidden;
-            isolation: isolate;
-
-            &:hover,
-            &.active {
-                background: var(--primary-color);
-                transform: translateZ(0) scale(1.05); // Slight scale on hover
+            &.active,
+            &[aria-expanded='true'] {
+                background: rgba(255, 255, 255, 0.14) !important;
 
                 svg {
-                    color: var(--secondary-color);
+                    color: var(
+                        --nav-active-bar-color,
+                        var(--highlight-color, #fff)
+                    ) !important;
                 }
             }
         }
+
+        /* The second copy of the chip rule that used to live here — 32px, a
+           1px border in the bar's own colour, a 1.05 hover scale — is gone.
+           It restated `a, button` above it with different numbers, so every
+           chip that happened to be a `button` was a different size and shape
+           from the links beside it, and the invisible border is what made the
+           group read as a row of outlined squares. One rule now. */
     }
 }
 
@@ -595,8 +830,29 @@
     > ul {
         list-style: none;
         display: flex;
-        padding: 0;
+        /* The light mirror of `.hactions`: the same group pill, the same
+           borderless round chips, read against a pale bar. This copy had no
+           container at all, so the alternate theme showed a loose row of
+           outlined circles where the primary theme showed a tray. */
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: var(--radius-pill, 999px);
+        padding: var(--nav-action-padding, 4px);
         margin: 0;
+        max-width: 100%;
+        overflow-x: auto;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        /* Same reason as `.hactions`: a scroll container clips both axes, and
+           the popovers these chips open are absolutely positioned below them.
+           While one is open the group stops scrolling and lets it out. */
+        &:has([data-nav-overlay='open']) {
+            overflow: visible;
+        }
+
         flex-wrap: nowrap;
         flex-direction: row;
         align-items: center;
@@ -605,7 +861,9 @@
         position: relative;
         z-index: 1001;
 
-        li {
+        /* Direct children only — see the note on the same rule in
+           `.hactions`, which this block is the second copy of. */
+        > li:not([data-nav-overlay] *) {
             margin: 0 var(--nav-action-gap, 2px);
             position: relative;
             display: flex;
@@ -617,81 +875,109 @@
             z-index: 1002;
         }
 
-        a {
-            color: var(--paragraph-color);
-            box-sizing: border-box;
-            padding: 0.35rem;
-            text-decoration: none;
-            background: none;
-            border: 1px solid var(--primary-color);
-            border-radius: 100%;
-            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: var(--nav-action-size-sm, 32px); // Reduced from 36px
-            height: var(--nav-action-size-sm, 32px); // Reduced from 36px
-            position: relative;
-            z-index: 1003;
-            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
-            will-change: transform, background-color; // Optimize for animations
-            /* Remove contain: layout to prevent rendering optimization conflicts */
-            outline: none;
-            appearance: none;
-            backface-visibility: hidden; // Prevent rendering glitches
-            -webkit-backface-visibility: hidden;
-            /* Force onto own layer to prevent culling */
-            isolation: isolate;
-
-            &:hover,
-            &.active {
-                background: var(--primary-color);
-                transform: translateZ(0) scale(1.05); // Slight scale on hover
+        /* The sign-out chip, set apart by a hairline rather than a container. */
+        > li:not([data-nav-overlay] *):last-child {
+            margin-left: calc(var(--nav-action-gap, 2px) + 7px);
 
-                svg {
-                    color: var(--tertiary-color);
-                }
+            &::before {
+                content: '';
+                position: absolute;
+                left: calc(-1 * (var(--nav-action-gap, 2px) + 4px));
+                top: 22%;
+                bottom: 22%;
+                width: 1px;
+                background: rgba(0, 0, 0, 0.12);
+                pointer-events: none;
             }
         }
 
-        button {
-            color: var(--paragraph-color);
+        a:not([data-nav-overlay] *),
+        button:not([data-nav-overlay] *) {
+            color: var(--paragraph-color, #2b2b2b);
             box-sizing: border-box;
-            padding: 0.35rem;
+            padding: 0;
+            margin: 0;
             text-decoration: none;
             background: none;
-            border: 1px solid var(--primary-color);
-            border-radius: 100%;
-            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
+            font: inherit;
+            /* Was a 1px border and a 1.05 hover scale: the border is what made
+               these read as nine outlined boxes, and the scale wobbled the
+               icons against a bar that does not move. */
+            border: none;
+            border-radius: var(--nav-chip-radius, var(--radius-pill, 999px));
+            transition:
+                background-color var(--speed, 0.18s) var(--ease, ease),
+                color var(--speed, 0.18s) var(--ease, ease);
             display: flex;
             align-items: center;
             justify-content: center;
-            width: var(--nav-action-size-sm, 32px); // Reduced from 36px
-            height: var(--nav-action-size-sm, 32px); // Reduced from 36px
+            width: var(--nav-action-size, 34px);
+            height: var(--nav-action-size, 34px);
+            min-width: var(--nav-action-size, 34px);
             outline: none;
             appearance: none;
             position: relative;
             z-index: 1003;
-            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
-            will-change: transform, background-color; // Optimize for animations
-            /* Remove contain: layout to prevent rendering optimization conflicts */
-            backface-visibility: hidden; // Prevent rendering glitches
-            -webkit-backface-visibility: hidden;
-            isolation: isolate;
-
-            &:hover,
-            &.active {
-                background: var(--primary-color);
-                transform: translateZ(0) scale(1.05); // Slight scale on hover
+            transform: none;
+            cursor: pointer;
+
+            &:hover {
+                background: rgba(0, 0, 0, 0.08);
 
                 svg {
-                    color: var(--tertiary-color);
+                    color: var(--primary-color) !important;
                 }
             }
+
+            &.active,
+            &[aria-expanded='true'] {
+                background: rgba(0, 0, 0, 0.08);
+
+                svg {
+                    color: var(
+                        --nav-active-bar-color,
+                        var(--highlight-color, var(--primary-color))
+                    ) !important;
+                }
+            }
+
+            &:focus-visible {
+                outline: 2px solid
+                    var(
+                        --nav-active-bar-color,
+                        var(--highlight-color, var(--primary-color))
+                    );
+                outline-offset: 2px;
+            }
+
+            svg {
+                color: var(--paragraph-color, #2b2b2b);
+            }
+        }
+
+        /* Wrapper elements around a mounted component's own trigger, as in
+           `.hactions`. */
+        > li > div:not([data-nav-overlay] *),
+        > li > span:not([data-nav-overlay] *) {
+            display: flex;
+            align-items: center;
+        }
+
+        > li button:not([data-nav-overlay] *) {
+            width: var(--nav-action-size, 34px);
+            height: var(--nav-action-size, 34px);
+            min-width: var(--nav-action-size, 34px);
+            padding: 0;
+            border: none;
+            border-radius: var(
+                --nav-chip-radius,
+                var(--radius-pill, 999px)
+            ) !important;
+            background: none;
+            transform: none !important;
         }
     }
 }
-
 .cwrap {
     display: flex;
 }