@xplortech/apollo-core 2.10.0 → 2.11.0

package/.typings/apollo-components.html-data.json

@@ -2846,20 +2846,24 @@
       "name": "xpl-top-nav-item",
       "description": {
         "kind": "markdown",
-        "value": "Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`**. The host uses **`role=\"listitem\"`** when the row\nparticipates in a list: a **`role=\"list\"`** parent, **`slot=\"left-aside\"`** on **`xpl-top-nav`** (list host is\n**`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of **`xpl-top-nav`**), or default-slot rows\nunder **`xpl-nav-header-menu`**. That flag is\nkept in **`@State`** and refreshed after render plus via **`MutationObserver`** on the host (**`class`**, **`slot`**) and\non **`parentElement`** (**`role`**) or on **`.xpl-top-nav__left-primary`** (**`role`**) for **`slot=\"left-aside\"`** under **`xpl-top-nav`**) so DOM context changes\nwithout a full reconnect still re-sync. The internal\n**`xpl-top-nav__brand`** row omits **`listitem`** (it sits in **`.xpl-top-nav__brand-bar`**, not **`.xpl-top-nav__left-primary`**),\nas do **`slot=\"right-aside-mobile\"`** rows (not a list). **`slot=\"dropdown\"`** uses a local **`.xpl-top-nav-item__dropdown`**\npanel (not **`xpl-dropdown`**); see **`TECH_DEBT.md`**.\n\n**Default slot (no `label`):** do not put **`xpl-top-nav-item__inner`** or other **`xpl-top-nav-item__*`** classes on\ncustom trigger content — the component renders the inner wrapper and BEM elements.\n\n**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode\nvalues even when the page root is light (consistent with **`xpl-top-nav`**)."
+        "value": "Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. The host uses\n**`role=\"listitem\"`** when the row participates in a list: a **`role=\"list\"`** parent, **`slot=\"left-aside\"`** on\n**`xpl-top-nav`** (list host is **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of\n**`xpl-top-nav`**), or default-slot rows under **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. That flag is\nkept in **`@State`** and refreshed after render plus via **`MutationObserver`** on the host (**`class`**, **`slot`**) and\non **`parentElement`** (**`role`**) or on **`.xpl-top-nav__left-primary`** (**`role`**) for **`slot=\"left-aside\"`** under **`xpl-top-nav`**) so DOM context changes\nwithout a full reconnect still re-sync. The internal\n**`xpl-top-nav__brand`** row omits **`listitem`** (it sits in **`.xpl-top-nav__brand-bar`**, not **`.xpl-top-nav__left-primary`**),\nas do **`slot=\"right-aside-mobile\"`** rows (not a list). **`slot=\"dropdown\"`** uses a local **`.xpl-top-nav-item__dropdown`**\npanel (not **`xpl-dropdown`**); see **`TECH_DEBT.md`**.\n\n**This component does triple duty:** a plain bar item, a dropdown trigger (**`slot=\"dropdown\"`** present), and a\ndropdown/menu **row** (nested inside **`xpl-nav-header-menu`** or **`xpl-top-nav-menu`**). The **`description`** prop\nonly applies in the row context — bar items and triggers do not show it in Figma.\n\n**Default slot (no `label`):** do not put **`xpl-top-nav-item__inner`** or other **`xpl-top-nav-item__*`** classes on\ncustom trigger content — the component renders the inner wrapper and BEM elements.\n\n**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode\nvalues even when the page root is light (consistent with **`xpl-top-nav`**)."
       },
       "attributes": [
         {
           "name": "active",
           "description": "When true, adds **`xpl-top-nav-item--active`** for persistent accent styling (e.g. link color on the bar, or\nchrome inside **`xpl-nav-header-menu`**). Separate from **`selected`**, which sets **`aria-current=\"page\"`** and\n**`--selected`**. Use both when the design needs “current page” semantics plus the active visual treatment."
         },
+        {
+          "name": "description",
+          "description": "Optional description line shown below **`label`** (row context only, e.g. inside **`xpl-nav-header-menu`** /\n**`xpl-top-nav-menu`**). Ignored when **`label`** is not set."
+        },
         {
           "name": "href",
           "description": "If set without **`slot=\"dropdown\"`**, the inner control renders as a native **`<a href>`** (link mode)."
         },
         {
           "name": "icon",
-          "description": "Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set)."
+          "description": "Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set). Ignored when\n**`slot=\"leading-icon\"`** content is present."
         },
         {
           "name": "item-aria-label",
@@ -2869,12 +2873,41 @@
           "name": "label",
           "description": "Text label. If omitted, use the default slot for custom trigger content. Long labels use **`text-ellipsis`**\non **`.xpl-top-nav-item__label`** (see `top-nav.css`); **`title`** is set to the full string for hover tooltips\nwhen the visual line clips."
         },
+        {
+          "name": "open",
+          "description": "Whether the **`slot=\"dropdown\"`** panel is open. Reflected to the **`open`** attribute so consumers can drive it\n(controlled) or read it back (uncontrolled, toggled internally on click / hover / keyboard activation). Prefer\n**`openMenu()`** / **`closeMenu()`** / **`toggleMenu()`** over setting this directly from event handlers."
+        },
+        {
+          "name": "open-mode",
+          "description": "How the **`slot=\"dropdown\"`** panel opens. **`hover`** is gated on **`TOP_NAV_ITEM_HOVER_OPEN_MQ`**\n(hover-capable, fine pointer, **`md`** and up) — below that, or on touch / coarse-pointer devices, **`hover`**\nfalls back to click/tap. Keyboard activation (Enter / Space) always toggles regardless of **`openMode`**.",
+          "values": [
+            {
+              "name": "click"
+            },
+            {
+              "name": "hover"
+            }
+          ]
+        },
         {
           "name": "selected",
           "description": "When true, sets **`aria-current=\"page\"`** and selected styling."
         }
       ]
     },
+    {
+      "name": "xpl-top-nav-menu",
+      "description": {
+        "kind": "markdown",
+        "value": "Thin grouping container for **`xpl-top-nav-item`** rows — the panel content for a desktop flyout\n(**`slot=\"dropdown\"`** on the parent **`xpl-top-nav-item`**) and, on small screens, the **mobile\ncascade**: the same markup drills in to a **Level 2** view in place, with an auto-rendered **back\nrow** (leading **`chevron-left`** + this component's **`label`**) as the first row. Tapping the back\nrow closes the parent trigger's dropdown (**`closeMenu()`**), returning to **Level 1** and restoring\nfocus to the parent trigger. No item logic otherwise lives here — row behavior (icons, description,\nlinks, nested dropdowns) is entirely **`xpl-top-nav-item`**.\n\n**One authoring markup, two renderings:** consumers write this once; **`isMobileCascade`** (synced\nfrom **`TOP_NAV_MOBILE_MQ`**) decides whether the back row renders. Desktop never sees it — the\nflyout is a single level of links (see `xpl-top-nav-item`'s cascade-depth notes).\n\n**Panel chrome** is shared with **`xpl-nav-header-menu`** (the account menu): width\n(**`--xpl-top-nav-panel-width`**), surface, shadow, radius, and vertical padding all come from the\nsame selector in `top-nav.css` so the desktop flyout, mobile cascade, and account menu read as one\nvisual family.\n\n**Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens\nresolve to dark-mode values even when the page root is light (consistent with the rest of the\n**`xpl-top-nav`** family)."
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Accessible name for the list (**`aria-label`** on the host) and the label shown in the mobile\ncascade back row when drilling back out of this group."
+        }
+      ]
+    },
     {
       "name": "xpl-utility-bar",
       "description": {

package/build/style.css

@@ -1419,7 +1419,7 @@ textarea[class^="xpl-"] {
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
   --tw-ring-offset-width: 0;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(59 130 246 / 50%);
+  --tw-ring-color: rgb(59 130 246 / 50%);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
 }
@@ -6617,7 +6617,6 @@ xpl-list .xpl-list__reorder-live {
 
 .xpl-list-item-subtext {
   color: var(--xpl-text-subdued);
-  word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
@@ -7132,8 +7131,8 @@ xpl-list-item .xpl-list-item__actions [slot="actions"] xpl-icon[role="button"] {
 
 .xpl-modal__dialog {
     box-shadow:
-      0 10px 15px -3px rgba(0 0 0 / 0.1),
-      0 4px 6px -2px rgba(0 0 0 / 0.05);
+      0 10px 15px -3px rgb(0 0 0 / 0.1),
+      0 4px 6px -2px rgb(0 0 0 / 0.05);
     border-radius: 1rem;
     padding: 1rem;
     --tw-text-opacity: 1;
@@ -8297,7 +8296,7 @@ xpl-list-item .xpl-list-item__actions [slot="actions"] xpl-icon[role="button"] {
 
 .xpl-secondary-nav nav::after {
         content: "";
-        background: linear-gradient(270deg, #fff 13.64%, rgba(255 255 255 / 0%) 89.53%);
+        background: linear-gradient(270deg, #fff 13.64%, rgb(255 255 255 / 0%) 89.53%);
         position: absolute;
         top: 0px;
         bottom: 0px;
@@ -8307,7 +8306,7 @@ xpl-list-item .xpl-list-item__actions [slot="actions"] xpl-icon[role="button"] {
     }
 
         .dark .xpl-secondary-nav nav::after {
-          background: linear-gradient(270deg, rgba(32 30 41 / 100%) 20%, rgb(32 30 41 / 15%) 89%);
+          background: linear-gradient(270deg, rgb(32 30 41 / 100%) 20%, rgb(32 30 41 / 15%) 89%);
         }
       }
 
@@ -8582,8 +8581,8 @@ span.xpl-placeholder--hidden,
 
     background-color: var(--xpl-color-foreground-lm);
     box-shadow:
-      -10px 0 15px -3px rgba(0 0 0 / 0.1),
-      4px 0 6px -2px rgba(0 0 0 / 0.05);
+      -10px 0 15px -3px rgb(0 0 0 / 0.1),
+      4px 0 6px -2px rgb(0 0 0 / 0.05);
     transform: translateX(0);
     transition: transform 0.5s ease-in-out
 }
@@ -8635,10 +8634,10 @@ span.xpl-placeholder--hidden,
 
 .xpl-slideout .slideout .content.has-shadow {
         box-shadow:
-          inset 0 4px 6px -1px rgba(0 0 0 / 0.1),
-          inset 0 2px 4px -1px rgba(0 0 0 / 0.06),
-          inset 0 -4px 6px -1px rgba(0 0 0 / 0.1),
-          inset 0 -2px 4px -1px rgba(0 0 0 / 0.06);
+          inset 0 4px 6px -1px rgb(0 0 0 / 0.1),
+          inset 0 2px 4px -1px rgb(0 0 0 / 0.06),
+          inset 0 -4px 6px -1px rgb(0 0 0 / 0.1),
+          inset 0 -2px 4px -1px rgb(0 0 0 / 0.06);
       }
 
 .xpl-slideout .slideout [slot="content"] {
@@ -9553,8 +9552,8 @@ span.xpl-placeholder--hidden,
   background-color: var(--xpl-color-secondary-bg-lm);
 
   box-shadow:
-    0 10px 15px -3px rgba(0 0 0/ 0.1),
-    0 4px 6px -2px rgba(0 0 0/ 0.05);
+    0 10px 15px -3px rgb(0 0 0/ 0.1),
+    0 4px 6px -2px rgb(0 0 0/ 0.05);
   animation: fadeIn 0.5s forwards
 }
 
@@ -9987,9 +9986,10 @@ span.xpl-placeholder--hidden,
 /* Constrain width on small screens so a long tooltip cannot overflow the viewport. Figma does not define a desktop max width, so the tooltip sizes to its content there. */
 
 @media screen and (max-width: 768px) {
-    .xpl-tooltip {
-      max-width: var(--xpl-size-700);
-    }
+
+.xpl-tooltip {
+    max-width: var(--xpl-size-700)
+}
   }
 
 /* Position variants */
@@ -10233,7 +10233,9 @@ xpl-top-nav-item.xpl-toolbar[hidden] {
   font-size: var(--xpl-font-size-title-4);
   color: var(--xpl-text-subdued);
   font-weight: var(--xpl-font-weight-medium);
-  gap: var(--xpl-space-4);
+
+  /* Figma: 8px gap between label and leading/trailing icon slots (matches every other context override below). */
+  gap: var(--xpl-space-8);
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -10245,21 +10247,23 @@ xpl-top-nav-item.xpl-toolbar[hidden] {
   white-space: nowrap;
 }
 
-/* xpl-nav-header-menu — host + inner base before shared bar `:focus-visible` */
+/* xpl-nav-header-menu / xpl-top-nav-menu — host + inner base before shared bar `:focus-visible` */
 
-xpl-nav-header-menu xpl-top-nav-item.xpl-top-nav-item {
+xpl-nav-header-menu xpl-top-nav-item.xpl-top-nav-item,
+xpl-top-nav-menu xpl-top-nav-item.xpl-top-nav-item {
   width: 100%;
   border-bottom-width: 0px
 }
 
-xpl-nav-header-menu xpl-top-nav-item > .xpl-top-nav-item__inner {
+xpl-nav-header-menu xpl-top-nav-item > .xpl-top-nav-item__inner,
+xpl-top-nav-menu xpl-top-nav-item > .xpl-top-nav-item__inner {
   padding: var(--xpl-space-10) var(--xpl-space-12);
   gap: var(--xpl-space-8);
   color: var(--xpl-text-default);
   justify-content: flex-start;
 }
 
-/* Focus is on the inner `<a>` / `<div role="button">` (tabIndex), not the host — use `:focus-visible` here (see side-nav.css). */
+/* Focus is on the inner `<a>` / `<button>` (tabIndex), not the host — use `:focus-visible` here (see side-nav.css). */
 
 xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible {
   outline-color: var(--xpl-border-focus);
@@ -10277,14 +10281,63 @@ xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible {
   white-space: nowrap;
 }
 
+/*
+ * Row context only (menu rows with a `description`): wraps label + description in a column so both share the
+ * flex-1 / min-w-0 track that `.xpl-top-nav-item__label` alone occupies in the no-description case above.
+ * No `display` beyond `flex flex-col` here — this wrapper (unlike `__leading` / `__trailing`) is not a bare
+ * icon slot column, it owns its own two-row layout (Figma "Label+Desc.").
+ */
+
+.xpl-top-nav-item__label-group {
+  gap: var(--xpl-space-0);
+  display: flex;
+  min-width: 0px;
+  flex: 1 1 0%;
+  flex-direction: column;
+}
+
+.xpl-top-nav-item__label-group .xpl-top-nav-item__label {
+  flex: none
+}
+
+.xpl-top-nav-item__description {
+  font-size: var(--xpl-font-size-callout);
+  color: var(--xpl-text-subdued);
+  margin: 0px;
+  min-width: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * Leading / trailing icon slot columns. Deliberately no `display` here (side-nav lesson, see
+ * `xpl-side-nav-item.tsx`): as flex items of `.xpl-top-nav-item__inner` (`display: flex`) they are
+ * blockified automatically, and the slotted `xpl-icon` handles its own internal centering. Adding
+ * `display: flex` / `display: grid` here mis-aligns the slotted icon's SVG.
+ */
+
+.xpl-top-nav-item__leading,
+.xpl-top-nav-item__trailing {
+  flex-shrink: 0
+}
+
 xpl-top-nav-item a,
 xpl-top-nav-item button {
   cursor: inherit;
   font: inherit;
+
+  /* Reset the native `<button>` UA chrome (grey background, system appearance, centered text) so the button-mode
+   * inner control renders identically to the anchor-mode one; `text-align` follows the label's own flex layout. */
+  text-align: inherit;
   margin: 0px;
   display: flex;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   align-items: center;
   border-width: 0px;
+  background-color: transparent;
   padding: 0px;
 }
 
@@ -10320,6 +10373,17 @@ xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner {
   font-weight: var(--xpl-font-weight-medium);
 }
 
+/*
+ * Active-descendant hook: a dropdown trigger whose panel contains an `--active` / `--selected` row (however deep)
+ * gets the same accent as `--active` itself, so a parent product/group stays highlighted while its current child
+ * is open elsewhere (e.g. desktop flyout, PR 2/3). Synced via `hasActiveDescendant` in `xpl-top-nav-item.tsx`.
+ */
+
+xpl-top-nav-item.xpl-top-nav-item--has-active-descendant > .xpl-top-nav-item__inner {
+  color: var(--xpl-text-link-default);
+  font-weight: var(--xpl-font-weight-medium);
+}
+
 /* Right side username (e.g. profile trigger): same as nav header username */
 
 .xpl-nav-right xpl-top-nav-item > .xpl-top-nav-item__inner {
@@ -10328,9 +10392,10 @@ xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner {
   gap: var(--xpl-space-8);
 }
 
-/* Account menu list rows (`xpl-nav-header-menu` default slot): row gap between icon and label */
+/* Menu list rows (`xpl-nav-header-menu` default slot, `xpl-top-nav-menu` default slot): row gap between icon and label */
 
-.xpl-nav-header-menu__slot xpl-top-nav-item > .xpl-top-nav-item__inner {
+.xpl-nav-header-menu__slot xpl-top-nav-item > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu xpl-top-nav-item > .xpl-top-nav-item__inner {
   gap: var(--xpl-space-8);
   font-size: var(--xpl-font-size-title-5);
   font-weight: var(--xpl-font-weight-normal);
@@ -10393,15 +10458,19 @@ xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
   margin-inline-start: var(--xpl-space-8);
 }
 
-/* xpl-nav-header-menu menu-row overrides after shared/brand bar item states. */
+/* xpl-nav-header-menu / xpl-top-nav-menu row overrides after shared/brand bar item states. */
 
 .xpl-nav-header-menu .xpl-top-nav-item:hover > .xpl-top-nav-item__inner,
-.xpl-nav-header-menu .xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible {
+.xpl-nav-header-menu .xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible,
+.xpl-top-nav-menu .xpl-top-nav-item:hover > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu .xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible {
   background-color: var(--xpl-background-action-tertiary-hover);
 }
 
 .xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active,
-.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--selected {
+.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--selected,
+.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active,
+.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--selected {
   border-right-width: 1px;
   border-style: solid;
 
@@ -10413,7 +10482,8 @@ xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
   background-color: var(--xpl-background-surface-transparent-0)
 }
 
-.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active {
+.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active,
+.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active {
   color: var(--xpl-text-link-default);
 }
 
@@ -10422,7 +10492,9 @@ xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
   */
 
 .xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active > .xpl-top-nav-item__inner,
-.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner {
+.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner {
   background-color: var(--xpl-background-surface-information);
   color: inherit;
   gap: var(--xpl-space-8);
@@ -10439,6 +10511,14 @@ xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
   .xpl-top-nav-item.xpl-top-nav-item--active
   > .xpl-top-nav-item__inner:focus-visible,
 .xpl-nav-header-menu
+  .xpl-top-nav-item.xpl-top-nav-item--selected
+  > .xpl-top-nav-item__inner:focus-visible,
+.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active:hover > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--selected:hover > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu
+  .xpl-top-nav-item.xpl-top-nav-item--active
+  > .xpl-top-nav-item__inner:focus-visible,
+.xpl-top-nav-menu
   .xpl-top-nav-item.xpl-top-nav-item--selected
   > .xpl-top-nav-item__inner:focus-visible {
   background-color: var(--xpl-background-surface-information);
@@ -10465,18 +10545,27 @@ xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
   color: var(--xpl-text-strong);
 }
 
-/* Non-current `xpl-nav-header-menu` rows: default text on hover/focus/active. */
+/* Non-current `xpl-nav-header-menu` / `xpl-top-nav-menu` rows: default text on hover/focus/active. */
 
 .xpl-nav-header-menu
   .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):hover
   > .xpl-top-nav-item__inner,
 .xpl-nav-header-menu
+  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected)
+  > .xpl-top-nav-item__inner:focus-visible,
+.xpl-top-nav-menu
+  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):hover
+  > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu
   .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected)
   > .xpl-top-nav-item__inner:focus-visible {
   color: var(--xpl-text-default);
 }
 
 .xpl-nav-header-menu
+  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):active
+  > .xpl-top-nav-item__inner,
+.xpl-top-nav-menu
   .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):active
   > .xpl-top-nav-item__inner {
   color: var(--xpl-text-default);
@@ -10523,7 +10612,9 @@ xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
 .xpl-top-nav-item .xpl-top-nav-item__dropdown {
   background: var(--xpl-background-surface-default);
   max-width: var(--xpl-top-nav-dropdown-max-width);
-  border-radius: var(--xpl-border-radius-default);
+
+  /* Figma: `XPL-Dropdown Menu` panel is bound to `border/radius/small` (4px), not the 8px default. */
+  border-radius: var(--xpl-border-radius-small);
   padding: var(--xpl-space-8) var(--xpl-space-0);
   z-index: var(--xpl-z-index-600);
   position: absolute;
@@ -10547,6 +10638,24 @@ xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
   display: block
 }
 
+/*
+ * `xpl-top-nav-menu` supplies its own panel chrome (background / shadow / radius — see the shared
+ * selector below) sized to `--xpl-top-nav-panel-width`, not the generic `max-width` this wrapper uses
+ * for arbitrary `slot="dropdown"` markup (e.g. a plain `<ul>`). Defer to it so the flyout doesn't
+ * double up background/shadow/radius — same pattern as `xpl-popover__content:has(xpl-nav-header-menu)`
+ * below deferring padding to the account menu.
+ */
+
+.xpl-top-nav-item .xpl-top-nav-item__dropdown:has(xpl-top-nav-menu) {
+  background: none;
+  max-width: none;
+  border-radius: var(--xpl-border-radius-none);
+  padding: var(--xpl-space-0);
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 /* Slotted links/controls in the local dropdown panel (not `.xpl-top-nav-item__inner`). */
 
 xpl-top-nav-item .xpl-top-nav-item__dropdown :focus-visible {
@@ -10561,6 +10670,15 @@ xpl-popover .xpl-popover__content:has(xpl-nav-header-menu) {
   padding: 0px
 }
 
+/*
+ * Shared panel chrome (desktop flyout, mobile cascade, account menu): same width and vertical
+ * padding for `xpl-top-nav-menu` and `xpl-nav-header-menu`. Background / shadow / radius are
+ * declared on `xpl-top-nav-menu` only, below — `xpl-nav-header-menu` already gets identical values
+ * from its `xpl-popover__content` ancestor (see `popover.css`), so duplicating them here would
+ * stack two shadows at the same edge.
+ */
+
+.xpl-top-nav-menu,
 .xpl-nav-header-menu {
   color: var(--xpl-text-default);
   width: var(--xpl-top-nav-panel-width);
@@ -10570,6 +10688,18 @@ xpl-popover .xpl-popover__content:has(xpl-nav-header-menu) {
   overflow: hidden;
 }
 
+.xpl-top-nav-menu {
+  background: var(--xpl-background-surface-default);
+
+  /* Figma: `XPL-Dropdown Menu` panel is bound to `border/radius/small` (4px), matching the
+   * `.xpl-top-nav-item__dropdown` panel this menu renders inside — not the 8px default. */
+  border-radius: var(--xpl-border-radius-small);
+  gap: var(--xpl-space-4);
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .xpl-nav-header-menu__profile {
     padding: var(--xpl-space-16) var(--xpl-space-0);
     border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
@@ -10958,9 +11088,11 @@ xpl-popover.xpl-top-nav__user-popover > .xpl-popover > span[role="button"]:focus
     color: var(--xpl-icon-subtle);
     fill: currentcolor;
 
-    /* Figma menu glyph 20px (`42002:35185`); `xpl-top-nav.tsx` passes `size={20}` for SVG output. */
-    height: var(--xpl-size-125);
-    width: var(--xpl-size-125);
+    /* Matches the side-nav drawer toggle glyph size; `xpl-top-nav.tsx` passes `size={32}` for SVG
+     * output. Container (`.xpl-top-nav__nav-control`) stays >= `--xpl-size-250` (40px, see MOBILE
+     * block) so the touch target does not shrink below WCAG target-size guidance as the glyph grows. */
+    height: var(--xpl-size-200);
+    width: var(--xpl-size-200);
     flex-shrink: 0;
   }
 
@@ -11229,6 +11361,99 @@ xpl-popover.xpl-top-nav__user-popover > .xpl-popover > span[role="button"]:focus
     align-items: stretch;
   }
 
+  /*
+    * Mobile cascade — Level 1 -> Level 2, in place (no second panel): tapping a `left-aside` parent's
+    * dropdown trigger (`xpl-top-nav-item` with `slot="dropdown"` holding an `xpl-top-nav-menu`) hides
+    * every OTHER parent group row, hides the open parent's own trigger row, and lets its
+    * `.xpl-top-nav-item__dropdown` (already `display: block` from `--dropdown-open`) render inline
+    * instead of as an absolute overlay — filling the drawer panel with the group's rows. The auto back
+    * row (leading `chevron-left` + the group's `label`) is rendered by `xpl-top-nav-menu` itself
+    * (`renderBackRow()`, gated on the same `TOP_NAV_MOBILE_MQ`); popping it calls `closeMenu()` on this
+    * same trigger, which removes `--dropdown-open` and reverses every rule below back to Level 1.
+    */
+  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
+    .xpl-top-nav__left-primary:has(
+      > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
+    )
+    > xpl-top-nav-item[slot="left-aside"]:not(.xpl-top-nav-item--dropdown-open) {
+    display: none
+  }
+
+.flatpickr-day.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
+    .xpl-top-nav__left-primary:has(
+      > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
+    )
+    > xpl-top-nav-item[slot="left-aside"]:not(.xpl-top-nav-item--dropdown-open){visibility:hidden}
+
+.xpl-toolbar.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
+    .xpl-top-nav__left-primary:has(
+      > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
+    )
+    > xpl-top-nav-item[slot="left-aside"]:not(.xpl-top-nav-item--dropdown-open) {
+  display: none;
+}
+
+  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
+    .xpl-top-nav__left-primary
+    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
+    > .xpl-top-nav-item__inner {
+    display: none
+  }
+
+.flatpickr-day.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
+    .xpl-top-nav__left-primary
+    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
+    > .xpl-top-nav-item__inner{visibility:hidden}
+
+.xpl-toolbar.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
+    .xpl-top-nav__left-primary
+    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
+    > .xpl-top-nav-item__inner {
+  display: none;
+}
+
+  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
+    .xpl-top-nav__left-primary
+    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
+    > .xpl-top-nav-item__dropdown {
+    position: static;
+    max-width: none;
+    display: block;
+    width: 100%;
+  }
+
+  /*
+    * `xpl-top-nav-menu` supplies its own self-contained panel chrome for the desktop flyout (see
+    * `top-nav.css` shared-selector block), but inside the mobile drawer it is filling a panel that
+    * already has its OWN background / border / shadow (`.xpl-top-nav__left-primary` above) — suppress
+    * the menu's chrome here so Level 2 reads as one continuous panel, not a nested card.
+    */
+  .xpl-top-nav__left-primary xpl-top-nav-menu {
+    background: none;
+    width: 100%;
+    border-radius: var(--xpl-border-radius-none);
+    padding: var(--xpl-space-0);
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+
+  /*
+    * Row sizing (mobile — Figma "Sm Screen" menu-item spec): 48px row via title-3 (20px) label height,
+    * 24px icons. Applies to the mobile cascade's Level 2 rows (including the auto back row) and,
+    * consistently, the account menu's rows on the same narrow viewports.
+    */
+  .xpl-top-nav-menu xpl-top-nav-item > .xpl-top-nav-item__inner,
+  .xpl-nav-header-menu xpl-top-nav-item > .xpl-top-nav-item__inner {
+    font-size: var(--xpl-font-size-title-3);
+  }
+
+  .xpl-top-nav-menu xpl-top-nav-item xpl-icon,
+  .xpl-nav-header-menu xpl-top-nav-item xpl-icon {
+    width: var(--xpl-size-150);
+    height: var(--xpl-size-150);
+  }
+
   /*
     * Figma (mobile): account menu rows — same hover surface as drawer; beats global `tertiary-hover` for narrow viewports.
     */