@xplortech/apollo-core 2.9.0 → 2.11.0

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

@@ -631,7 +631,7 @@
         },
         {
           "name": "value",
-          "description": "The value attribute for the checkbox input.\n(submittted in form as name/value pair)"
+          "description": "The value attribute for the checkbox input.\n(submitted in form as name/value pair)"
         }
       ]
     },
@@ -1404,6 +1404,10 @@
           "name": "disabled",
           "description": "Whether the field is disabled"
         },
+        {
+          "name": "error",
+          "description": "Whether the field is in an error state. When true, the input renders with\nthe error border styling. The error message itself is owned by the parent\n`xpl-input` wrapper."
+        },
         {
           "name": "input-id",
           "description": "The `inputId` is used to associate the input with a label."
@@ -2208,12 +2212,16 @@
       "name": "xpl-side-nav",
       "description": {
         "kind": "markdown",
-        "value": "Slot-based sidebar for app navigation: scrollable main area and a fixed footer. Compose with [`xpl-side-nav-item`](./xpl-side-nav-item) for rows in the section and footer."
+        "value": "Slot-based sidebar for app navigation: a scrollable main `section` and a fixed\n`nav-footer`. Compose with `xpl-side-nav-item` for rows.\n\n**Mobile (v2):** below the Tailwind `md` breakpoint, the sidebar collapses to a\n~56px top bar with a toggle button (`sidebar-left-show` / `sidebar-left-hide`).\nActivating the toggle opens a drawer containing the `section` + `nav-footer`\ncontent behind an `xpl-backdrop` scrim. The drawer traps focus while open;\nEscape or a backdrop click closes it and returns focus to the toggle. Above\n`md` the toggle and backdrop are hidden via CSS and the sidebar renders inline.\n\nThe toggle is always rendered (no gating prop) and hidden above the breakpoint\nin CSS. Open state is exposed via the `open` prop (controlled or uncontrolled),\nthe `openChange` event, and the `toggle()` / `setOpen()` methods.\n\n**v2 breaking change (beta):** consumers who wrapped their own mobile toggle\naround `xpl-side-nav` should remove it — the toggle and drawer are now built in."
       },
       "attributes": [
         {
           "name": "label",
           "description": "Accessible label for the navigation landmark.\nMaps to `aria-label` on the `<nav>` element.\nRecommended when multiple navigation landmarks exist on a page\n(e.g., side nav + top nav + breadcrumbs) to help screen readers distinguish them."
+        },
+        {
+          "name": "open",
+          "description": "Whether the mobile drawer is open. Reflected to the `open` attribute so CSS and\nhost state stay in sync. Controlled (consumer owns `open`) or uncontrolled\n(built-in toggle flips it). Has no visible effect above the `md` breakpoint,\nwhere the sidebar always renders inline."
         }
       ]
     },
@@ -2221,40 +2229,40 @@
       "name": "xpl-side-nav-item",
       "description": {
         "kind": "markdown",
-        "value": "Row for [`xpl-side-nav`](../xpl-side-nav): place items in `slot=\"section\"` or `slot=\"nav-footer\"`. Supports **leaf** (button), **expandable** (`has-children`), and **link** (slot-only) modes, plus `selected`, `disabled`, and `hidden`."
+        "value": "Navigation row for `xpl-side-nav`. Renders a button (default) or a slot-only\nanchor container (`link` mode). Three slot positions are available:\n\n- `slot=\"leading\"` — leading icon column (renamed from `slot=\"icon\"` in v2).\n  The `icon` prop is a convenience shorthand that renders an `xpl-icon` here\n  when no slotted `leading` content is present.\n- `slot=\"trailing\"` — trailing content (e.g. `xpl-icon icon=\"external-link\"`).\n  When `has-children` is true and no `trailing` slot content is provided, an\n  auto chevron is rendered automatically in this position: `chevron-down` when\n  collapsed, `chevron-up` when expanded.\n- default slot — nested `xpl-side-nav-item` children (expandable parents only).\n\n**v2 breaking changes (beta):**\n- `slot=\"icon\"` renamed to `slot=\"leading\"` — no alias kept.\n- Parent rows (`has-children`) now render the leading icon alongside the chevron.\n  Previously parents showed chevron + label only (no leading icon).\n- The chevron has moved from the leading position to the trailing position.\n- A slotted `slot=\"trailing\"` replaces the auto chevron on parent rows.\n\n**Migration:**\n| Before (v1) | After (v2) | Action |\n|---|---|---|\n| `slot=\"icon\"` | `slot=\"leading\"` | Rename the slot attribute |\n| Parent row: chevron only (no leading) | Parent row: leading icon + chevron | Pass `icon` prop or `slot=\"leading\"` |\n| (no trailing slot) | `slot=\"trailing\"` | Add for custom trailing content |"
       },
       "attributes": [
         {
           "name": "disabled",
-          "description": "Whether the component is disabled"
+          "description": "Whether the item is currently disabled."
         },
         {
           "name": "expanded",
-          "description": "Whether the item is currently expanded (only applies when hasChildren is true)"
+          "description": "Whether the item is currently expanded (only applies when `has-children` is true)."
         },
         {
           "name": "has-children",
-          "description": "Whether the item has child items; when true, shows expand/collapse and a default slot for nested items.\nMutually exclusive with <code>link</code>. If <code>link</code> is already true, setting\n<code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>,\n<code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS."
+          "description": "Whether the item has child items; when true, shows expand/collapse and a default slot for nested items.\nMutually exclusive with `link`. If `link` is already true, setting `has-children` is reverted."
         },
         {
           "name": "hidden",
-          "description": "Whether the component is hidden"
+          "description": "Whether the component is hidden."
         },
         {
           "name": "icon",
-          "description": "Optional icon name; default content for <code>slot=\"icon\"</code> (leaf and footer rows only).\nExpandable parents (<code>has-children</code>) do not show an icon column — only the chevron and label.\nOmit for nested children under a <code>has-children</code> parent — the icon column is hidden for sub-items."
+          "description": "Optional icon name; renders as the default content for `slot=\"leading\"`.\nWhen `slot=\"leading\"` content is present, this prop is ignored.\nIn v2, this prop applies to all item types including parent rows (`has-children`)."
         },
         {
           "name": "label",
-          "description": "The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode)."
+          "description": "The display label for the navigation item (button / expandable rows; omit in `link` mode)."
         },
         {
           "name": "link",
-          "description": "When true, the row becomes a slot-only container for consumer-provided links.\nThe consumer provides the full anchor element (or router link) via the default slot.\nIn link mode, <code>label</code> and <code>icon</code> props should not be used.\nLink mode does not support <code>has-children</code>; use the default button mode for expandable items.\nWhen <code>link</code> is true, <code>hasChildren</code> is always false (enforced by\n<code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and\n<code>componentWillRender</code>)."
+          "description": "When true, the row becomes a slot-only container for consumer-provided links.\nThe consumer provides the full anchor element (or router link) via the default slot.\nIn link mode, `label` and `icon` props should not be used.\nLink mode does not support `has-children`; use the default button mode for expandable items.\nWhen `link` is true, `hasChildren` is always false."
         },
         {
           "name": "selected",
-          "description": "Whether the item is currently in a selected state"
+          "description": "Whether the item is currently in a selected state."
         }
       ]
     },
@@ -2758,7 +2766,7 @@
       "name": "xpl-tooltip",
       "description": {
         "kind": "markdown",
-        "value": "Tooltips are intended to be short one to two sentence messages adding contextual information for the user. Keep messages short and to the point. Tooltips are static and do not contain actions, and only appear when the context is hovered. \n\nTooltip variants control one of 8 arrow positions indicating the direction the tooltip will appear in relation to it's trigger:\n\"bottom-left\" | \"bottom-middle\" | \"bottom-right\" | \"left\" | \"right\" | \"top-left\" | \"top-middle\" | \"top-right\""
+        "value": "Tooltips are intended to be short one to two sentence messages adding contextual information for the user. Keep messages short and to the point. Tooltips are static and do not contain actions, and only appear when the context is hovered.\n\nTooltip variants control one of 8 arrow positions indicating the direction the tooltip will appear in relation to it's trigger:\n\"bottom-left\" | \"bottom-middle\" | \"bottom-right\" | \"left\" | \"right\" | \"top-left\" | \"top-middle\" | \"top-right\""
       },
       "attributes": [
         {
@@ -2838,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",
@@ -2861,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": {