@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/types/components.d.ts

@@ -5,14 +5,28 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { AvatarColor, AvatarGroupItem, AvatarStatus, AvatarVariant } from "./components/xpl-avatar/xpl-avatar";
+import { BadgeVariantProp } from "./components/xpl-badge/xpl-badge";
 import { Choice } from "./components/xpl-choicelist/choice";
 import { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
-import { ListItem } from "./components/xpl-list/listitem";
+import { ListItem, XplListOrderChangeDetail } from "./components/xpl-list/listitem";
+import { BadgeVariantProp as BadgeVariantProp1 } from "./components/xpl-badge/xpl-badge";
 import { PopoverPosition } from "./components/xpl-popover/xpl-popover";
+import { SpotlightActionLayout, SpotlightAnchorPosition } from "./components/xpl-spotlight/xpl-spotlight";
+import { XplTableRowOrderChangeDetail, XplTableSortChangedDetail } from "./components/xpl-table/xpl-table";
+import { HeaderSortChangeDetail } from "./components/xpl-table/xpl-table-header-cell/xpl-table-header-cell";
+import { TagDragEndDetail, TagDragStartDetail } from "./components/xpl-tag/xpl-tag";
+export { AvatarColor, AvatarGroupItem, AvatarStatus, AvatarVariant } from "./components/xpl-avatar/xpl-avatar";
+export { BadgeVariantProp } from "./components/xpl-badge/xpl-badge";
 export { Choice } from "./components/xpl-choicelist/choice";
 export { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
-export { ListItem } from "./components/xpl-list/listitem";
+export { ListItem, XplListOrderChangeDetail } from "./components/xpl-list/listitem";
+export { BadgeVariantProp as BadgeVariantProp1 } from "./components/xpl-badge/xpl-badge";
 export { PopoverPosition } from "./components/xpl-popover/xpl-popover";
+export { SpotlightActionLayout, SpotlightAnchorPosition } from "./components/xpl-spotlight/xpl-spotlight";
+export { XplTableRowOrderChangeDetail, XplTableSortChangedDetail } from "./components/xpl-table/xpl-table";
+export { HeaderSortChangeDetail } from "./components/xpl-table/xpl-table-header-cell/xpl-table-header-cell";
+export { TagDragEndDetail, TagDragStartDetail } from "./components/xpl-tag/xpl-tag";
 export namespace Components {
     interface XplAccordion {
         /**
@@ -74,22 +88,26 @@ export namespace Components {
         /**
           * Background color when there is no image src
          */
-        "color"?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+        "color"?: AvatarColor;
         /**
           * Sets a disabled state on the avatar when set to true
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * When `variant` is `group`, data for each face (max 4 visible + overflow count). Each item: { src?, name?, color? }.
+         */
+        "groupData"?: AvatarGroupItem[] | string;
         /**
           * The URL if the avatar should be hyperlinked
          */
         "href"?: string;
         /**
-          * Alt text for the image if there is an image src
+          * Alt text for the image; also used for initials when no image and no slot.
          */
         "name"?: string;
         /**
-          * Size of the avatar
+          * Size of the avatar (and of each avatar in a group).
          */
         "size"?: 'md' | 'sm';
         /**
@@ -97,13 +115,22 @@ export namespace Components {
          */
         "src"?: string;
         /**
-          * Color styles for the dot indicator to indicate varied states
+          * Shown for the default avatar, `profile`, and `with-text`; not shown when `variant` is `group`. **Legacy
+          * @deprecated :** `active`, `warning`, and `inactive` still map to `green`, `red`, and `gray` for existing consumers. Prefer palette names; legacy values are scheduled for removal in the next **major** release.
+         */
+        "status"?: AvatarStatus;
+        /**
+          * Secondary text shown when `variant` is `with-text` (e.g. email).
          */
-        "status"?: 'active' | 'warning' | 'inactive';
+        "subText"?: string;
         /**
           * Where to open the URL chosen for the `href` prop: `_self` (default), `_blank`, `_parent`, or `_top`
          */
         "target"?: string;
+        /**
+          * Optional layout: `profile` (large profile sizes), `group` (stacked faces + `groupData`; `status` not shown), `with-text` (avatar with `name` / `subText` beside it). Omit for the default single avatar.
+         */
+        "variant"?: AvatarVariant;
     }
     interface XplBackdrop {
         /**
@@ -114,13 +141,77 @@ export namespace Components {
     }
     interface XplBadge {
         /**
-          * Whether badge shows a dot icon before the text
+          * Whether badge shows a bordered ring
+          * @default false
+         */
+        "bordered"?: boolean;
+        /**
+          * Whether badge shows a dot icon before the text (inside the pill)
          */
         "dot"?: boolean;
         /**
-          * Color styles to indicate varied states
+          * When true, render a compact badge built around the dot. - With no children: just a dot (status/dot badge) - With children: a small dot badge with the text/number inside
+          * @default false
+         */
+        "dotOnly"?: boolean;
+        /**
+          * Badge shape rounded (pill) boxy (rounded corners)
+          * @default 'rounded'
+         */
+        "shape": 'rounded' | 'boxy';
+        /**
+          * Badge size default | small
+          * @default 'default'
+         */
+        "size": 'default' | 'small';
+        /**
+          * Badge variant (color).  Preferred values: `purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`.  The legacy semantic names `success`, `warning`, `inactive`, and `error` are still accepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the color names for new code.
+          * @default 'purple'
+         */
+        "variant": BadgeVariantProp;
+    }
+    interface XplBanner {
+        /**
+          * Primary action label. When provided, an action button is rendered.
+         */
+        "actionText"?: string;
+        /**
+          * Controls the visual appearance and semantic meaning of the banner. These values map to messaging background/border token sets in `banner.css`. Banner icons use `--xpl-icon-default`, except `error` which uses inverse icon/text tokens for contrast on dark backgrounds.
+          * @default 'information'
+         */
+        "appearance": 'information' | 'positive' | 'warning' | 'error';
+        /**
+          * Optional supporting message shown after the heading. Description text uses `--xpl-text-default`.
+         */
+        "description"?: string;
+        /**
+          * Whether to render the leading icon in section layout. Ignored in bar layout — bar banners always show the icon.
+          * @default true
+         */
+        "hasIcon": boolean;
+        /**
+          * Primary banner message shown with stronger title typography.
+         */
+        "heading"?: string;
+        /**
+          * Whether to show the trailing dismiss control.
+          * @default true
+         */
+        "isDismissible": boolean;
+        /**
+          * Renders the section-style banner layout when true.
+          * @default false
+         */
+        "isSection": boolean;
+        /**
+          * Secondary action label. When provided, a second action button is rendered.
+         */
+        "secondaryActionText"?: string;
+        /**
+          * When true, `description` is constrained to one line with ellipsis so banner height stays stable.
+          * @default false
          */
-        "variant"?: 'success' | 'warning' | 'inactive' | 'error';
+        "truncateDesc": boolean;
     }
     interface XplBreadcrumbItem {
     }
@@ -128,52 +219,84 @@ export namespace Components {
     }
     interface XplButton {
         /**
-          * whether button should be disabled
+          * Attributes to apply to the inner native `<button>` (e.g., tab a11y wiring). Use this instead of setting `id` / `role` / `aria-*` on the host when the inner control is the element that needs them (e.g., WAI-ARIA composite widgets).
          */
-        "disabled"?: boolean;
+        "controlAttrs"?: {
+        id?: string;
+        role?: string;
+        'aria-controls'?: string;
+        'aria-selected'?: 'true' | 'false';
+        'aria-current'?: string;
+    };
+        /**
+          * Whether button should be disabled
+          * @default false
+         */
+        "disabled": boolean;
         /**
-          * @property {string} - An optional form attribute for the button if type is submit
+          * An optional form attribute for the button if type is submit
          */
         "form"?: string;
         /**
-          * whether button should render with full width
+          * Whether the button should be of full width as per parent container.
+          * @default false
          */
-        "fullWidth"?: boolean;
+        "fullWidth": boolean;
         /**
-          * whether button should render icon only
+          * Icon to render - icon name as string (from xpl-icon library).
+          * @default ''
          */
-        "iconOnly"?: boolean;
+        "icon": string;
+        /**
+          * When true, the button renders in icon-only circular style. Use for icon-only buttons.
+          * @default false
+         */
+        "iconOnly": boolean;
+        /**
+          * Icon position relative to slot content. Ignored if no icon is provided.
+          * @default 'start'
+         */
+        "iconPosition": 'start' | 'end';
+        /**
+          * When true, shows a loading overlay with spinner over the button. Button is non-interactive.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * whether button should yield a slot for a link tag
          */
         "link"?: boolean;
         /**
-          * @property {string} - button name attribute
+          * Name of the button, submitted with form data. Passed through to the native button element.
          */
         "name"?: string;
         /**
-          * @property {"default" | "sm" | "xs"} - button size
+          * Sentiment of the button, which applies different color schemes to indicate purpose/intent.
+          * @default 'neutral'
+         */
+        "sentiment": 'neutral' | 'negative' | 'positive';
+        /**
+          * Button size. Use 'default', 'xs' (extra small), or 'sm' (small).
           * @default 'default'
          */
-        "size": 'default' | 'sm' | 'xs';
+        "size": 'default' | 'xs' | 'sm';
         /**
-          * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
-          * @default 'neutral'
+          * @deprecated : Use `sentiment` with values "neutral", "negative", "positive" instead of `state` .
          */
-        "state": 'neutral' | 'warning' | 'success';
+        "state"?: 'neutral' | 'warning' | 'success';
         /**
-          * @property {"submit" | "reset" | "button"} - button type attribute
+          * HTML button type attribute.
          */
         "type"?: 'submit' | 'reset' | 'button';
         /**
-          * @property {string} - button value attribute
+          * Value of the button, submitted with form data. Passed through to the native button element.
          */
         "value"?: string;
         /**
-          * @property {"primary" | "secondary" | "subtle"} - button variant
+          * Button variant/style. Use "primary", "secondary", "tertiary" for new usage. "subtle" is deprecated but still supported for backward compatibility.
           * @default 'primary'
          */
-        "variant": 'primary' | 'secondary' | 'subtle';
+        "variant": 'primary' | 'secondary' | 'tertiary' | 'subtle';
     }
     interface XplButtonRow {
         /**
@@ -223,6 +346,11 @@ export namespace Components {
         "setDate": (date: string | string[]) => Promise<void>;
     }
     interface XplCheckbox {
+        /**
+          * Accessible name for the native checkbox input (sets `aria-label` on the `input`). Use when there is no visible label text in the default slot. Defaults to `''`; empty or whitespace-only values omit `aria-label` on the input so a visible `<label>` remains the sole name source.
+          * @default ''
+         */
+        "ariaLabel": string;
         /**
           * Whether the input is checked
          */
@@ -404,7 +532,7 @@ export namespace Components {
         /**
           * call back function invoked when a selection is made
          */
-        "update"?: (e, { component }: { component: XplDropdown }) => void;
+        "update"?: (e, { component }: { component: Dropdown }) => void;
     }
     interface XplDropdownGroup {
         /**
@@ -423,6 +551,10 @@ export namespace Components {
         "label": string;
     }
     interface XplDropdownOption {
+        /**
+          * optional icon name to display before the label (uses xpl-icon)
+         */
+        "icon"?: string;
         /**
           * whether option is disabled
          */
@@ -444,8 +576,16 @@ export namespace Components {
          */
         "value"?: string;
     }
+    /**
+     * @deprecated Use the compositional `<xpl-table>` API instead.
+     * This component will be removed in a future major release.
+     */
     interface XplDynamicTable {
     }
+    /**
+     * @deprecated Use `<xpl-table-cell>` instead.
+     * This component will be removed in a future major release.
+     */
     interface XplDynamicTableCell {
         /**
           * Whether the cell and its contents are disabled.
@@ -453,6 +593,10 @@ export namespace Components {
          */
         "disabled": boolean;
     }
+    /**
+     * @deprecated Use `<xpl-table-row>` instead.
+     * This component will be removed in a future major release.
+     */
     interface XplDynamicTableRow {
         /**
           * Whether the row and its cells are disabled.
@@ -546,7 +690,12 @@ export namespace Components {
          */
         "allowCustomOption"?: boolean;
         /**
-          * Hint for form autofill feature  Applies to text, password, number.
+          * Accessible name for search inputs when there is no visible `label` (after trim). Ignored for naming when a visible label is shown. Defaults to `''`; whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed when there is no visible label.  Applies to search inputs (`type="search"`).
+          * @default ''
+         */
+        "ariaLabel": string;
+        /**
+          * Hint for form autofill feature  Applies to text, password, number, and search inputs.
          */
         "autocomplete"?: string;
         /**
@@ -554,6 +703,11 @@ export namespace Components {
           * @default 'Y-m-d'
          */
         "dateFormat"?: string;
+        /**
+          * Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. "US".  Applies to phone inputs.
+          * @default 'US'
+         */
+        "defaultCountry"?: string;
         /**
           * Optional text that appears below the input label.  Applies to all input types.
          */
@@ -585,6 +739,11 @@ export namespace Components {
           * @default false
          */
         "hideTriggerOnSelect"?: boolean;
+        /**
+          * Enables international mode with country selector for phone inputs. When false, the phone input is locked to defaultCountry with no country picker.
+          * @default true  Applies to phone inputs.
+         */
+        "isInternational"?: boolean;
         /**
           * Label text for the field  Applies to all input types.
          */
@@ -621,7 +780,7 @@ export namespace Components {
          */
         "name"?: string;
         /**
-          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, date, and search inputs.
          */
         "placeholder"?: string;
         /**
@@ -633,13 +792,25 @@ export namespace Components {
          */
         "pre"?: string;
         /**
-          * Whether the input is editable  Applies to text, password, number, and date inputs.
+          * Country codes to show at the top of the country list, e.g. ["US", "CA", "GB"].  Applies to phone inputs.
+         */
+        "preferredCountries"?: string[];
+        /**
+          * Whether the input is editable  Applies to text, password, number, date, and search inputs.
          */
         "readonly"?: boolean;
         /**
           * Whether the input is required  Applies to all input types.
          */
         "required"?: boolean;
+        /**
+          * Moves keyboard focus to the native control (text field, textarea, or search inner input).
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Shell corner radius for search inputs: `rounded` (pill) or `box` (rounded rectangle).  Applies to search inputs (`type="search"`).
+         */
+        "shape"?: 'rounded' | 'box';
         /**
           * The granularity that the value in a `number` input must adhere to when incrementing or decrementing. The default stepping value for number inputs is 1  Applies to number and time inputs.
          */
@@ -653,9 +824,17 @@ export namespace Components {
           * The type of form control
           * @default 'text'
          */
-        "type"?: 'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color';
+        "type"?: | 'date'
+        | 'time'
+        | 'text'
+        | 'number'
+        | 'password'
+        | 'file'
+        | 'color'
+        | 'phone'
+        | 'search';
         /**
-          * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, and date inputs.
+          * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, date, and search inputs.
          */
         "value"?: string;
     }
@@ -785,6 +964,118 @@ export namespace Components {
          */
         "removeFileByIndex": (fileIndex: number) => Promise<void>;
     }
+    interface XplInputPhone {
+        /**
+          * Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. "US".
+          * @default 'US'
+         */
+        "defaultCountry"?: string;
+        /**
+          * Whether the field is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The `inputId` is used to associate the input with a label.
+         */
+        "inputId"?: string;
+        /**
+          * Enables international mode with a country selector and dial code prefix. When false, the input is locked to `defaultCountry` with no country picker and no dial code shown in the display value. Emitted value is still E.164.
+          * @default true
+         */
+        "isInternational"?: boolean;
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
+         */
+        "name"?: string;
+        /**
+          * Placeholder text that appears when the field has no value
+         */
+        "placeholder"?: string;
+        /**
+          * Country codes to show at the top of the country list, e.g. ["US", "CA", "GB"].
+         */
+        "preferredCountries"?: string[];
+        /**
+          * Whether the input is editable
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Including a `value` will pre-populate the input (E.164 format, e.g. +14155551234).
+         */
+        "value"?: string;
+    }
+    interface XplInputSearch {
+        /**
+          * Accessible name when there is no visible label from the parent; maps to `aria-label` on the input. When the parent provides a visible label, the input is named by `<label for="…">` — this prop is ignored for naming. Empty or whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed.
+          * @default 'Search'
+         */
+        "ariaLabel": string;
+        /**
+          * Passed to the native input (`autocomplete` attribute). Default `off` matches common inline-search UX; browsers may still apply heuristics.
+          * @default 'off'
+         */
+        "autocomplete": string;
+        /**
+          * Disables the field and clear control.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Element id for `aria-describedby` when `hasError` (error message lives on `xpl-input`).
+         */
+        "errorMessageId"?: string;
+        /**
+          * Set by `xpl-input` when `error` is shown — drives `aria-invalid` / `aria-describedby`.
+          * @default false
+         */
+        "hasError": boolean;
+        /**
+          * When true, parent `xpl-input` renders a visible label — omit `aria-label` on the input.
+          * @default false
+         */
+        "hasVisibleLabel": boolean;
+        /**
+          * Associates the control with the parent `xpl-input` label (`for` / `id`).
+         */
+        "inputId": string;
+        /**
+          * Form field `name` on the native input.
+         */
+        "name"?: string;
+        /**
+          * Placeholder shown when the value is empty.
+          * @default 'Search'
+         */
+        "placeholder": string;
+        /**
+          * Whether the input is editable.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Whether the input is required.
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Moves keyboard focus to the search field.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Shell corner radius: `rounded` (pill) or `box` (rounded rectangle).
+          * @default 'rounded'
+         */
+        "shape": 'rounded' | 'box';
+        /**
+          * Current value (controlled-friendly).
+          * @default ''
+         */
+        "value": string;
+    }
     interface XplInputTime {
         /**
           * For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs.
@@ -861,10 +1152,94 @@ export namespace Components {
     }
     interface XplList {
         /**
-          * `items` should be an array of objects with the following signature: {   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.     text: string;     variant?: string;   }[];   href?: string;          // A URL, if this list item is meant to link somewhere.   title: string;          // The text to be displayed for the list item.   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed     icon: string;         // Apollo icons) to be displayed as metadata below the title.     text: string;   }[];   subtext?: string;       // Subtext to be displayed on the right. }  - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering   the right-hand side of the list item.
+          * Clears all radio selections in the list. Also runs when `selectable` is true, the user presses Escape, and focus is on the selected row. Emits `itemSelect` once per row that was selected (checked radio or `selected` prop), typically one.
+         */
+        "clearSelection": () => Promise<void>;
+        /**
+          * Array of list items to render. Each item should follow the ListItem interface. **Deprecated.** Use slot-based xpl-list-item children instead.
           * @default []
          */
-        "items"?: ListItem[];
+        "items": ListItem[];
+        /**
+          * Accessible name for the list, exposed as `aria-label` on the host when set. Use when the list has no visible heading. Ignored when `labelledBy` is set (see `labelledBy` for precedence).
+         */
+        "label"?: string;
+        /**
+          * Element id(s) that label this list (space-separated), exposed as `aria-labelledby` when set. When set, `label` is not applied as `aria-label` so the list has a single naming source.
+         */
+        "labelledBy"?: string;
+        /**
+          * When true, enables reorder UI and behavior for **slot-based** child rows (drag handle + keyboard). Legacy rows rendered from the deprecated `items` prop do **not** show a drag handle; migrate to slots if reorder is required.
+          * @default false
+         */
+        "reorderable": boolean;
+        /**
+          * Determines if this list is selectable (shows `xpl-radio` per row in a shared group). Press Escape while focus is on the **selected** row to clear selection (same as `clearSelection()`).
+          * @default false
+         */
+        "selectable": boolean;
+    }
+    interface XplListItem {
+        /**
+          * Whether the item is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether to show the item in an error state.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * When true, the row is not shown and does not participate in visible-only list behavior (e.g. `orderChange` / `orderedItemIds`, reorder targets). Use for filtering, conditional display, or keeping stable `item-id` while the row is off-screen. See `xpl-list` readme “Hidden rows”.  **Accessibility:** Renders an empty host with the native `hidden` attribute only (no `role="listitem"`), consistent with the row not participating as a list item while hidden.
+          * @default false
+         */
+        "hidden": boolean;
+        /**
+          * URL for link behavior. When provided, the entire row becomes clickable. Clicks on `actions` or `avatar` slots are prevented from triggering navigation.
+         */
+        "href"?: string;
+        /**
+          * Optional item data for prop-based rendering. When provided, this takes precedence over slotted content and renders using the legacy ListItem interface. **Deprecated.** Prefer slot-based composition (named slots on `xpl-list-item`).
+         */
+        "item"?: ListItem;
+        /**
+          * Unique identifier for this item. Used for selection and drag/drop. Mutable so the host can sync from `item-id` / `id` in `componentWillLoad` without breaking one-way data flow.
+         */
+        "itemId"?: string;
+        /**
+          * When set by the parent, indicates this item is the active keyboard reorder item.
+          * @default false
+         */
+        "keyboardActive"?: boolean;
+        /**
+          * Name attribute for radio inputs (shared across selectable items in a list).
+         */
+        "radioName"?: string;
+        /**
+          * Whether this item is reorderable (shows a drag handle in **slot-based** layout). When the deprecated `item` prop is used, legacy markup has **no** reorder handle even if this is true.
+          * @default false
+         */
+        "reorderable"?: boolean;
+        /**
+          * Whether this item is selectable (shows `xpl-radio` in a shared group).
+          * @default false
+         */
+        "selectable"?: boolean;
+        /**
+          * Whether this item is selected (radio checked state).
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Whether to show a divider below the item.
+          * @default false
+         */
+        "showDivider"?: boolean;
+        /**
+          * Optional badge to display next to the title (dot badge). Only used when `item` prop is not provided (slot mode). Matches `xpl-badge` variant values (e.g. purple, green, red).
+         */
+        "titleBadgeVariant"?: BadgeVariantProp1;
     }
     interface XplMainNav {
         /**
@@ -890,6 +1265,34 @@ export namespace Components {
          */
         "variant": 'default' | 'warning';
     }
+    /**
+     * Profile / account block (username, email, default slot for **`xpl-top-nav-item`** / **`xpl-divider`**).
+     * Tag **`xpl-nav-header-menu`**; implementation folder **`xpl-nav-header-menu`**. **`.xpl-nav-header-menu__slot`** is
+     * **`role="list"`** for slotted **`xpl-top-nav-item`** (**`role="listitem"`**).
+     * **Slotted content:** do not add **`xpl-nav-header-menu__*`** BEM classes on nodes you pass into the default slot —
+     * profile, list shell, and **`xpl-top-nav-item`** **`role="listitem"`** are handled by the component. Use
+     * **`xpl-top-nav-item`** (or plain elements that are not Apollo **`xpl-*`** BEM hooks) in the slot only.
+     * **`slot="right-aside-mobile"`** — optional block **between** the profile header and the default-slot list (e.g. narrow-only
+     * duplicate of **every** **`slot="right-aside"`** control per Figma when **`xpl-top-nav`** hides **`right-aside`** on narrow viewports (always)).
+     * Not **`role="list"`**; use **`xpl-button`** / **`xpl-top-nav-item`** as needed. Shown only on **narrow viewports** (one pixel below Tailwind **`md`** — **`top-nav.css`**) so bar actions stay in **`slot="right-aside"`** on wider viewports.
+     * Light-DOM **`slotchange`** is unreliable; a host **`MutationObserver`** (child / subtree / **`slot`** attribute) keeps
+     * **`xpl-nav-header-menu--has-right-aside-mobile`** in sync when nodes are added or retargeted after mount (same pattern as **`xpl-top-nav`**).
+     * Stencil **`newSpecPage`** / mock-doc does not define **`MutationObserver`**; slot presence still updates on the next
+     * deferred flush (**`setTimeout(0)`** coalesced with **`componentDidRender`**). In real browsers the observer handles child /
+     * **`slot`** mutations without stacking uncancellable microtasks.
+     * **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 (same contract as **`xpl-top-nav`** / **`xpl-top-nav-item`**).
+     */
+    interface XplNavHeaderMenu {
+        /**
+          * Email address shown below the username.
+         */
+        "email"?: string;
+        /**
+          * Display name shown in the profile block.
+         */
+        "username"?: string;
+    }
     interface XplNavItem {
         /**
           * @property {boolean} - Whether or not the item should control the main nav state on click
@@ -924,6 +1327,22 @@ export namespace Components {
          */
         "withPageControl": boolean;
     }
+    /**
+     * A stateless container that defines a section on a page and can house any
+     * type of content. Panels are not dismissible and may contain a top accent.
+     */
+    interface XplPanel {
+        /**
+          * Color accent bar displayed at the top of the panel.  - `none` – no accent (default) - `primary` – brand primary color - `secondary` – brand secondary color - `positive` – positive / success color - `negative` – negative / error color - `highlight` – highlight / warning color
+          * @default 'none'
+         */
+        "accent": 'none' | 'primary' | 'secondary' | 'positive' | 'negative' | 'highlight';
+        /**
+          * Padding density applied to the content area. (default and tight keep desktop padding through tablet; mobile ≤480px).  - `default` – 24 px desktop & tablet / 16 px mobile - `tight`   – 16 px desktop & tablet / 8 px mobile - `loose`   – 40 px desktop / 32 px tablet / 24 px mobile
+          * @default 'default'
+         */
+        "padding": 'default' | 'tight' | 'loose';
+    }
     interface XplPopover {
         /**
           * Whether the popover is disabled or not.
@@ -946,36 +1365,81 @@ export namespace Components {
          */
         "position": PopoverPosition;
     }
-    interface XplProgress {
+    interface XplProgressBar {
         /**
-          * Current step, is the index of the current active step
-          * @default 0
+          * The helper text displayed below the progress bar (recommended for error state)
          */
-        "currentStep": number;
+        "helperText"?: string;
         /**
-          * The steps is an array of the steps name.
+          * The label text displayed above the progress bar
          */
-        "steps"?: string[];
-    }
-    interface XplRadio {
+        "label"?: string;
         /**
-          * Whether the input is "on"
+          * The maximum value of the progress (mirrors native <progress> max attribute)
+          * @default 100
          */
-        "checked"?: boolean;
+        "max": number;
         /**
-          * Description text for the field
+          * The size of the progress bar height: sm = 4px, lg = 6px
+          * @default 'lg'
          */
-        "description"?: string;
+        "size": 'sm' | 'lg';
         /**
-          * Whether the input is disabled
+          * The current value of the progress (mirrors native <progress> value attribute)
+          * @default 0
          */
-        "disabled"?: boolean;
+        "value": number;
         /**
-          * The name attribute for the html input. (submittted in form as name/value pair)
+          * The visual variant of the progress bar
+          * @default 'default'
          */
-        "name"?: string;
+        "variant": 'default' | 'success' | 'error' | 'indeterminate';
+    }
+    interface XplProgressIndicator {
         /**
-          * Whether the input is required
+          * Current step index. Steps with index < currentStep are "finished", the step at currentStep is "active", and steps beyond are "waiting". Set to steps.length to mark all steps as finished. Automatically clamped to [0, steps.length].
+          * @default 0
+         */
+        "currentStep": number;
+        /**
+          * Layout direction - 'horizontal' or 'vertical'
+          * @default 'horizontal'
+         */
+        "layout": 'horizontal' | 'vertical';
+        /**
+          * Whether to show step labels
+          * @default true
+         */
+        "showLabels": boolean;
+        /**
+          * Whether to show step numbers inside circles
+          * @default true
+         */
+        "showNumbers": boolean;
+        /**
+          * The steps is an array of the steps name.
+         */
+        "steps"?: string[];
+    }
+    interface XplRadio {
+        /**
+          * Whether the input is "on"
+         */
+        "checked"?: boolean;
+        /**
+          * Description text for the field
+         */
+        "description"?: string;
+        /**
+          * Whether the input is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The name attribute for the html input. (submittted in form as name/value pair)
+         */
+        "name"?: string;
+        /**
+          * Whether the input is required
          */
         "required"?: boolean;
         /**
@@ -1051,6 +1515,52 @@ export namespace Components {
          */
         "truncate"?: boolean;
     }
+    interface XplSideNav {
+        /**
+          * Accessible label for the navigation landmark. Maps to `aria-label` on the `<nav>` element. Recommended when multiple navigation landmarks exist on a page (e.g., side nav + top nav + breadcrumbs) to help screen readers distinguish them.
+         */
+        "label"?: string;
+    }
+    interface XplSideNavItem {
+        /**
+          * Whether the component is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the item is currently expanded (only applies when hasChildren is true)
+          * @default false
+         */
+        "expanded": boolean;
+        /**
+          * Whether the item has child items; when true, shows expand/collapse and a default slot for nested items. Mutually exclusive with <code>link</code>. If <code>link</code> is already true, setting <code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>, <code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS.
+          * @default false
+         */
+        "hasChildren": boolean;
+        /**
+          * Whether the component is hidden
+          * @default false
+         */
+        "hidden": boolean;
+        /**
+          * Optional icon name; default content for <code>slot="icon"</code> (leaf and footer rows only). Expandable parents (<code>has-children</code>) do not show an icon column — only the chevron and label. Omit for nested children under a <code>has-children</code> parent — the icon column is hidden for sub-items.
+         */
+        "icon"?: string;
+        /**
+          * The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode).
+         */
+        "label"?: string;
+        /**
+          * When true, the row becomes a slot-only container for consumer-provided links. The consumer provides the full anchor element (or router link) via the default slot. In link mode, <code>label</code> and <code>icon</code> props should not be used. Link mode does not support <code>has-children</code>; use the default button mode for expandable items. When <code>link</code> is true, <code>hasChildren</code> is always false (enforced by <code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and <code>componentWillRender</code>).
+          * @default false
+         */
+        "link": boolean;
+        /**
+          * Whether the item is currently in a selected state
+          * @default false
+         */
+        "selected": boolean;
+    }
     interface XplSkeleton {
         /**
           * A CSS class name to apply to the component.
@@ -1112,16 +1622,126 @@ export namespace Components {
          */
         "variant": 'default' | 'warning';
     }
+    interface XplSpotlight {
+        /**
+          * Footer action layout. `default` and `dual` both render the standard Back/Next layout, while `single` renders a single acknowledgement CTA (e.g. "Got it!"). Only applies when `showActions` is `true`.
+          * @default 'default'
+         */
+        "actionLayout": SpotlightActionLayout;
+        /**
+          * Which corner of the card the anchor dot uses when not using `target`, or as the preferred side for Floating UI.
+          * @default 'top-left'
+         */
+        "anchorPosition": SpotlightAnchorPosition;
+        /**
+          * Body copy when the `body` slot has no slotted content. Whitespace-only values are treated as empty (no fallback paragraph).
+         */
+        "body"?: string;
+        /**
+          * Current step index (1-based). Used with `totalSteps` for the step label and for disabling default Back/Next when `showSteps` is true.
+          * @default 1
+         */
+        "currentStep": number;
+        /**
+          * Heading when the `title` slot has no slotted content. Whitespace-only values are treated as empty (no fallback title span).
+         */
+        "heading"?: string;
+        /**
+          * Whether to show the dismiss (close) control.
+          * @default true
+         */
+        "isDismissible": boolean;
+        /**
+          * Controls whether the spotlight is rendered. When false, the host remains in the DOM but the spotlight UI is hidden.
+          * @default true
+         */
+        "isOpen": boolean;
+        /**
+          * Label used for the default primary action button. Only applies when `showActions` is `true`.
+          * @default 'Next'
+         */
+        "primaryActionLabel": string;
+        /**
+          * Label used for the default secondary action button. Only applies when `showActions` is `true`.
+          * @default 'Back'
+         */
+        "secondaryActionLabel": string;
+        /**
+          * Whether to show the actions row (primary / secondary and optional step counter). When `false`, the spotlight has no action buttons — useful for single-step informational callouts that rely solely on the dismiss control.
+          * @default true
+         */
+        "showActions": boolean;
+        /**
+          * When true, the media region is shown. Slotted `image` content is rendered when present; otherwise the built-in placeholder UI is shown. When false, the entire media block is hidden.
+          * @default true
+         */
+        "showImage": boolean;
+        /**
+          * Whether to show the step counter between actions (`currentStep` of `totalSteps`) and whether default Back/Next use step-based disabled state.
+          * @default true
+         */
+        "showSteps": boolean;
+        /**
+          * CSS selector for the element this spotlight anchors to. When set, placement uses Floating UI (`computePosition` with `strategy: 'fixed'`, plus `flip`, `shift`, `offset`) and `autoUpdate` for scroll/resize. The host receives `left` / `top` and the `xpl-spotlight--anchored` class. Invalid selectors are ignored; layout falls back to `anchor-position`.
+         */
+        "target"?: string;
+        /**
+          * Total number of steps (1-based upper bound). Used with `currentStep` for the step label and for disabling default Back/Next when `showSteps` is true.
+          * @default 1
+         */
+        "totalSteps": number;
+    }
     interface XplTab {
+        /**
+          * Disables this tab (pill or underline).
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Focuses the tab's trigger button.
+         */
+        "focusTrigger": () => Promise<void>;
+        /**
+          * Whether the tab should take full width (set by parent `xpl-tabs` when fullWidth is true).
+          * @default false
+         */
+        "fullWidth": boolean;
+        /**
+          * Returns the focusable button element for this tab (underline `<button>` or segment `xpl-button` inner button).
+         */
+        "getFocusableElement": () => Promise<HTMLButtonElement | null>;
+        /**
+          * Set when the parent `xpl-tabs` has `disabled` (group-disabled).
+          * @default false
+         */
+        "groupDisabled": boolean;
+        /**
+          * Optional icon name for segment-style pills (`type="segment"` on parent `xpl-tabs`). Ignored for default tabs.
+         */
+        "icon"?: string;
+        /**
+          * Icon position for segment-style pills.
+          * @default 'start'
+         */
+        "iconPosition": 'start' | 'end';
         /**
           * Whether the tab is selected
           * @default false
          */
         "selected": boolean;
+        /**
+          * Sets the tabindex on the focusable button element.
+         */
+        "setTabIndex": (value: number) => Promise<void>;
         /**
           * The target of the tab, required for the tab to be selected
          */
         "target": string;
+        /**
+          * Visual variant: 'tabs' for underline tabs, 'segment' for pill controls. Set by the parent `xpl-tabs` component based on its `type` prop.
+          * @default 'tabs'
+         */
+        "variant": 'tabs' | 'segment';
     }
     interface XplTabPanel {
         /**
@@ -1134,39 +1754,62 @@ export namespace Components {
          */
         "target": string;
     }
+    /**
+     * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
+     */
     interface XplTable {
         /**
-          * The header values for each column.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The header values for each column.
          */
         "columns"?: string[];
         /**
-          * The data for the body of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the body of the table.
          */
         "data"?: string[][];
         /**
-          * The data for the footer of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the footer of the table.
          */
         "footer"?: string[][];
         /**
-          * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.
+          * When true, the first **data** column (per row) is sticky during horizontal scroll. Leading compositional columns are skipped: `selectable` (checkbox) and/or `row-reorderable` (grip) are not frozen so they scroll with the grid; the next column stays pinned at `left: 0`.
          */
         "freeze"?: boolean;
         /**
-          * Toggles to show the sort button on each table head
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles to show the sort button on each table head.
           * @default false
          */
         "isSortable"?: boolean;
         /**
-          * Toggles a selectable checkbox for each row in the table
+          * Accessible label for the table. Maps to `aria-label` in compositional mode.
+         */
+        "label"?: string;
+        /**
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles a selectable checkbox for each row in the table.
          */
         "multiselect"?: boolean;
         /**
-          * The values for the input for each row when multiselect is activated.
+          * Icon name for the optional `xpl-icon` inside each **managed** reorder grip when the row is **not** in keyboard reorder mode (pointer / idle). Set to `""` to omit the icon so you can style the button or author a fully custom reorder column in markup. When omitted, defaults to `grip-dots-vertical`.
+         */
+        "reorderHandleIcon"?: string;
+        /**
+          * Icon name for the managed reorder grip **while that row is in keyboard reorder mode** (after the user activates the grip with Enter or Space). Use a different icon than `reorder-handle-icon` so users can see they should use arrow keys. When omitted, defaults to `caret-expand-y` (same as `xpl-list` keyboard reorder). Set to `""` to show no icon in keyboard mode only (combine with CSS on `.xpl-table__row-drag-handle--keyboard-mode` if needed).
+         */
+        "reorderHandleIconKeyboard"?: string;
+        /**
+          * When true (compositional mode only), **prepends** a managed reorder column as the **first** grid column (empty header + grip button per body row) and enables HTML5 drag-and-drop row reordering (same interaction model as `xpl-list`). With `selectable`, DOM order is **reorder | selection | data** unless you author a custom reorder column. The table updates the DOM and emits `rowOrderChange`; consumers should persist order if needed. Ignored in legacy `columns`/`data` mode.
+         */
+        "rowReorderable"?: boolean;
+        /**
+          * When true (compositional mode only), enables row selection state, the selection toolbar (“N Selected”), and `rowSelectionChange`. **You must add the selection column in your markup:** a header cell with `type="checkbox"`, a body cell containing `xpl-checkbox` per row (aligned with that column), and matching `xpl-table-footer-cell` cells when you use a footer. Each body row should use `row-id` on `xpl-table-row` (or accept auto-generated ids) so `rowSelectionChange` can report `selectedRowIds`.  The toolbar uses the same layout as `xpl-toolbar` and is visible only while at least one row is selected. Use `toolbar-actions-left` / `toolbar-actions-right` slots on this host for bulk actions.
+         */
+        "selectable"?: boolean;
+        /**
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  The values for the input for each row when multiselect is activated.
           * @default []
          */
         "selectedValues"?: string[];
         /**
-          * Manually determined if the column is sortable
+          * @deprecated Use the compositional slot-based API instead. Will be removed in a future major release.  Manually determined if the column is sortable.
           * @default []
          */
         "sortableColumns"?: boolean[];
@@ -1175,45 +1818,159 @@ export namespace Components {
          */
         "striped"?: boolean;
     }
+    interface XplTableBody {
+    }
+    interface XplTableCell {
+        /**
+          * Horizontal text alignment within the cell.
+          * @default 'left'
+         */
+        "align": 'left' | 'right' | 'center';
+        /**
+          * Renders cell text in bold (--xpl-font-weight-semibold).
+          * @default false
+         */
+        "bold": boolean;
+        /**
+          * Whether the cell and its interactive children are disabled. Set automatically by xpl-table-row.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Adds an underline to cell text.
+          * @default false
+         */
+        "underline": boolean;
+    }
+    interface XplTableFooter {
+    }
+    interface XplTableFooterCell {
+        /**
+          * Horizontal text alignment within the cell.
+          * @default 'left'
+         */
+        "align": 'left' | 'right' | 'center';
+    }
     interface XplTableHeader {
     }
     interface XplTableHeaderCell {
+        /**
+          * Horizontal text alignment within the header cell.
+          * @default 'left'
+         */
+        "align": 'left' | 'right' | 'center';
+        /**
+          * Accessible name for the header checkbox (native `aria-label`). Defaults to “Select all rows” when `type` is `checkbox`.
+         */
+        "checkboxAriaLabel"?: string;
+        /**
+          * Whether the header checkbox is checked
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * CSS grid track size for this column (e.g. `1fr`, `minmax(120px, 1fr)`, `auto`). When set, overrides `width`. Use this when you need flexible columns; default layout uses `auto` per column unless you set a track here.
+         */
+        "columnWidth"?: string;
         /**
           * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
         "icon"?: string;
         /**
-          * @property {string} - Text to display in the cell
+          * Whether the checkbox is in indeterminate (partially selected) state
+          * @default false
+         */
+        "indeterminate": boolean;
+        /**
+          * Text to display in the cell.
           * @default ''
          */
         "label"?: string;
         /**
-          * @property {boolean} - Whether the cell is sortable or not
+          * Active sort direction for this column when `sortable`. Set by `xpl-table` when used inside a compositional table; may be set by the app for controlled updates.
+         */
+        "sortDirection"?: 'asc' | 'desc' | null;
+        /**
+          * When `sortable` is true, optional stable id used as the key in `sortChanged`’s detail object. Falls back to a slug of `label` when omitted.
+         */
+        "sortKey"?: string;
+        /**
+          * When true (and `type` is `label`), renders a sort control (button + affordance icon).
           * @default false
          */
-        "sortable"?: boolean;
+        "sortable": boolean;
         /**
-          * @property {string} - The type of cell to render
+          * The type of cell to render.
           * @default 'label'
          */
-        "type": 'label' | 'checkbox' | 'icon';
+        "type": 'label' | 'checkbox' | 'icon' | 'empty';
         /**
-          * @property {number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default to fit the content of the cell with 16px of padding on each side
+          * Fixed width for this column in pixels (minimum 48px). Sets the grid track to `Npx`. Ignored when `columnWidth` is set. When omitted, the column track defaults to `auto` (content-sized).
          */
         "width"?: number;
     }
+    interface XplTableRow {
+        /**
+          * Whether the row and its cells are disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Stable identifier for this row when used with a selectable compositional `xpl-table`. If omitted, the parent table assigns a unique id.
+         */
+        "rowId"?: string;
+        /**
+          * Whether the row is visually selected.
+          * @default false
+         */
+        "selected": boolean;
+    }
     interface XplTabs {
+        /**
+          * Disables the whole tab group (headings, mobile select, and segment pills).
+          * @default false
+         */
+        "disabled": boolean;
         /**
           * Whether to make the tabs full width
           * @default false
          */
         "fullWidth": boolean;
+        /**
+          * Visual and layout variant: classic underline tabs or segment (pill) controls.
+          * @default 'tabs'
+         */
+        "type": 'tabs' | 'segment';
         /**
           * The selected tab target value, defaults to the first tab
          */
         "value": string;
     }
     interface XplTag {
+        /**
+          * Whether the tag is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the tag shows a dismiss button
+          * @default true
+         */
+        "dismissible": boolean;
+        /**
+          * When true, the tag label uses native HTML5 drag (the inner label is the drag source). Named `isDraggable` so the Stencil prop does not collide with the native `HTMLElement.draggable` API. `reflect: false` avoids syncing a `draggable` attribute onto the host; the inner label remains the drag source. Host `onDragStart` still suppresses stray native drags from host chrome.
+          * @default false
+         */
+        "isDraggable": boolean;
+        /**
+          * The size of the tag
+          * @default 'default'
+         */
+        "size": 'default' | 'sm';
+        /**
+          * Optional stable id for the tag. When set, it is included in `tagDragStart` / `tagDragEnd` detail and written to `dataTransfer` as `application/x-tag-id`.
+         */
+        "tagId"?: string;
     }
     interface XplToast {
         /**
@@ -1302,6 +2059,99 @@ export namespace Components {
          */
         "text": string;
     }
+    /**
+     * Horizontal top navigation with **`left-aside`** and a **right rail**: **`right-aside`** then **user menu**
+     * (see **`.xpl-top-nav__right-rail`** in `render()`). The account menu uses an internal **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): built-in trigger uses **`child-account-label`** (prop / attribute) as the label beside a trailing **`chevron-down`** on **`xpl-button`** (**`icon`** / **`iconPosition="end"`**), or **`slot="user-menu-trigger"`** for a custom trigger; panel from **`slot="user-menu"`** (e.g. **`xpl-nav-header-menu`**).
+     * Optional **`nav-control`** and **`navOpen`**. **`left-aside`** uses **`role="list"`** for primary **`xpl-top-nav-item`** rows (**`role="listitem"`** on each item host). The built-in **`xpl-top-nav__brand`** item omits **`listitem`** (it is not a child of that list). **`label`** maps to **`nav`** **`aria-label`**. Opening state is internal (not a prop) — use **`navOpen`** and host **`xpl-top-nav--open`** for styling.
+     * **Escape:** With **`nav-control`**, **Escape** closes the mobile drawer and emits **`navOpen`** **`false`** (skips while **any** descendant **`xpl-popover`** is open — detected from each popover’s inner **`.xpl-popover--is-open`** marker — or when a **`xpl-top-nav-item`** dropdown is open — capture/bubble order). Focus returns to the nav toggle after the drawer closes (**Escape** or second toggle click).
+     * **`xpl-top-nav-item`** **`slot="dropdown"`** uses document **capture** for **Escape** first; the shell uses **bubble**
+     * on **`ownerDocument`** so nested dropdowns close before the drawer.
+     * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens under this subtree
+     * resolve to dark-mode values even when the page root is light. Floating overlays (e.g. **`xpl-popover`** / **`xpl-dropdown`**
+     * content teleported outside the host) do not inherit this scope — add **`dark`** on those panels if they should match.
+     * **Layout:** **`right-aside`** and the user-menu region are wrapped internally (**`.xpl-top-nav__right-lead`**, etc.).
+     * Consumers should not add those BEM classes — slot content only.
+     * **Brand logo:** use **`brand-logo`** (URL) for a built-in **`<img>`**, or **`slot="brand-logo"`** for custom markup (e.g. **`xpl-icon`**, SVG). When the URL prop is set, it takes precedence and the slot is not used for the image. On **narrow viewports** (one pixel below Tailwind **`md`** — see **`top-nav.css`**), **`brand-name`** text is hidden in the bar (logo / slot mark only); keep a meaningful **`alt`** on **`brand-logo`** or accessible slotted mark for context.
+     * **Narrow / mobile** (same breakpoint as above): **`slot="left-aside"`** is **hidden** in the bar until **`nav-control`**
+     * is set **and** the drawer is open (floating panel per Figma). **Without **`nav-control`**, there is no mobile drawer** —
+     * primary links remain hidden below **`md`** until the viewport is wide enough for the horizontal bar. The built-in **brand**
+     * stays in the top bar (**hamburger → brand** when **`nav-control`** is set). **`right-aside`** is hidden in the bar on narrow
+     * viewports (**`top-nav.css`**, one pixel below Tailwind **`md`**); duplicate those actions into **`xpl-nav-header-menu`**
+     * **`slot="right-aside-mobile"`** (below profile, above the list; narrow-only CSS in **`top-nav.css`**) per Figma.
+     * **Account menu vs drawer:** Opening the built-in account **`xpl-popover`** while the mobile drawer is open **closes the drawer**
+     * and emits **`navOpen(false)`** so the two layers do not stack.
+     */
+    interface XplTopNav {
+        /**
+          * Destination URL for the brand control when using native navigation (**`<a href>`**). When unset, the brand is a **`role="button"`** control and **`brandClick`** fires on activation instead.
+         */
+        "brandHref"?: string;
+        /**
+          * Optional image URL for the brand mark (leading the brand row, before **`brand-name`** text). When set, renders **`<img class="xpl-top-nav__brand-logo">`** and ignores **`slot="brand-logo"`** for the mark. When unset, use **`slot="brand-logo"`** for custom logo content.
+         */
+        "brandLogo"?: string;
+        /**
+          * Visible product / app name next to **`brand-logo`**. Omit for logo-only; provide **`brand-logo`** and/or this string to show the built-in brand row (**`left-aside`** is then primary nav links only).
+         */
+        "brandName"?: string;
+        /**
+          * Label text for the built-in account menu trigger (shown **before** the **`chevron-down`** icon) when **`slot="user-menu"`** is present and **`slot="user-menu-trigger"`** is not used. When empty or whitespace-only, the trigger shows only the chevron and uses **`aria-label="Open account menu"`** on the button.
+         */
+        "childAccountLabel"?: string;
+        /**
+          * Accessible name for the `<nav>` landmark (maps to `aria-label`). Use a unique label when the page has multiple navigation regions (e.g. side nav + top nav). When unset, defaults to `top-navigation-bar`.
+         */
+        "label"?: string;
+        /**
+          * When true, renders the navigation control (hamburger) for toggling the left slot on small viewports. The control is **hidden from the Tailwind `md` breakpoint up**; collapse/show for **`left-aside`** uses **`max-width: calc(theme('screens.md') - 1px)`** in **`top-nav.css`** (Figma’s 767px at a 16px root and default **`screens.md`**). Reflected to the **`nav-control`** attribute so host updates (framework props) re-run **`@Watch`**: drawer state and document **Escape** handling stay in sync, the host **`xpl-top-nav--nav-control`** class toggles for **`top-nav.css`**, and **`navOpen(false)`** is emitted if **`nav-control`** is cleared while the drawer was open.
+         */
+        "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
+     * 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`**.
+     * **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`**).
+     */
+    interface XplTopNavItem {
+        /**
+          * When true, adds **`xpl-top-nav-item--active`** for persistent accent styling (e.g. link color on the bar, or chrome inside **`xpl-nav-header-menu`**). Separate from **`selected`**, which sets **`aria-current="page"`** and **`--selected`**. Use both when the design needs “current page” semantics plus the active visual treatment.
+          * @default false
+         */
+        "active": boolean;
+        /**
+          * 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).
+          * @default ''
+         */
+        "icon": string;
+        /**
+          * Accessible name for the inner control when there is no **`label`** and no default-slot text (e.g. icon-only). If omitted in that case, **`aria-label`** defaults to **`Navigation item`**. Ignored when **`label`** or default-slot content supplies a visible name.
+         */
+        "itemAriaLabel"?: string;
+        /**
+          * 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;
+        /**
+          * When true, sets **`aria-current="page"`** and selected styling.
+          * @default false
+         */
+        "selected": boolean;
+    }
     interface XplUtilityBar {
         /**
           * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
@@ -1313,6 +2163,10 @@ export namespace Components {
         "navControl"?: boolean;
     }
 }
+export interface XplBannerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplBannerElement;
+}
 export interface XplButtonRowCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplButtonRowElement;
@@ -1353,11 +2207,27 @@ export interface XplInputFileCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplInputFileElement;
 }
-export interface XplInputTimeCustomEvent<T> extends CustomEvent<T> {
+export interface XplInputPhoneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLXplInputTimeElement;
+    target: HTMLXplInputPhoneElement;
 }
-export interface XplMainNavCustomEvent<T> extends CustomEvent<T> {
+export interface XplInputSearchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputSearchElement;
+}
+export interface XplInputTimeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputTimeElement;
+}
+export interface XplListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplListElement;
+}
+export interface XplListItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplListItemElement;
+}
+export interface XplMainNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplMainNavElement;
 }
@@ -1385,10 +2255,18 @@ export interface XplSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplSelectElement;
 }
+export interface XplSideNavItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplSideNavItemElement;
+}
 export interface XplSlideoutCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplSlideoutElement;
 }
+export interface XplSpotlightCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplSpotlightElement;
+}
 export interface XplTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplTabElement;
@@ -1409,6 +2287,14 @@ export interface XplTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplTagElement;
 }
+export interface XplTopNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplTopNavElement;
+}
+export interface XplTopNavItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplTopNavItemElement;
+}
 export interface XplUtilityBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplUtilityBarElement;
@@ -1444,6 +2330,25 @@ declare global {
         prototype: HTMLXplBadgeElement;
         new (): HTMLXplBadgeElement;
     };
+    interface HTMLXplBannerElementEventMap {
+        "action": void;
+        "dismiss": void;
+        "secondaryAction": void;
+    }
+    interface HTMLXplBannerElement extends Components.XplBanner, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplBannerElementEventMap>(type: K, listener: (this: HTMLXplBannerElement, ev: XplBannerCustomEvent<HTMLXplBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplBannerElementEventMap>(type: K, listener: (this: HTMLXplBannerElement, ev: XplBannerCustomEvent<HTMLXplBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplBannerElement: {
+        prototype: HTMLXplBannerElement;
+        new (): HTMLXplBannerElement;
+    };
     interface HTMLXplBreadcrumbItemElement extends Components.XplBreadcrumbItem, HTMLStencilElement {
     }
     var HTMLXplBreadcrumbItemElement: {
@@ -1595,6 +2500,10 @@ declare global {
     interface HTMLXplDynamicTableElementEventMap {
         "selectedItemCountChange": string[];
     }
+    /**
+     * @deprecated Use the compositional `<xpl-table>` API instead.
+     * This component will be removed in a future major release.
+     */
     interface HTMLXplDynamicTableElement extends Components.XplDynamicTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplDynamicTableElementEventMap>(type: K, listener: (this: HTMLXplDynamicTableElement, ev: XplDynamicTableCustomEvent<HTMLXplDynamicTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1609,12 +2518,20 @@ declare global {
         prototype: HTMLXplDynamicTableElement;
         new (): HTMLXplDynamicTableElement;
     };
+    /**
+     * @deprecated Use `<xpl-table-cell>` instead.
+     * This component will be removed in a future major release.
+     */
     interface HTMLXplDynamicTableCellElement extends Components.XplDynamicTableCell, HTMLStencilElement {
     }
     var HTMLXplDynamicTableCellElement: {
         prototype: HTMLXplDynamicTableCellElement;
         new (): HTMLXplDynamicTableCellElement;
     };
+    /**
+     * @deprecated Use `<xpl-table-row>` instead.
+     * This component will be removed in a future major release.
+     */
     interface HTMLXplDynamicTableRowElement extends Components.XplDynamicTableRow, HTMLStencilElement {
     }
     var HTMLXplDynamicTableRowElement: {
@@ -1650,6 +2567,7 @@ declare global {
         "blurEvent": FocusEvent;
         "valueChange": string;
         "inputEvent": string;
+        "search": string;
     }
     interface HTMLXplInputElement extends Components.XplInput, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplInputElementEventMap>(type: K, listener: (this: HTMLXplInputElement, ev: XplInputCustomEvent<HTMLXplInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1725,6 +2643,45 @@ declare global {
         prototype: HTMLXplInputFileElement;
         new (): HTMLXplInputFileElement;
     };
+    interface HTMLXplInputPhoneElementEventMap {
+        "hasErrorStateChanged": string | null;
+        "valueChange": string;
+    }
+    interface HTMLXplInputPhoneElement extends Components.XplInputPhone, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplInputPhoneElementEventMap>(type: K, listener: (this: HTMLXplInputPhoneElement, ev: XplInputPhoneCustomEvent<HTMLXplInputPhoneElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplInputPhoneElementEventMap>(type: K, listener: (this: HTMLXplInputPhoneElement, ev: XplInputPhoneCustomEvent<HTMLXplInputPhoneElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplInputPhoneElement: {
+        prototype: HTMLXplInputPhoneElement;
+        new (): HTMLXplInputPhoneElement;
+    };
+    interface HTMLXplInputSearchElementEventMap {
+        "blurEvent": FocusEvent;
+        "focusEvent": FocusEvent;
+        "inputEvent": string;
+        "search": string;
+        "valueChange": string;
+    }
+    interface HTMLXplInputSearchElement extends Components.XplInputSearch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplInputSearchElementEventMap>(type: K, listener: (this: HTMLXplInputSearchElement, ev: XplInputSearchCustomEvent<HTMLXplInputSearchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplInputSearchElementEventMap>(type: K, listener: (this: HTMLXplInputSearchElement, ev: XplInputSearchCustomEvent<HTMLXplInputSearchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplInputSearchElement: {
+        prototype: HTMLXplInputSearchElement;
+        new (): HTMLXplInputSearchElement;
+    };
     interface HTMLXplInputTimeElementEventMap {
         "valueChange": string;
         "hasErrorStateChanged": string | null;
@@ -1749,12 +2706,44 @@ declare global {
         prototype: HTMLXplLargeCardElement;
         new (): HTMLXplLargeCardElement;
     };
+    interface HTMLXplListElementEventMap {
+        "itemSelect": { itemId?: string };
+        "orderChange": XplListOrderChangeDetail;
+    }
     interface HTMLXplListElement extends Components.XplList, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplListElementEventMap>(type: K, listener: (this: HTMLXplListElement, ev: XplListCustomEvent<HTMLXplListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplListElementEventMap>(type: K, listener: (this: HTMLXplListElement, ev: XplListCustomEvent<HTMLXplListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLXplListElement: {
         prototype: HTMLXplListElement;
         new (): HTMLXplListElement;
     };
+    interface HTMLXplListItemElementEventMap {
+        "itemDragEnd": { itemId?: string; item: HTMLElement };
+        "itemDragStart": { itemId?: string; item: HTMLElement };
+        "itemDrop": { itemId?: string; item: HTMLElement };
+        "itemSelect": { itemId?: string };
+    }
+    interface HTMLXplListItemElement extends Components.XplListItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplListItemElementEventMap>(type: K, listener: (this: HTMLXplListItemElement, ev: XplListItemCustomEvent<HTMLXplListItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplListItemElementEventMap>(type: K, listener: (this: HTMLXplListItemElement, ev: XplListItemCustomEvent<HTMLXplListItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplListItemElement: {
+        prototype: HTMLXplListItemElement;
+        new (): HTMLXplListItemElement;
+    };
     interface HTMLXplMainNavElementEventMap {
         "navWidth": string;
     }
@@ -1789,6 +2778,30 @@ declare global {
         prototype: HTMLXplModalElement;
         new (): HTMLXplModalElement;
     };
+    /**
+     * Profile / account block (username, email, default slot for **`xpl-top-nav-item`** / **`xpl-divider`**).
+     * Tag **`xpl-nav-header-menu`**; implementation folder **`xpl-nav-header-menu`**. **`.xpl-nav-header-menu__slot`** is
+     * **`role="list"`** for slotted **`xpl-top-nav-item`** (**`role="listitem"`**).
+     * **Slotted content:** do not add **`xpl-nav-header-menu__*`** BEM classes on nodes you pass into the default slot —
+     * profile, list shell, and **`xpl-top-nav-item`** **`role="listitem"`** are handled by the component. Use
+     * **`xpl-top-nav-item`** (or plain elements that are not Apollo **`xpl-*`** BEM hooks) in the slot only.
+     * **`slot="right-aside-mobile"`** — optional block **between** the profile header and the default-slot list (e.g. narrow-only
+     * duplicate of **every** **`slot="right-aside"`** control per Figma when **`xpl-top-nav`** hides **`right-aside`** on narrow viewports (always)).
+     * Not **`role="list"`**; use **`xpl-button`** / **`xpl-top-nav-item`** as needed. Shown only on **narrow viewports** (one pixel below Tailwind **`md`** — **`top-nav.css`**) so bar actions stay in **`slot="right-aside"`** on wider viewports.
+     * Light-DOM **`slotchange`** is unreliable; a host **`MutationObserver`** (child / subtree / **`slot`** attribute) keeps
+     * **`xpl-nav-header-menu--has-right-aside-mobile`** in sync when nodes are added or retargeted after mount (same pattern as **`xpl-top-nav`**).
+     * Stencil **`newSpecPage`** / mock-doc does not define **`MutationObserver`**; slot presence still updates on the next
+     * deferred flush (**`setTimeout(0)`** coalesced with **`componentDidRender`**). In real browsers the observer handles child /
+     * **`slot`** mutations without stacking uncancellable microtasks.
+     * **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 (same contract as **`xpl-top-nav`** / **`xpl-top-nav-item`**).
+     */
+    interface HTMLXplNavHeaderMenuElement extends Components.XplNavHeaderMenu, HTMLStencilElement {
+    }
+    var HTMLXplNavHeaderMenuElement: {
+        prototype: HTMLXplNavHeaderMenuElement;
+        new (): HTMLXplNavHeaderMenuElement;
+    };
     interface HTMLXplNavItemElementEventMap {
         "navOpen": boolean;
     }
@@ -1824,6 +2837,16 @@ declare global {
         prototype: HTMLXplPaginationElement;
         new (): HTMLXplPaginationElement;
     };
+    /**
+     * A stateless container that defines a section on a page and can house any
+     * type of content. Panels are not dismissible and may contain a top accent.
+     */
+    interface HTMLXplPanelElement extends Components.XplPanel, HTMLStencilElement {
+    }
+    var HTMLXplPanelElement: {
+        prototype: HTMLXplPanelElement;
+        new (): HTMLXplPanelElement;
+    };
     interface HTMLXplPopoverElementEventMap {
         "isOpenChange": boolean;
     }
@@ -1841,11 +2864,17 @@ declare global {
         prototype: HTMLXplPopoverElement;
         new (): HTMLXplPopoverElement;
     };
-    interface HTMLXplProgressElement extends Components.XplProgress, HTMLStencilElement {
+    interface HTMLXplProgressBarElement extends Components.XplProgressBar, HTMLStencilElement {
+    }
+    var HTMLXplProgressBarElement: {
+        prototype: HTMLXplProgressBarElement;
+        new (): HTMLXplProgressBarElement;
+    };
+    interface HTMLXplProgressIndicatorElement extends Components.XplProgressIndicator, HTMLStencilElement {
     }
-    var HTMLXplProgressElement: {
-        prototype: HTMLXplProgressElement;
-        new (): HTMLXplProgressElement;
+    var HTMLXplProgressIndicatorElement: {
+        prototype: HTMLXplProgressIndicatorElement;
+        new (): HTMLXplProgressIndicatorElement;
     };
     interface HTMLXplRadioElementEventMap {
         "radioChange": string | boolean;
@@ -1893,6 +2922,30 @@ declare global {
         prototype: HTMLXplSelectElement;
         new (): HTMLXplSelectElement;
     };
+    interface HTMLXplSideNavElement extends Components.XplSideNav, HTMLStencilElement {
+    }
+    var HTMLXplSideNavElement: {
+        prototype: HTMLXplSideNavElement;
+        new (): HTMLXplSideNavElement;
+    };
+    interface HTMLXplSideNavItemElementEventMap {
+        "expandedChange": boolean;
+        "navClick": void;
+    }
+    interface HTMLXplSideNavItemElement extends Components.XplSideNavItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplSideNavItemElementEventMap>(type: K, listener: (this: HTMLXplSideNavItemElement, ev: XplSideNavItemCustomEvent<HTMLXplSideNavItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplSideNavItemElementEventMap>(type: K, listener: (this: HTMLXplSideNavItemElement, ev: XplSideNavItemCustomEvent<HTMLXplSideNavItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplSideNavItemElement: {
+        prototype: HTMLXplSideNavItemElement;
+        new (): HTMLXplSideNavItemElement;
+    };
     interface HTMLXplSkeletonElement extends Components.XplSkeleton, HTMLStencilElement {
     }
     var HTMLXplSkeletonElement: {
@@ -1916,6 +2969,26 @@ declare global {
         prototype: HTMLXplSlideoutElement;
         new (): HTMLXplSlideoutElement;
     };
+    interface HTMLXplSpotlightElementEventMap {
+        "dismiss": void;
+        "primaryAction": void;
+        "secondaryAction": void;
+        "targetClick": void;
+    }
+    interface HTMLXplSpotlightElement extends Components.XplSpotlight, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplSpotlightElementEventMap>(type: K, listener: (this: HTMLXplSpotlightElement, ev: XplSpotlightCustomEvent<HTMLXplSpotlightElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplSpotlightElementEventMap>(type: K, listener: (this: HTMLXplSpotlightElement, ev: XplSpotlightCustomEvent<HTMLXplSpotlightElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplSpotlightElement: {
+        prototype: HTMLXplSpotlightElement;
+        new (): HTMLXplSpotlightElement;
+    };
     interface HTMLXplTabElementEventMap {
         "tabChange": string;
     }
@@ -1940,13 +3013,14 @@ declare global {
         new (): HTMLXplTabPanelElement;
     };
     interface HTMLXplTableElementEventMap {
+        "rowOrderChange": XplTableRowOrderChangeDetail;
+        "rowSelectionChange": { selectedRowIds: string[] };
+        "sortChanged": XplTableSortChangedDetail;
         "tableSelect": any;
-        "sortChanged": {
-        colNum: number;
-        colName: string;
-        sortTypeArr: string[];
-    };
     }
+    /**
+     * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
+     */
     interface HTMLXplTableElement extends Components.XplTable, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplTableElementEventMap>(type: K, listener: (this: HTMLXplTableElement, ev: XplTableCustomEvent<HTMLXplTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1961,6 +3035,30 @@ declare global {
         prototype: HTMLXplTableElement;
         new (): HTMLXplTableElement;
     };
+    interface HTMLXplTableBodyElement extends Components.XplTableBody, HTMLStencilElement {
+    }
+    var HTMLXplTableBodyElement: {
+        prototype: HTMLXplTableBodyElement;
+        new (): HTMLXplTableBodyElement;
+    };
+    interface HTMLXplTableCellElement extends Components.XplTableCell, HTMLStencilElement {
+    }
+    var HTMLXplTableCellElement: {
+        prototype: HTMLXplTableCellElement;
+        new (): HTMLXplTableCellElement;
+    };
+    interface HTMLXplTableFooterElement extends Components.XplTableFooter, HTMLStencilElement {
+    }
+    var HTMLXplTableFooterElement: {
+        prototype: HTMLXplTableFooterElement;
+        new (): HTMLXplTableFooterElement;
+    };
+    interface HTMLXplTableFooterCellElement extends Components.XplTableFooterCell, HTMLStencilElement {
+    }
+    var HTMLXplTableFooterCellElement: {
+        prototype: HTMLXplTableFooterCellElement;
+        new (): HTMLXplTableFooterCellElement;
+    };
     interface HTMLXplTableHeaderElement extends Components.XplTableHeader, HTMLStencilElement {
     }
     var HTMLXplTableHeaderElement: {
@@ -1968,7 +3066,8 @@ declare global {
         new (): HTMLXplTableHeaderElement;
     };
     interface HTMLXplTableHeaderCellElementEventMap {
-        "sortChanged": 'asc' | 'desc' | 'none';
+        "headerCheckboxChange": boolean;
+        "headerSortChange": HeaderSortChangeDetail;
     }
     interface HTMLXplTableHeaderCellElement extends Components.XplTableHeaderCell, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplTableHeaderCellElementEventMap>(type: K, listener: (this: HTMLXplTableHeaderCellElement, ev: XplTableHeaderCellCustomEvent<HTMLXplTableHeaderCellElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1984,6 +3083,12 @@ declare global {
         prototype: HTMLXplTableHeaderCellElement;
         new (): HTMLXplTableHeaderCellElement;
     };
+    interface HTMLXplTableRowElement extends Components.XplTableRow, HTMLStencilElement {
+    }
+    var HTMLXplTableRowElement: {
+        prototype: HTMLXplTableRowElement;
+        new (): HTMLXplTableRowElement;
+    };
     interface HTMLXplTabsElementEventMap {
         "tabChange": string;
     }
@@ -2002,7 +3107,10 @@ declare global {
         new (): HTMLXplTabsElement;
     };
     interface HTMLXplTagElementEventMap {
-        "close": any;
+        "close": void;
+        "tagDragEnd": TagDragEndDetail;
+        "tagDragStart": TagDragStartDetail;
+        "tagRemove": void;
     }
     interface HTMLXplTagElement extends Components.XplTag, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplTagElementEventMap>(type: K, listener: (this: HTMLXplTagElement, ev: XplTagCustomEvent<HTMLXplTagElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2042,6 +3150,79 @@ declare global {
         prototype: HTMLXplTooltipElement;
         new (): HTMLXplTooltipElement;
     };
+    interface HTMLXplTopNavElementEventMap {
+        "brandClick": MouseEvent;
+        "navOpen": boolean;
+    }
+    /**
+     * Horizontal top navigation with **`left-aside`** and a **right rail**: **`right-aside`** then **user menu**
+     * (see **`.xpl-top-nav__right-rail`** in `render()`). The account menu uses an internal **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): built-in trigger uses **`child-account-label`** (prop / attribute) as the label beside a trailing **`chevron-down`** on **`xpl-button`** (**`icon`** / **`iconPosition="end"`**), or **`slot="user-menu-trigger"`** for a custom trigger; panel from **`slot="user-menu"`** (e.g. **`xpl-nav-header-menu`**).
+     * Optional **`nav-control`** and **`navOpen`**. **`left-aside`** uses **`role="list"`** for primary **`xpl-top-nav-item`** rows (**`role="listitem"`** on each item host). The built-in **`xpl-top-nav__brand`** item omits **`listitem`** (it is not a child of that list). **`label`** maps to **`nav`** **`aria-label`**. Opening state is internal (not a prop) — use **`navOpen`** and host **`xpl-top-nav--open`** for styling.
+     * **Escape:** With **`nav-control`**, **Escape** closes the mobile drawer and emits **`navOpen`** **`false`** (skips while **any** descendant **`xpl-popover`** is open — detected from each popover’s inner **`.xpl-popover--is-open`** marker — or when a **`xpl-top-nav-item`** dropdown is open — capture/bubble order). Focus returns to the nav toggle after the drawer closes (**Escape** or second toggle click).
+     * **`xpl-top-nav-item`** **`slot="dropdown"`** uses document **capture** for **Escape** first; the shell uses **bubble**
+     * on **`ownerDocument`** so nested dropdowns close before the drawer.
+     * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens under this subtree
+     * resolve to dark-mode values even when the page root is light. Floating overlays (e.g. **`xpl-popover`** / **`xpl-dropdown`**
+     * content teleported outside the host) do not inherit this scope — add **`dark`** on those panels if they should match.
+     * **Layout:** **`right-aside`** and the user-menu region are wrapped internally (**`.xpl-top-nav__right-lead`**, etc.).
+     * Consumers should not add those BEM classes — slot content only.
+     * **Brand logo:** use **`brand-logo`** (URL) for a built-in **`<img>`**, or **`slot="brand-logo"`** for custom markup (e.g. **`xpl-icon`**, SVG). When the URL prop is set, it takes precedence and the slot is not used for the image. On **narrow viewports** (one pixel below Tailwind **`md`** — see **`top-nav.css`**), **`brand-name`** text is hidden in the bar (logo / slot mark only); keep a meaningful **`alt`** on **`brand-logo`** or accessible slotted mark for context.
+     * **Narrow / mobile** (same breakpoint as above): **`slot="left-aside"`** is **hidden** in the bar until **`nav-control`**
+     * is set **and** the drawer is open (floating panel per Figma). **Without **`nav-control`**, there is no mobile drawer** —
+     * primary links remain hidden below **`md`** until the viewport is wide enough for the horizontal bar. The built-in **brand**
+     * stays in the top bar (**hamburger → brand** when **`nav-control`** is set). **`right-aside`** is hidden in the bar on narrow
+     * viewports (**`top-nav.css`**, one pixel below Tailwind **`md`**); duplicate those actions into **`xpl-nav-header-menu`**
+     * **`slot="right-aside-mobile"`** (below profile, above the list; narrow-only CSS in **`top-nav.css`**) per Figma.
+     * **Account menu vs drawer:** Opening the built-in account **`xpl-popover`** while the mobile drawer is open **closes the drawer**
+     * and emits **`navOpen(false)`** so the two layers do not stack.
+     */
+    interface HTMLXplTopNavElement extends Components.XplTopNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplTopNavElementEventMap>(type: K, listener: (this: HTMLXplTopNavElement, ev: XplTopNavCustomEvent<HTMLXplTopNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplTopNavElementEventMap>(type: K, listener: (this: HTMLXplTopNavElement, ev: XplTopNavCustomEvent<HTMLXplTopNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplTopNavElement: {
+        prototype: HTMLXplTopNavElement;
+        new (): HTMLXplTopNavElement;
+    };
+    interface HTMLXplTopNavItemElementEventMap {
+        "navItemClick": MouseEvent;
+    }
+    /**
+     * 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
+     * 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`**.
+     * **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`**).
+     */
+    interface HTMLXplTopNavItemElement extends Components.XplTopNavItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplTopNavItemElementEventMap>(type: K, listener: (this: HTMLXplTopNavItemElement, ev: XplTopNavItemCustomEvent<HTMLXplTopNavItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplTopNavItemElementEventMap>(type: K, listener: (this: HTMLXplTopNavItemElement, ev: XplTopNavItemCustomEvent<HTMLXplTopNavItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLXplTopNavItemElement: {
+        prototype: HTMLXplTopNavItemElement;
+        new (): HTMLXplTopNavItemElement;
+    };
     interface HTMLXplUtilityBarElementEventMap {
         "navOpen": boolean;
     }
@@ -2065,6 +3246,7 @@ declare global {
         "xpl-avatar": HTMLXplAvatarElement;
         "xpl-backdrop": HTMLXplBackdropElement;
         "xpl-badge": HTMLXplBadgeElement;
+        "xpl-banner": HTMLXplBannerElement;
         "xpl-breadcrumb-item": HTMLXplBreadcrumbItemElement;
         "xpl-breadcrumbs": HTMLXplBreadcrumbsElement;
         "xpl-button": HTMLXplButtonElement;
@@ -2091,35 +3273,53 @@ declare global {
         "xpl-input-color": HTMLXplInputColorElement;
         "xpl-input-date": HTMLXplInputDateElement;
         "xpl-input-file": HTMLXplInputFileElement;
+        "xpl-input-phone": HTMLXplInputPhoneElement;
+        "xpl-input-search": HTMLXplInputSearchElement;
         "xpl-input-time": HTMLXplInputTimeElement;
         "xpl-large-card": HTMLXplLargeCardElement;
         "xpl-list": HTMLXplListElement;
+        "xpl-list-item": HTMLXplListItemElement;
         "xpl-main-nav": HTMLXplMainNavElement;
         "xpl-modal": HTMLXplModalElement;
+        "xpl-nav-header-menu": HTMLXplNavHeaderMenuElement;
         "xpl-nav-item": HTMLXplNavItemElement;
         "xpl-pagination": HTMLXplPaginationElement;
+        "xpl-panel": HTMLXplPanelElement;
         "xpl-popover": HTMLXplPopoverElement;
-        "xpl-progress": HTMLXplProgressElement;
+        "xpl-progress-bar": HTMLXplProgressBarElement;
+        "xpl-progress-indicator": HTMLXplProgressIndicatorElement;
         "xpl-radio": HTMLXplRadioElement;
         "xpl-secondary-nav": HTMLXplSecondaryNavElement;
         "xpl-select": HTMLXplSelectElement;
+        "xpl-side-nav": HTMLXplSideNavElement;
+        "xpl-side-nav-item": HTMLXplSideNavItemElement;
         "xpl-skeleton": HTMLXplSkeletonElement;
         "xpl-slideout": HTMLXplSlideoutElement;
+        "xpl-spotlight": HTMLXplSpotlightElement;
         "xpl-tab": HTMLXplTabElement;
         "xpl-tab-panel": HTMLXplTabPanelElement;
         "xpl-table": HTMLXplTableElement;
+        "xpl-table-body": HTMLXplTableBodyElement;
+        "xpl-table-cell": HTMLXplTableCellElement;
+        "xpl-table-footer": HTMLXplTableFooterElement;
+        "xpl-table-footer-cell": HTMLXplTableFooterCellElement;
         "xpl-table-header": HTMLXplTableHeaderElement;
         "xpl-table-header-cell": HTMLXplTableHeaderCellElement;
+        "xpl-table-row": HTMLXplTableRowElement;
         "xpl-tabs": HTMLXplTabsElement;
         "xpl-tag": HTMLXplTagElement;
         "xpl-toast": HTMLXplToastElement;
         "xpl-toggle": HTMLXplToggleElement;
         "xpl-toolbar": HTMLXplToolbarElement;
         "xpl-tooltip": HTMLXplTooltipElement;
+        "xpl-top-nav": HTMLXplTopNavElement;
+        "xpl-top-nav-item": HTMLXplTopNavItemElement;
         "xpl-utility-bar": HTMLXplUtilityBarElement;
     }
 }
 declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
     interface XplAccordion {
         /**
           * set the border of the accordion  none: there’s no border wrapping the header  bottom:there’s a border below the header  bordered: the header is wrapped by a white panel with a rounded border around it on every side
@@ -2175,22 +3375,26 @@ declare namespace LocalJSX {
         /**
           * Background color when there is no image src
          */
-        "color"?: 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+        "color"?: AvatarColor;
         /**
           * Sets a disabled state on the avatar when set to true
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * When `variant` is `group`, data for each face (max 4 visible + overflow count). Each item: { src?, name?, color? }.
+         */
+        "groupData"?: AvatarGroupItem[] | string;
         /**
           * The URL if the avatar should be hyperlinked
          */
         "href"?: string;
         /**
-          * Alt text for the image if there is an image src
+          * Alt text for the image; also used for initials when no image and no slot.
          */
         "name"?: string;
         /**
-          * Size of the avatar
+          * Size of the avatar (and of each avatar in a group).
          */
         "size"?: 'md' | 'sm';
         /**
@@ -2198,13 +3402,22 @@ declare namespace LocalJSX {
          */
         "src"?: string;
         /**
-          * Color styles for the dot indicator to indicate varied states
+          * Shown for the default avatar, `profile`, and `with-text`; not shown when `variant` is `group`. **Legacy
+          * @deprecated :** `active`, `warning`, and `inactive` still map to `green`, `red`, and `gray` for existing consumers. Prefer palette names; legacy values are scheduled for removal in the next **major** release.
          */
-        "status"?: 'active' | 'warning' | 'inactive';
+        "status"?: AvatarStatus;
+        /**
+          * Secondary text shown when `variant` is `with-text` (e.g. email).
+         */
+        "subText"?: string;
         /**
           * Where to open the URL chosen for the `href` prop: `_self` (default), `_blank`, `_parent`, or `_top`
          */
         "target"?: string;
+        /**
+          * Optional layout: `profile` (large profile sizes), `group` (stacked faces + `groupData`; `status` not shown), `with-text` (avatar with `name` / `subText` beside it). Omit for the default single avatar.
+         */
+        "variant"?: AvatarVariant;
     }
     interface XplBackdrop {
         /**
@@ -2215,13 +3428,89 @@ declare namespace LocalJSX {
     }
     interface XplBadge {
         /**
-          * Whether badge shows a dot icon before the text
+          * Whether badge shows a bordered ring
+          * @default false
+         */
+        "bordered"?: boolean;
+        /**
+          * Whether badge shows a dot icon before the text (inside the pill)
          */
         "dot"?: boolean;
         /**
-          * Color styles to indicate varied states
+          * When true, render a compact badge built around the dot. - With no children: just a dot (status/dot badge) - With children: a small dot badge with the text/number inside
+          * @default false
+         */
+        "dotOnly"?: boolean;
+        /**
+          * Badge shape rounded (pill) boxy (rounded corners)
+          * @default 'rounded'
+         */
+        "shape"?: 'rounded' | 'boxy';
+        /**
+          * Badge size default | small
+          * @default 'default'
+         */
+        "size"?: 'default' | 'small';
+        /**
+          * Badge variant (color).  Preferred values: `purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`.  The legacy semantic names `success`, `warning`, `inactive`, and `error` are still accepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the color names for new code.
+          * @default 'purple'
+         */
+        "variant"?: BadgeVariantProp;
+    }
+    interface XplBanner {
+        /**
+          * Primary action label. When provided, an action button is rendered.
+         */
+        "actionText"?: string;
+        /**
+          * Controls the visual appearance and semantic meaning of the banner. These values map to messaging background/border token sets in `banner.css`. Banner icons use `--xpl-icon-default`, except `error` which uses inverse icon/text tokens for contrast on dark backgrounds.
+          * @default 'information'
          */
-        "variant"?: 'success' | 'warning' | 'inactive' | 'error';
+        "appearance"?: 'information' | 'positive' | 'warning' | 'error';
+        /**
+          * Optional supporting message shown after the heading. Description text uses `--xpl-text-default`.
+         */
+        "description"?: string;
+        /**
+          * Whether to render the leading icon in section layout. Ignored in bar layout — bar banners always show the icon.
+          * @default true
+         */
+        "hasIcon"?: boolean;
+        /**
+          * Primary banner message shown with stronger title typography.
+         */
+        "heading"?: string;
+        /**
+          * Whether to show the trailing dismiss control.
+          * @default true
+         */
+        "isDismissible"?: boolean;
+        /**
+          * Renders the section-style banner layout when true.
+          * @default false
+         */
+        "isSection"?: boolean;
+        /**
+          * Emitted when the primary action is clicked.
+         */
+        "onAction"?: (event: XplBannerCustomEvent<void>) => void;
+        /**
+          * Emitted when the dismiss button is clicked.
+         */
+        "onDismiss"?: (event: XplBannerCustomEvent<void>) => void;
+        /**
+          * Emitted when the secondary action is clicked.
+         */
+        "onSecondaryAction"?: (event: XplBannerCustomEvent<void>) => void;
+        /**
+          * Secondary action label. When provided, a second action button is rendered.
+         */
+        "secondaryActionText"?: string;
+        /**
+          * When true, `description` is constrained to one line with ellipsis so banner height stays stable.
+          * @default false
+         */
+        "truncateDesc"?: boolean;
     }
     interface XplBreadcrumbItem {
     }
@@ -2229,52 +3518,84 @@ declare namespace LocalJSX {
     }
     interface XplButton {
         /**
-          * whether button should be disabled
+          * Attributes to apply to the inner native `<button>` (e.g., tab a11y wiring). Use this instead of setting `id` / `role` / `aria-*` on the host when the inner control is the element that needs them (e.g., WAI-ARIA composite widgets).
+         */
+        "controlAttrs"?: {
+        id?: string;
+        role?: string;
+        'aria-controls'?: string;
+        'aria-selected'?: 'true' | 'false';
+        'aria-current'?: string;
+    };
+        /**
+          * Whether button should be disabled
+          * @default false
          */
         "disabled"?: boolean;
         /**
-          * @property {string} - An optional form attribute for the button if type is submit
+          * An optional form attribute for the button if type is submit
          */
         "form"?: string;
         /**
-          * whether button should render with full width
+          * Whether the button should be of full width as per parent container.
+          * @default false
          */
         "fullWidth"?: boolean;
         /**
-          * whether button should render icon only
+          * Icon to render - icon name as string (from xpl-icon library).
+          * @default ''
+         */
+        "icon"?: string;
+        /**
+          * When true, the button renders in icon-only circular style. Use for icon-only buttons.
+          * @default false
          */
         "iconOnly"?: boolean;
+        /**
+          * Icon position relative to slot content. Ignored if no icon is provided.
+          * @default 'start'
+         */
+        "iconPosition"?: 'start' | 'end';
+        /**
+          * When true, shows a loading overlay with spinner over the button. Button is non-interactive.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * whether button should yield a slot for a link tag
          */
         "link"?: boolean;
         /**
-          * @property {string} - button name attribute
+          * Name of the button, submitted with form data. Passed through to the native button element.
          */
         "name"?: string;
         /**
-          * @property {"default" | "sm" | "xs"} - button size
+          * Sentiment of the button, which applies different color schemes to indicate purpose/intent.
+          * @default 'neutral'
+         */
+        "sentiment"?: 'neutral' | 'negative' | 'positive';
+        /**
+          * Button size. Use 'default', 'xs' (extra small), or 'sm' (small).
           * @default 'default'
          */
-        "size"?: 'default' | 'sm' | 'xs';
+        "size"?: 'default' | 'xs' | 'sm';
         /**
-          * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
-          * @default 'neutral'
+          * @deprecated : Use `sentiment` with values "neutral", "negative", "positive" instead of `state` .
          */
         "state"?: 'neutral' | 'warning' | 'success';
         /**
-          * @property {"submit" | "reset" | "button"} - button type attribute
+          * HTML button type attribute.
          */
         "type"?: 'submit' | 'reset' | 'button';
         /**
-          * @property {string} - button value attribute
+          * Value of the button, submitted with form data. Passed through to the native button element.
          */
         "value"?: string;
         /**
-          * @property {"primary" | "secondary" | "subtle"} - button variant
+          * Button variant/style. Use "primary", "secondary", "tertiary" for new usage. "subtle" is deprecated but still supported for backward compatibility.
           * @default 'primary'
          */
-        "variant"?: 'primary' | 'secondary' | 'subtle';
+        "variant"?: 'primary' | 'secondary' | 'tertiary' | 'subtle';
     }
     interface XplButtonRow {
         /**
@@ -2336,6 +3657,11 @@ declare namespace LocalJSX {
         "onDateSelected"?: (event: XplCalendarCustomEvent<string | string[]>) => void;
     }
     interface XplCheckbox {
+        /**
+          * Accessible name for the native checkbox input (sets `aria-label` on the `input`). Use when there is no visible label text in the default slot. Defaults to `''`; empty or whitespace-only values omit `aria-label` on the input so a visible `<label>` remains the sole name source.
+          * @default ''
+         */
+        "ariaLabel"?: string;
         /**
           * Whether the input is checked
          */
@@ -2529,7 +3855,7 @@ declare namespace LocalJSX {
         /**
           * call back function invoked when a selection is made
          */
-        "update"?: (e, { component }: { component: XplDropdown }) => void;
+        "update"?: (e, { component }: { component: Dropdown }) => void;
     }
     interface XplDropdownGroup {
         /**
@@ -2548,6 +3874,10 @@ declare namespace LocalJSX {
         "label"?: string;
     }
     interface XplDropdownOption {
+        /**
+          * optional icon name to display before the label (uses xpl-icon)
+         */
+        "icon"?: string;
         /**
           * whether option is disabled
          */
@@ -2569,12 +3899,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @deprecated Use the compositional `<xpl-table>` API instead.
+     * This component will be removed in a future major release.
+     */
     interface XplDynamicTable {
         /**
           * Emitted when the number of selected items changes.
          */
         "onSelectedItemCountChange"?: (event: XplDynamicTableCustomEvent<string[]>) => void;
     }
+    /**
+     * @deprecated Use `<xpl-table-cell>` instead.
+     * This component will be removed in a future major release.
+     */
     interface XplDynamicTableCell {
         /**
           * Whether the cell and its contents are disabled.
@@ -2582,6 +3920,10 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
     }
+    /**
+     * @deprecated Use `<xpl-table-row>` instead.
+     * This component will be removed in a future major release.
+     */
     interface XplDynamicTableRow {
         /**
           * Whether the row and its cells are disabled.
@@ -2675,7 +4017,12 @@ declare namespace LocalJSX {
          */
         "allowCustomOption"?: boolean;
         /**
-          * Hint for form autofill feature  Applies to text, password, number.
+          * Accessible name for search inputs when there is no visible `label` (after trim). Ignored for naming when a visible label is shown. Defaults to `''`; whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed when there is no visible label.  Applies to search inputs (`type="search"`).
+          * @default ''
+         */
+        "ariaLabel"?: string;
+        /**
+          * Hint for form autofill feature  Applies to text, password, number, and search inputs.
          */
         "autocomplete"?: string;
         /**
@@ -2683,6 +4030,11 @@ declare namespace LocalJSX {
           * @default 'Y-m-d'
          */
         "dateFormat"?: string;
+        /**
+          * Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. "US".  Applies to phone inputs.
+          * @default 'US'
+         */
+        "defaultCountry"?: string;
         /**
           * Optional text that appears below the input label.  Applies to all input types.
          */
@@ -2714,6 +4066,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "hideTriggerOnSelect"?: boolean;
+        /**
+          * Enables international mode with country selector for phone inputs. When false, the phone input is locked to defaultCountry with no country picker.
+          * @default true  Applies to phone inputs.
+         */
+        "isInternational"?: boolean;
         /**
           * Label text for the field  Applies to all input types.
          */
@@ -2758,15 +4115,19 @@ declare namespace LocalJSX {
          */
         "onFocusEvent"?: (event: XplInputCustomEvent<FocusEvent>) => void;
         /**
-          * Event that emits the current value of the input  Applies to text like inputs only.
+          * Event that emits the current value of the input  Applies to text-like inputs and search inputs.
          */
         "onInputEvent"?: (event: XplInputCustomEvent<string>) => void;
         /**
-          * Event that emits the current value of the input
+          * Emitted when the user commits a search (Enter with no enclosing form owner, or submit of the internal search form). `event.detail` is the trimmed query string.  Applies to search inputs (`type="search"`).
+         */
+        "onSearch"?: (event: XplInputCustomEvent<string>) => void;
+        /**
+          * Event that emits the current value of the input (including search fields).
          */
         "onValueChange"?: (event: XplInputCustomEvent<string>) => void;
         /**
-          * Placeholder text that appears when the field has no value  Applies to text, password, number, and date inputs.
+          * Placeholder text that appears when the field has no value  Applies to text, password, number, date, and search inputs.
          */
         "placeholder"?: string;
         /**
@@ -2778,13 +4139,21 @@ declare namespace LocalJSX {
          */
         "pre"?: string;
         /**
-          * Whether the input is editable  Applies to text, password, number, and date inputs.
+          * Country codes to show at the top of the country list, e.g. ["US", "CA", "GB"].  Applies to phone inputs.
+         */
+        "preferredCountries"?: string[];
+        /**
+          * Whether the input is editable  Applies to text, password, number, date, and search inputs.
          */
         "readonly"?: boolean;
         /**
           * Whether the input is required  Applies to all input types.
          */
         "required"?: boolean;
+        /**
+          * Shell corner radius for search inputs: `rounded` (pill) or `box` (rounded rectangle).  Applies to search inputs (`type="search"`).
+         */
+        "shape"?: 'rounded' | 'box';
         /**
           * The granularity that the value in a `number` input must adhere to when incrementing or decrementing. The default stepping value for number inputs is 1  Applies to number and time inputs.
          */
@@ -2798,9 +4167,17 @@ declare namespace LocalJSX {
           * The type of form control
           * @default 'text'
          */
-        "type"?: 'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color';
+        "type"?: | 'date'
+        | 'time'
+        | 'text'
+        | 'number'
+        | 'password'
+        | 'file'
+        | 'color'
+        | 'phone'
+        | 'search';
         /**
-          * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, and date inputs.
+          * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, date, and search inputs.
          */
         "value"?: string;
     }
@@ -2952,12 +4329,12 @@ declare namespace LocalJSX {
         value: File[] | null;
     }>) => void;
     }
-    interface XplInputTime {
+    interface XplInputPhone {
         /**
-          * For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs.
-          * @default false
+          * Default country code (ISO 3166-1 alpha-2) when value is empty, e.g. "US".
+          * @default 'US'
          */
-        "allowCustomOption"?: boolean;
+        "defaultCountry"?: string;
         /**
           * Whether the field is disabled
          */
@@ -2967,30 +4344,166 @@ declare namespace LocalJSX {
          */
         "inputId"?: string;
         /**
-          * Maximum value for the input.
-          * @default '23:59'
+          * Enables international mode with a country selector and dial code prefix. When false, the input is locked to `defaultCountry` with no country picker and no dial code shown in the display value. Emitted value is still E.164.
+          * @default true
          */
-        "max"?: number | string;
+        "isInternational"?: boolean;
         /**
-          * The minimum value for the input.
-          * @default '00:00'
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.
          */
-        "min"?: number | string;
+        "name"?: string;
         /**
-          * Whether the input is a single time or a range of times.  Currently, only single time is supported.
-          * @default 'single'
+          * Event that is emitted when the hasErrorState state changes.
          */
-        "mode"?: 'single' | 'range';
+        "onHasErrorStateChanged"?: (event: XplInputPhoneCustomEvent<string | null>) => void;
         /**
-          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
+          * Event that emits the current value of the input (E.164 format).
          */
-        "name"?: string;
+        "onValueChange"?: (event: XplInputPhoneCustomEvent<string>) => void;
         /**
-          * Event that is emitted when the hasErrorState state changes.
+          * Placeholder text that appears when the field has no value
          */
-        "onHasErrorStateChanged"?: (event: XplInputTimeCustomEvent<string | null>) => void;
+        "placeholder"?: string;
         /**
-          * Event that emits the current value of the input
+          * Country codes to show at the top of the country list, e.g. ["US", "CA", "GB"].
+         */
+        "preferredCountries"?: string[];
+        /**
+          * Whether the input is editable
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required
+         */
+        "required"?: boolean;
+        /**
+          * Including a `value` will pre-populate the input (E.164 format, e.g. +14155551234).
+         */
+        "value"?: string;
+    }
+    interface XplInputSearch {
+        /**
+          * Accessible name when there is no visible label from the parent; maps to `aria-label` on the input. When the parent provides a visible label, the input is named by `<label for="…">` — this prop is ignored for naming. Empty or whitespace-only values are treated as missing and fall back to `'Search'` so the field is never unnamed.
+          * @default 'Search'
+         */
+        "ariaLabel"?: string;
+        /**
+          * Passed to the native input (`autocomplete` attribute). Default `off` matches common inline-search UX; browsers may still apply heuristics.
+          * @default 'off'
+         */
+        "autocomplete"?: string;
+        /**
+          * Disables the field and clear control.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Element id for `aria-describedby` when `hasError` (error message lives on `xpl-input`).
+         */
+        "errorMessageId"?: string;
+        /**
+          * Set by `xpl-input` when `error` is shown — drives `aria-invalid` / `aria-describedby`.
+          * @default false
+         */
+        "hasError"?: boolean;
+        /**
+          * When true, parent `xpl-input` renders a visible label — omit `aria-label` on the input.
+          * @default false
+         */
+        "hasVisibleLabel"?: boolean;
+        /**
+          * Associates the control with the parent `xpl-input` label (`for` / `id`).
+         */
+        "inputId": string;
+        /**
+          * Form field `name` on the native input.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the inner control loses focus. When nested under `xpl-input type="search"`, this event bubbles to the `xpl-input` host (same event name as other input types).
+         */
+        "onBlurEvent"?: (event: XplInputSearchCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the inner control receives focus. When nested under `xpl-input type="search"`, this event bubbles to the `xpl-input` host (same event name as other input types).
+         */
+        "onFocusEvent"?: (event: XplInputSearchCustomEvent<FocusEvent>) => void;
+        /**
+          * Fired on every input change (typing, paste) and when the value is cleared — mirrors `xpl-input` text fields. When nested under `xpl-input type="search"`, bubbles to the `xpl-input` host.
+         */
+        "onInputEvent"?: (event: XplInputSearchCustomEvent<string>) => void;
+        /**
+          * Emitted when the user commits a search (Enter with no enclosing form owner, or submit of the inner search form). `event.detail` is the trimmed query string. When nested under `xpl-input type="search"`, the parent listens with `onSearch` and re-emits so the canonical `search` `@Event` stays on `xpl-input`.
+         */
+        "onSearch"?: (event: XplInputSearchCustomEvent<string>) => void;
+        /**
+          * Fired on every input change (typing, paste) and when the value is cleared. `event.detail` is the raw `value` string (not trimmed). When nested under `xpl-input type="search"`, bubbles to the `xpl-input` host.
+         */
+        "onValueChange"?: (event: XplInputSearchCustomEvent<string>) => void;
+        /**
+          * Placeholder shown when the value is empty.
+          * @default 'Search'
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the input is editable.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the input is required.
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Shell corner radius: `rounded` (pill) or `box` (rounded rectangle).
+          * @default 'rounded'
+         */
+        "shape"?: 'rounded' | 'box';
+        /**
+          * Current value (controlled-friendly).
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface XplInputTime {
+        /**
+          * For time inputs, whether to allow custom option in the input even if not available in the dropdown. Example: A step of 30 minutes will allow 15:03, 15:37, etc.  Applies to time inputs.
+          * @default false
+         */
+        "allowCustomOption"?: boolean;
+        /**
+          * Whether the field is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * The `inputId` is used to associate the input with a label.
+         */
+        "inputId"?: string;
+        /**
+          * Maximum value for the input.
+          * @default '23:59'
+         */
+        "max"?: number | string;
+        /**
+          * The minimum value for the input.
+          * @default '00:00'
+         */
+        "min"?: number | string;
+        /**
+          * Whether the input is a single time or a range of times.  Currently, only single time is supported.
+          * @default 'single'
+         */
+        "mode"?: 'single' | 'range';
+        /**
+          * Most inputs are used in forms, and should have a `name` associated with the input for handling form data.  Applies to all input types.
+         */
+        "name"?: string;
+        /**
+          * Event that is emitted when the hasErrorState state changes.
+         */
+        "onHasErrorStateChanged"?: (event: XplInputTimeCustomEvent<string | null>) => void;
+        /**
+          * Event that emits the current value of the input
          */
         "onValueChange"?: (event: XplInputTimeCustomEvent<string>) => void;
         /**
@@ -3036,10 +4549,114 @@ declare namespace LocalJSX {
     }
     interface XplList {
         /**
-          * `items` should be an array of objects with the following signature: {   avatar?: string;        // The URL of the avatar, or the placeholder initials (ex. "SPD").   avatars?: string[];     // The URLs of multiple avatars to be displayed in a group on the right.   badges?: string[] | {   // An array of strings or badge-like objects to be displayed as badges     dot?: boolean;        // in a group on the right. See <xpl-badge> for more details.     text: string;     variant?: string;   }[];   href?: string;          // A URL, if this list item is meant to link somewhere.   title: string;          // The text to be displayed for the list item.   metadata?: string[] | { // An array of strings or strings with icons (reference the allowed     icon: string;         // Apollo icons) to be displayed as metadata below the title.     text: string;   }[];   subtext?: string;       // Subtext to be displayed on the right. }  - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering   the right-hand side of the list item.
+          * Array of list items to render. Each item should follow the ListItem interface. **Deprecated.** Use slot-based xpl-list-item children instead.
           * @default []
          */
         "items"?: ListItem[];
+        /**
+          * Accessible name for the list, exposed as `aria-label` on the host when set. Use when the list has no visible heading. Ignored when `labelledBy` is set (see `labelledBy` for precedence).
+         */
+        "label"?: string;
+        /**
+          * Element id(s) that label this list (space-separated), exposed as `aria-labelledby` when set. When set, `label` is not applied as `aria-label` so the list has a single naming source.
+         */
+        "labelledBy"?: string;
+        /**
+          * Emitted when an item is selected.
+         */
+        "onItemSelect"?: (event: XplListCustomEvent<{ itemId?: string }>) => void;
+        /**
+          * Emitted when the order of items changes (after the DOM has been updated). `orderedItemIds` lists **visible** row ids only (hidden rows excluded).
+         */
+        "onOrderChange"?: (event: XplListCustomEvent<XplListOrderChangeDetail>) => void;
+        /**
+          * When true, enables reorder UI and behavior for **slot-based** child rows (drag handle + keyboard). Legacy rows rendered from the deprecated `items` prop do **not** show a drag handle; migrate to slots if reorder is required.
+          * @default false
+         */
+        "reorderable"?: boolean;
+        /**
+          * Determines if this list is selectable (shows `xpl-radio` per row in a shared group). Press Escape while focus is on the **selected** row to clear selection (same as `clearSelection()`).
+          * @default false
+         */
+        "selectable"?: boolean;
+    }
+    interface XplListItem {
+        /**
+          * Whether the item is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether to show the item in an error state.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * When true, the row is not shown and does not participate in visible-only list behavior (e.g. `orderChange` / `orderedItemIds`, reorder targets). Use for filtering, conditional display, or keeping stable `item-id` while the row is off-screen. See `xpl-list` readme “Hidden rows”.  **Accessibility:** Renders an empty host with the native `hidden` attribute only (no `role="listitem"`), consistent with the row not participating as a list item while hidden.
+          * @default false
+         */
+        "hidden"?: boolean;
+        /**
+          * URL for link behavior. When provided, the entire row becomes clickable. Clicks on `actions` or `avatar` slots are prevented from triggering navigation.
+         */
+        "href"?: string;
+        /**
+          * Optional item data for prop-based rendering. When provided, this takes precedence over slotted content and renders using the legacy ListItem interface. **Deprecated.** Prefer slot-based composition (named slots on `xpl-list-item`).
+         */
+        "item"?: ListItem;
+        /**
+          * Unique identifier for this item. Used for selection and drag/drop. Mutable so the host can sync from `item-id` / `id` in `componentWillLoad` without breaking one-way data flow.
+         */
+        "itemId"?: string;
+        /**
+          * When set by the parent, indicates this item is the active keyboard reorder item.
+          * @default false
+         */
+        "keyboardActive"?: boolean;
+        /**
+          * Emitted when a drag operation ends on this item (after drop or cancel).
+         */
+        "onItemDragEnd"?: (event: XplListItemCustomEvent<{ itemId?: string; item: HTMLElement }>) => void;
+        /**
+          * Emitted when drag starts on this item.
+         */
+        "onItemDragStart"?: (event: XplListItemCustomEvent<{ itemId?: string; item: HTMLElement }>) => void;
+        /**
+          * Emitted when an item is dropped on this item.
+         */
+        "onItemDrop"?: (event: XplListItemCustomEvent<{ itemId?: string; item: HTMLElement }>) => void;
+        /**
+          * Emitted when the item is selected (radio change).
+         */
+        "onItemSelect"?: (event: XplListItemCustomEvent<{ itemId?: string }>) => void;
+        /**
+          * Name attribute for radio inputs (shared across selectable items in a list).
+         */
+        "radioName"?: string;
+        /**
+          * Whether this item is reorderable (shows a drag handle in **slot-based** layout). When the deprecated `item` prop is used, legacy markup has **no** reorder handle even if this is true.
+          * @default false
+         */
+        "reorderable"?: boolean;
+        /**
+          * Whether this item is selectable (shows `xpl-radio` in a shared group).
+          * @default false
+         */
+        "selectable"?: boolean;
+        /**
+          * Whether this item is selected (radio checked state).
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * Whether to show a divider below the item.
+          * @default false
+         */
+        "showDivider"?: boolean;
+        /**
+          * Optional badge to display next to the title (dot badge). Only used when `item` prop is not provided (slot mode). Matches `xpl-badge` variant values (e.g. purple, green, red).
+         */
+        "titleBadgeVariant"?: BadgeVariantProp1;
     }
     interface XplMainNav {
         /**
@@ -3073,6 +4690,34 @@ declare namespace LocalJSX {
          */
         "variant"?: 'default' | 'warning';
     }
+    /**
+     * Profile / account block (username, email, default slot for **`xpl-top-nav-item`** / **`xpl-divider`**).
+     * Tag **`xpl-nav-header-menu`**; implementation folder **`xpl-nav-header-menu`**. **`.xpl-nav-header-menu__slot`** is
+     * **`role="list"`** for slotted **`xpl-top-nav-item`** (**`role="listitem"`**).
+     * **Slotted content:** do not add **`xpl-nav-header-menu__*`** BEM classes on nodes you pass into the default slot —
+     * profile, list shell, and **`xpl-top-nav-item`** **`role="listitem"`** are handled by the component. Use
+     * **`xpl-top-nav-item`** (or plain elements that are not Apollo **`xpl-*`** BEM hooks) in the slot only.
+     * **`slot="right-aside-mobile"`** — optional block **between** the profile header and the default-slot list (e.g. narrow-only
+     * duplicate of **every** **`slot="right-aside"`** control per Figma when **`xpl-top-nav`** hides **`right-aside`** on narrow viewports (always)).
+     * Not **`role="list"`**; use **`xpl-button`** / **`xpl-top-nav-item`** as needed. Shown only on **narrow viewports** (one pixel below Tailwind **`md`** — **`top-nav.css`**) so bar actions stay in **`slot="right-aside"`** on wider viewports.
+     * Light-DOM **`slotchange`** is unreliable; a host **`MutationObserver`** (child / subtree / **`slot`** attribute) keeps
+     * **`xpl-nav-header-menu--has-right-aside-mobile`** in sync when nodes are added or retargeted after mount (same pattern as **`xpl-top-nav`**).
+     * Stencil **`newSpecPage`** / mock-doc does not define **`MutationObserver`**; slot presence still updates on the next
+     * deferred flush (**`setTimeout(0)`** coalesced with **`componentDidRender`**). In real browsers the observer handles child /
+     * **`slot`** mutations without stacking uncancellable microtasks.
+     * **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 (same contract as **`xpl-top-nav`** / **`xpl-top-nav-item`**).
+     */
+    interface XplNavHeaderMenu {
+        /**
+          * Email address shown below the username.
+         */
+        "email"?: string;
+        /**
+          * Display name shown in the profile block.
+         */
+        "username"?: string;
+    }
     interface XplNavItem {
         /**
           * @property {boolean} - Whether or not the item should control the main nav state on click
@@ -3119,6 +4764,22 @@ declare namespace LocalJSX {
          */
         "withPageControl"?: boolean;
     }
+    /**
+     * A stateless container that defines a section on a page and can house any
+     * type of content. Panels are not dismissible and may contain a top accent.
+     */
+    interface XplPanel {
+        /**
+          * Color accent bar displayed at the top of the panel.  - `none` – no accent (default) - `primary` – brand primary color - `secondary` – brand secondary color - `positive` – positive / success color - `negative` – negative / error color - `highlight` – highlight / warning color
+          * @default 'none'
+         */
+        "accent"?: 'none' | 'primary' | 'secondary' | 'positive' | 'negative' | 'highlight';
+        /**
+          * Padding density applied to the content area. (default and tight keep desktop padding through tablet; mobile ≤480px).  - `default` – 24 px desktop & tablet / 16 px mobile - `tight`   – 16 px desktop & tablet / 8 px mobile - `loose`   – 40 px desktop / 32 px tablet / 24 px mobile
+          * @default 'default'
+         */
+        "padding"?: 'default' | 'tight' | 'loose';
+    }
     interface XplPopover {
         /**
           * Whether the popover is disabled or not.
@@ -3145,12 +4806,57 @@ declare namespace LocalJSX {
          */
         "position"?: PopoverPosition;
     }
-    interface XplProgress {
+    interface XplProgressBar {
+        /**
+          * The helper text displayed below the progress bar (recommended for error state)
+         */
+        "helperText"?: string;
+        /**
+          * The label text displayed above the progress bar
+         */
+        "label"?: string;
+        /**
+          * The maximum value of the progress (mirrors native <progress> max attribute)
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * The size of the progress bar height: sm = 4px, lg = 6px
+          * @default 'lg'
+         */
+        "size"?: 'sm' | 'lg';
+        /**
+          * The current value of the progress (mirrors native <progress> value attribute)
+          * @default 0
+         */
+        "value"?: number;
+        /**
+          * The visual variant of the progress bar
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'success' | 'error' | 'indeterminate';
+    }
+    interface XplProgressIndicator {
         /**
-          * Current step, is the index of the current active step
+          * Current step index. Steps with index < currentStep are "finished", the step at currentStep is "active", and steps beyond are "waiting". Set to steps.length to mark all steps as finished. Automatically clamped to [0, steps.length].
           * @default 0
          */
         "currentStep"?: number;
+        /**
+          * Layout direction - 'horizontal' or 'vertical'
+          * @default 'horizontal'
+         */
+        "layout"?: 'horizontal' | 'vertical';
+        /**
+          * Whether to show step labels
+          * @default true
+         */
+        "showLabels"?: boolean;
+        /**
+          * Whether to show step numbers inside circles
+          * @default true
+         */
+        "showNumbers"?: boolean;
         /**
           * The steps is an array of the steps name.
          */
@@ -3269,6 +4975,60 @@ declare namespace LocalJSX {
          */
         "truncate"?: boolean;
     }
+    interface XplSideNav {
+        /**
+          * Accessible label for the navigation landmark. Maps to `aria-label` on the `<nav>` element. Recommended when multiple navigation landmarks exist on a page (e.g., side nav + top nav + breadcrumbs) to help screen readers distinguish them.
+         */
+        "label"?: string;
+    }
+    interface XplSideNavItem {
+        /**
+          * Whether the component is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the item is currently expanded (only applies when hasChildren is true)
+          * @default false
+         */
+        "expanded"?: boolean;
+        /**
+          * Whether the item has child items; when true, shows expand/collapse and a default slot for nested items. Mutually exclusive with <code>link</code>. If <code>link</code> is already true, setting <code>has-children</code> is reverted (<code>@Watch('hasChildren')</code>, <code>@Watch('link')</code>, <code>componentWillLoad</code>, and <code>componentWillRender</code>) so reflected attributes match CSS.
+          * @default false
+         */
+        "hasChildren"?: boolean;
+        /**
+          * Whether the component is hidden
+          * @default false
+         */
+        "hidden"?: boolean;
+        /**
+          * Optional icon name; default content for <code>slot="icon"</code> (leaf and footer rows only). Expandable parents (<code>has-children</code>) do not show an icon column — only the chevron and label. Omit for nested children under a <code>has-children</code> parent — the icon column is hidden for sub-items.
+         */
+        "icon"?: string;
+        /**
+          * The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode).
+         */
+        "label"?: string;
+        /**
+          * When true, the row becomes a slot-only container for consumer-provided links. The consumer provides the full anchor element (or router link) via the default slot. In link mode, <code>label</code> and <code>icon</code> props should not be used. Link mode does not support <code>has-children</code>; use the default button mode for expandable items. When <code>link</code> is true, <code>hasChildren</code> is always false (enforced by <code>@Watch('link')</code>, <code>@Watch('hasChildren')</code>, <code>componentWillLoad</code>, and <code>componentWillRender</code>).
+          * @default false
+         */
+        "link"?: boolean;
+        /**
+          * Emitted when the expanded state changes (hasChildren items only). Detail is the new expanded value.
+         */
+        "onExpandedChange"?: (event: XplSideNavItemCustomEvent<boolean>) => void;
+        /**
+          * Emitted when a leaf item is clicked. Expandable parents use expandedChange instead.
+         */
+        "onNavClick"?: (event: XplSideNavItemCustomEvent<void>) => void;
+        /**
+          * Whether the item is currently in a selected state
+          * @default false
+         */
+        "selected"?: boolean;
+    }
     interface XplSkeleton {
         /**
           * A CSS class name to apply to the component.
@@ -3334,77 +5094,208 @@ declare namespace LocalJSX {
          */
         "variant"?: 'default' | 'warning';
     }
-    interface XplTab {
+    interface XplSpotlight {
         /**
-          * Event that emits the target of the selected tab
+          * Footer action layout. `default` and `dual` both render the standard Back/Next layout, while `single` renders a single acknowledgement CTA (e.g. "Got it!"). Only applies when `showActions` is `true`.
+          * @default 'default'
          */
-        "onTabChange"?: (event: XplTabCustomEvent<string>) => void;
+        "actionLayout"?: SpotlightActionLayout;
         /**
-          * Whether the tab is selected
-          * @default false
+          * Which corner of the card the anchor dot uses when not using `target`, or as the preferred side for Floating UI.
+          * @default 'top-left'
          */
-        "selected"?: boolean;
+        "anchorPosition"?: SpotlightAnchorPosition;
         /**
-          * The target of the tab, required for the tab to be selected
+          * Body copy when the `body` slot has no slotted content. Whitespace-only values are treated as empty (no fallback paragraph).
          */
-        "target"?: string;
-    }
-    interface XplTabPanel {
+        "body"?: string;
         /**
-          * Whether the panel is selected
-          * @default false
+          * Current step index (1-based). Used with `totalSteps` for the step label and for disabling default Back/Next when `showSteps` is true.
+          * @default 1
          */
-        "selected"?: boolean;
+        "currentStep"?: number;
         /**
-          * The target of the tab, required for the tab to be selected
+          * Heading when the `title` slot has no slotted content. Whitespace-only values are treated as empty (no fallback title span).
          */
-        "target"?: string;
+        "heading"?: string;
+        /**
+          * Whether to show the dismiss (close) control.
+          * @default true
+         */
+        "isDismissible"?: boolean;
+        /**
+          * Controls whether the spotlight is rendered. When false, the host remains in the DOM but the spotlight UI is hidden.
+          * @default true
+         */
+        "isOpen"?: boolean;
+        /**
+          * Emitted when the dismiss control is activated or Escape is pressed (when dismissible).
+         */
+        "onDismiss"?: (event: XplSpotlightCustomEvent<void>) => void;
+        /**
+          * Emitted when the primary action control is activated (default: Next).
+         */
+        "onPrimaryAction"?: (event: XplSpotlightCustomEvent<void>) => void;
+        /**
+          * Emitted when the secondary action control is activated (default: Back).
+         */
+        "onSecondaryAction"?: (event: XplSpotlightCustomEvent<void>) => void;
+        /**
+          * Emitted when the target indicator is clicked. Consumers typically toggle `isOpen` in response.
+         */
+        "onTargetClick"?: (event: XplSpotlightCustomEvent<void>) => void;
+        /**
+          * Label used for the default primary action button. Only applies when `showActions` is `true`.
+          * @default 'Next'
+         */
+        "primaryActionLabel"?: string;
+        /**
+          * Label used for the default secondary action button. Only applies when `showActions` is `true`.
+          * @default 'Back'
+         */
+        "secondaryActionLabel"?: string;
+        /**
+          * Whether to show the actions row (primary / secondary and optional step counter). When `false`, the spotlight has no action buttons — useful for single-step informational callouts that rely solely on the dismiss control.
+          * @default true
+         */
+        "showActions"?: boolean;
+        /**
+          * When true, the media region is shown. Slotted `image` content is rendered when present; otherwise the built-in placeholder UI is shown. When false, the entire media block is hidden.
+          * @default true
+         */
+        "showImage"?: boolean;
+        /**
+          * Whether to show the step counter between actions (`currentStep` of `totalSteps`) and whether default Back/Next use step-based disabled state.
+          * @default true
+         */
+        "showSteps"?: boolean;
+        /**
+          * CSS selector for the element this spotlight anchors to. When set, placement uses Floating UI (`computePosition` with `strategy: 'fixed'`, plus `flip`, `shift`, `offset`) and `autoUpdate` for scroll/resize. The host receives `left` / `top` and the `xpl-spotlight--anchored` class. Invalid selectors are ignored; layout falls back to `anchor-position`.
+         */
+        "target"?: string;
+        /**
+          * Total number of steps (1-based upper bound). Used with `currentStep` for the step label and for disabling default Back/Next when `showSteps` is true.
+          * @default 1
+         */
+        "totalSteps"?: number;
+    }
+    interface XplTab {
+        /**
+          * Disables this tab (pill or underline).
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Set when the parent `xpl-tabs` has `disabled` (group-disabled).
+          * @default false
+         */
+        "groupDisabled"?: boolean;
+        /**
+          * Optional icon name for segment-style pills (`type="segment"` on parent `xpl-tabs`). Ignored for default tabs.
+         */
+        "icon"?: string;
+        /**
+          * Icon position for segment-style pills.
+          * @default 'start'
+         */
+        "iconPosition"?: 'start' | 'end';
+        /**
+          * Emitted when this tab is activated (if not disabled). The event `detail` is this tab’s `target` string. Parent `xpl-tabs` listens and updates selection; use `tabChange` on `xpl-tabs` for the group-level event.
+         */
+        "onTabChange"?: (event: XplTabCustomEvent<string>) => void;
+        /**
+          * Whether the tab is selected
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * The target of the tab, required for the tab to be selected
+         */
+        "target"?: string;
     }
+    interface XplTabPanel {
+        /**
+          * Whether the panel is selected
+          * @default false
+         */
+        "selected"?: boolean;
+        /**
+          * The target of the tab, required for the tab to be selected
+         */
+        "target"?: string;
+    }
+    /**
+     * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
+     */
     interface XplTable {
         /**
-          * The header values for each column.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The header values for each column.
          */
         "columns"?: string[];
         /**
-          * The data for the body of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the body of the table.
          */
         "data"?: string[][];
         /**
-          * The data for the footer of the table.
+          * @deprecated Legacy data-driven table API only (`columns` / `data` / `footer`). May be removed in a future major release.  The data for the footer of the table.
          */
         "footer"?: string[][];
         /**
-          * When true, the first column of the table is sticky and will cover the leftmost rows in a horizontally scrollable container.
+          * When true, the first **data** column (per row) is sticky during horizontal scroll. Leading compositional columns are skipped: `selectable` (checkbox) and/or `row-reorderable` (grip) are not frozen so they scroll with the grid; the next column stays pinned at `left: 0`.
          */
         "freeze"?: boolean;
         /**
-          * Toggles to show the sort button on each table head
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles to show the sort button on each table head.
           * @default false
          */
         "isSortable"?: boolean;
         /**
-          * Toggles a selectable checkbox for each row in the table
+          * Accessible label for the table. Maps to `aria-label` in compositional mode.
+         */
+        "label"?: string;
+        /**
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  Toggles a selectable checkbox for each row in the table.
          */
         "multiselect"?: boolean;
         /**
-          * Emits an event whenever the sort changes. The 'sortChanged' event passes an object with colNum (number), colName (string), sortTypeArr(string[]). The default action can be overridden by calling event.preventDefault().
+          * Emitted after body rows are reordered via drag-and-drop (compositional `row-reorderable` mode).
          */
-        "onSortChanged"?: (event: XplTableCustomEvent<{
-        colNum: number;
-        colName: string;
-        sortTypeArr: string[];
-    }>) => void;
+        "onRowOrderChange"?: (event: XplTableCustomEvent<XplTableRowOrderChangeDetail>) => void;
+        /**
+          * Emitted when row selection changes in compositional `selectable` mode. Listen on this `xpl-table` instance only; the event does not bubble to parents—use `table.addEventListener('rowSelectionChange', …)` on the same element. When wiring from a script in static HTML, wait for `customElements.whenDefined('xpl-table')` so the host is ready. (Named `rowSelectionChange` to avoid clashing with the native `selectionchange` event.)
+         */
+        "onRowSelectionChange"?: (event: XplTableCustomEvent<{ selectedRowIds: string[] }>) => void;
+        /**
+          * Emitted when sort changes in **legacy** or **compositional** mode. `event.detail` is a plain object: **sort-key slug → `'asc' | 'desc' | null`** (null = that column not sorted). Keys match legacy column titles (slugified) or compositional `sort-key` / label slugs. Call `event.preventDefault()` in legacy mode to skip built-in row sorting; compositional tables do not reorder rows automatically.
+         */
+        "onSortChanged"?: (event: XplTableCustomEvent<XplTableSortChangedDetail>) => void;
         /**
-          * Callback function that is called when the checkbox for a row of a `multiselect` table is checked
+          * Callback function that is called when the checkbox for a row of a `multiselect` table is checked.
          */
         "onTableSelect"?: (event: XplTableCustomEvent<any>) => void;
         /**
-          * The values for the input for each row when multiselect is activated.
+          * Icon name for the optional `xpl-icon` inside each **managed** reorder grip when the row is **not** in keyboard reorder mode (pointer / idle). Set to `""` to omit the icon so you can style the button or author a fully custom reorder column in markup. When omitted, defaults to `grip-dots-vertical`.
+         */
+        "reorderHandleIcon"?: string;
+        /**
+          * Icon name for the managed reorder grip **while that row is in keyboard reorder mode** (after the user activates the grip with Enter or Space). Use a different icon than `reorder-handle-icon` so users can see they should use arrow keys. When omitted, defaults to `caret-expand-y` (same as `xpl-list` keyboard reorder). Set to `""` to show no icon in keyboard mode only (combine with CSS on `.xpl-table__row-drag-handle--keyboard-mode` if needed).
+         */
+        "reorderHandleIconKeyboard"?: string;
+        /**
+          * When true (compositional mode only), **prepends** a managed reorder column as the **first** grid column (empty header + grip button per body row) and enables HTML5 drag-and-drop row reordering (same interaction model as `xpl-list`). With `selectable`, DOM order is **reorder | selection | data** unless you author a custom reorder column. The table updates the DOM and emits `rowOrderChange`; consumers should persist order if needed. Ignored in legacy `columns`/`data` mode.
+         */
+        "rowReorderable"?: boolean;
+        /**
+          * When true (compositional mode only), enables row selection state, the selection toolbar (“N Selected”), and `rowSelectionChange`. **You must add the selection column in your markup:** a header cell with `type="checkbox"`, a body cell containing `xpl-checkbox` per row (aligned with that column), and matching `xpl-table-footer-cell` cells when you use a footer. Each body row should use `row-id` on `xpl-table-row` (or accept auto-generated ids) so `rowSelectionChange` can report `selectedRowIds`.  The toolbar uses the same layout as `xpl-toolbar` and is visible only while at least one row is selected. Use `toolbar-actions-left` / `toolbar-actions-right` slots on this host for bulk actions.
+         */
+        "selectable"?: boolean;
+        /**
+          * @deprecated Legacy data-driven table API only. May be removed in a future major release.  The values for the input for each row when multiselect is activated.
           * @default []
          */
         "selectedValues"?: string[];
         /**
-          * Manually determined if the column is sortable
+          * @deprecated Use the compositional slot-based API instead. Will be removed in a future major release.  Manually determined if the column is sortable.
           * @default []
          */
         "sortableColumns"?: boolean[];
@@ -3413,47 +5304,141 @@ declare namespace LocalJSX {
          */
         "striped"?: boolean;
     }
+    interface XplTableBody {
+    }
+    interface XplTableCell {
+        /**
+          * Horizontal text alignment within the cell.
+          * @default 'left'
+         */
+        "align"?: 'left' | 'right' | 'center';
+        /**
+          * Renders cell text in bold (--xpl-font-weight-semibold).
+          * @default false
+         */
+        "bold"?: boolean;
+        /**
+          * Whether the cell and its interactive children are disabled. Set automatically by xpl-table-row.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Adds an underline to cell text.
+          * @default false
+         */
+        "underline"?: boolean;
+    }
+    interface XplTableFooter {
+    }
+    interface XplTableFooterCell {
+        /**
+          * Horizontal text alignment within the cell.
+          * @default 'left'
+         */
+        "align"?: 'left' | 'right' | 'center';
+    }
     interface XplTableHeader {
     }
     interface XplTableHeaderCell {
+        /**
+          * Horizontal text alignment within the header cell.
+          * @default 'left'
+         */
+        "align"?: 'left' | 'right' | 'center';
+        /**
+          * Accessible name for the header checkbox (native `aria-label`). Defaults to “Select all rows” when `type` is `checkbox`.
+         */
+        "checkboxAriaLabel"?: string;
+        /**
+          * Whether the header checkbox is checked
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * CSS grid track size for this column (e.g. `1fr`, `minmax(120px, 1fr)`, `auto`). When set, overrides `width`. Use this when you need flexible columns; default layout uses `auto` per column unless you set a track here.
+         */
+        "columnWidth"?: string;
         /**
           * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
         "icon"?: string;
         /**
-          * @property {string} - Text to display in the cell
+          * Whether the checkbox is in indeterminate (partially selected) state
+          * @default false
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Text to display in the cell.
           * @default ''
          */
         "label"?: string;
         /**
-          * Emitted when the sort direction changes.
+          * Emitted when header checkbox changes
+         */
+        "onHeaderCheckboxChange"?: (event: XplTableHeaderCellCustomEvent<boolean>) => void;
+        /**
+          * Emitted when a sortable label header is activated. Parent `xpl-table` coordinates columns and emits `sortChanged`.
+         */
+        "onHeaderSortChange"?: (event: XplTableHeaderCellCustomEvent<HeaderSortChangeDetail>) => void;
+        /**
+          * Active sort direction for this column when `sortable`. Set by `xpl-table` when used inside a compositional table; may be set by the app for controlled updates.
          */
-        "onSortChanged"?: (event: XplTableHeaderCellCustomEvent<'asc' | 'desc' | 'none'>) => void;
+        "sortDirection"?: 'asc' | 'desc' | null;
         /**
-          * @property {boolean} - Whether the cell is sortable or not
+          * When `sortable` is true, optional stable id used as the key in `sortChanged`’s detail object. Falls back to a slug of `label` when omitted.
+         */
+        "sortKey"?: string;
+        /**
+          * When true (and `type` is `label`), renders a sort control (button + affordance icon).
           * @default false
          */
         "sortable"?: boolean;
         /**
-          * @property {string} - The type of cell to render
+          * The type of cell to render.
           * @default 'label'
          */
-        "type"?: 'label' | 'checkbox' | 'icon';
+        "type"?: 'label' | 'checkbox' | 'icon' | 'empty';
         /**
-          * @property {number} - Width of the cell, in pixels. Minimum width is 48px. If no value is provided, it will default to fit the content of the cell with 16px of padding on each side
+          * Fixed width for this column in pixels (minimum 48px). Sets the grid track to `Npx`. Ignored when `columnWidth` is set. When omitted, the column track defaults to `auto` (content-sized).
          */
         "width"?: number;
     }
+    interface XplTableRow {
+        /**
+          * Whether the row and its cells are disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Stable identifier for this row when used with a selectable compositional `xpl-table`. If omitted, the parent table assigns a unique id.
+         */
+        "rowId"?: string;
+        /**
+          * Whether the row is visually selected.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
     interface XplTabs {
+        /**
+          * Disables the whole tab group (headings, mobile select, and segment pills).
+          * @default false
+         */
+        "disabled"?: boolean;
         /**
           * Whether to make the tabs full width
           * @default false
          */
         "fullWidth"?: boolean;
         /**
-          * Event that emits the target of the selected tab
+          * Emitted when the selected tab changes (click, keyboard, or mobile `xpl-select`). The event `detail` is the selected tab’s `target` string. Always dispatched from this host (including after heading clicks) so `event.target` is consistent for listeners on `xpl-tabs` or bubbling ancestors.
          */
         "onTabChange"?: (event: XplTabsCustomEvent<string>) => void;
+        /**
+          * Visual and layout variant: classic underline tabs or segment (pill) controls.
+          * @default 'tabs'
+         */
+        "type"?: 'tabs' | 'segment';
         /**
           * The selected tab target value, defaults to the first tab
          */
@@ -3461,9 +5446,46 @@ declare namespace LocalJSX {
     }
     interface XplTag {
         /**
-          * Callback function that is called when tag text or `x` icon is clicked
+          * Whether the tag is disabled
+          * @default false
          */
-        "onClose"?: (event: XplTagCustomEvent<any>) => void;
+        "disabled"?: boolean;
+        /**
+          * Whether the tag shows a dismiss button
+          * @default true
+         */
+        "dismissible"?: boolean;
+        /**
+          * When true, the tag label uses native HTML5 drag (the inner label is the drag source). Named `isDraggable` so the Stencil prop does not collide with the native `HTMLElement.draggable` API. `reflect: false` avoids syncing a `draggable` attribute onto the host; the inner label remains the drag source. Host `onDragStart` still suppresses stray native drags from host chrome.
+          * @default false
+         */
+        "isDraggable"?: boolean;
+        /**
+          * Emitted when the tag is dismissed (content click when `isDraggable` is false, or dismiss button click).
+          * @deprecated Use `tagRemove` for dismiss button clicks only. The `close` event will be removed in a future major version.
+         */
+        "onClose"?: (event: XplTagCustomEvent<void>) => void;
+        /**
+          * Emitted when a drag operation ends. `event.detail`: `{ tagId?, dropped, originalEvent }`. `dropped` is `true` when `dataTransfer.dropEffect === 'move'`. `originalEvent` is the native `DragEvent`; browsers may clear `dataTransfer` after the synchronous handler runs — do not read `originalEvent.dataTransfer.getData(...)` asynchronously.
+         */
+        "onTagDragEnd"?: (event: XplTagCustomEvent<TagDragEndDetail>) => void;
+        /**
+          * Emitted when a drag operation starts (native `dragstart` on the inner label). `event.detail`: `{ tagId?, content, originalEvent }`. `originalEvent` is the native `DragEvent`; browsers may clear `dataTransfer` after the synchronous handler runs — do not read `originalEvent.dataTransfer.getData(...)` asynchronously.
+         */
+        "onTagDragStart"?: (event: XplTagCustomEvent<TagDragStartDetail>) => void;
+        /**
+          * Emitted when the tag dismiss (×) button is clicked
+         */
+        "onTagRemove"?: (event: XplTagCustomEvent<void>) => void;
+        /**
+          * The size of the tag
+          * @default 'default'
+         */
+        "size"?: 'default' | 'sm';
+        /**
+          * Optional stable id for the tag. When set, it is included in `tagDragStart` / `tagDragEnd` detail and written to `dataTransfer` as `application/x-tag-id`.
+         */
+        "tagId"?: string;
     }
     interface XplToast {
         /**
@@ -3552,6 +5574,111 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    /**
+     * Horizontal top navigation with **`left-aside`** and a **right rail**: **`right-aside`** then **user menu**
+     * (see **`.xpl-top-nav__right-rail`** in `render()`). The account menu uses an internal **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): built-in trigger uses **`child-account-label`** (prop / attribute) as the label beside a trailing **`chevron-down`** on **`xpl-button`** (**`icon`** / **`iconPosition="end"`**), or **`slot="user-menu-trigger"`** for a custom trigger; panel from **`slot="user-menu"`** (e.g. **`xpl-nav-header-menu`**).
+     * Optional **`nav-control`** and **`navOpen`**. **`left-aside`** uses **`role="list"`** for primary **`xpl-top-nav-item`** rows (**`role="listitem"`** on each item host). The built-in **`xpl-top-nav__brand`** item omits **`listitem`** (it is not a child of that list). **`label`** maps to **`nav`** **`aria-label`**. Opening state is internal (not a prop) — use **`navOpen`** and host **`xpl-top-nav--open`** for styling.
+     * **Escape:** With **`nav-control`**, **Escape** closes the mobile drawer and emits **`navOpen`** **`false`** (skips while **any** descendant **`xpl-popover`** is open — detected from each popover’s inner **`.xpl-popover--is-open`** marker — or when a **`xpl-top-nav-item`** dropdown is open — capture/bubble order). Focus returns to the nav toggle after the drawer closes (**Escape** or second toggle click).
+     * **`xpl-top-nav-item`** **`slot="dropdown"`** uses document **capture** for **Escape** first; the shell uses **bubble**
+     * on **`ownerDocument`** so nested dropdowns close before the drawer.
+     * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens under this subtree
+     * resolve to dark-mode values even when the page root is light. Floating overlays (e.g. **`xpl-popover`** / **`xpl-dropdown`**
+     * content teleported outside the host) do not inherit this scope — add **`dark`** on those panels if they should match.
+     * **Layout:** **`right-aside`** and the user-menu region are wrapped internally (**`.xpl-top-nav__right-lead`**, etc.).
+     * Consumers should not add those BEM classes — slot content only.
+     * **Brand logo:** use **`brand-logo`** (URL) for a built-in **`<img>`**, or **`slot="brand-logo"`** for custom markup (e.g. **`xpl-icon`**, SVG). When the URL prop is set, it takes precedence and the slot is not used for the image. On **narrow viewports** (one pixel below Tailwind **`md`** — see **`top-nav.css`**), **`brand-name`** text is hidden in the bar (logo / slot mark only); keep a meaningful **`alt`** on **`brand-logo`** or accessible slotted mark for context.
+     * **Narrow / mobile** (same breakpoint as above): **`slot="left-aside"`** is **hidden** in the bar until **`nav-control`**
+     * is set **and** the drawer is open (floating panel per Figma). **Without **`nav-control`**, there is no mobile drawer** —
+     * primary links remain hidden below **`md`** until the viewport is wide enough for the horizontal bar. The built-in **brand**
+     * stays in the top bar (**hamburger → brand** when **`nav-control`** is set). **`right-aside`** is hidden in the bar on narrow
+     * viewports (**`top-nav.css`**, one pixel below Tailwind **`md`**); duplicate those actions into **`xpl-nav-header-menu`**
+     * **`slot="right-aside-mobile"`** (below profile, above the list; narrow-only CSS in **`top-nav.css`**) per Figma.
+     * **Account menu vs drawer:** Opening the built-in account **`xpl-popover`** while the mobile drawer is open **closes the drawer**
+     * and emits **`navOpen(false)`** so the two layers do not stack.
+     */
+    interface XplTopNav {
+        /**
+          * Destination URL for the brand control when using native navigation (**`<a href>`**). When unset, the brand is a **`role="button"`** control and **`brandClick`** fires on activation instead.
+         */
+        "brandHref"?: string;
+        /**
+          * Optional image URL for the brand mark (leading the brand row, before **`brand-name`** text). When set, renders **`<img class="xpl-top-nav__brand-logo">`** and ignores **`slot="brand-logo"`** for the mark. When unset, use **`slot="brand-logo"`** for custom logo content.
+         */
+        "brandLogo"?: string;
+        /**
+          * Visible product / app name next to **`brand-logo`**. Omit for logo-only; provide **`brand-logo`** and/or this string to show the built-in brand row (**`left-aside`** is then primary nav links only).
+         */
+        "brandName"?: string;
+        /**
+          * Label text for the built-in account menu trigger (shown **before** the **`chevron-down`** icon) when **`slot="user-menu"`** is present and **`slot="user-menu-trigger"`** is not used. When empty or whitespace-only, the trigger shows only the chevron and uses **`aria-label="Open account menu"`** on the button.
+         */
+        "childAccountLabel"?: string;
+        /**
+          * Accessible name for the `<nav>` landmark (maps to `aria-label`). Use a unique label when the page has multiple navigation regions (e.g. side nav + top nav). When unset, defaults to `top-navigation-bar`.
+         */
+        "label"?: string;
+        /**
+          * When true, renders the navigation control (hamburger) for toggling the left slot on small viewports. The control is **hidden from the Tailwind `md` breakpoint up**; collapse/show for **`left-aside`** uses **`max-width: calc(theme('screens.md') - 1px)`** in **`top-nav.css`** (Figma’s 767px at a 16px root and default **`screens.md`**). Reflected to the **`nav-control`** attribute so host updates (framework props) re-run **`@Watch`**: drawer state and document **Escape** handling stay in sync, the host **`xpl-top-nav--nav-control`** class toggles for **`top-nav.css`**, and **`navOpen(false)`** is emitted if **`nav-control`** is cleared while the drawer was open.
+         */
+        "navControl"?: boolean;
+        /**
+          * Emitted when the brand control is activated and **`brandHref`** is **not** set (SPA / in-app navigation). **`detail`** is the **`MouseEvent`** from **`xpl-top-nav-item`** **`navItemClick`**. Not emitted when **`brandHref`** is set (use native link navigation).
+         */
+        "onBrandClick"?: (event: XplTopNavCustomEvent<MouseEvent>) => void;
+        /**
+          * Emitted when the mobile nav open state changes: hamburger toggle, or **Escape** closing the drawer (when **`nav-control`** is set and the bar was open). Detail is the new open state (**`true`** = open, **`false`** = closed).
+         */
+        "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
+     * 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`**.
+     * **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`**).
+     */
+    interface XplTopNavItem {
+        /**
+          * When true, adds **`xpl-top-nav-item--active`** for persistent accent styling (e.g. link color on the bar, or chrome inside **`xpl-nav-header-menu`**). Separate from **`selected`**, which sets **`aria-current="page"`** and **`--selected`**. Use both when the design needs “current page” semantics plus the active visual treatment.
+          * @default false
+         */
+        "active"?: boolean;
+        /**
+          * 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).
+          * @default ''
+         */
+        "icon"?: string;
+        /**
+          * Accessible name for the inner control when there is no **`label`** and no default-slot text (e.g. icon-only). If omitted in that case, **`aria-label`** defaults to **`Navigation item`**. Ignored when **`label`** or default-slot content supplies a visible name.
+         */
+        "itemAriaLabel"?: string;
+        /**
+          * 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;
+        /**
+          * 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.
+         */
+        "onNavItemClick"?: (event: XplTopNavItemCustomEvent<MouseEvent>) => void;
+        /**
+          * When true, sets **`aria-current="page"`** and selected styling.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
     interface XplUtilityBar {
         /**
           * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.
@@ -3566,130 +5693,784 @@ declare namespace LocalJSX {
          */
         "onNavOpen"?: (event: XplUtilityBarCustomEvent<boolean>) => void;
     }
+
+    interface XplAccordionAttributes {
+        "contentId": string;
+        "header": string;
+        "description": string;
+        "initialExpanded": boolean;
+        "size": '1' | '2' | '3';
+        "borderType": '' | 'none' | 'bottom' | 'bordered';
+    }
+    interface XplApplicationShellAttributes {
+        "withSubnav": boolean;
+        "withUtility": boolean;
+        "navWidth": string;
+        "isNavOpenAtStartup": boolean;
+    }
+    interface XplAvatarAttributes {
+        "color": AvatarColor;
+        "disabled": boolean;
+        "groupData": AvatarGroupItem[] | string;
+        "href": string;
+        "name": string;
+        "size": 'md' | 'sm';
+        "src": string;
+        "status": AvatarStatus;
+        "subText": string;
+        "target": string;
+        "variant": AvatarVariant;
+    }
+    interface XplBackdropAttributes {
+        "relative": boolean;
+    }
+    interface XplBadgeAttributes {
+        "bordered": boolean;
+        "dot": boolean;
+        "dotOnly": boolean;
+        "shape": 'rounded' | 'boxy';
+        "size": 'default' | 'small';
+        "variant": BadgeVariantProp;
+    }
+    interface XplBannerAttributes {
+        "actionText": string;
+        "appearance": 'information' | 'positive' | 'warning' | 'error';
+        "description": string;
+        "hasIcon": boolean;
+        "heading": string;
+        "isDismissible": boolean;
+        "isSection": boolean;
+        "secondaryActionText": string;
+        "truncateDesc": boolean;
+    }
+    interface XplButtonAttributes {
+        "disabled": boolean;
+        "form": string;
+        "fullWidth": boolean;
+        "icon": string;
+        "iconOnly": boolean;
+        "iconPosition": 'start' | 'end';
+        "isLoading": boolean;
+        "link": boolean;
+        "name": string;
+        "sentiment": 'neutral' | 'negative' | 'positive';
+        "size": 'default' | 'xs' | 'sm';
+        "state": 'neutral' | 'warning' | 'success';
+        "type": 'submit' | 'reset' | 'button';
+        "value": string;
+        "variant": 'primary' | 'secondary' | 'tertiary' | 'subtle';
+    }
+    interface XplButtonRowAttributes {
+        "primary": 'string';
+        "secondary": 'string';
+        "tertiary": 'string';
+    }
+    interface XplCalendarAttributes {
+        "inputId": string;
+        "dateFormat": string;
+        "max": string;
+        "min": string;
+        "mode": 'single' | 'range';
+        "defaultDate": string;
+    }
+    interface XplCheckboxAttributes {
+        "ariaLabel": string;
+        "checked": boolean;
+        "dataId": string;
+        "description": string;
+        "disabled": boolean;
+        "indeterminate": boolean;
+        "name": string;
+        "required": boolean;
+        "styled": boolean;
+        "value": string;
+    }
+    interface XplChoicelistAttributes {
+        "description": string;
+        "heading": string;
+        "multi": boolean;
+        "name": string;
+        "styled": boolean;
+    }
+    interface XplContentAreaAttributes {
+        "size": 'wide' | 'narrow' | 'full';
+    }
+    interface XplDataCardAttributes {
+        "link": boolean;
+        "name": string;
+        "stat": string;
+        "shortStat": string;
+        "variant": 'primary' | 'secondary';
+        "leadingIcon": boolean;
+        "icon": string;
+        "smallStat": string;
+        "smallStatIcon": string;
+        "detail": string;
+        "smallStatVariant": 'positive' | 'negative' | 'neutral';
+        "tooltipTextSmallStat": string;
+        "tooltipTextStat": string;
+    }
+    interface XplDividerAttributes {
+        "tier": number;
+    }
+    interface XplDropdownAttributes {
+        "isOpen": boolean;
+        "closeOnSelect": boolean;
+        "mode": 'single' | 'multi';
+        "anchorToTrigger": boolean;
+        "selectedValues": string | string[];
+        "selectOnFocus": boolean;
+        "triggerId": string;
+    }
+    interface XplDropdownGroupAttributes {
+        "groupName": string;
+    }
+    interface XplDropdownHeadingAttributes {
+        "label": string;
+    }
+    interface XplDropdownOptionAttributes {
+        "isDisabled": boolean;
+        "label": string;
+        "value": string;
+        "subtitle": string;
+        "icon": string;
+        "isSelected": boolean;
+    }
+    interface XplDynamicTableCellAttributes {
+        "disabled": boolean;
+    }
+    interface XplDynamicTableRowAttributes {
+        "disabled": boolean;
+        "selected": boolean;
+    }
+    interface XplGridItemAttributes {
+        "xs": number;
+        "sm": number;
+        "md": number;
+        "lg": number;
+    }
+    interface XplHeaderAccordionAttributes {
+        "contentId": string;
+        "disabled": boolean;
+        "hasCheckbox": boolean;
+        "initialExpanded": boolean;
+        "selectedCount": number;
+    }
+    interface XplIconAttributes {
+        "icon": string;
+        "size": number;
+        "backgroundColor": string;
+    }
+    interface XplInputAttributes {
+        "_id": string;
+        "description": string;
+        "disabled": boolean;
+        "error": string;
+        "label": string;
+        "name": string;
+        "required": boolean;
+        "readonly": boolean;
+        "value": string;
+        "autocomplete": string;
+        "placeholder": string;
+        "post": string;
+        "pre": string;
+        "max": string;
+        "min": string;
+        "step": number;
+        "multiline": boolean;
+        "maxCharacterCount": number;
+        "dateFormat": string;
+        "timeFormat": '12h' | '24h';
+        "allowCustomOption": boolean;
+        "mode": 'single' | /* "multiple" | */ 'range';
+        "accept": string;
+        "multiple": boolean;
+        "hideTriggerOnSelect": boolean;
+        "hideFileNames": boolean;
+        "hideAcceptText": boolean;
+        "hideEyeDropper": boolean;
+        "defaultCountry": string;
+        "isInternational": boolean;
+        "ariaLabel": string;
+        "shape": 'rounded' | 'box';
+        "type": | 'date'
+        | 'time'
+        | 'text'
+        | 'number'
+        | 'password'
+        | 'file'
+        | 'color'
+        | 'phone'
+        | 'search';
+    }
+    interface XplInputColorAttributes {
+        "value": string;
+        "placeholder": string;
+        "disabled": boolean;
+        "required": boolean;
+        "hideEyeDropper": boolean;
+    }
+    interface XplInputDateAttributes {
+        "inputId": string;
+        "disabled": boolean;
+        "name": string;
+        "required": boolean;
+        "readonly": boolean;
+        "value": string;
+        "placeholder": string;
+        "post": string;
+        "pre": string;
+        "max": string;
+        "min": string;
+        "dateFormat": string;
+        "mode": 'single' | /* "multiple" | */ 'range';
+    }
+    interface XplInputFileAttributes {
+        "disabled": boolean;
+        "name": string;
+        "_id": string;
+        "accept": string;
+        "multiple": boolean;
+        "hideTriggerOnSelect": boolean;
+        "hideFileNames": boolean;
+        "hideAcceptText": boolean;
+    }
+    interface XplInputPhoneAttributes {
+        "defaultCountry": string;
+        "disabled": boolean;
+        "inputId": string;
+        "isInternational": boolean;
+        "name": string;
+        "placeholder": string;
+        "readonly": boolean;
+        "required": boolean;
+        "value": string;
+    }
+    interface XplInputSearchAttributes {
+        "ariaLabel": string;
+        "autocomplete": string;
+        "disabled": boolean;
+        "errorMessageId": string;
+        "hasError": boolean;
+        "hasVisibleLabel": boolean;
+        "inputId": string;
+        "name": string;
+        "placeholder": string;
+        "readonly": boolean;
+        "required": boolean;
+        "shape": 'rounded' | 'box';
+        "value": string;
+    }
+    interface XplInputTimeAttributes {
+        "inputId": string;
+        "disabled": boolean;
+        "name": string;
+        "required": boolean;
+        "readonly": boolean;
+        "value": string;
+        "placeholder": string;
+        "max": string;
+        "min": string;
+        "step": number;
+        "mode": 'single' | 'range';
+        "timeFormat": '12h' | '24h';
+        "allowCustomOption": boolean;
+    }
+    interface XplLargeCardAttributes {
+        "link": boolean;
+        "name": string;
+        "description": string;
+    }
+    interface XplListAttributes {
+        "label": string;
+        "labelledBy": string;
+        "reorderable": boolean;
+        "selectable": boolean;
+    }
+    interface XplListItemAttributes {
+        "disabled": boolean;
+        "error": boolean;
+        "hidden": boolean;
+        "href": string;
+        "itemId": string;
+        "keyboardActive": boolean;
+        "radioName": string;
+        "reorderable": boolean;
+        "selectable": boolean;
+        "selected": boolean;
+        "showDivider": boolean;
+        "titleBadgeVariant": BadgeVariantProp;
+    }
+    interface XplMainNavAttributes {
+        "width": 'default' | 'md' | 'sm';
+    }
+    interface XplModalAttributes {
+        "isOpen": boolean;
+        "size": 'large' | 'medium' | 'small';
+        "variant": 'default' | 'warning';
+    }
+    interface XplNavHeaderMenuAttributes {
+        "email": string;
+        "username": string;
+    }
+    interface XplNavItemAttributes {
+        "navControl": boolean;
+    }
+    interface XplPaginationAttributes {
+        "totalPages": number;
+        "withPageControl": boolean;
+        "currentPage": number;
+        "rowsPerPageOptions": string;
+        "selectedRowsPerPage": number;
+    }
+    interface XplPanelAttributes {
+        "accent": 'none' | 'primary' | 'secondary' | 'positive' | 'negative' | 'highlight';
+        "padding": 'default' | 'tight' | 'loose';
+    }
+    interface XplPopoverAttributes {
+        "isOpen": boolean;
+        "disabled": boolean;
+        "position": PopoverPosition;
+        "display": 'arrow' | 'menu';
+    }
+    interface XplProgressBarAttributes {
+        "helperText": string;
+        "label": string;
+        "max": number;
+        "size": 'sm' | 'lg';
+        "value": number;
+        "variant": 'default' | 'success' | 'error' | 'indeterminate';
+    }
+    interface XplProgressIndicatorAttributes {
+        "currentStep": number;
+        "layout": 'horizontal' | 'vertical';
+        "showLabels": boolean;
+        "showNumbers": boolean;
+    }
+    interface XplRadioAttributes {
+        "checked": boolean;
+        "description": string;
+        "disabled": boolean;
+        "name": string;
+        "value": string;
+        "required": boolean;
+        "styled": boolean;
+    }
+    interface XplSelectAttributes {
+        "selectIcon": string;
+        "description": string;
+        "disabled": boolean;
+        "error": string;
+        "label": string;
+        "mode": 'single' | 'multi';
+        "name": string;
+        "placeholder": string;
+        "truncate": boolean;
+        "customDisplayValue": boolean;
+        "selectedValues": string | string[];
+        "classNames": string;
+    }
+    interface XplSideNavAttributes {
+        "label": string;
+    }
+    interface XplSideNavItemAttributes {
+        "disabled": boolean;
+        "expanded": boolean;
+        "hasChildren": boolean;
+        "hidden": boolean;
+        "icon": string;
+        "label": string;
+        "link": boolean;
+        "selected": boolean;
+    }
+    interface XplSkeletonAttributes {
+        "classNames": string;
+        "fullWidth": boolean;
+        "height": CSSStyleDeclaration['height'];
+        "width": CSSStyleDeclaration['width'];
+        "margin": CSSStyleDeclaration['margin'];
+        "shape": 'rectangle' | 'circle' | 'square';
+        "size": | 'display'
+        | 'title-1'
+        | 'title-2'
+        | 'title-3'
+        | 'title-4'
+        | 'title-5'
+        | 'body'
+        | 'custom';
+    }
+    interface XplSlideoutAttributes {
+        "isOpen": boolean;
+        "backdrop": boolean;
+        "variant": 'default' | 'warning';
+        "showFooter": boolean;
+    }
+    interface XplSpotlightAttributes {
+        "actionLayout": SpotlightActionLayout;
+        "anchorPosition": SpotlightAnchorPosition;
+        "body": string;
+        "currentStep": number;
+        "heading": string;
+        "isDismissible": boolean;
+        "isOpen": boolean;
+        "primaryActionLabel": string;
+        "secondaryActionLabel": string;
+        "showActions": boolean;
+        "showImage": boolean;
+        "showSteps": boolean;
+        "target": string;
+        "totalSteps": number;
+    }
+    interface XplTabAttributes {
+        "disabled": boolean;
+        "groupDisabled": boolean;
+        "icon": string;
+        "iconPosition": 'start' | 'end';
+        "selected": boolean;
+        "target": string;
+    }
+    interface XplTabPanelAttributes {
+        "selected": boolean;
+        "target": string;
+    }
+    interface XplTableAttributes {
+        "freeze": boolean;
+        "isSortable": boolean;
+        "label": string;
+        "multiselect": boolean;
+        "reorderHandleIcon": string;
+        "reorderHandleIconKeyboard": string;
+        "rowReorderable": boolean;
+        "selectable": boolean;
+        "striped": boolean;
+    }
+    interface XplTableCellAttributes {
+        "align": 'left' | 'right' | 'center';
+        "bold": boolean;
+        "disabled": boolean;
+        "underline": boolean;
+    }
+    interface XplTableFooterCellAttributes {
+        "align": 'left' | 'right' | 'center';
+    }
+    interface XplTableHeaderCellAttributes {
+        "align": 'left' | 'right' | 'center';
+        "checkboxAriaLabel": string;
+        "checked": boolean;
+        "columnWidth": string;
+        "icon": string;
+        "indeterminate": boolean;
+        "label": string;
+        "sortable": boolean;
+        "sortDirection": 'asc' | 'desc' | null;
+        "sortKey": string;
+        "type": 'label' | 'checkbox' | 'icon' | 'empty';
+        "width": number;
+    }
+    interface XplTableRowAttributes {
+        "disabled": boolean;
+        "rowId": string;
+        "selected": boolean;
+    }
+    interface XplTabsAttributes {
+        "disabled": boolean;
+        "fullWidth": boolean;
+        "type": 'tabs' | 'segment';
+        "value": string;
+    }
+    interface XplTagAttributes {
+        "disabled": boolean;
+        "dismissible": boolean;
+        "isDraggable": boolean;
+        "size": 'default' | 'sm';
+        "tagId": string;
+    }
+    interface XplToastAttributes {
+        "variant": 'neutral' | 'warning' | 'success';
+        "showIcon": boolean;
+        "caption": string;
+        "dismissable": boolean;
+        "timeout": number;
+    }
+    interface XplToggleAttributes {
+        "checked": boolean;
+        "description": string;
+        "disabled": boolean;
+        "heading": string;
+        "label": string;
+        "name": string;
+        "variant": 'default' | 'small';
+    }
+    interface XplToolbarAttributes {
+        "selectedItemCount": number;
+    }
+    interface XplTooltipAttributes {
+        "text": string;
+        "position": | 'top-middle'
+        | 'right'
+        | 'bottom-middle'
+        | 'left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-left'
+        | 'bottom-right';
+        "hideArrow": boolean;
+    }
+    interface XplTopNavAttributes {
+        "brandHref": string;
+        "brandLogo": string;
+        "brandName": string;
+        "childAccountLabel": string;
+        "label": string;
+        "navControl": boolean;
+    }
+    interface XplTopNavItemAttributes {
+        "active": boolean;
+        "href": string;
+        "icon": string;
+        "itemAriaLabel": string;
+        "label": string;
+        "selected": boolean;
+    }
+    interface XplUtilityBarAttributes {
+        "navControl": boolean;
+        "isNavOpenAtStartup": boolean;
+    }
+
     interface IntrinsicElements {
-        "xpl-accordion": XplAccordion;
-        "xpl-application-shell": XplApplicationShell;
-        "xpl-avatar": XplAvatar;
-        "xpl-backdrop": XplBackdrop;
-        "xpl-badge": XplBadge;
+        "xpl-accordion": Omit<XplAccordion, keyof XplAccordionAttributes> & { [K in keyof XplAccordion & keyof XplAccordionAttributes]?: XplAccordion[K] } & { [K in keyof XplAccordion & keyof XplAccordionAttributes as `attr:${K}`]?: XplAccordionAttributes[K] } & { [K in keyof XplAccordion & keyof XplAccordionAttributes as `prop:${K}`]?: XplAccordion[K] };
+        "xpl-application-shell": Omit<XplApplicationShell, keyof XplApplicationShellAttributes> & { [K in keyof XplApplicationShell & keyof XplApplicationShellAttributes]?: XplApplicationShell[K] } & { [K in keyof XplApplicationShell & keyof XplApplicationShellAttributes as `attr:${K}`]?: XplApplicationShellAttributes[K] } & { [K in keyof XplApplicationShell & keyof XplApplicationShellAttributes as `prop:${K}`]?: XplApplicationShell[K] };
+        "xpl-avatar": Omit<XplAvatar, keyof XplAvatarAttributes> & { [K in keyof XplAvatar & keyof XplAvatarAttributes]?: XplAvatar[K] } & { [K in keyof XplAvatar & keyof XplAvatarAttributes as `attr:${K}`]?: XplAvatarAttributes[K] } & { [K in keyof XplAvatar & keyof XplAvatarAttributes as `prop:${K}`]?: XplAvatar[K] };
+        "xpl-backdrop": Omit<XplBackdrop, keyof XplBackdropAttributes> & { [K in keyof XplBackdrop & keyof XplBackdropAttributes]?: XplBackdrop[K] } & { [K in keyof XplBackdrop & keyof XplBackdropAttributes as `attr:${K}`]?: XplBackdropAttributes[K] } & { [K in keyof XplBackdrop & keyof XplBackdropAttributes as `prop:${K}`]?: XplBackdrop[K] };
+        "xpl-badge": Omit<XplBadge, keyof XplBadgeAttributes> & { [K in keyof XplBadge & keyof XplBadgeAttributes]?: XplBadge[K] } & { [K in keyof XplBadge & keyof XplBadgeAttributes as `attr:${K}`]?: XplBadgeAttributes[K] } & { [K in keyof XplBadge & keyof XplBadgeAttributes as `prop:${K}`]?: XplBadge[K] };
+        "xpl-banner": Omit<XplBanner, keyof XplBannerAttributes> & { [K in keyof XplBanner & keyof XplBannerAttributes]?: XplBanner[K] } & { [K in keyof XplBanner & keyof XplBannerAttributes as `attr:${K}`]?: XplBannerAttributes[K] } & { [K in keyof XplBanner & keyof XplBannerAttributes as `prop:${K}`]?: XplBanner[K] };
         "xpl-breadcrumb-item": XplBreadcrumbItem;
         "xpl-breadcrumbs": XplBreadcrumbs;
-        "xpl-button": XplButton;
-        "xpl-button-row": XplButtonRow;
-        "xpl-calendar": XplCalendar;
-        "xpl-checkbox": XplCheckbox;
-        "xpl-choicelist": XplChoicelist;
-        "xpl-content-area": XplContentArea;
+        "xpl-button": Omit<XplButton, keyof XplButtonAttributes> & { [K in keyof XplButton & keyof XplButtonAttributes]?: XplButton[K] } & { [K in keyof XplButton & keyof XplButtonAttributes as `attr:${K}`]?: XplButtonAttributes[K] } & { [K in keyof XplButton & keyof XplButtonAttributes as `prop:${K}`]?: XplButton[K] };
+        "xpl-button-row": Omit<XplButtonRow, keyof XplButtonRowAttributes> & { [K in keyof XplButtonRow & keyof XplButtonRowAttributes]?: XplButtonRow[K] } & { [K in keyof XplButtonRow & keyof XplButtonRowAttributes as `attr:${K}`]?: XplButtonRowAttributes[K] } & { [K in keyof XplButtonRow & keyof XplButtonRowAttributes as `prop:${K}`]?: XplButtonRow[K] };
+        "xpl-calendar": Omit<XplCalendar, keyof XplCalendarAttributes> & { [K in keyof XplCalendar & keyof XplCalendarAttributes]?: XplCalendar[K] } & { [K in keyof XplCalendar & keyof XplCalendarAttributes as `attr:${K}`]?: XplCalendarAttributes[K] } & { [K in keyof XplCalendar & keyof XplCalendarAttributes as `prop:${K}`]?: XplCalendar[K] };
+        "xpl-checkbox": Omit<XplCheckbox, keyof XplCheckboxAttributes> & { [K in keyof XplCheckbox & keyof XplCheckboxAttributes]?: XplCheckbox[K] } & { [K in keyof XplCheckbox & keyof XplCheckboxAttributes as `attr:${K}`]?: XplCheckboxAttributes[K] } & { [K in keyof XplCheckbox & keyof XplCheckboxAttributes as `prop:${K}`]?: XplCheckbox[K] };
+        "xpl-choicelist": Omit<XplChoicelist, keyof XplChoicelistAttributes> & { [K in keyof XplChoicelist & keyof XplChoicelistAttributes]?: XplChoicelist[K] } & { [K in keyof XplChoicelist & keyof XplChoicelistAttributes as `attr:${K}`]?: XplChoicelistAttributes[K] } & { [K in keyof XplChoicelist & keyof XplChoicelistAttributes as `prop:${K}`]?: XplChoicelist[K] };
+        "xpl-content-area": Omit<XplContentArea, keyof XplContentAreaAttributes> & { [K in keyof XplContentArea & keyof XplContentAreaAttributes]?: XplContentArea[K] } & { [K in keyof XplContentArea & keyof XplContentAreaAttributes as `attr:${K}`]?: XplContentAreaAttributes[K] } & { [K in keyof XplContentArea & keyof XplContentAreaAttributes as `prop:${K}`]?: XplContentArea[K] };
         "xpl-dashboard": XplDashboard;
-        "xpl-data-card": XplDataCard;
-        "xpl-divider": XplDivider;
-        "xpl-dropdown": XplDropdown;
-        "xpl-dropdown-group": XplDropdownGroup;
-        "xpl-dropdown-heading": XplDropdownHeading;
-        "xpl-dropdown-option": XplDropdownOption;
+        "xpl-data-card": Omit<XplDataCard, keyof XplDataCardAttributes> & { [K in keyof XplDataCard & keyof XplDataCardAttributes]?: XplDataCard[K] } & { [K in keyof XplDataCard & keyof XplDataCardAttributes as `attr:${K}`]?: XplDataCardAttributes[K] } & { [K in keyof XplDataCard & keyof XplDataCardAttributes as `prop:${K}`]?: XplDataCard[K] };
+        "xpl-divider": Omit<XplDivider, keyof XplDividerAttributes> & { [K in keyof XplDivider & keyof XplDividerAttributes]?: XplDivider[K] } & { [K in keyof XplDivider & keyof XplDividerAttributes as `attr:${K}`]?: XplDividerAttributes[K] } & { [K in keyof XplDivider & keyof XplDividerAttributes as `prop:${K}`]?: XplDivider[K] };
+        "xpl-dropdown": Omit<XplDropdown, keyof XplDropdownAttributes> & { [K in keyof XplDropdown & keyof XplDropdownAttributes]?: XplDropdown[K] } & { [K in keyof XplDropdown & keyof XplDropdownAttributes as `attr:${K}`]?: XplDropdownAttributes[K] } & { [K in keyof XplDropdown & keyof XplDropdownAttributes as `prop:${K}`]?: XplDropdown[K] };
+        "xpl-dropdown-group": Omit<XplDropdownGroup, keyof XplDropdownGroupAttributes> & { [K in keyof XplDropdownGroup & keyof XplDropdownGroupAttributes]?: XplDropdownGroup[K] } & { [K in keyof XplDropdownGroup & keyof XplDropdownGroupAttributes as `attr:${K}`]?: XplDropdownGroupAttributes[K] } & { [K in keyof XplDropdownGroup & keyof XplDropdownGroupAttributes as `prop:${K}`]?: XplDropdownGroup[K] };
+        "xpl-dropdown-heading": Omit<XplDropdownHeading, keyof XplDropdownHeadingAttributes> & { [K in keyof XplDropdownHeading & keyof XplDropdownHeadingAttributes]?: XplDropdownHeading[K] } & { [K in keyof XplDropdownHeading & keyof XplDropdownHeadingAttributes as `attr:${K}`]?: XplDropdownHeadingAttributes[K] } & { [K in keyof XplDropdownHeading & keyof XplDropdownHeadingAttributes as `prop:${K}`]?: XplDropdownHeading[K] };
+        "xpl-dropdown-option": Omit<XplDropdownOption, keyof XplDropdownOptionAttributes> & { [K in keyof XplDropdownOption & keyof XplDropdownOptionAttributes]?: XplDropdownOption[K] } & { [K in keyof XplDropdownOption & keyof XplDropdownOptionAttributes as `attr:${K}`]?: XplDropdownOptionAttributes[K] } & { [K in keyof XplDropdownOption & keyof XplDropdownOptionAttributes as `prop:${K}`]?: XplDropdownOption[K] };
         "xpl-dynamic-table": XplDynamicTable;
-        "xpl-dynamic-table-cell": XplDynamicTableCell;
-        "xpl-dynamic-table-row": XplDynamicTableRow;
+        "xpl-dynamic-table-cell": Omit<XplDynamicTableCell, keyof XplDynamicTableCellAttributes> & { [K in keyof XplDynamicTableCell & keyof XplDynamicTableCellAttributes]?: XplDynamicTableCell[K] } & { [K in keyof XplDynamicTableCell & keyof XplDynamicTableCellAttributes as `attr:${K}`]?: XplDynamicTableCellAttributes[K] } & { [K in keyof XplDynamicTableCell & keyof XplDynamicTableCellAttributes as `prop:${K}`]?: XplDynamicTableCell[K] };
+        "xpl-dynamic-table-row": Omit<XplDynamicTableRow, keyof XplDynamicTableRowAttributes> & { [K in keyof XplDynamicTableRow & keyof XplDynamicTableRowAttributes]?: XplDynamicTableRow[K] } & { [K in keyof XplDynamicTableRow & keyof XplDynamicTableRowAttributes as `attr:${K}`]?: XplDynamicTableRowAttributes[K] } & { [K in keyof XplDynamicTableRow & keyof XplDynamicTableRowAttributes as `prop:${K}`]?: XplDynamicTableRow[K] };
         "xpl-grid": XplGrid;
-        "xpl-grid-item": XplGridItem;
-        "xpl-header-accordion": XplHeaderAccordion;
-        "xpl-icon": XplIcon;
-        "xpl-input": XplInput;
-        "xpl-input-color": XplInputColor;
-        "xpl-input-date": XplInputDate;
-        "xpl-input-file": XplInputFile;
-        "xpl-input-time": XplInputTime;
-        "xpl-large-card": XplLargeCard;
-        "xpl-list": XplList;
-        "xpl-main-nav": XplMainNav;
-        "xpl-modal": XplModal;
-        "xpl-nav-item": XplNavItem;
-        "xpl-pagination": XplPagination;
-        "xpl-popover": XplPopover;
-        "xpl-progress": XplProgress;
-        "xpl-radio": XplRadio;
+        "xpl-grid-item": Omit<XplGridItem, keyof XplGridItemAttributes> & { [K in keyof XplGridItem & keyof XplGridItemAttributes]?: XplGridItem[K] } & { [K in keyof XplGridItem & keyof XplGridItemAttributes as `attr:${K}`]?: XplGridItemAttributes[K] } & { [K in keyof XplGridItem & keyof XplGridItemAttributes as `prop:${K}`]?: XplGridItem[K] };
+        "xpl-header-accordion": Omit<XplHeaderAccordion, keyof XplHeaderAccordionAttributes> & { [K in keyof XplHeaderAccordion & keyof XplHeaderAccordionAttributes]?: XplHeaderAccordion[K] } & { [K in keyof XplHeaderAccordion & keyof XplHeaderAccordionAttributes as `attr:${K}`]?: XplHeaderAccordionAttributes[K] } & { [K in keyof XplHeaderAccordion & keyof XplHeaderAccordionAttributes as `prop:${K}`]?: XplHeaderAccordion[K] };
+        "xpl-icon": Omit<XplIcon, keyof XplIconAttributes> & { [K in keyof XplIcon & keyof XplIconAttributes]?: XplIcon[K] } & { [K in keyof XplIcon & keyof XplIconAttributes as `attr:${K}`]?: XplIconAttributes[K] } & { [K in keyof XplIcon & keyof XplIconAttributes as `prop:${K}`]?: XplIcon[K] } & OneOf<"icon", XplIcon["icon"], XplIconAttributes["icon"]>;
+        "xpl-input": Omit<XplInput, keyof XplInputAttributes> & { [K in keyof XplInput & keyof XplInputAttributes]?: XplInput[K] } & { [K in keyof XplInput & keyof XplInputAttributes as `attr:${K}`]?: XplInputAttributes[K] } & { [K in keyof XplInput & keyof XplInputAttributes as `prop:${K}`]?: XplInput[K] };
+        "xpl-input-color": Omit<XplInputColor, keyof XplInputColorAttributes> & { [K in keyof XplInputColor & keyof XplInputColorAttributes]?: XplInputColor[K] } & { [K in keyof XplInputColor & keyof XplInputColorAttributes as `attr:${K}`]?: XplInputColorAttributes[K] } & { [K in keyof XplInputColor & keyof XplInputColorAttributes as `prop:${K}`]?: XplInputColor[K] };
+        "xpl-input-date": Omit<XplInputDate, keyof XplInputDateAttributes> & { [K in keyof XplInputDate & keyof XplInputDateAttributes]?: XplInputDate[K] } & { [K in keyof XplInputDate & keyof XplInputDateAttributes as `attr:${K}`]?: XplInputDateAttributes[K] } & { [K in keyof XplInputDate & keyof XplInputDateAttributes as `prop:${K}`]?: XplInputDate[K] };
+        "xpl-input-file": Omit<XplInputFile, keyof XplInputFileAttributes> & { [K in keyof XplInputFile & keyof XplInputFileAttributes]?: XplInputFile[K] } & { [K in keyof XplInputFile & keyof XplInputFileAttributes as `attr:${K}`]?: XplInputFileAttributes[K] } & { [K in keyof XplInputFile & keyof XplInputFileAttributes as `prop:${K}`]?: XplInputFile[K] };
+        "xpl-input-phone": Omit<XplInputPhone, keyof XplInputPhoneAttributes> & { [K in keyof XplInputPhone & keyof XplInputPhoneAttributes]?: XplInputPhone[K] } & { [K in keyof XplInputPhone & keyof XplInputPhoneAttributes as `attr:${K}`]?: XplInputPhoneAttributes[K] } & { [K in keyof XplInputPhone & keyof XplInputPhoneAttributes as `prop:${K}`]?: XplInputPhone[K] };
+        "xpl-input-search": Omit<XplInputSearch, keyof XplInputSearchAttributes> & { [K in keyof XplInputSearch & keyof XplInputSearchAttributes]?: XplInputSearch[K] } & { [K in keyof XplInputSearch & keyof XplInputSearchAttributes as `attr:${K}`]?: XplInputSearchAttributes[K] } & { [K in keyof XplInputSearch & keyof XplInputSearchAttributes as `prop:${K}`]?: XplInputSearch[K] } & OneOf<"inputId", XplInputSearch["inputId"], XplInputSearchAttributes["inputId"]>;
+        "xpl-input-time": Omit<XplInputTime, keyof XplInputTimeAttributes> & { [K in keyof XplInputTime & keyof XplInputTimeAttributes]?: XplInputTime[K] } & { [K in keyof XplInputTime & keyof XplInputTimeAttributes as `attr:${K}`]?: XplInputTimeAttributes[K] } & { [K in keyof XplInputTime & keyof XplInputTimeAttributes as `prop:${K}`]?: XplInputTime[K] };
+        "xpl-large-card": Omit<XplLargeCard, keyof XplLargeCardAttributes> & { [K in keyof XplLargeCard & keyof XplLargeCardAttributes]?: XplLargeCard[K] } & { [K in keyof XplLargeCard & keyof XplLargeCardAttributes as `attr:${K}`]?: XplLargeCardAttributes[K] } & { [K in keyof XplLargeCard & keyof XplLargeCardAttributes as `prop:${K}`]?: XplLargeCard[K] };
+        "xpl-list": Omit<XplList, keyof XplListAttributes> & { [K in keyof XplList & keyof XplListAttributes]?: XplList[K] } & { [K in keyof XplList & keyof XplListAttributes as `attr:${K}`]?: XplListAttributes[K] } & { [K in keyof XplList & keyof XplListAttributes as `prop:${K}`]?: XplList[K] };
+        "xpl-list-item": Omit<XplListItem, keyof XplListItemAttributes> & { [K in keyof XplListItem & keyof XplListItemAttributes]?: XplListItem[K] } & { [K in keyof XplListItem & keyof XplListItemAttributes as `attr:${K}`]?: XplListItemAttributes[K] } & { [K in keyof XplListItem & keyof XplListItemAttributes as `prop:${K}`]?: XplListItem[K] };
+        "xpl-main-nav": Omit<XplMainNav, keyof XplMainNavAttributes> & { [K in keyof XplMainNav & keyof XplMainNavAttributes]?: XplMainNav[K] } & { [K in keyof XplMainNav & keyof XplMainNavAttributes as `attr:${K}`]?: XplMainNavAttributes[K] } & { [K in keyof XplMainNav & keyof XplMainNavAttributes as `prop:${K}`]?: XplMainNav[K] };
+        "xpl-modal": Omit<XplModal, keyof XplModalAttributes> & { [K in keyof XplModal & keyof XplModalAttributes]?: XplModal[K] } & { [K in keyof XplModal & keyof XplModalAttributes as `attr:${K}`]?: XplModalAttributes[K] } & { [K in keyof XplModal & keyof XplModalAttributes as `prop:${K}`]?: XplModal[K] };
+        "xpl-nav-header-menu": Omit<XplNavHeaderMenu, keyof XplNavHeaderMenuAttributes> & { [K in keyof XplNavHeaderMenu & keyof XplNavHeaderMenuAttributes]?: XplNavHeaderMenu[K] } & { [K in keyof XplNavHeaderMenu & keyof XplNavHeaderMenuAttributes as `attr:${K}`]?: XplNavHeaderMenuAttributes[K] } & { [K in keyof XplNavHeaderMenu & keyof XplNavHeaderMenuAttributes as `prop:${K}`]?: XplNavHeaderMenu[K] };
+        "xpl-nav-item": Omit<XplNavItem, keyof XplNavItemAttributes> & { [K in keyof XplNavItem & keyof XplNavItemAttributes]?: XplNavItem[K] } & { [K in keyof XplNavItem & keyof XplNavItemAttributes as `attr:${K}`]?: XplNavItemAttributes[K] } & { [K in keyof XplNavItem & keyof XplNavItemAttributes as `prop:${K}`]?: XplNavItem[K] };
+        "xpl-pagination": Omit<XplPagination, keyof XplPaginationAttributes> & { [K in keyof XplPagination & keyof XplPaginationAttributes]?: XplPagination[K] } & { [K in keyof XplPagination & keyof XplPaginationAttributes as `attr:${K}`]?: XplPaginationAttributes[K] } & { [K in keyof XplPagination & keyof XplPaginationAttributes as `prop:${K}`]?: XplPagination[K] };
+        "xpl-panel": Omit<XplPanel, keyof XplPanelAttributes> & { [K in keyof XplPanel & keyof XplPanelAttributes]?: XplPanel[K] } & { [K in keyof XplPanel & keyof XplPanelAttributes as `attr:${K}`]?: XplPanelAttributes[K] } & { [K in keyof XplPanel & keyof XplPanelAttributes as `prop:${K}`]?: XplPanel[K] };
+        "xpl-popover": Omit<XplPopover, keyof XplPopoverAttributes> & { [K in keyof XplPopover & keyof XplPopoverAttributes]?: XplPopover[K] } & { [K in keyof XplPopover & keyof XplPopoverAttributes as `attr:${K}`]?: XplPopoverAttributes[K] } & { [K in keyof XplPopover & keyof XplPopoverAttributes as `prop:${K}`]?: XplPopover[K] };
+        "xpl-progress-bar": Omit<XplProgressBar, keyof XplProgressBarAttributes> & { [K in keyof XplProgressBar & keyof XplProgressBarAttributes]?: XplProgressBar[K] } & { [K in keyof XplProgressBar & keyof XplProgressBarAttributes as `attr:${K}`]?: XplProgressBarAttributes[K] } & { [K in keyof XplProgressBar & keyof XplProgressBarAttributes as `prop:${K}`]?: XplProgressBar[K] };
+        "xpl-progress-indicator": Omit<XplProgressIndicator, keyof XplProgressIndicatorAttributes> & { [K in keyof XplProgressIndicator & keyof XplProgressIndicatorAttributes]?: XplProgressIndicator[K] } & { [K in keyof XplProgressIndicator & keyof XplProgressIndicatorAttributes as `attr:${K}`]?: XplProgressIndicatorAttributes[K] } & { [K in keyof XplProgressIndicator & keyof XplProgressIndicatorAttributes as `prop:${K}`]?: XplProgressIndicator[K] };
+        "xpl-radio": Omit<XplRadio, keyof XplRadioAttributes> & { [K in keyof XplRadio & keyof XplRadioAttributes]?: XplRadio[K] } & { [K in keyof XplRadio & keyof XplRadioAttributes as `attr:${K}`]?: XplRadioAttributes[K] } & { [K in keyof XplRadio & keyof XplRadioAttributes as `prop:${K}`]?: XplRadio[K] };
         "xpl-secondary-nav": XplSecondaryNav;
-        "xpl-select": XplSelect;
-        "xpl-skeleton": XplSkeleton;
-        "xpl-slideout": XplSlideout;
-        "xpl-tab": XplTab;
-        "xpl-tab-panel": XplTabPanel;
-        "xpl-table": XplTable;
+        "xpl-select": Omit<XplSelect, keyof XplSelectAttributes> & { [K in keyof XplSelect & keyof XplSelectAttributes]?: XplSelect[K] } & { [K in keyof XplSelect & keyof XplSelectAttributes as `attr:${K}`]?: XplSelectAttributes[K] } & { [K in keyof XplSelect & keyof XplSelectAttributes as `prop:${K}`]?: XplSelect[K] };
+        "xpl-side-nav": Omit<XplSideNav, keyof XplSideNavAttributes> & { [K in keyof XplSideNav & keyof XplSideNavAttributes]?: XplSideNav[K] } & { [K in keyof XplSideNav & keyof XplSideNavAttributes as `attr:${K}`]?: XplSideNavAttributes[K] } & { [K in keyof XplSideNav & keyof XplSideNavAttributes as `prop:${K}`]?: XplSideNav[K] };
+        "xpl-side-nav-item": Omit<XplSideNavItem, keyof XplSideNavItemAttributes> & { [K in keyof XplSideNavItem & keyof XplSideNavItemAttributes]?: XplSideNavItem[K] } & { [K in keyof XplSideNavItem & keyof XplSideNavItemAttributes as `attr:${K}`]?: XplSideNavItemAttributes[K] } & { [K in keyof XplSideNavItem & keyof XplSideNavItemAttributes as `prop:${K}`]?: XplSideNavItem[K] };
+        "xpl-skeleton": Omit<XplSkeleton, keyof XplSkeletonAttributes> & { [K in keyof XplSkeleton & keyof XplSkeletonAttributes]?: XplSkeleton[K] } & { [K in keyof XplSkeleton & keyof XplSkeletonAttributes as `attr:${K}`]?: XplSkeletonAttributes[K] } & { [K in keyof XplSkeleton & keyof XplSkeletonAttributes as `prop:${K}`]?: XplSkeleton[K] };
+        "xpl-slideout": Omit<XplSlideout, keyof XplSlideoutAttributes> & { [K in keyof XplSlideout & keyof XplSlideoutAttributes]?: XplSlideout[K] } & { [K in keyof XplSlideout & keyof XplSlideoutAttributes as `attr:${K}`]?: XplSlideoutAttributes[K] } & { [K in keyof XplSlideout & keyof XplSlideoutAttributes as `prop:${K}`]?: XplSlideout[K] };
+        "xpl-spotlight": Omit<XplSpotlight, keyof XplSpotlightAttributes> & { [K in keyof XplSpotlight & keyof XplSpotlightAttributes]?: XplSpotlight[K] } & { [K in keyof XplSpotlight & keyof XplSpotlightAttributes as `attr:${K}`]?: XplSpotlightAttributes[K] } & { [K in keyof XplSpotlight & keyof XplSpotlightAttributes as `prop:${K}`]?: XplSpotlight[K] };
+        "xpl-tab": Omit<XplTab, keyof XplTabAttributes> & { [K in keyof XplTab & keyof XplTabAttributes]?: XplTab[K] } & { [K in keyof XplTab & keyof XplTabAttributes as `attr:${K}`]?: XplTabAttributes[K] } & { [K in keyof XplTab & keyof XplTabAttributes as `prop:${K}`]?: XplTab[K] };
+        "xpl-tab-panel": Omit<XplTabPanel, keyof XplTabPanelAttributes> & { [K in keyof XplTabPanel & keyof XplTabPanelAttributes]?: XplTabPanel[K] } & { [K in keyof XplTabPanel & keyof XplTabPanelAttributes as `attr:${K}`]?: XplTabPanelAttributes[K] } & { [K in keyof XplTabPanel & keyof XplTabPanelAttributes as `prop:${K}`]?: XplTabPanel[K] };
+        "xpl-table": Omit<XplTable, keyof XplTableAttributes> & { [K in keyof XplTable & keyof XplTableAttributes]?: XplTable[K] } & { [K in keyof XplTable & keyof XplTableAttributes as `attr:${K}`]?: XplTableAttributes[K] } & { [K in keyof XplTable & keyof XplTableAttributes as `prop:${K}`]?: XplTable[K] };
+        "xpl-table-body": XplTableBody;
+        "xpl-table-cell": Omit<XplTableCell, keyof XplTableCellAttributes> & { [K in keyof XplTableCell & keyof XplTableCellAttributes]?: XplTableCell[K] } & { [K in keyof XplTableCell & keyof XplTableCellAttributes as `attr:${K}`]?: XplTableCellAttributes[K] } & { [K in keyof XplTableCell & keyof XplTableCellAttributes as `prop:${K}`]?: XplTableCell[K] };
+        "xpl-table-footer": XplTableFooter;
+        "xpl-table-footer-cell": Omit<XplTableFooterCell, keyof XplTableFooterCellAttributes> & { [K in keyof XplTableFooterCell & keyof XplTableFooterCellAttributes]?: XplTableFooterCell[K] } & { [K in keyof XplTableFooterCell & keyof XplTableFooterCellAttributes as `attr:${K}`]?: XplTableFooterCellAttributes[K] } & { [K in keyof XplTableFooterCell & keyof XplTableFooterCellAttributes as `prop:${K}`]?: XplTableFooterCell[K] };
         "xpl-table-header": XplTableHeader;
-        "xpl-table-header-cell": XplTableHeaderCell;
-        "xpl-tabs": XplTabs;
-        "xpl-tag": XplTag;
-        "xpl-toast": XplToast;
-        "xpl-toggle": XplToggle;
-        "xpl-toolbar": XplToolbar;
-        "xpl-tooltip": XplTooltip;
-        "xpl-utility-bar": XplUtilityBar;
+        "xpl-table-header-cell": Omit<XplTableHeaderCell, keyof XplTableHeaderCellAttributes> & { [K in keyof XplTableHeaderCell & keyof XplTableHeaderCellAttributes]?: XplTableHeaderCell[K] } & { [K in keyof XplTableHeaderCell & keyof XplTableHeaderCellAttributes as `attr:${K}`]?: XplTableHeaderCellAttributes[K] } & { [K in keyof XplTableHeaderCell & keyof XplTableHeaderCellAttributes as `prop:${K}`]?: XplTableHeaderCell[K] };
+        "xpl-table-row": Omit<XplTableRow, keyof XplTableRowAttributes> & { [K in keyof XplTableRow & keyof XplTableRowAttributes]?: XplTableRow[K] } & { [K in keyof XplTableRow & keyof XplTableRowAttributes as `attr:${K}`]?: XplTableRowAttributes[K] } & { [K in keyof XplTableRow & keyof XplTableRowAttributes as `prop:${K}`]?: XplTableRow[K] };
+        "xpl-tabs": Omit<XplTabs, keyof XplTabsAttributes> & { [K in keyof XplTabs & keyof XplTabsAttributes]?: XplTabs[K] } & { [K in keyof XplTabs & keyof XplTabsAttributes as `attr:${K}`]?: XplTabsAttributes[K] } & { [K in keyof XplTabs & keyof XplTabsAttributes as `prop:${K}`]?: XplTabs[K] };
+        "xpl-tag": Omit<XplTag, keyof XplTagAttributes> & { [K in keyof XplTag & keyof XplTagAttributes]?: XplTag[K] } & { [K in keyof XplTag & keyof XplTagAttributes as `attr:${K}`]?: XplTagAttributes[K] } & { [K in keyof XplTag & keyof XplTagAttributes as `prop:${K}`]?: XplTag[K] };
+        "xpl-toast": Omit<XplToast, keyof XplToastAttributes> & { [K in keyof XplToast & keyof XplToastAttributes]?: XplToast[K] } & { [K in keyof XplToast & keyof XplToastAttributes as `attr:${K}`]?: XplToastAttributes[K] } & { [K in keyof XplToast & keyof XplToastAttributes as `prop:${K}`]?: XplToast[K] };
+        "xpl-toggle": Omit<XplToggle, keyof XplToggleAttributes> & { [K in keyof XplToggle & keyof XplToggleAttributes]?: XplToggle[K] } & { [K in keyof XplToggle & keyof XplToggleAttributes as `attr:${K}`]?: XplToggleAttributes[K] } & { [K in keyof XplToggle & keyof XplToggleAttributes as `prop:${K}`]?: XplToggle[K] };
+        "xpl-toolbar": Omit<XplToolbar, keyof XplToolbarAttributes> & { [K in keyof XplToolbar & keyof XplToolbarAttributes]?: XplToolbar[K] } & { [K in keyof XplToolbar & keyof XplToolbarAttributes as `attr:${K}`]?: XplToolbarAttributes[K] } & { [K in keyof XplToolbar & keyof XplToolbarAttributes as `prop:${K}`]?: XplToolbar[K] };
+        "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-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] };
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "xpl-accordion": LocalJSX.XplAccordion & JSXBase.HTMLAttributes<HTMLXplAccordionElement>;
-            "xpl-application-shell": LocalJSX.XplApplicationShell & JSXBase.HTMLAttributes<HTMLXplApplicationShellElement>;
-            "xpl-avatar": LocalJSX.XplAvatar & JSXBase.HTMLAttributes<HTMLXplAvatarElement>;
-            "xpl-backdrop": LocalJSX.XplBackdrop & JSXBase.HTMLAttributes<HTMLXplBackdropElement>;
-            "xpl-badge": LocalJSX.XplBadge & JSXBase.HTMLAttributes<HTMLXplBadgeElement>;
-            "xpl-breadcrumb-item": LocalJSX.XplBreadcrumbItem & JSXBase.HTMLAttributes<HTMLXplBreadcrumbItemElement>;
-            "xpl-breadcrumbs": LocalJSX.XplBreadcrumbs & JSXBase.HTMLAttributes<HTMLXplBreadcrumbsElement>;
-            "xpl-button": LocalJSX.XplButton & JSXBase.HTMLAttributes<HTMLXplButtonElement>;
-            "xpl-button-row": LocalJSX.XplButtonRow & JSXBase.HTMLAttributes<HTMLXplButtonRowElement>;
-            "xpl-calendar": LocalJSX.XplCalendar & JSXBase.HTMLAttributes<HTMLXplCalendarElement>;
-            "xpl-checkbox": LocalJSX.XplCheckbox & JSXBase.HTMLAttributes<HTMLXplCheckboxElement>;
-            "xpl-choicelist": LocalJSX.XplChoicelist & JSXBase.HTMLAttributes<HTMLXplChoicelistElement>;
-            "xpl-content-area": LocalJSX.XplContentArea & JSXBase.HTMLAttributes<HTMLXplContentAreaElement>;
-            "xpl-dashboard": LocalJSX.XplDashboard & JSXBase.HTMLAttributes<HTMLXplDashboardElement>;
-            "xpl-data-card": LocalJSX.XplDataCard & JSXBase.HTMLAttributes<HTMLXplDataCardElement>;
-            "xpl-divider": LocalJSX.XplDivider & JSXBase.HTMLAttributes<HTMLXplDividerElement>;
-            "xpl-dropdown": LocalJSX.XplDropdown & JSXBase.HTMLAttributes<HTMLXplDropdownElement>;
-            "xpl-dropdown-group": LocalJSX.XplDropdownGroup & JSXBase.HTMLAttributes<HTMLXplDropdownGroupElement>;
-            "xpl-dropdown-heading": LocalJSX.XplDropdownHeading & JSXBase.HTMLAttributes<HTMLXplDropdownHeadingElement>;
-            "xpl-dropdown-option": LocalJSX.XplDropdownOption & JSXBase.HTMLAttributes<HTMLXplDropdownOptionElement>;
-            "xpl-dynamic-table": LocalJSX.XplDynamicTable & JSXBase.HTMLAttributes<HTMLXplDynamicTableElement>;
-            "xpl-dynamic-table-cell": LocalJSX.XplDynamicTableCell & JSXBase.HTMLAttributes<HTMLXplDynamicTableCellElement>;
-            "xpl-dynamic-table-row": LocalJSX.XplDynamicTableRow & JSXBase.HTMLAttributes<HTMLXplDynamicTableRowElement>;
-            "xpl-grid": LocalJSX.XplGrid & JSXBase.HTMLAttributes<HTMLXplGridElement>;
-            "xpl-grid-item": LocalJSX.XplGridItem & JSXBase.HTMLAttributes<HTMLXplGridItemElement>;
-            "xpl-header-accordion": LocalJSX.XplHeaderAccordion & JSXBase.HTMLAttributes<HTMLXplHeaderAccordionElement>;
-            "xpl-icon": LocalJSX.XplIcon & JSXBase.HTMLAttributes<HTMLXplIconElement>;
-            "xpl-input": LocalJSX.XplInput & JSXBase.HTMLAttributes<HTMLXplInputElement>;
-            "xpl-input-color": LocalJSX.XplInputColor & JSXBase.HTMLAttributes<HTMLXplInputColorElement>;
-            "xpl-input-date": LocalJSX.XplInputDate & JSXBase.HTMLAttributes<HTMLXplInputDateElement>;
+            "xpl-accordion": LocalJSX.IntrinsicElements["xpl-accordion"] & JSXBase.HTMLAttributes<HTMLXplAccordionElement>;
+            "xpl-application-shell": LocalJSX.IntrinsicElements["xpl-application-shell"] & JSXBase.HTMLAttributes<HTMLXplApplicationShellElement>;
+            "xpl-avatar": LocalJSX.IntrinsicElements["xpl-avatar"] & JSXBase.HTMLAttributes<HTMLXplAvatarElement>;
+            "xpl-backdrop": LocalJSX.IntrinsicElements["xpl-backdrop"] & JSXBase.HTMLAttributes<HTMLXplBackdropElement>;
+            "xpl-badge": LocalJSX.IntrinsicElements["xpl-badge"] & JSXBase.HTMLAttributes<HTMLXplBadgeElement>;
+            "xpl-banner": LocalJSX.IntrinsicElements["xpl-banner"] & JSXBase.HTMLAttributes<HTMLXplBannerElement>;
+            "xpl-breadcrumb-item": LocalJSX.IntrinsicElements["xpl-breadcrumb-item"] & JSXBase.HTMLAttributes<HTMLXplBreadcrumbItemElement>;
+            "xpl-breadcrumbs": LocalJSX.IntrinsicElements["xpl-breadcrumbs"] & JSXBase.HTMLAttributes<HTMLXplBreadcrumbsElement>;
+            "xpl-button": LocalJSX.IntrinsicElements["xpl-button"] & JSXBase.HTMLAttributes<HTMLXplButtonElement>;
+            "xpl-button-row": LocalJSX.IntrinsicElements["xpl-button-row"] & JSXBase.HTMLAttributes<HTMLXplButtonRowElement>;
+            "xpl-calendar": LocalJSX.IntrinsicElements["xpl-calendar"] & JSXBase.HTMLAttributes<HTMLXplCalendarElement>;
+            "xpl-checkbox": LocalJSX.IntrinsicElements["xpl-checkbox"] & JSXBase.HTMLAttributes<HTMLXplCheckboxElement>;
+            "xpl-choicelist": LocalJSX.IntrinsicElements["xpl-choicelist"] & JSXBase.HTMLAttributes<HTMLXplChoicelistElement>;
+            "xpl-content-area": LocalJSX.IntrinsicElements["xpl-content-area"] & JSXBase.HTMLAttributes<HTMLXplContentAreaElement>;
+            "xpl-dashboard": LocalJSX.IntrinsicElements["xpl-dashboard"] & JSXBase.HTMLAttributes<HTMLXplDashboardElement>;
+            "xpl-data-card": LocalJSX.IntrinsicElements["xpl-data-card"] & JSXBase.HTMLAttributes<HTMLXplDataCardElement>;
+            "xpl-divider": LocalJSX.IntrinsicElements["xpl-divider"] & JSXBase.HTMLAttributes<HTMLXplDividerElement>;
+            "xpl-dropdown": LocalJSX.IntrinsicElements["xpl-dropdown"] & JSXBase.HTMLAttributes<HTMLXplDropdownElement>;
+            "xpl-dropdown-group": LocalJSX.IntrinsicElements["xpl-dropdown-group"] & JSXBase.HTMLAttributes<HTMLXplDropdownGroupElement>;
+            "xpl-dropdown-heading": LocalJSX.IntrinsicElements["xpl-dropdown-heading"] & JSXBase.HTMLAttributes<HTMLXplDropdownHeadingElement>;
+            "xpl-dropdown-option": LocalJSX.IntrinsicElements["xpl-dropdown-option"] & JSXBase.HTMLAttributes<HTMLXplDropdownOptionElement>;
+            /**
+             * @deprecated Use the compositional `<xpl-table>` API instead.
+             * This component will be removed in a future major release.
+             */
+            "xpl-dynamic-table": LocalJSX.IntrinsicElements["xpl-dynamic-table"] & JSXBase.HTMLAttributes<HTMLXplDynamicTableElement>;
+            /**
+             * @deprecated Use `<xpl-table-cell>` instead.
+             * This component will be removed in a future major release.
+             */
+            "xpl-dynamic-table-cell": LocalJSX.IntrinsicElements["xpl-dynamic-table-cell"] & JSXBase.HTMLAttributes<HTMLXplDynamicTableCellElement>;
+            /**
+             * @deprecated Use `<xpl-table-row>` instead.
+             * This component will be removed in a future major release.
+             */
+            "xpl-dynamic-table-row": LocalJSX.IntrinsicElements["xpl-dynamic-table-row"] & JSXBase.HTMLAttributes<HTMLXplDynamicTableRowElement>;
+            "xpl-grid": LocalJSX.IntrinsicElements["xpl-grid"] & JSXBase.HTMLAttributes<HTMLXplGridElement>;
+            "xpl-grid-item": LocalJSX.IntrinsicElements["xpl-grid-item"] & JSXBase.HTMLAttributes<HTMLXplGridItemElement>;
+            "xpl-header-accordion": LocalJSX.IntrinsicElements["xpl-header-accordion"] & JSXBase.HTMLAttributes<HTMLXplHeaderAccordionElement>;
+            "xpl-icon": LocalJSX.IntrinsicElements["xpl-icon"] & JSXBase.HTMLAttributes<HTMLXplIconElement>;
+            "xpl-input": LocalJSX.IntrinsicElements["xpl-input"] & JSXBase.HTMLAttributes<HTMLXplInputElement>;
+            "xpl-input-color": LocalJSX.IntrinsicElements["xpl-input-color"] & JSXBase.HTMLAttributes<HTMLXplInputColorElement>;
+            "xpl-input-date": LocalJSX.IntrinsicElements["xpl-input-date"] & JSXBase.HTMLAttributes<HTMLXplInputDateElement>;
             /**
              * `xpl-input-file` is a component that allows users to upload files.
              */
-            "xpl-input-file": LocalJSX.XplInputFile & JSXBase.HTMLAttributes<HTMLXplInputFileElement>;
-            "xpl-input-time": LocalJSX.XplInputTime & JSXBase.HTMLAttributes<HTMLXplInputTimeElement>;
-            "xpl-large-card": LocalJSX.XplLargeCard & JSXBase.HTMLAttributes<HTMLXplLargeCardElement>;
-            "xpl-list": LocalJSX.XplList & JSXBase.HTMLAttributes<HTMLXplListElement>;
-            "xpl-main-nav": LocalJSX.XplMainNav & JSXBase.HTMLAttributes<HTMLXplMainNavElement>;
-            "xpl-modal": LocalJSX.XplModal & JSXBase.HTMLAttributes<HTMLXplModalElement>;
-            "xpl-nav-item": LocalJSX.XplNavItem & JSXBase.HTMLAttributes<HTMLXplNavItemElement>;
-            "xpl-pagination": LocalJSX.XplPagination & JSXBase.HTMLAttributes<HTMLXplPaginationElement>;
-            "xpl-popover": LocalJSX.XplPopover & JSXBase.HTMLAttributes<HTMLXplPopoverElement>;
-            "xpl-progress": LocalJSX.XplProgress & JSXBase.HTMLAttributes<HTMLXplProgressElement>;
-            "xpl-radio": LocalJSX.XplRadio & JSXBase.HTMLAttributes<HTMLXplRadioElement>;
-            "xpl-secondary-nav": LocalJSX.XplSecondaryNav & JSXBase.HTMLAttributes<HTMLXplSecondaryNavElement>;
-            "xpl-select": LocalJSX.XplSelect & JSXBase.HTMLAttributes<HTMLXplSelectElement>;
-            "xpl-skeleton": LocalJSX.XplSkeleton & JSXBase.HTMLAttributes<HTMLXplSkeletonElement>;
-            "xpl-slideout": LocalJSX.XplSlideout & JSXBase.HTMLAttributes<HTMLXplSlideoutElement>;
-            "xpl-tab": LocalJSX.XplTab & JSXBase.HTMLAttributes<HTMLXplTabElement>;
-            "xpl-tab-panel": LocalJSX.XplTabPanel & JSXBase.HTMLAttributes<HTMLXplTabPanelElement>;
-            "xpl-table": LocalJSX.XplTable & JSXBase.HTMLAttributes<HTMLXplTableElement>;
-            "xpl-table-header": LocalJSX.XplTableHeader & JSXBase.HTMLAttributes<HTMLXplTableHeaderElement>;
-            "xpl-table-header-cell": LocalJSX.XplTableHeaderCell & JSXBase.HTMLAttributes<HTMLXplTableHeaderCellElement>;
-            "xpl-tabs": LocalJSX.XplTabs & JSXBase.HTMLAttributes<HTMLXplTabsElement>;
-            "xpl-tag": LocalJSX.XplTag & JSXBase.HTMLAttributes<HTMLXplTagElement>;
-            "xpl-toast": LocalJSX.XplToast & JSXBase.HTMLAttributes<HTMLXplToastElement>;
-            "xpl-toggle": LocalJSX.XplToggle & JSXBase.HTMLAttributes<HTMLXplToggleElement>;
-            "xpl-toolbar": LocalJSX.XplToolbar & JSXBase.HTMLAttributes<HTMLXplToolbarElement>;
-            "xpl-tooltip": LocalJSX.XplTooltip & JSXBase.HTMLAttributes<HTMLXplTooltipElement>;
-            "xpl-utility-bar": LocalJSX.XplUtilityBar & JSXBase.HTMLAttributes<HTMLXplUtilityBarElement>;
+            "xpl-input-file": LocalJSX.IntrinsicElements["xpl-input-file"] & JSXBase.HTMLAttributes<HTMLXplInputFileElement>;
+            "xpl-input-phone": LocalJSX.IntrinsicElements["xpl-input-phone"] & JSXBase.HTMLAttributes<HTMLXplInputPhoneElement>;
+            "xpl-input-search": LocalJSX.IntrinsicElements["xpl-input-search"] & JSXBase.HTMLAttributes<HTMLXplInputSearchElement>;
+            "xpl-input-time": LocalJSX.IntrinsicElements["xpl-input-time"] & JSXBase.HTMLAttributes<HTMLXplInputTimeElement>;
+            "xpl-large-card": LocalJSX.IntrinsicElements["xpl-large-card"] & JSXBase.HTMLAttributes<HTMLXplLargeCardElement>;
+            "xpl-list": LocalJSX.IntrinsicElements["xpl-list"] & JSXBase.HTMLAttributes<HTMLXplListElement>;
+            "xpl-list-item": LocalJSX.IntrinsicElements["xpl-list-item"] & JSXBase.HTMLAttributes<HTMLXplListItemElement>;
+            "xpl-main-nav": LocalJSX.IntrinsicElements["xpl-main-nav"] & JSXBase.HTMLAttributes<HTMLXplMainNavElement>;
+            "xpl-modal": LocalJSX.IntrinsicElements["xpl-modal"] & JSXBase.HTMLAttributes<HTMLXplModalElement>;
+            /**
+             * Profile / account block (username, email, default slot for **`xpl-top-nav-item`** / **`xpl-divider`**).
+             * Tag **`xpl-nav-header-menu`**; implementation folder **`xpl-nav-header-menu`**. **`.xpl-nav-header-menu__slot`** is
+             * **`role="list"`** for slotted **`xpl-top-nav-item`** (**`role="listitem"`**).
+             * **Slotted content:** do not add **`xpl-nav-header-menu__*`** BEM classes on nodes you pass into the default slot —
+             * profile, list shell, and **`xpl-top-nav-item`** **`role="listitem"`** are handled by the component. Use
+             * **`xpl-top-nav-item`** (or plain elements that are not Apollo **`xpl-*`** BEM hooks) in the slot only.
+             * **`slot="right-aside-mobile"`** — optional block **between** the profile header and the default-slot list (e.g. narrow-only
+             * duplicate of **every** **`slot="right-aside"`** control per Figma when **`xpl-top-nav`** hides **`right-aside`** on narrow viewports (always)).
+             * Not **`role="list"`**; use **`xpl-button`** / **`xpl-top-nav-item`** as needed. Shown only on **narrow viewports** (one pixel below Tailwind **`md`** — **`top-nav.css`**) so bar actions stay in **`slot="right-aside"`** on wider viewports.
+             * Light-DOM **`slotchange`** is unreliable; a host **`MutationObserver`** (child / subtree / **`slot`** attribute) keeps
+             * **`xpl-nav-header-menu--has-right-aside-mobile`** in sync when nodes are added or retargeted after mount (same pattern as **`xpl-top-nav`**).
+             * Stencil **`newSpecPage`** / mock-doc does not define **`MutationObserver`**; slot presence still updates on the next
+             * deferred flush (**`setTimeout(0)`** coalesced with **`componentDidRender`**). In real browsers the observer handles child /
+             * **`slot`** mutations without stacking uncancellable microtasks.
+             * **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 (same contract as **`xpl-top-nav`** / **`xpl-top-nav-item`**).
+             */
+            "xpl-nav-header-menu": LocalJSX.IntrinsicElements["xpl-nav-header-menu"] & JSXBase.HTMLAttributes<HTMLXplNavHeaderMenuElement>;
+            "xpl-nav-item": LocalJSX.IntrinsicElements["xpl-nav-item"] & JSXBase.HTMLAttributes<HTMLXplNavItemElement>;
+            "xpl-pagination": LocalJSX.IntrinsicElements["xpl-pagination"] & JSXBase.HTMLAttributes<HTMLXplPaginationElement>;
+            /**
+             * A stateless container that defines a section on a page and can house any
+             * type of content. Panels are not dismissible and may contain a top accent.
+             */
+            "xpl-panel": LocalJSX.IntrinsicElements["xpl-panel"] & JSXBase.HTMLAttributes<HTMLXplPanelElement>;
+            "xpl-popover": LocalJSX.IntrinsicElements["xpl-popover"] & JSXBase.HTMLAttributes<HTMLXplPopoverElement>;
+            "xpl-progress-bar": LocalJSX.IntrinsicElements["xpl-progress-bar"] & JSXBase.HTMLAttributes<HTMLXplProgressBarElement>;
+            "xpl-progress-indicator": LocalJSX.IntrinsicElements["xpl-progress-indicator"] & JSXBase.HTMLAttributes<HTMLXplProgressIndicatorElement>;
+            "xpl-radio": LocalJSX.IntrinsicElements["xpl-radio"] & JSXBase.HTMLAttributes<HTMLXplRadioElement>;
+            "xpl-secondary-nav": LocalJSX.IntrinsicElements["xpl-secondary-nav"] & JSXBase.HTMLAttributes<HTMLXplSecondaryNavElement>;
+            "xpl-select": LocalJSX.IntrinsicElements["xpl-select"] & JSXBase.HTMLAttributes<HTMLXplSelectElement>;
+            "xpl-side-nav": LocalJSX.IntrinsicElements["xpl-side-nav"] & JSXBase.HTMLAttributes<HTMLXplSideNavElement>;
+            "xpl-side-nav-item": LocalJSX.IntrinsicElements["xpl-side-nav-item"] & JSXBase.HTMLAttributes<HTMLXplSideNavItemElement>;
+            "xpl-skeleton": LocalJSX.IntrinsicElements["xpl-skeleton"] & JSXBase.HTMLAttributes<HTMLXplSkeletonElement>;
+            "xpl-slideout": LocalJSX.IntrinsicElements["xpl-slideout"] & JSXBase.HTMLAttributes<HTMLXplSlideoutElement>;
+            "xpl-spotlight": LocalJSX.IntrinsicElements["xpl-spotlight"] & JSXBase.HTMLAttributes<HTMLXplSpotlightElement>;
+            "xpl-tab": LocalJSX.IntrinsicElements["xpl-tab"] & JSXBase.HTMLAttributes<HTMLXplTabElement>;
+            "xpl-tab-panel": LocalJSX.IntrinsicElements["xpl-tab-panel"] & JSXBase.HTMLAttributes<HTMLXplTabPanelElement>;
+            /**
+             * Compositional tables use CSS grid on the host (`role="grid"`). Legacy mode uses a `<table>`.
+             */
+            "xpl-table": LocalJSX.IntrinsicElements["xpl-table"] & JSXBase.HTMLAttributes<HTMLXplTableElement>;
+            "xpl-table-body": LocalJSX.IntrinsicElements["xpl-table-body"] & JSXBase.HTMLAttributes<HTMLXplTableBodyElement>;
+            "xpl-table-cell": LocalJSX.IntrinsicElements["xpl-table-cell"] & JSXBase.HTMLAttributes<HTMLXplTableCellElement>;
+            "xpl-table-footer": LocalJSX.IntrinsicElements["xpl-table-footer"] & JSXBase.HTMLAttributes<HTMLXplTableFooterElement>;
+            "xpl-table-footer-cell": LocalJSX.IntrinsicElements["xpl-table-footer-cell"] & JSXBase.HTMLAttributes<HTMLXplTableFooterCellElement>;
+            "xpl-table-header": LocalJSX.IntrinsicElements["xpl-table-header"] & JSXBase.HTMLAttributes<HTMLXplTableHeaderElement>;
+            "xpl-table-header-cell": LocalJSX.IntrinsicElements["xpl-table-header-cell"] & JSXBase.HTMLAttributes<HTMLXplTableHeaderCellElement>;
+            "xpl-table-row": LocalJSX.IntrinsicElements["xpl-table-row"] & JSXBase.HTMLAttributes<HTMLXplTableRowElement>;
+            "xpl-tabs": LocalJSX.IntrinsicElements["xpl-tabs"] & JSXBase.HTMLAttributes<HTMLXplTabsElement>;
+            "xpl-tag": LocalJSX.IntrinsicElements["xpl-tag"] & JSXBase.HTMLAttributes<HTMLXplTagElement>;
+            "xpl-toast": LocalJSX.IntrinsicElements["xpl-toast"] & JSXBase.HTMLAttributes<HTMLXplToastElement>;
+            "xpl-toggle": LocalJSX.IntrinsicElements["xpl-toggle"] & JSXBase.HTMLAttributes<HTMLXplToggleElement>;
+            "xpl-toolbar": LocalJSX.IntrinsicElements["xpl-toolbar"] & JSXBase.HTMLAttributes<HTMLXplToolbarElement>;
+            "xpl-tooltip": LocalJSX.IntrinsicElements["xpl-tooltip"] & JSXBase.HTMLAttributes<HTMLXplTooltipElement>;
+            /**
+             * Horizontal top navigation with **`left-aside`** and a **right rail**: **`right-aside`** then **user menu**
+             * (see **`.xpl-top-nav__right-rail`** in `render()`). The account menu uses an internal **`xpl-popover`** (**`bottom-end`**, **`display="menu"`**): built-in trigger uses **`child-account-label`** (prop / attribute) as the label beside a trailing **`chevron-down`** on **`xpl-button`** (**`icon`** / **`iconPosition="end"`**), or **`slot="user-menu-trigger"`** for a custom trigger; panel from **`slot="user-menu"`** (e.g. **`xpl-nav-header-menu`**).
+             * Optional **`nav-control`** and **`navOpen`**. **`left-aside`** uses **`role="list"`** for primary **`xpl-top-nav-item`** rows (**`role="listitem"`** on each item host). The built-in **`xpl-top-nav__brand`** item omits **`listitem`** (it is not a child of that list). **`label`** maps to **`nav`** **`aria-label`**. Opening state is internal (not a prop) — use **`navOpen`** and host **`xpl-top-nav--open`** for styling.
+             * **Escape:** With **`nav-control`**, **Escape** closes the mobile drawer and emits **`navOpen`** **`false`** (skips while **any** descendant **`xpl-popover`** is open — detected from each popover’s inner **`.xpl-popover--is-open`** marker — or when a **`xpl-top-nav-item`** dropdown is open — capture/bubble order). Focus returns to the nav toggle after the drawer closes (**Escape** or second toggle click).
+             * **`xpl-top-nav-item`** **`slot="dropdown"`** uses document **capture** for **Escape** first; the shell uses **bubble**
+             * on **`ownerDocument`** so nested dropdowns close before the drawer.
+             * **Theming:** The host always includes Foundation’s **`dark`** class so **`--xpl-*`** purpose tokens under this subtree
+             * resolve to dark-mode values even when the page root is light. Floating overlays (e.g. **`xpl-popover`** / **`xpl-dropdown`**
+             * content teleported outside the host) do not inherit this scope — add **`dark`** on those panels if they should match.
+             * **Layout:** **`right-aside`** and the user-menu region are wrapped internally (**`.xpl-top-nav__right-lead`**, etc.).
+             * Consumers should not add those BEM classes — slot content only.
+             * **Brand logo:** use **`brand-logo`** (URL) for a built-in **`<img>`**, or **`slot="brand-logo"`** for custom markup (e.g. **`xpl-icon`**, SVG). When the URL prop is set, it takes precedence and the slot is not used for the image. On **narrow viewports** (one pixel below Tailwind **`md`** — see **`top-nav.css`**), **`brand-name`** text is hidden in the bar (logo / slot mark only); keep a meaningful **`alt`** on **`brand-logo`** or accessible slotted mark for context.
+             * **Narrow / mobile** (same breakpoint as above): **`slot="left-aside"`** is **hidden** in the bar until **`nav-control`**
+             * is set **and** the drawer is open (floating panel per Figma). **Without **`nav-control`**, there is no mobile drawer** —
+             * primary links remain hidden below **`md`** until the viewport is wide enough for the horizontal bar. The built-in **brand**
+             * stays in the top bar (**hamburger → brand** when **`nav-control`** is set). **`right-aside`** is hidden in the bar on narrow
+             * viewports (**`top-nav.css`**, one pixel below Tailwind **`md`**); duplicate those actions into **`xpl-nav-header-menu`**
+             * **`slot="right-aside-mobile"`** (below profile, above the list; narrow-only CSS in **`top-nav.css`**) per Figma.
+             * **Account menu vs drawer:** Opening the built-in account **`xpl-popover`** while the mobile drawer is open **closes the drawer**
+             * and emits **`navOpen(false)`** so the two layers do not stack.
+             */
+            "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
+             * 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`**.
+             * **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>;
+            "xpl-utility-bar": LocalJSX.IntrinsicElements["xpl-utility-bar"] & JSXBase.HTMLAttributes<HTMLXplUtilityBarElement>;
         }
     }
 }