@xplortech/apollo-core 2.10.0 → 2.11.0

package/dist/types/components.d.ts

@@ -2069,16 +2069,19 @@ export namespace Components {
         "navControl"?: boolean;
     }
     /**
-     * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`**. The host uses **`role="listitem"`** when the row
-     * participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on **`xpl-top-nav`** (list host is
-     * **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of **`xpl-top-nav`**), or default-slot rows
-     * under **`xpl-nav-header-menu`**. That flag is
+     * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. The host uses
+     * **`role="listitem"`** when the row participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on
+     * **`xpl-top-nav`** (list host is **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of
+     * **`xpl-top-nav`**), or default-slot rows under **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. That flag is
      * kept in **`@State`** and refreshed after render plus via **`MutationObserver`** on the host (**`class`**, **`slot`**) and
      * on **`parentElement`** (**`role`**) or on **`.xpl-top-nav__left-primary`** (**`role`**) for **`slot="left-aside"`** under **`xpl-top-nav`**) so DOM context changes
      * without a full reconnect still re-sync. The internal
      * **`xpl-top-nav__brand`** row omits **`listitem`** (it sits in **`.xpl-top-nav__brand-bar`**, not **`.xpl-top-nav__left-primary`**),
      * as do **`slot="right-aside-mobile"`** rows (not a list). **`slot="dropdown"`** uses a local **`.xpl-top-nav-item__dropdown`**
      * panel (not **`xpl-dropdown`**); see **`TECH_DEBT.md`**.
+     * **This component does triple duty:** a plain bar item, a dropdown trigger (**`slot="dropdown"`** present), and a
+     * dropdown/menu **row** (nested inside **`xpl-nav-header-menu`** or **`xpl-top-nav-menu`**). The **`description`** prop
+     * only applies in the row context — bar items and triggers do not show it in Figma.
      * **Default slot (no `label`):** do not put **`xpl-top-nav-item__inner`** or other **`xpl-top-nav-item__*`** classes on
      * custom trigger content — the component renders the inner wrapper and BEM elements.
      * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode
@@ -2090,12 +2093,20 @@ export namespace Components {
           * @default false
          */
         "active": boolean;
+        /**
+          * No-op when there is no **`slot="dropdown"`** panel to open.
+         */
+        "closeMenu": () => Promise<void>;
+        /**
+          * Optional description line shown below **`label`** (row context only, e.g. inside **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**). Ignored when **`label`** is not set.
+         */
+        "description"?: string;
         /**
           * If set without **`slot="dropdown"`**, the inner control renders as a native **`<a href>`** (link mode).
          */
         "href"?: string;
         /**
-          * Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set).
+          * Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set). Ignored when **`slot="leading-icon"`** content is present.
           * @default ''
          */
         "icon": string;
@@ -2107,11 +2118,54 @@ export namespace Components {
           * Text label. If omitted, use the default slot for custom trigger content. Long labels use **`text-ellipsis`** on **`.xpl-top-nav-item__label`** (see `top-nav.css`); **`title`** is set to the full string for hover tooltips when the visual line clips.
          */
         "label"?: string;
+        /**
+          * Whether the **`slot="dropdown"`** panel is open. Reflected to the **`open`** attribute so consumers can drive it (controlled) or read it back (uncontrolled, toggled internally on click / hover / keyboard activation). Prefer **`openMenu()`** / **`closeMenu()`** / **`toggleMenu()`** over setting this directly from event handlers.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * No-op when there is no **`slot="dropdown"`** panel to open.
+         */
+        "openMenu": () => Promise<void>;
+        /**
+          * How the **`slot="dropdown"`** panel opens. **`hover`** is gated on **`TOP_NAV_ITEM_HOVER_OPEN_MQ`** (hover-capable, fine pointer, **`md`** and up) — below that, or on touch / coarse-pointer devices, **`hover`** falls back to click/tap. Keyboard activation (Enter / Space) always toggles regardless of **`openMode`**.
+          * @default 'click'
+         */
+        "openMode": 'click' | 'hover';
         /**
           * When true, sets **`aria-current="page"`** and selected styling.
           * @default false
          */
         "selected": boolean;
+        /**
+          * No-op when there is no **`slot="dropdown"`** panel to open.
+         */
+        "toggleMenu": () => Promise<void>;
+    }
+    /**
+     * Thin grouping container for **`xpl-top-nav-item`** rows — the panel content for a desktop flyout
+     * (**`slot="dropdown"`** on the parent **`xpl-top-nav-item`**) and, on small screens, the **mobile
+     * cascade**: the same markup drills in to a **Level 2** view in place, with an auto-rendered **back
+     * row** (leading **`chevron-left`** + this component's **`label`**) as the first row. Tapping the back
+     * row closes the parent trigger's dropdown (**`closeMenu()`**), returning to **Level 1** and restoring
+     * focus to the parent trigger. No item logic otherwise lives here — row behavior (icons, description,
+     * links, nested dropdowns) is entirely **`xpl-top-nav-item`**.
+     * **One authoring markup, two renderings:** consumers write this once; **`isMobileCascade`** (synced
+     * from **`TOP_NAV_MOBILE_MQ`**) decides whether the back row renders. Desktop never sees it — the
+     * flyout is a single level of links (see `xpl-top-nav-item`'s cascade-depth notes).
+     * **Panel chrome** is shared with **`xpl-nav-header-menu`** (the account menu): width
+     * (**`--xpl-top-nav-panel-width`**), surface, shadow, radius, and vertical padding all come from the
+     * same selector in `top-nav.css` so the desktop flyout, mobile cascade, and account menu read as one
+     * visual family.
+     * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens
+     * resolve to dark-mode values even when the page root is light (consistent with the rest of the
+     * **`xpl-top-nav`** family).
+     */
+    interface XplTopNavMenu {
+        /**
+          * Accessible name for the list (**`aria-label`** on the host) and the label shown in the mobile cascade back row when drilling back out of this group.
+         */
+        "label"?: string;
     }
     interface XplUtilityBar {
         /**
@@ -3178,18 +3232,22 @@ declare global {
     };
     interface HTMLXplTopNavItemElementEventMap {
         "navItemClick": MouseEvent;
+        "openChange": boolean;
     }
     /**
-     * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`**. The host uses **`role="listitem"`** when the row
-     * participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on **`xpl-top-nav`** (list host is
-     * **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of **`xpl-top-nav`**), or default-slot rows
-     * under **`xpl-nav-header-menu`**. That flag is
+     * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. The host uses
+     * **`role="listitem"`** when the row participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on
+     * **`xpl-top-nav`** (list host is **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of
+     * **`xpl-top-nav`**), or default-slot rows under **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. That flag is
      * kept in **`@State`** and refreshed after render plus via **`MutationObserver`** on the host (**`class`**, **`slot`**) and
      * on **`parentElement`** (**`role`**) or on **`.xpl-top-nav__left-primary`** (**`role`**) for **`slot="left-aside"`** under **`xpl-top-nav`**) so DOM context changes
      * without a full reconnect still re-sync. The internal
      * **`xpl-top-nav__brand`** row omits **`listitem`** (it sits in **`.xpl-top-nav__brand-bar`**, not **`.xpl-top-nav__left-primary`**),
      * as do **`slot="right-aside-mobile"`** rows (not a list). **`slot="dropdown"`** uses a local **`.xpl-top-nav-item__dropdown`**
      * panel (not **`xpl-dropdown`**); see **`TECH_DEBT.md`**.
+     * **This component does triple duty:** a plain bar item, a dropdown trigger (**`slot="dropdown"`** present), and a
+     * dropdown/menu **row** (nested inside **`xpl-nav-header-menu`** or **`xpl-top-nav-menu`**). The **`description`** prop
+     * only applies in the row context — bar items and triggers do not show it in Figma.
      * **Default slot (no `label`):** do not put **`xpl-top-nav-item__inner`** or other **`xpl-top-nav-item__*`** classes on
      * custom trigger content — the component renders the inner wrapper and BEM elements.
      * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode
@@ -3209,6 +3267,31 @@ declare global {
         prototype: HTMLXplTopNavItemElement;
         new (): HTMLXplTopNavItemElement;
     };
+    /**
+     * Thin grouping container for **`xpl-top-nav-item`** rows — the panel content for a desktop flyout
+     * (**`slot="dropdown"`** on the parent **`xpl-top-nav-item`**) and, on small screens, the **mobile
+     * cascade**: the same markup drills in to a **Level 2** view in place, with an auto-rendered **back
+     * row** (leading **`chevron-left`** + this component's **`label`**) as the first row. Tapping the back
+     * row closes the parent trigger's dropdown (**`closeMenu()`**), returning to **Level 1** and restoring
+     * focus to the parent trigger. No item logic otherwise lives here — row behavior (icons, description,
+     * links, nested dropdowns) is entirely **`xpl-top-nav-item`**.
+     * **One authoring markup, two renderings:** consumers write this once; **`isMobileCascade`** (synced
+     * from **`TOP_NAV_MOBILE_MQ`**) decides whether the back row renders. Desktop never sees it — the
+     * flyout is a single level of links (see `xpl-top-nav-item`'s cascade-depth notes).
+     * **Panel chrome** is shared with **`xpl-nav-header-menu`** (the account menu): width
+     * (**`--xpl-top-nav-panel-width`**), surface, shadow, radius, and vertical padding all come from the
+     * same selector in `top-nav.css` so the desktop flyout, mobile cascade, and account menu read as one
+     * visual family.
+     * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens
+     * resolve to dark-mode values even when the page root is light (consistent with the rest of the
+     * **`xpl-top-nav`** family).
+     */
+    interface HTMLXplTopNavMenuElement extends Components.XplTopNavMenu, HTMLStencilElement {
+    }
+    var HTMLXplTopNavMenuElement: {
+        prototype: HTMLXplTopNavMenuElement;
+        new (): HTMLXplTopNavMenuElement;
+    };
     interface HTMLXplUtilityBarElementEventMap {
         "navOpen": boolean;
     }
@@ -3295,6 +3378,7 @@ declare global {
         "xpl-tooltip": HTMLXplTooltipElement;
         "xpl-top-nav": HTMLXplTopNavElement;
         "xpl-top-nav-item": HTMLXplTopNavItemElement;
+        "xpl-top-nav-menu": HTMLXplTopNavMenuElement;
         "xpl-utility-bar": HTMLXplUtilityBarElement;
     }
 }
@@ -5567,16 +5651,19 @@ declare namespace LocalJSX {
         "onNavOpen"?: (event: XplTopNavCustomEvent<boolean>) => void;
     }
     /**
-     * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`**. The host uses **`role="listitem"`** when the row
-     * participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on **`xpl-top-nav`** (list host is
-     * **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of **`xpl-top-nav`**), or default-slot rows
-     * under **`xpl-nav-header-menu`**. That flag is
+     * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. The host uses
+     * **`role="listitem"`** when the row participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on
+     * **`xpl-top-nav`** (list host is **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of
+     * **`xpl-top-nav`**), or default-slot rows under **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. That flag is
      * kept in **`@State`** and refreshed after render plus via **`MutationObserver`** on the host (**`class`**, **`slot`**) and
      * on **`parentElement`** (**`role`**) or on **`.xpl-top-nav__left-primary`** (**`role`**) for **`slot="left-aside"`** under **`xpl-top-nav`**) so DOM context changes
      * without a full reconnect still re-sync. The internal
      * **`xpl-top-nav__brand`** row omits **`listitem`** (it sits in **`.xpl-top-nav__brand-bar`**, not **`.xpl-top-nav__left-primary`**),
      * as do **`slot="right-aside-mobile"`** rows (not a list). **`slot="dropdown"`** uses a local **`.xpl-top-nav-item__dropdown`**
      * panel (not **`xpl-dropdown`**); see **`TECH_DEBT.md`**.
+     * **This component does triple duty:** a plain bar item, a dropdown trigger (**`slot="dropdown"`** present), and a
+     * dropdown/menu **row** (nested inside **`xpl-nav-header-menu`** or **`xpl-top-nav-menu`**). The **`description`** prop
+     * only applies in the row context — bar items and triggers do not show it in Figma.
      * **Default slot (no `label`):** do not put **`xpl-top-nav-item__inner`** or other **`xpl-top-nav-item__*`** classes on
      * custom trigger content — the component renders the inner wrapper and BEM elements.
      * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode
@@ -5588,12 +5675,16 @@ declare namespace LocalJSX {
           * @default false
          */
         "active"?: boolean;
+        /**
+          * Optional description line shown below **`label`** (row context only, e.g. inside **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**). Ignored when **`label`** is not set.
+         */
+        "description"?: string;
         /**
           * If set without **`slot="dropdown"`**, the inner control renders as a native **`<a href>`** (link mode).
          */
         "href"?: string;
         /**
-          * Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set).
+          * Icon name from **`@xplortech/apollo-icons`** (shown before the label when **`label`** is set). Ignored when **`slot="leading-icon"`** content is present.
           * @default ''
          */
         "icon"?: string;
@@ -5606,15 +5697,54 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Emitted for plain items (button or link) on pointer **click**, or when keyboard activation produces a **`click`** (native for **Enter** on **`<a href>`**, or programmatic **`.click()`** for **Space** on links). **`detail`** is the **`MouseEvent`** from that activation (synthetic only for **`<div role="button">`** via **Enter** / **Space**). Not emitted when **`slot="dropdown"`** is used.
+          * Emitted for plain items (button or link) on pointer **click**, or when keyboard activation produces a **`click`**: the native **`<button>`** fires a real **`click`** on **Enter** / **Space**, a native **`<a href>`** on **Enter**, and **Space** on a link maps to a programmatic **`.click()`**. **`detail`** is always the real **`MouseEvent`** from that activation (keyboard-driven clicks have **`detail === 0`**). Not emitted when **`slot="dropdown"`** is used.
          */
         "onNavItemClick"?: (event: XplTopNavItemCustomEvent<MouseEvent>) => void;
+        /**
+          * Emitted whenever **`open`** changes (click, hover, keyboard, Escape, outside click, or programmatic).
+         */
+        "onOpenChange"?: (event: XplTopNavItemCustomEvent<boolean>) => void;
+        /**
+          * Whether the **`slot="dropdown"`** panel is open. Reflected to the **`open`** attribute so consumers can drive it (controlled) or read it back (uncontrolled, toggled internally on click / hover / keyboard activation). Prefer **`openMenu()`** / **`closeMenu()`** / **`toggleMenu()`** over setting this directly from event handlers.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * How the **`slot="dropdown"`** panel opens. **`hover`** is gated on **`TOP_NAV_ITEM_HOVER_OPEN_MQ`** (hover-capable, fine pointer, **`md`** and up) — below that, or on touch / coarse-pointer devices, **`hover`** falls back to click/tap. Keyboard activation (Enter / Space) always toggles regardless of **`openMode`**.
+          * @default 'click'
+         */
+        "openMode"?: 'click' | 'hover';
         /**
           * When true, sets **`aria-current="page"`** and selected styling.
           * @default false
          */
         "selected"?: boolean;
     }
+    /**
+     * Thin grouping container for **`xpl-top-nav-item`** rows — the panel content for a desktop flyout
+     * (**`slot="dropdown"`** on the parent **`xpl-top-nav-item`**) and, on small screens, the **mobile
+     * cascade**: the same markup drills in to a **Level 2** view in place, with an auto-rendered **back
+     * row** (leading **`chevron-left`** + this component's **`label`**) as the first row. Tapping the back
+     * row closes the parent trigger's dropdown (**`closeMenu()`**), returning to **Level 1** and restoring
+     * focus to the parent trigger. No item logic otherwise lives here — row behavior (icons, description,
+     * links, nested dropdowns) is entirely **`xpl-top-nav-item`**.
+     * **One authoring markup, two renderings:** consumers write this once; **`isMobileCascade`** (synced
+     * from **`TOP_NAV_MOBILE_MQ`**) decides whether the back row renders. Desktop never sees it — the
+     * flyout is a single level of links (see `xpl-top-nav-item`'s cascade-depth notes).
+     * **Panel chrome** is shared with **`xpl-nav-header-menu`** (the account menu): width
+     * (**`--xpl-top-nav-panel-width`**), surface, shadow, radius, and vertical padding all come from the
+     * same selector in `top-nav.css` so the desktop flyout, mobile cascade, and account menu read as one
+     * visual family.
+     * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens
+     * resolve to dark-mode values even when the page root is light (consistent with the rest of the
+     * **`xpl-top-nav`** family).
+     */
+    interface XplTopNavMenu {
+        /**
+          * Accessible name for the list (**`aria-label`** on the host) and the label shown in the mobile cascade back row when drilling back out of this group.
+         */
+        "label"?: string;
+    }
     interface XplUtilityBar {
         /**
           * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
@@ -6142,12 +6272,18 @@ declare namespace LocalJSX {
     }
     interface XplTopNavItemAttributes {
         "active": boolean;
+        "description": string;
         "href": string;
         "icon": string;
         "itemAriaLabel": string;
         "label": string;
+        "open": boolean;
+        "openMode": 'click' | 'hover';
         "selected": boolean;
     }
+    interface XplTopNavMenuAttributes {
+        "label": string;
+    }
     interface XplUtilityBarAttributes {
         "navControl": boolean;
         "isNavOpenAtStartup": boolean;
@@ -6222,6 +6358,7 @@ declare namespace LocalJSX {
         "xpl-tooltip": Omit<XplTooltip, keyof XplTooltipAttributes> & { [K in keyof XplTooltip & keyof XplTooltipAttributes]?: XplTooltip[K] } & { [K in keyof XplTooltip & keyof XplTooltipAttributes as `attr:${K}`]?: XplTooltipAttributes[K] } & { [K in keyof XplTooltip & keyof XplTooltipAttributes as `prop:${K}`]?: XplTooltip[K] };
         "xpl-top-nav": Omit<XplTopNav, keyof XplTopNavAttributes> & { [K in keyof XplTopNav & keyof XplTopNavAttributes]?: XplTopNav[K] } & { [K in keyof XplTopNav & keyof XplTopNavAttributes as `attr:${K}`]?: XplTopNavAttributes[K] } & { [K in keyof XplTopNav & keyof XplTopNavAttributes as `prop:${K}`]?: XplTopNav[K] };
         "xpl-top-nav-item": Omit<XplTopNavItem, keyof XplTopNavItemAttributes> & { [K in keyof XplTopNavItem & keyof XplTopNavItemAttributes]?: XplTopNavItem[K] } & { [K in keyof XplTopNavItem & keyof XplTopNavItemAttributes as `attr:${K}`]?: XplTopNavItemAttributes[K] } & { [K in keyof XplTopNavItem & keyof XplTopNavItemAttributes as `prop:${K}`]?: XplTopNavItem[K] };
+        "xpl-top-nav-menu": Omit<XplTopNavMenu, keyof XplTopNavMenuAttributes> & { [K in keyof XplTopNavMenu & keyof XplTopNavMenuAttributes]?: XplTopNavMenu[K] } & { [K in keyof XplTopNavMenu & keyof XplTopNavMenuAttributes as `attr:${K}`]?: XplTopNavMenuAttributes[K] } & { [K in keyof XplTopNavMenu & keyof XplTopNavMenuAttributes as `prop:${K}`]?: XplTopNavMenu[K] };
         "xpl-utility-bar": Omit<XplUtilityBar, keyof XplUtilityBarAttributes> & { [K in keyof XplUtilityBar & keyof XplUtilityBarAttributes]?: XplUtilityBar[K] } & { [K in keyof XplUtilityBar & keyof XplUtilityBarAttributes as `attr:${K}`]?: XplUtilityBarAttributes[K] } & { [K in keyof XplUtilityBar & keyof XplUtilityBarAttributes as `prop:${K}`]?: XplUtilityBar[K] };
     }
 }
@@ -6383,22 +6520,45 @@ declare module "@stencil/core" {
              */
             "xpl-top-nav": LocalJSX.IntrinsicElements["xpl-top-nav"] & JSXBase.HTMLAttributes<HTMLXplTopNavElement>;
             /**
-             * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`**. The host uses **`role="listitem"`** when the row
-             * participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on **`xpl-top-nav`** (list host is
-             * **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of **`xpl-top-nav`**), or default-slot rows
-             * under **`xpl-nav-header-menu`**. That flag is
+             * Single nav row for **`xpl-top-nav`** / **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. The host uses
+             * **`role="listitem"`** when the row participates in a list: a **`role="list"`** parent, **`slot="left-aside"`** on
+             * **`xpl-top-nav`** (list host is **`.xpl-top-nav__left-primary`** while slotted nodes stay light-DOM children of
+             * **`xpl-top-nav`**), or default-slot rows under **`xpl-nav-header-menu`** / **`xpl-top-nav-menu`**. That flag is
              * kept in **`@State`** and refreshed after render plus via **`MutationObserver`** on the host (**`class`**, **`slot`**) and
              * on **`parentElement`** (**`role`**) or on **`.xpl-top-nav__left-primary`** (**`role`**) for **`slot="left-aside"`** under **`xpl-top-nav`**) so DOM context changes
              * without a full reconnect still re-sync. The internal
              * **`xpl-top-nav__brand`** row omits **`listitem`** (it sits in **`.xpl-top-nav__brand-bar`**, not **`.xpl-top-nav__left-primary`**),
              * as do **`slot="right-aside-mobile"`** rows (not a list). **`slot="dropdown"`** uses a local **`.xpl-top-nav-item__dropdown`**
              * panel (not **`xpl-dropdown`**); see **`TECH_DEBT.md`**.
+             * **This component does triple duty:** a plain bar item, a dropdown trigger (**`slot="dropdown"`** present), and a
+             * dropdown/menu **row** (nested inside **`xpl-nav-header-menu`** or **`xpl-top-nav-menu`**). The **`description`** prop
+             * only applies in the row context — bar items and triggers do not show it in Figma.
              * **Default slot (no `label`):** do not put **`xpl-top-nav-item__inner`** or other **`xpl-top-nav-item__*`** classes on
              * custom trigger content — the component renders the inner wrapper and BEM elements.
              * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens resolve to dark-mode
              * values even when the page root is light (consistent with **`xpl-top-nav`**).
              */
             "xpl-top-nav-item": LocalJSX.IntrinsicElements["xpl-top-nav-item"] & JSXBase.HTMLAttributes<HTMLXplTopNavItemElement>;
+            /**
+             * Thin grouping container for **`xpl-top-nav-item`** rows — the panel content for a desktop flyout
+             * (**`slot="dropdown"`** on the parent **`xpl-top-nav-item`**) and, on small screens, the **mobile
+             * cascade**: the same markup drills in to a **Level 2** view in place, with an auto-rendered **back
+             * row** (leading **`chevron-left`** + this component's **`label`**) as the first row. Tapping the back
+             * row closes the parent trigger's dropdown (**`closeMenu()`**), returning to **Level 1** and restoring
+             * focus to the parent trigger. No item logic otherwise lives here — row behavior (icons, description,
+             * links, nested dropdowns) is entirely **`xpl-top-nav-item`**.
+             * **One authoring markup, two renderings:** consumers write this once; **`isMobileCascade`** (synced
+             * from **`TOP_NAV_MOBILE_MQ`**) decides whether the back row renders. Desktop never sees it — the
+             * flyout is a single level of links (see `xpl-top-nav-item`'s cascade-depth notes).
+             * **Panel chrome** is shared with **`xpl-nav-header-menu`** (the account menu): width
+             * (**`--xpl-top-nav-panel-width`**), surface, shadow, radius, and vertical padding all come from the
+             * same selector in `top-nav.css` so the desktop flyout, mobile cascade, and account menu read as one
+             * visual family.
+             * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens
+             * resolve to dark-mode values even when the page root is light (consistent with the rest of the
+             * **`xpl-top-nav`** family).
+             */
+            "xpl-top-nav-menu": LocalJSX.IntrinsicElements["xpl-top-nav-menu"] & JSXBase.HTMLAttributes<HTMLXplTopNavMenuElement>;
             "xpl-utility-bar": LocalJSX.IntrinsicElements["xpl-utility-bar"] & JSXBase.HTMLAttributes<HTMLXplUtilityBarElement>;
         }
     }

package/dist/types/utils/lifecycle.d.ts

@@ -2,12 +2,15 @@ export declare class TimerManager {
     private timeouts;
     private intervals;
     private rafs;
+    private coalesced;
     setTimeout(callback: () => void, delay: number): ReturnType<typeof setTimeout>;
     clearTimeout(id: ReturnType<typeof setTimeout>): void;
     setInterval(callback: () => void, delay: number): ReturnType<typeof setInterval>;
     clearInterval(id: ReturnType<typeof setInterval>): void;
     requestAnimationFrame(callback: FrameRequestCallback): number;
     cancelAnimationFrame(id: number): void;
+    scheduleCoalesced(key: string, callback: () => void, delay?: number): void;
+    clearCoalesced(key: string): void;
     dispose(): void;
 }
 export declare function waitForElement<T extends Element = Element>(selector: string, root?: ParentNode, options?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-core",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -23,6 +23,10 @@
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js"
     },
+    "./components/*.js": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
@@ -70,13 +74,15 @@
   "scripts": {
     "build": "npm run clean && npm-run-all build:*",
     "build:css": "cross-env NODE_ENV=production postcss src/style.css -o build/style.css && npm-run-all build-partial:css.*",
+    "build-partial:css.angular": "cp build/style.css ../apollo-angular/css/apollo.css",
     "build-partial:css.react": "cp build/style.css ../apollo-react/css/apollo.css",
     "build-partial:css.storybook": "cp -r build/ .storybook/build",
     "build-partial:css.vue": "cp build/style.css ../apollo-vue/css/apollo.css",
-    "build:stencil": "node ../../scripts/generate-icon-docs.mjs && stencil build --docs --prod && cp -r dist .storybook && cp -r loader .storybook && node .storybook/patch-stencil-sourcemaps.mjs",
+    "build:stencil": "node ../../scripts/generate-icon-docs.mjs && stencil build --docs --prod && node ../../scripts/patch-angular-value-accessors.mjs && cp -r dist .storybook && cp -r loader .storybook && node .storybook/patch-stencil-sourcemaps.mjs",
     "postbuild": "node ../../scripts/copy-readmes-to-dist.mjs && node ../../scripts/finalize-apollo-core-cjs.mjs",
     "clean": "rm -rf dist/ loader/ storybook-static/ www/ build/ src/components/components.d.ts",
     "dev": "run-p dev:*",
+    "dev:angular-patch": "node ../../scripts/patch-angular-value-accessors.mjs --watch",
     "dev:css": "postcss src/style.css -o build/style.css -w",
     "dev:stencil": "stencil build --dev --watch --serve",
     "lint:css": "stylelint 'src/**/*.css'",
@@ -112,21 +118,22 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@mdx-js/react": "^3.1.1",
     "@stencil/core": "^4.43.5",
+    "@stencil/angular-output-target": "^1.3.2",
     "@stencil/react-output-target": "1.6.0",
     "@stencil/vitest": "^1.13.3",
     "@stencil/vue-output-target": "^0.14.0",
-    "@storybook/addon-a11y": "^10.1.3",
-    "@storybook/addon-designs": "^11.1.1",
-    "@storybook/addon-docs": "^10.1.3",
-    "@storybook/addon-links": "^10.1.3",
-    "@storybook/addon-themes": "^10.1.3",
-    "@storybook/addon-vitest": "^10.1.3",
+    "@storybook/addon-a11y": "^10.5.0",
+    "@storybook/addon-designs": "^11.1.4",
+    "@storybook/addon-docs": "^10.5.0",
+    "@storybook/addon-links": "^10.5.0",
+    "@storybook/addon-themes": "^10.5.0",
+    "@storybook/addon-vitest": "^10.5.0",
     "@storybook/builder-vite": "^10.1.3",
-    "@storybook/web-components-vite": "^10.1.3",
+    "@storybook/web-components-vite": "^10.5.0",
     "@vitest/browser-playwright": "^4.0.13",
     "@vitest/coverage-v8": "^4.0.13",
     "@vueless/storybook-dark-mode": "^10.0.3",
-    "@xplortech/apollo-icons": "0.4.0",
+    "@xplortech/apollo-icons": "0.4.1",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "eslint-plugin-react": "^7.37.5",
@@ -191,7 +198,10 @@
           "{workspaceRoot}/packages/apollo-react/src/components/stencil-generated",
           "{workspaceRoot}/packages/apollo-react/css/apollo.css",
           "{workspaceRoot}/packages/apollo-vue/src/components.ts",
-          "{workspaceRoot}/packages/apollo-vue/css/apollo.css"
+          "{workspaceRoot}/packages/apollo-vue/css/apollo.css",
+          "{workspaceRoot}/packages/apollo-angular/src/directives/proxies.ts",
+          "{workspaceRoot}/packages/apollo-angular/src/directives/index.ts",
+          "{workspaceRoot}/packages/apollo-angular/css/apollo.css"
         ]
       }
     }

package/dist/apollo-core/p-0e45f332.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as i,H as c}from"./p-CXkZUm1c.js";const a=class{constructor(i){t(this,i),this.clickPrimary=s(this,"clickPrimary",7),this.clickSecondary=s(this,"clickSecondary",7),this.clickTertiary=s(this,"clickTertiary",7),this.onPrimary=()=>this.clickPrimary.emit(),this.onSecondary=()=>this.clickSecondary.emit(),this.onTertiary=()=>this.clickTertiary.emit()}render(){return i(c,{key:"cd6436989f07af18d1e696a26e3e990d99859b2e",class:"xpl-button-row"},i("div",{key:"67a9ab3127bdd31d416d716bf06a2548d4b04341",class:"xpl-button-row-inner"},i("div",{key:"f4c9e84868a5476500ffd65381fafe6c427e63ad",class:"xpl-button-row__left"},this.secondary&&i("xpl-button",{key:"9c264293c00634759559c8109657f8a58451dc06",variant:"secondary",type:"button",onClick:this.onSecondary},this.secondary)),i("div",{key:"df3443bd9afa937c4936e7b902da146f4a999f56",class:"xpl-button-row__right"},this.tertiary&&i("xpl-button",{key:"85912cdbc02ac6587085564dbfb4f0647b656d7d",variant:"subtle",type:"button",onClick:this.onTertiary},this.tertiary),this.secondary&&i("xpl-button",{key:"cbb4302e9853d751b7b75e386c6d9441037c301e",variant:"secondary",type:"button",onClick:this.onSecondary},this.secondary),this.primary&&i("xpl-button",{key:"10991142b7062283d129ba3428e5d3f1c060a973",class:"xpl-button-row__primary",onClick:this.onPrimary},this.primary))))}};export{a as xpl_button_row}

package/dist/apollo-core/p-0f251f98.entry.js

@@ -1 +0,0 @@
-import{r as e,h as a,H as r}from"./p-CXkZUm1c.js";const c=class{constructor(a){e(this,a)}render(){return a(r,{key:"f50c2c0ca2743e47ad44a368a9ea684c57a72261",role:"row",class:"xpl-table-header"},a("slot",{key:"7a61b45818de8675015ca3defb9ee8c3280e961a"}))}};export{c as xpl_table_header}

package/dist/apollo-core/p-1691c4f3.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as s}from"./p-CXkZUm1c.js";const a=class{constructor(t){e(this,t),this.disabled=!1,this.selected=!1,this.isDisabled=!1}componentWillLoad(){this.isDisabled=this.disabled}componentDidLoad(){this.updateRowCellsDisabledState()}componentDidUpdate(){this.updateRowCellsDisabledState()}updateRowCellsDisabledState(){this.hostElement.querySelectorAll("xpl-dynamic-table-cell").forEach((e=>{e.disabled=this.isDisabled}))}render(){return t(s,{key:"e070f32db6cee0bcbf0dd84e41e13e6d3b88e8a1",role:"row",class:`xpl-dynamic-table-row\n            ${this.isDisabled?"disabled":""}\n            ${this.selected?"selected":""}`,ref:e=>{this.hostElement=e}},t("slot",{key:"78ea8e02e97e0017dc4aa35af4883446d4e4c4bf"}))}};export{a as xpl_dynamic_table_row}

package/dist/apollo-core/p-172ac720.entry.js

@@ -1 +0,0 @@
-import{r as a,h as e,H as t,g as s}from"./p-CXkZUm1c.js";const c=class{constructor(e){a(this,e),this.disabled=!1}componentDidLoad(){this.updateSlottedComponentsWhenDisabled()}componentDidUpdate(){this.updateSlottedComponentsWhenDisabled()}updateSlottedComponentsWhenDisabled(){this.hostElement.querySelectorAll("*").forEach((a=>{"disabled"in a&&(a.disabled=this.disabled)}))}render(){const a=Array.from(this.el.parentElement.children).indexOf(this.el)+1;return e(t,{key:"e6e9a3695c9d8ca3743b188284bc8e69f50f3397",role:"gridcell","aria-colindex":a,class:"xpl-dynamic-table-cell",ref:a=>{this.hostElement=a}},e("slot",{key:"abfa632a3ac88d663acaaacbc431d07c9da4b375"}))}get el(){return s(this)}};export{c as xpl_dynamic_table_cell}

package/dist/apollo-core/p-44a16751.entry.js

@@ -1 +0,0 @@
-import{r as s,c as t,h as e,H as l}from"./p-CXkZUm1c.js";import{v as i}from"./p-CK3_k8jD.js";const a=class{constructor(e){s(this,e),this.toggleChange=t(this,"toggleChange",7),this.variant="default",this.id=i(),this.onChange=s=>{this.toggleChange.emit(s.target.checked)}}render(){let s="xpl-toggle-container";this.disabled&&(s+=" xpl-toggle-container--disabled");let t="xpl-toggle";return"small"===this.variant&&(t+=" xpl-toggle--small"),e(l,{key:"bc7363fd59d7cc10f0df644b5c54021ce860dbbc",class:s},(this.heading||this.description)&&e("label",{key:"06b031581d173694651e58265b287865daeaf22b",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&e("small",{key:"a633107a6dcc2c0c43cd626c3013876831535588",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),e("input",{key:"fc1d734118dafc0a5f64119eb91d19e8af1254a6",class:t,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name,onChange:this.onChange}),this.label&&e("label",{key:"7f1a465da3ec136c11797746505c0629fe2d31a9",htmlFor:this.id},this.label))}};export{a as xpl_toggle}