@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/anchor/anchor-nav.css.js

@@ -1,14 +1,11 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export const anchorNavStyles = css`
   :host {
     display: block;
     width: 100%;
-    background: var(--color-neutral-0);
-    --bd-accesibility-focus: var(--color-blue-500);
-    --anchor-nav-max-width: 1290px;
-    border-top: var(--border-width-1) solid var(--color-neutral-100);
-    border-bottom: var(--border-width-1) solid var(--color-neutral-100);
+    background: var(--color-surface-default);
   }
 
   :host(.is-sticky) {
@@ -17,11 +14,7 @@ export const anchorNavStyles = css`
     left: var(--sticky-left, 0);
     width: var(--sticky-width, 100%);
     box-shadow: var(--shadow-sm);
-    z-index: 1000;
-  }
-
-  :host(.is-sticky) nav {
-    background: var(--color-neutral-0);
+    z-index: var(--z-sticky);
   }
 
   nav {
@@ -30,6 +23,13 @@ export const anchorNavStyles = css`
     padding: var(--spacing-0);
     width: 100%;
     box-sizing: border-box;
+    border-top: var(--border-width-1) solid var(--color-border-container);
+    border-bottom: var(--border-width-1) solid var(--color-border-container);
+  }
+
+  /* Când e sticky, păstrăm aceleași border-uri */
+  :host(.is-sticky) nav {
+    background: var(--color-surface-default);
   }
 
   .bd-anchor-nav__inner {
@@ -39,20 +39,30 @@ export const anchorNavStyles = css`
     align-items: center;
     gap: var(--spacing-32);
     width: 100%;
-    max-width: var(--anchor-nav-max-width);
     padding-block: var(--spacing-10);
-    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
-    margin-inline: auto;
     box-sizing: border-box;
   }
 
-  .anchor-link:focus-visible,
-  .bd-anchor-nav__cta:focus-visible,
+  /* No .anchor-link:focus-visible. .anchor-link is the class this component
+     puts on a bd-link HOST, and the focusable anchor lives inside bd-link's own
+     shadow root -- a host without delegatesFocus matches :focus and
+     :focus-within when focus is inside it, and never :focus-visible. Measured
+     with a real keyboard Tab at 1440: 4 .anchor-link hosts, 1 matching :focus,
+     0 matching :focus-visible, box-shadow none on all four. bd-link carries the
+     one ring and the links get it; the two selectors left here are a real
+     button and a real anchor in this shadow root. */
   .bd-anchor-nav__dropdown-toggle:focus-visible,
   .bd-anchor-nav__dropdown-option:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
+    /* the one focus ring — see Foundations/Focus */
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    /* No border-radius here, for the reason back.css.js records: the ring is a
+       box-shadow and already follows the shape of what it sits on, and both of
+       these have a radius of their own -- --radius-lg on the toggle,
+       --radius-md on the option. Setting --focus-outline-radius as well pulled
+       the toggle's corners from 8px to 4px, and the option's from 6px to 4px,
+       for as long as either was focused. That token is the default for an
+       element with NO radius, which is what Foundations/Focus says. */
   }
 
   .anchor-links {
@@ -60,7 +70,11 @@ export const anchorNavStyles = css`
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--spacing-16) var(--spacing-32);
+    /* Column gap and row gap say different things here, so they are spelled
+       apart. The shorthand carried a --spacing-16 row gap that the next
+       declaration overrode on the following line: measured row-gap 8px, so the
+       16 was never a value anyone could read off the screen. */
+    column-gap: var(--spacing-32);
     row-gap: var(--spacing-8);
     flex: 1 1 auto;
     min-width: 0;
@@ -71,61 +85,92 @@ export const anchorNavStyles = css`
   .anchor-link {
     position: relative;
     text-decoration: none;
-    color: var(--color-neutral-900);
-    font-weight: var(--typography-fontWeight-normal);
-    padding: var(--spacing-10) var(--spacing-0);
+    color: var(--color-text-primary);
+    /* No font-weight: body-regular, whose size this rule already asks for, is
+       normal -- and the inherited weight here is 400 too, measured, so the
+       declaration said nothing. .anchor-link.active still sets its own. */
     display: inline-block;
     font-size: var(--typography-body-regular-fontSize);
     font-family: var(--typography-body-regular-fontFamily);
     transition: color var(--transition-duration-fast) var(--transition-easing-smooth);
   }
 
+  /* The padding belongs to the PART, not to the host.
+
+     A host's padding does not extend the anchor inside it, so this rule used
+     to build a 44px-tall row around a 24px-tall target: measured 63x44 on the
+     host with a 63x24 <a> inside it, and elementsFromPoint 4px below the top
+     edge came back bd-anchor-nav > bd-root > div with no <a> in the stack at
+     all. The top and bottom 10px of every item were dead, 45% of the height a
+     reader aims at.
+
+     It is also why the focus ring wrapped the glyphs rather than the item: the
+     ring is drawn on whatever element is focusable, and that was the 24px
+     anchor. One boundary, two symptoms.
+
+     bd-breadcrumb already fixed exactly this by moving its padding onto
+     ::part(link) -- its comment records a 343x40 row whose focusable anchor
+     was 43x24 -- and this is the same move. Layout is unchanged: the host has
+     no padding now but wraps an anchor that does, so it still measures 44px
+     and the indicator's offset still lands on the bar's bottom edge. */
+  .anchor-link::part(link) {
+    padding: var(--spacing-10) var(--spacing-0);
+  }
+
   .anchor-link.active {
+    /* no role: the active item in the anchor nav -- a state or modifier weight, not a text-content
+       type. See button.css.js's .button--bold for the argument. */
     font-weight: var(--typography-fontWeight-semibold);
-    color: var(--color-neutral-900);
+    color: var(--color-text-primary);
   }
 
-  .anchor-link,
-  .anchor-link.bd-link,
-  .anchor-link.bd-link--primary,
-  .anchor-link.bd-link--secondary {
+  /* The .bd-link--primary / --secondary selectors that used to accompany these
+     matched nothing: bd-link is a custom element and those classes live inside
+     its shadow root, unreachable from here. Measured zero matches for
+     .bd-link--primary, .bd-link--secondary and .anchor-link.bd-link, against
+     four live .anchor-link elements. Only the reachable selectors remain. */
+  .anchor-link {
     text-decoration: none !important;
   }
 
-  .anchor-link:hover,
-  .anchor-link.bd-link:hover,
-  .anchor-link.bd-link--primary:hover,
-  .anchor-link.bd-link--secondary:hover {
+  .anchor-link:hover {
     text-decoration: none !important;
   }
 
-  .anchor-link.bd-link--primary:hover {
-    color: var(--color-blue-500) !important;
+  .anchor-link.active:hover {
+    color: var(--color-text-primary) !important;
+    text-decoration: none !important;
   }
 
-  .anchor-link.bd-link--secondary:hover {
-    color: var(--color-neutral-900) !important;
-  }
+  /* The offset has to equal the inner's padding-bottom, and it did not.
 
-  .anchor-link.active:hover,
-  .anchor-link.active.bd-link--primary:hover,
-  .anchor-link.active.bd-link--secondary:hover {
-    color: var(--color-neutral-900) !important;
-    text-decoration: none !important;
-  }
+     The indicator is absolute inside the link box, and what it is aiming for
+     is the bar's bottom edge -- so the distance it has to travel is exactly
+     the padding the inner adds below the link. This rule said 14, which is
+     bd-page-switcher's number and not this component's: the inner here pads
+     10, so the indicator overshot by 4 and rendered BELOW the nav's bottom
+     border, detached from the bar it belongs to.
+
+     Measured before, at 1440 with the nav 66px tall including its borders:
+     link box bottom at 55, indicator occupying 66-69, nav bottom edge at 66.
+     After: 62-65, sitting directly on the border.
 
-   .anchor-indicator {
+     The indicator is now one element that slides between items rather than
+     an ::after per link, so the offset lives in _updateIndicator(), which
+     reads the inner's padding-bottom instead of a number -- the two move
+     together. */
+  .anchor-indicator {
     position: absolute;
-    left: 0;
-    top: 0;
+    left: var(--spacing-0);
+    top: var(--spacing-0);
     width: 0;
-    height: var(--border-width-3);
-    background-color: var(--color-blue-500);
+    height: var(--indicator-underline-height);
+    background-color: var(--indicator-color);
     transform: translateX(0);
     transition:
-      transform var(--transition-duration-slow) var(--transition-easing-ease-out),
-      top var(--transition-duration-slow) var(--transition-easing-ease-out),
-      width var(--transition-duration-slow) var(--transition-easing-ease-out);
+      transform var(--indicator-underline-duration) var(--indicator-underline-easing),
+      top var(--indicator-underline-duration) var(--indicator-underline-easing),
+      width var(--indicator-underline-duration) var(--indicator-underline-easing);
     pointer-events: none;
   }
 
@@ -143,16 +188,34 @@ export const anchorNavStyles = css`
     justify-content: space-between;
     gap: var(--spacing-12);
     width: 100%;
-    min-height: var(--dimension-48px);
+    min-height: var(--dimension-48);
     padding-block: var(--spacing-10);
     padding-inline: var(--spacing-16);
     box-sizing: border-box;
     font-family: var(--typography-fontFamily-sans);
     font-size: var(--typography-body-regular-fontSize);
+    /* The leading that belongs to the size above. It was absent, so the label
+       and the ellipsised text inside it were laid out on IBM Plex Sans's own
+       "normal" metric -- a leading nobody chose, and one that stops being 1.25
+       the moment the font falls back. */
+    line-height: var(--typography-body-regular-lineHeight);
+    /* no role: the weight of a control, not a text-content type -- see
+       button.css.js's .button--bold. Nothing in the vocabulary carries semibold
+       at a body size anyway: all ten heavy-weight roles are headings or display
+       steps at 2xl and up. */
     font-weight: var(--typography-fontWeight-semibold);
-    color: var(--color-neutral-900);
+    color: var(--color-text-primary);
+    /* no role: --color-surface-container is neutral-25 exactly, and it is the
+       wrong role -- it means "the ground of a self-contained object, a card, a
+       tile, a panel", and this is a control somebody operates. The control
+       families cannot say it either: --form-input-default-backgroundColor is
+       white, and this toggle deliberately sits one step off it. A ground for a
+       bordered control at rest has no role, and this is its one consumer. */
     background: var(--color-neutral-25);
-    border: var(--border-width-1) solid var(--color-neutral-200);
+    /* A control edge, so it takes the role the form-field atom uses for one.
+       neutral-200 is border-subtle's value, which is documented as the wrong
+       role for the edge of something a person operates. */
+    border: var(--border-width-1) solid var(--color-border-default);
     border-radius: var(--radius-lg);
     cursor: pointer;
     text-align: left;
@@ -163,12 +226,34 @@ export const anchorNavStyles = css`
   }
 
   .bd-anchor-nav__dropdown-toggle:hover {
-    background: var(--color-neutral-50);
-    border-color: var(--color-neutral-300);
+    background: var(--color-surface-subtle);
+    /* The edge of a bordered control under the pointer, and this package
+       already had an answer for it: radio.css.js and checkbox.css.js both take
+       --color-action-primary-hover for exactly this job, four declarations
+       across two atoms. This rule was the only one on a primitive.
+       .
+       Measured against this toggle's own hover ground (--color-surface-subtle):
+       neutral-500 was 4.17:1 and blue-600 is 5.51:1, so the adoption improves
+       the edge rather than trading contrast for consistency. The visible change
+       is that the hover edge goes from grey to blue, which is what radio and
+       checkbox already do.
+       .
+       Note the token is an ACTION role rather than a --color-border-* one. That
+       is deliberate and is how the two atoms use it too: an interaction state
+       is the job, and the border roles describe permanence -- default, subtle,
+       strong -- not what a control does under a pointer. */
+    border-color: var(--color-action-primary-hover);
   }
 
   .bd-anchor-nav__dropdown-toggle[aria-expanded="true"] {
-    background: var(--color-neutral-50);
+    background: var(--color-surface-subtle);
+    /* no role: the edge while the panel is open. No border role sits at
+       blue-200 -- only --status-brand-border and --status-info-border, and an
+       open disclosure is neither a brand nor an information STATUS. The nearest
+       control token is --form-input-focus-borderColor, which is blue-500 and
+       means focused rather than expanded; the two states are independent here,
+       since the toggle can be focused and closed. Expanded has no vocabulary
+       in either control family. */
     border-color: var(--color-blue-200);
   }
 
@@ -181,16 +266,26 @@ export const anchorNavStyles = css`
     transform-origin: left center;
   }
 
+  /* The mark inside is bd-arrow-down-icon, the same atom bd-custom-dropdown's
+     caret and the accordion's toggle use. It was an inline stroked svg written
+     into the template -- stroke-width 2 with round caps, so a visibly different
+     chevron from the filled one the rest of the package draws, and invisible to
+     check:icons. This span keeps the colour and the rotation; the icon reads
+     currentColor from it, which is what every icon site here does. */
   .bd-anchor-nav__dropdown-chevron {
     flex: 0 0 auto;
     display: flex;
-    color: var(--color-neutral-600);
+    color: var(--color-text-muted);
     transition: transform var(--transition-duration-normal) var(--transition-easing-smooth);
   }
 
   .bd-anchor-nav__dropdown-toggle[aria-expanded="true"] .bd-anchor-nav__dropdown-chevron {
     transform: rotate(180deg);
-    color: var(--color-blue-500);
+    /* The brand ink, matching the resting state three rules up, which already reads
+       --color-text-muted. A chevron is a currentColor glyph, so it takes the ink role
+       of its context -- the answer ten other icon sites in this package already give.
+       Visible: 4.05:1 -> 5.51:1 on the toggle's grey tint. */
+    color: var(--color-text-brand);
   }
 
   .bd-anchor-nav__dropdown-panel {
@@ -198,13 +293,13 @@ export const anchorNavStyles = css`
     left: var(--spacing-0);
     right: var(--spacing-0);
     top: 100%;
-    z-index: 1001;
+    z-index: var(--z-overlay);
     max-height: min(50vh, 20rem);
     overflow-y: auto;
-    background: var(--color-neutral-0);
+    background: var(--color-surface-default);
     border: var(--border-width-1) solid var(--color-blue-200);
     border-top: none;
-    border-radius: var(--spacing-0) var(--spacing-0) var(--radius-lg) var(--radius-lg);
+    border-radius: var(--radius-none) var(--radius-none) var(--radius-lg) var(--radius-lg);
     box-shadow: var(--shadow-md);
   }
 
@@ -221,14 +316,26 @@ export const anchorNavStyles = css`
     display: flex;
     align-items: center;
     width: 100%;
-    min-height: var(--dimension-48px);
+    text-decoration: none;
+    min-height: var(--dimension-48);
     padding-block: var(--spacing-12);
     padding-inline: var(--spacing-16);
     box-sizing: border-box;
     font-family: var(--typography-fontFamily-sans);
     font-size: var(--typography-body-regular-fontSize);
-    font-weight: var(--typography-fontWeight-normal);
-    color: var(--color-neutral-900);
+    /* As the toggle above: the size named its role and the leading did not
+       follow it. This one can wrap -- a long section title in a narrow
+       dropdown -- and CLAUDE.md asks for at least 1.25 on anything that can. */
+    line-height: var(--typography-body-regular-lineHeight);
+    /* No font-weight: as .anchor-link above -- body-regular is normal and so is
+       the inherited value. The --active variant sets its own. */
+    /* text/brand, the same resting ink the desktop items take. This is the
+       same component below md showing the same items, so it expresses the same
+       meaning: colour is AVAILABLE and neutral is current. It read
+       text/primary here, which made the current option the only blue one --
+       the inverse of the family, and the arrangement the desktop bar was just
+       moved off. */
+    color: var(--color-text-brand);
     background: transparent;
     border: none;
     border-radius: var(--radius-md);
@@ -239,19 +346,40 @@ export const anchorNavStyles = css`
       background var(--transition-duration-fast) var(--transition-easing-smooth);
   }
 
+  /* Hover on a dropdown option is the action responsibility, and it is now the
+     same step the desktop items hover to -- action/primary-active rather than
+     -hover, so brand darkens the same way in both presentations. blue-700 on
+     the --color-neutral-25 this hover sets measures 8.19:1; the blue-500 that
+     stood here before either role measured 4.34 and failed. The background is
+     the dropdown's own affordance and is not part of the ink contract. */
   .bd-anchor-nav__dropdown-option:hover:not(.bd-anchor-nav__dropdown-option--active) {
-    color: var(--color-blue-500);
+    color: var(--color-action-primary-active);
     background: var(--color-neutral-25);
   }
 
+  /* The current option, in the family's terms: neutral ink at the weight the
+     other two use for the same job, and the blue-50 fill is this presentation's
+     indicator -- a dropdown row has no bottom edge to underline, so the fill
+     carries what the 3px line carries on the bars.
+
+     It used to be action/primary-active, which was defensible on its own
+     terms -- an option with aria-current, a click handler and a tinted fill is
+     an interactive element in an engaged state -- but it made the current item
+     the bluest thing in the list while every other item was neutral. Under one
+     contract for the whole family that reading is inverted: colour marks what
+     you can go to, neutral marks where you are. */
   .bd-anchor-nav__dropdown-option--active {
-    font-weight: var(--typography-fontWeight-semibold);
+    /* no role: the weight that marks the current option -- a state or modifier
+       weight, not a text-content type. 700, the same as bd-link's
+       .bd-link--active and bd-tab-list's selected tab. */
+    font-weight: var(--typography-fontWeight-bold);
     background: var(--color-blue-50);
-    color: var(--color-blue-700);
+    color: var(--color-text-primary);
   }
 
+  /* The current option does not move under the pointer, as on the bars. */
   .bd-anchor-nav__dropdown-option--active:hover {
-    color: var(--color-blue-700);
+    color: var(--color-text-primary);
     background: var(--color-blue-50);
   }
 
@@ -259,33 +387,13 @@ export const anchorNavStyles = css`
     flex-shrink: 0;
   }
 
-  .bd-anchor-nav__cta {
-    font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-fontSize-lg);
-    font-weight: var(--typography-fontWeight-semibold);
-    line-height: var(--typography-lineHeight-normal);
-    padding: var(--spacing-10) var(--spacing-20);
-    border: none;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    background: var(--color-red-500);
-    color: var(--color-neutral-0);
-    text-decoration: none !important;
-    transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
-  }
-
-  .bd-anchor-nav__cta:hover {
-    background: var(--color-red-600);
-    color: var(--color-neutral-0);
-    text-decoration: none !important;
-  }
-
-  .bd-anchor-nav__cta:active {
-    background: var(--color-red-700);
-    color: var(--color-neutral-0);
-  }
-
-  .bd-anchor-nav__cta::after {
+  /* The .bd-anchor-nav__cta rules stood here: a base rule, hover, active,
+     focus-visible, an ::after reset and a full-width rule below md. The class
+     appears nowhere but this stylesheet -- not in anchor-nav.js, not in a story
+     -- because the CTA became a slot, and ::slotted([slot="cta"]) one rule up
+     is what styles it now. Measured across 556 stories: 0 matches in 14 shadow
+     roots. */
+  .bd-anchor-nav__dropdown-option::after {
     display: none;
   }
 
@@ -302,9 +410,17 @@ export const anchorNavStyles = css`
       transition: none !important;
       animation: none !important;
     }
+
+    /* The underline grows via a transition, not an animation, so the rule
+       above never reached it. Same for the chevron and the option hover. */
+    .anchor-link,
+    .bd-anchor-nav__dropdown-chevron,
+    .bd-anchor-nav__dropdown-option {
+      transition: none !important;
+    }
   }
 
-  @media (max-width: 768px) {
+  @media ${unsafeCSS(below('md'))} {
     .bd-anchor-nav__inner {
       flex-direction: column;
       align-items: stretch;
@@ -344,9 +460,5 @@ export const anchorNavStyles = css`
       margin-top: var(--spacing-0);
     }
 
-    .bd-anchor-nav__cta {
-      width: 100%;
-      box-sizing: border-box;
-    }
   }
 `;

package/src/components/anchor/anchor-nav.js

@@ -1,8 +1,12 @@
-import { LitElement, html, nothing } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+import { LitElement, html, nothing } from "lit";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
+import "../icons/arrow-down-icon.js";
 import "../button/button.js";
 import "../link/link.js";
 import { anchorNavStyles } from "./anchor-nav.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
+import { matchesBelow } from "../shared/token-scales.js";
 
 function parseLengthToPx(value) {
   const s = (value || "").trim();
@@ -37,7 +41,7 @@ class BdAnchorNav extends LitElement {
     stickyTop         : { type: String, attribute: "sticky-top" }
   };
 
-  static styles = [tokens, anchorNavStyles];
+  static styles = [ensembleCSS, anchorNavStyles];
 
   constructor() {
     super();
@@ -122,11 +126,6 @@ class BdAnchorNav extends LitElement {
     const links = this.renderRoot?.querySelector(".anchor-links--desktop");
     if (links && "ResizeObserver" in window) {
       this._indicatorResizeObserver = new ResizeObserver(() => {
-        console.log("[anchor-nav] ResizeObserver fired", {
-          isSticky : this.classList.contains("is-sticky"),
-          navRect  : this.getBoundingClientRect(),
-          linksRect: links.getBoundingClientRect()
-        });
         this._updateIndicator("ResizeObserver");
       });
       this._indicatorResizeObserver.observe(links);
@@ -143,7 +142,10 @@ class BdAnchorNav extends LitElement {
 
     const left  = activeLink.offsetLeft;
     const width = activeLink.offsetWidth;
-    const top   = activeLink.offsetTop + activeLink.offsetHeight + 14;
+    // The bar's bottom edge is the inner's padding-bottom below the link.
+    const inner = this.renderRoot.querySelector(".bd-anchor-nav__inner");
+    const gap   = inner ? parseFloat(getComputedStyle(inner).paddingBottom) || 0 : 0;
+    const top   = activeLink.offsetTop + activeLink.offsetHeight + gap;
 
     if (!this._indicatorReady) {
       indicator.style.transition = "none";
@@ -167,7 +169,7 @@ class BdAnchorNav extends LitElement {
   }
 
   _handleMobileFullWidth() {
-    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const isMobile = matchesBelow('md');
     const ctaSlot = this.shadowRoot?.querySelector('slot[name="cta"]');
 
     if (!ctaSlot) return;
@@ -242,17 +244,6 @@ class BdAnchorNav extends LitElement {
       this._onStickyScroll();
     };
 
-    this._onStickyResize = () => {
-      this._stickyOriginalTop = null;
-      if (this.classList.contains("is-sticky")) {
-        const parent     = this.parentElement;
-        const parentRect = parent.getBoundingClientRect();
-        this.style.setProperty("--sticky-left",  `${parentRect.left}px`);
-        this.style.setProperty("--sticky-width", `${parentRect.width}px`);
-      }
-      this._onStickyScroll();
-    };
-
     window.addEventListener("scroll", this._onStickyScroll, { passive: true });
     window.addEventListener("resize", this._onStickyResize, { passive: true });
     requestAnimationFrame(() => this._onStickyScroll());
@@ -318,6 +309,8 @@ class BdAnchorNav extends LitElement {
     if (e.key === "Escape" && this._dropdownOpen) {
       this._dropdownOpen = false;
       this.requestUpdate();
+      this.updateComplete.then(() =>
+        this.renderRoot?.querySelector(".bd-anchor-nav__dropdown-toggle")?.focus());
     }
   }
 
@@ -372,7 +365,7 @@ class BdAnchorNav extends LitElement {
       }
     }
 
-    const isMobile  = window.matchMedia("(max-width: 768px)").matches;
+    const isMobile  = matchesBelow('md');
     const firstHref = resolved[0]?.href.replace(/^#/, "") || "anchor-1-section";
     const first     = document.getElementById(firstHref);
     let nextCta;
@@ -390,7 +383,7 @@ class BdAnchorNav extends LitElement {
   _playMobileDropdownLabelSwap() {
     if (typeof window === "undefined") return;
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-    if (!window.matchMedia("(max-width: 768px)").matches) return;
+    if (!matchesBelow('md')) return;
     const el = this.renderRoot?.querySelector(".bd-anchor-nav__dropdown-label");
     if (!el) return;
     el.classList.remove("bd-anchor-nav__dropdown-label--swap");
@@ -475,12 +468,11 @@ class BdAnchorNav extends LitElement {
           return html`
             <bd-link
               href="${href}"
-              kind="${isActive ? "primary" : "secondary"}"
+              variant="primary"
               no-underline
               class="anchor-link ${isActive ? "active" : ""}"
-              color="var(--color-neutral-900)"
               ?active=${isActive}
-              aria-current=${isActive ? "true" : nothing}
+              aria-current=${isActive ? "location" : nothing}
               @click=${(e) => this.handleClick(e, id, href)}
             >${title}</bd-link>
           `;
@@ -494,7 +486,7 @@ class BdAnchorNav extends LitElement {
     return html`
       <nav aria-label=${this.navLabel}>
         <div
-          class="bd-anchor-nav__inner"
+          class="bd-ensemble bd-anchor-nav__inner"
           part="inner"
           style="${innerStyle}"
           ?data-mobile-cta-visible=${this._mobileCtaRevealed}
@@ -507,35 +499,29 @@ class BdAnchorNav extends LitElement {
               class="bd-anchor-nav__dropdown-toggle"
               aria-expanded=${this._dropdownOpen ? "true" : "false"}
               aria-controls=${this._panelId}
-              aria-haspopup="listbox"
               @click=${this._toggleDropdown}
             >
               <span class="bd-anchor-nav__dropdown-label">${dropdownLabel}</span>
               <span class="bd-anchor-nav__dropdown-chevron" aria-hidden="true">
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <path d="M5 8l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
+                <bd-arrow-down-icon size="md"></bd-arrow-down-icon>
               </span>
             </button>
             <div
               class="bd-anchor-nav__dropdown-panel"
               id=${this._panelId}
-              role="listbox"
-              aria-label=${this.navLabel}
               ?hidden=${!this._dropdownOpen}
             >
-              <ul class="bd-anchor-nav__dropdown-list" role="presentation">
+              <ul class="bd-anchor-nav__dropdown-list">
                 ${resolved.map(({ id, title, href }) => {
                   const isActive = this.activeId === id;
                   return html`
-                    <li role="presentation">
-                      <button
-                        type="button"
-                        role="option"
+                    <li>
+                      <a
+                        href="${href}"
                         class="bd-anchor-nav__dropdown-option ${isActive ? "bd-anchor-nav__dropdown-option--active" : ""}"
-                        aria-selected=${isActive ? "true" : "false"}
+                        aria-current=${isActive ? "location" : nothing}
                         @click=${(e) => this._selectFromDropdown(e, id, href)}
-                      >${title}</button>
+                      >${title}</a>
                     </li>
                   `;
                 })}