@xplortech/apollo-core 2.4.3 → 2.6.0

package/dist/types/components.d.ts

@@ -5,20 +5,16 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { BadgeVariantProp } from "./components/xpl-badge/xpl-badge";
 import { Choice } from "./components/xpl-choicelist/choice";
-import { IconName } from "./components/xpl-icon/xpl-icon";
 import { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
-import { IconName as IconName1 } from "./components/xpl-icon/xpl-icon";
 import { ListItem } from "./components/xpl-list/listitem";
 import { PopoverPosition } from "./components/xpl-popover/xpl-popover";
-import { IconName as IconName2 } from "./components/xpl-select/xpl-select";
+export { BadgeVariantProp } from "./components/xpl-badge/xpl-badge";
 export { Choice } from "./components/xpl-choicelist/choice";
-export { IconName } from "./components/xpl-icon/xpl-icon";
 export { DropdownItem, DropdownOptionGroup } from "./components/xpl-dropdown/dropdown-option";
-export { IconName as IconName1 } from "./components/xpl-icon/xpl-icon";
 export { ListItem } from "./components/xpl-list/listitem";
 export { PopoverPosition } from "./components/xpl-popover/xpl-popover";
-export { IconName as IconName2 } from "./components/xpl-select/xpl-select";
 export namespace Components {
     interface XplAccordion {
         /**
@@ -120,13 +116,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 {
     }
@@ -134,52 +194,74 @@ export namespace Components {
     }
     interface XplButton {
         /**
-          * whether button should be disabled
+          * Whether button should be disabled
+          * @default false
          */
-        "disabled"?: boolean;
+        "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;
+        /**
+          * Icon to render - icon name as string (from xpl-icon library).
+          * @default ''
          */
-        "fullWidth"?: boolean;
+        "icon": string;
         /**
-          * whether button should render icon only
+          * When true, the button renders in icon-only circular style. Use for icon-only buttons.
+          * @default false
          */
-        "iconOnly"?: boolean;
+        "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 {
         /**
@@ -308,9 +390,9 @@ export namespace Components {
          */
         "detail"?: string;
         /**
-          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * Whether to display the icon or not.
           * @default true
@@ -333,11 +415,11 @@ export namespace Components {
          */
         "smallStat"?: string;
         /**
-          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "smallStatIcon"?: IconName;
+        "smallStatIcon"?: string;
         /**
-          * set a variant that changes the color of the small stat based on the following rules:    If trend is positive and greater than 0.5% color is green and up-right arrow is used    If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
+          * set a variant that changes the color of the small stat based on the following rules:   If trend is positive and greater than 0.5% color is green and up-right arrow is used   If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
          */
         "smallStatVariant"?: 'positive' | 'negative' | 'neutral';
         /**
@@ -410,7 +492,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 {
         /**
@@ -429,6 +511,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
          */
@@ -527,9 +613,10 @@ export namespace Components {
          */
         "backgroundColor"?: string;
         /**
-          * Name of icon
+          * Name of icon.
+          * @property {string}  See [available icons](./ICONS.md) for the complete list, or view the [Storybook icon gallery](?path=/story/components-icons--icons).
          */
-        "icon": IconName1;
+        "icon": string;
         /**
           * Size of icon
          */
@@ -559,6 +646,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.
          */
@@ -590,6 +682,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.
          */
@@ -637,6 +734,10 @@ export namespace Components {
           * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.
          */
         "pre"?: string;
+        /**
+          * 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, and date inputs.
          */
@@ -658,7 +759,7 @@ 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';
         /**
           * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, and date inputs.
          */
@@ -790,6 +891,50 @@ 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 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.
@@ -929,6 +1074,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. Responsive: scales down at tablet and mobile breakpoints.  - `default` – 24 px desktop / 16 px tablet+mobile - `tight`   – 16 px desktop / 8 px tablet+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.
@@ -962,6 +1123,36 @@ export namespace Components {
          */
         "steps"?: string[];
     }
+    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 XplRadio {
         /**
           * Whether the input is "on"
@@ -1042,10 +1233,10 @@ export namespace Components {
          */
         "reset": () => Promise<void>;
         /**
-          * The icon to display in the select trigger button.
+          * The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
           * @default 'chevron-down'
          */
-        "selectIcon"?: IconName2;
+        "selectIcon"?: string;
         /**
           * The value(s) currently selected in the select component.
          */
@@ -1056,6 +1247,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.
@@ -1184,9 +1421,9 @@ export namespace Components {
     }
     interface XplTableHeaderCell {
         /**
-          * @property {IconName} - Icon to display in the cell
+          * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * @property {string} - Text to display in the cell
           * @default ''
@@ -1318,6 +1555,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;
@@ -1358,6 +1599,10 @@ export interface XplInputFileCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplInputFileElement;
 }
+export interface XplInputPhoneCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplInputPhoneElement;
+}
 export interface XplInputTimeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplInputTimeElement;
@@ -1390,6 +1635,10 @@ 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;
@@ -1449,6 +1698,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: {
@@ -1730,6 +1998,24 @@ 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 HTMLXplInputTimeElementEventMap {
         "valueChange": string;
         "hasErrorStateChanged": string | null;
@@ -1829,6 +2115,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;
     }
@@ -1852,6 +2148,12 @@ declare global {
         prototype: HTMLXplProgressElement;
         new (): HTMLXplProgressElement;
     };
+    interface HTMLXplProgressBarElement extends Components.XplProgressBar, HTMLStencilElement {
+    }
+    var HTMLXplProgressBarElement: {
+        prototype: HTMLXplProgressBarElement;
+        new (): HTMLXplProgressBarElement;
+    };
     interface HTMLXplRadioElementEventMap {
         "radioChange": string | boolean;
     }
@@ -1898,6 +2200,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: {
@@ -2070,6 +2396,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;
@@ -2096,6 +2423,7 @@ declare global {
         "xpl-input-color": HTMLXplInputColorElement;
         "xpl-input-date": HTMLXplInputDateElement;
         "xpl-input-file": HTMLXplInputFileElement;
+        "xpl-input-phone": HTMLXplInputPhoneElement;
         "xpl-input-time": HTMLXplInputTimeElement;
         "xpl-large-card": HTMLXplLargeCardElement;
         "xpl-list": HTMLXplListElement;
@@ -2103,11 +2431,15 @@ declare global {
         "xpl-modal": HTMLXplModalElement;
         "xpl-nav-item": HTMLXplNavItemElement;
         "xpl-pagination": HTMLXplPaginationElement;
+        "xpl-panel": HTMLXplPanelElement;
         "xpl-popover": HTMLXplPopoverElement;
         "xpl-progress": HTMLXplProgressElement;
+        "xpl-progress-bar": HTMLXplProgressBarElement;
         "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-tab": HTMLXplTabElement;
@@ -2125,6 +2457,8 @@ declare global {
     }
 }
 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
@@ -2220,13 +2554,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'
+         */
+        "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
          */
-        "variant"?: 'success' | 'warning' | 'inactive' | 'error';
+        "truncateDesc"?: boolean;
     }
     interface XplBreadcrumbItem {
     }
@@ -2234,52 +2644,74 @@ declare namespace LocalJSX {
     }
     interface XplButton {
         /**
-          * whether button should be disabled
+          * 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 {
         /**
@@ -2432,9 +2864,9 @@ declare namespace LocalJSX {
          */
         "detail"?: string;
         /**
-          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the header. Uses <xpl-icon /> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * Whether to display the icon or not.
           * @default true
@@ -2457,11 +2889,11 @@ declare namespace LocalJSX {
          */
         "smallStat"?: string;
         /**
-          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.
+          * An optional icon leading the small stat. Uses <xpl-icon> components and should reinforce the understanding of the smallStat metric shown.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "smallStatIcon"?: IconName;
+        "smallStatIcon"?: string;
         /**
-          * set a variant that changes the color of the small stat based on the following rules:    If trend is positive and greater than 0.5% color is green and up-right arrow is used    If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
+          * set a variant that changes the color of the small stat based on the following rules:   If trend is positive and greater than 0.5% color is green and up-right arrow is used   If the trend is between -0.5% and 0.5% then its neutral the color is gray   If the trend is negative less than -0.5% the color is red and down right arrow is used
          */
         "smallStatVariant"?: 'positive' | 'negative' | 'neutral';
         /**
@@ -2534,7 +2966,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 {
         /**
@@ -2553,6 +2985,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
          */
@@ -2655,9 +3091,10 @@ declare namespace LocalJSX {
          */
         "backgroundColor"?: string;
         /**
-          * Name of icon
+          * Name of icon.
+          * @property {string}  See [available icons](./ICONS.md) for the complete list, or view the [Storybook icon gallery](?path=/story/components-icons--icons).
          */
-        "icon"?: IconName1;
+        "icon": string;
         /**
           * Size of icon
          */
@@ -2687,6 +3124,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.
          */
@@ -2718,6 +3160,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.
          */
@@ -2781,6 +3228,10 @@ declare namespace LocalJSX {
           * A string (recommended max 8 characters) that gets shown visually to the right of (after) the input.  Applies to text, password, number, and date inputs. Note: This will be ignored if `multiline` is `true`.
          */
         "pre"?: string;
+        /**
+          * 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, and date inputs.
          */
@@ -2802,7 +3253,7 @@ 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';
         /**
           * Including a `value` will pre-populate the input with the given string.  Applies to text, password, number, and date inputs.
          */
@@ -2956,6 +3407,58 @@ declare namespace LocalJSX {
         value: File[] | null;
     }>) => 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;
+        /**
+          * Event that is emitted when the hasErrorState state changes.
+         */
+        "onHasErrorStateChanged"?: (event: XplInputPhoneCustomEvent<string | null>) => void;
+        /**
+          * Event that emits the current value of the input (E.164 format).
+         */
+        "onValueChange"?: (event: XplInputPhoneCustomEvent<string>) => void;
+        /**
+          * 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 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.
@@ -3123,6 +3626,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. Responsive: scales down at tablet and mobile breakpoints.  - `default` – 24 px desktop / 16 px tablet+mobile - `tight`   – 16 px desktop / 8 px tablet+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.
@@ -3160,6 +3679,36 @@ declare namespace LocalJSX {
          */
         "steps"?: string[];
     }
+    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 XplRadio {
         /**
           * Whether the input is "on"
@@ -3259,10 +3808,10 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The icon to display in the select trigger button.
+          * The icon to display in the select trigger button.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
           * @default 'chevron-down'
          */
-        "selectIcon"?: IconName2;
+        "selectIcon"?: string;
         /**
           * The value(s) currently selected in the select component.
          */
@@ -3273,6 +3822,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.
@@ -3421,9 +4024,9 @@ declare namespace LocalJSX {
     }
     interface XplTableHeaderCell {
         /**
-          * @property {IconName} - Icon to display in the cell
+          * Icon to display in the cell.  See [xpl-icon available icons](../xpl-icon/ICONS.md) for valid icon names.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * @property {string} - Text to display in the cell
           * @default ''
@@ -3570,130 +4173,564 @@ 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": 'green' | 'yellow' | 'pink' | 'primary' | 'secondary';
+        "disabled": boolean;
+        "href": string;
+        "name": string;
+        "size": 'md' | 'sm';
+        "src": string;
+        "status": 'active' | 'warning' | 'inactive';
+        "target": string;
+    }
+    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 {
+        "checked": boolean;
+        "description": string;
+        "disabled": boolean;
+        "indeterminate": boolean;
+        "name": string;
+        "value": string;
+        "required": boolean;
+        "styled": boolean;
+        "dataId": 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;
+        "initialExpanded": boolean;
+        "disabled": boolean;
+        "selectedCount": number;
+        "hasCheckbox": boolean;
+    }
+    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;
+        "type": 'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color' | 'phone';
+    }
+    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 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 XplMainNavAttributes {
+        "width": 'default' | 'md' | 'sm';
+    }
+    interface XplModalAttributes {
+        "isOpen": boolean;
+        "size": 'large' | 'medium' | 'small';
+        "variant": 'default' | 'warning';
+    }
+    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 XplProgressAttributes {
+        "currentStep": number;
+    }
+    interface XplProgressBarAttributes {
+        "helperText": string;
+        "label": string;
+        "max": number;
+        "size": 'sm' | 'lg';
+        "value": number;
+        "variant": 'default' | 'success' | 'error' | 'indeterminate';
+    }
+    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 XplTabAttributes {
+        "target": string;
+        "selected": boolean;
+    }
+    interface XplTabPanelAttributes {
+        "target": string;
+        "selected": boolean;
+    }
+    interface XplTableAttributes {
+        "freeze": boolean;
+        "multiselect": boolean;
+        "striped": boolean;
+        "isSortable": boolean;
+    }
+    interface XplTableHeaderCellAttributes {
+        "icon": string;
+        "sortable": boolean;
+        "label": string;
+        "type": 'label' | 'checkbox' | 'icon';
+        "width": number;
+    }
+    interface XplTabsAttributes {
+        "value": string;
+        "fullWidth": boolean;
+    }
+    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 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-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-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": 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-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-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": Omit<XplProgress, keyof XplProgressAttributes> & { [K in keyof XplProgress & keyof XplProgressAttributes]?: XplProgress[K] } & { [K in keyof XplProgress & keyof XplProgressAttributes as `attr:${K}`]?: XplProgressAttributes[K] } & { [K in keyof XplProgress & keyof XplProgressAttributes as `prop:${K}`]?: XplProgress[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-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-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-header": XplTableHeader;
-        "xpl-table-header-cell": XplTableHeaderCell;
-        "xpl-tabs": XplTabs;
+        "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-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": XplTag;
-        "xpl-toast": XplToast;
-        "xpl-toggle": XplToggle;
-        "xpl-toolbar": XplToolbar;
-        "xpl-tooltip": XplTooltip;
-        "xpl-utility-bar": XplUtilityBar;
+        "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-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>;
+            "xpl-dynamic-table": LocalJSX.IntrinsicElements["xpl-dynamic-table"] & JSXBase.HTMLAttributes<HTMLXplDynamicTableElement>;
+            "xpl-dynamic-table-cell": LocalJSX.IntrinsicElements["xpl-dynamic-table-cell"] & JSXBase.HTMLAttributes<HTMLXplDynamicTableCellElement>;
+            "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-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-main-nav": LocalJSX.IntrinsicElements["xpl-main-nav"] & JSXBase.HTMLAttributes<HTMLXplMainNavElement>;
+            "xpl-modal": LocalJSX.IntrinsicElements["xpl-modal"] & JSXBase.HTMLAttributes<HTMLXplModalElement>;
+            "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": LocalJSX.IntrinsicElements["xpl-progress"] & JSXBase.HTMLAttributes<HTMLXplProgressElement>;
+            "xpl-progress-bar": LocalJSX.IntrinsicElements["xpl-progress-bar"] & JSXBase.HTMLAttributes<HTMLXplProgressBarElement>;
+            "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-tab": LocalJSX.IntrinsicElements["xpl-tab"] & JSXBase.HTMLAttributes<HTMLXplTabElement>;
+            "xpl-tab-panel": LocalJSX.IntrinsicElements["xpl-tab-panel"] & JSXBase.HTMLAttributes<HTMLXplTabPanelElement>;
+            "xpl-table": LocalJSX.IntrinsicElements["xpl-table"] & JSXBase.HTMLAttributes<HTMLXplTableElement>;
+            "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-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>;
+            "xpl-utility-bar": LocalJSX.IntrinsicElements["xpl-utility-bar"] & JSXBase.HTMLAttributes<HTMLXplUtilityBarElement>;
         }
     }
 }