@xplortech/apollo-core 2.9.0 → 2.10.0

package/dist/types/components.d.ts

@@ -382,7 +382,7 @@ export namespace Components {
          */
         "styled"?: boolean;
         /**
-          * The value attribute for the checkbox input. (submittted in form as name/value pair)
+          * The value attribute for the checkbox input. (submitted in form as name/value pair)
          */
         "value"?: string;
     }
@@ -969,6 +969,10 @@ export namespace Components {
           * Whether the field is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Whether the field is in an error state. When true, the input renders with the error border styling. The error message itself is owned by the parent `xpl-input` wrapper.
+         */
+        "error"?: boolean;
         /**
           * The `inputId` is used to associate the input with a label.
          */
@@ -1523,48 +1527,100 @@ export namespace Components {
          */
         "truncate"?: boolean;
     }
+    /**
+     * Slot-based sidebar for app navigation: a scrollable main `section` and a fixed
+     * `nav-footer`. Compose with `xpl-side-nav-item` for rows.
+     * **Mobile (v2):** below the Tailwind `md` breakpoint, the sidebar collapses to a
+     * ~56px top bar with a toggle button (`sidebar-left-show` / `sidebar-left-hide`).
+     * Activating the toggle opens a drawer containing the `section` + `nav-footer`
+     * content behind an `xpl-backdrop` scrim. The drawer traps focus while open;
+     * Escape or a backdrop click closes it and returns focus to the toggle. Above
+     * `md` the toggle and backdrop are hidden via CSS and the sidebar renders inline.
+     * The toggle is always rendered (no gating prop) and hidden above the breakpoint
+     * in CSS. Open state is exposed via the `open` prop (controlled or uncontrolled),
+     * the `openChange` event, and the `toggle()` / `setOpen()` methods.
+     * **v2 breaking change (beta):** consumers who wrapped their own mobile toggle
+     * around `xpl-side-nav` should remove it — the toggle and drawer are now built in.
+     */
     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;
+        /**
+          * Whether the mobile drawer is open. Reflected to the `open` attribute so CSS and host state stay in sync. Controlled (consumer owns `open`) or uncontrolled (built-in toggle flips it). Has no visible effect above the `md` breakpoint, where the sidebar always renders inline.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Programmatically set the mobile drawer open state. Emits `openChange` when it changes.
+         */
+        "setOpen": (open: boolean) => Promise<void>;
+        /**
+          * Programmatically toggle the mobile drawer open/closed. Emits `openChange`.
+         */
+        "toggle": () => Promise<void>;
     }
+    /**
+     * Navigation row for `xpl-side-nav`. Renders a button (default) or a slot-only
+     * anchor container (`link` mode). Three slot positions are available:
+     * - `slot="leading"` — leading icon column (renamed from `slot="icon"` in v2).
+     *   The `icon` prop is a convenience shorthand that renders an `xpl-icon` here
+     *   when no slotted `leading` content is present.
+     * - `slot="trailing"` — trailing content (e.g. `xpl-icon icon="external-link"`).
+     *   When `has-children` is true and no `trailing` slot content is provided, an
+     *   auto chevron is rendered automatically in this position: `chevron-down` when
+     *   collapsed, `chevron-up` when expanded.
+     * - default slot — nested `xpl-side-nav-item` children (expandable parents only).
+     * **v2 breaking changes (beta):**
+     * - `slot="icon"` renamed to `slot="leading"` — no alias kept.
+     * - Parent rows (`has-children`) now render the leading icon alongside the chevron.
+     *   Previously parents showed chevron + label only (no leading icon).
+     * - The chevron has moved from the leading position to the trailing position.
+     * - A slotted `slot="trailing"` replaces the auto chevron on parent rows.
+     * **Migration:**
+     * | Before (v1) | After (v2) | Action |
+     * |---|---|---|
+     * | `slot="icon"` | `slot="leading"` | Rename the slot attribute |
+     * | Parent row: chevron only (no leading) | Parent row: leading icon + chevron | Pass `icon` prop or `slot="leading"` |
+     * | (no trailing slot) | `slot="trailing"` | Add for custom trailing content |
+     */
     interface XplSideNavItem {
         /**
-          * Whether the component is disabled
+          * Whether the item is currently disabled.
           * @default false
          */
         "disabled": boolean;
         /**
-          * Whether the item is currently expanded (only applies when hasChildren is true)
+          * Whether the item is currently expanded (only applies when `has-children` 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.
+          * Whether the item has child items; when true, shows expand/collapse and a default slot for nested items. Mutually exclusive with `link`. If `link` is already true, setting `has-children` is reverted.
           * @default false
          */
         "hasChildren": boolean;
         /**
-          * Whether the component is hidden
+          * 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.
+          * Optional icon name; renders as the default content for `slot="leading"`. When `slot="leading"` content is present, this prop is ignored. In v2, this prop applies to all item types including parent rows (`has-children`).
          */
         "icon"?: string;
         /**
-          * The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode).
+          * The display label for the navigation item (button / expandable rows; omit in `link` 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>).
+          * 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, `label` and `icon` props should not be used. Link mode does not support `has-children`; use the default button mode for expandable items. When `link` is true, `hasChildren` is always false.
           * @default false
          */
         "link": boolean;
         /**
-          * Whether the item is currently in a selected state
+          * Whether the item is currently in a selected state.
           * @default false
          */
         "selected": boolean;
@@ -2160,6 +2216,10 @@ export interface XplSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplSelectElement;
 }
+export interface XplSideNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplSideNavElement;
+}
 export interface XplSideNavItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplSideNavItemElement;
@@ -2819,7 +2879,33 @@ declare global {
         prototype: HTMLXplSelectElement;
         new (): HTMLXplSelectElement;
     };
+    interface HTMLXplSideNavElementEventMap {
+        "openChange": boolean;
+    }
+    /**
+     * Slot-based sidebar for app navigation: a scrollable main `section` and a fixed
+     * `nav-footer`. Compose with `xpl-side-nav-item` for rows.
+     * **Mobile (v2):** below the Tailwind `md` breakpoint, the sidebar collapses to a
+     * ~56px top bar with a toggle button (`sidebar-left-show` / `sidebar-left-hide`).
+     * Activating the toggle opens a drawer containing the `section` + `nav-footer`
+     * content behind an `xpl-backdrop` scrim. The drawer traps focus while open;
+     * Escape or a backdrop click closes it and returns focus to the toggle. Above
+     * `md` the toggle and backdrop are hidden via CSS and the sidebar renders inline.
+     * The toggle is always rendered (no gating prop) and hidden above the breakpoint
+     * in CSS. Open state is exposed via the `open` prop (controlled or uncontrolled),
+     * the `openChange` event, and the `toggle()` / `setOpen()` methods.
+     * **v2 breaking change (beta):** consumers who wrapped their own mobile toggle
+     * around `xpl-side-nav` should remove it — the toggle and drawer are now built in.
+     */
     interface HTMLXplSideNavElement extends Components.XplSideNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplSideNavElementEventMap>(type: K, listener: (this: HTMLXplSideNavElement, ev: XplSideNavCustomEvent<HTMLXplSideNavElementEventMap[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 HTMLXplSideNavElementEventMap>(type: K, listener: (this: HTMLXplSideNavElement, ev: XplSideNavCustomEvent<HTMLXplSideNavElementEventMap[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 HTMLXplSideNavElement: {
         prototype: HTMLXplSideNavElement;
@@ -2829,6 +2915,30 @@ declare global {
         "expandedChange": boolean;
         "navClick": void;
     }
+    /**
+     * Navigation row for `xpl-side-nav`. Renders a button (default) or a slot-only
+     * anchor container (`link` mode). Three slot positions are available:
+     * - `slot="leading"` — leading icon column (renamed from `slot="icon"` in v2).
+     *   The `icon` prop is a convenience shorthand that renders an `xpl-icon` here
+     *   when no slotted `leading` content is present.
+     * - `slot="trailing"` — trailing content (e.g. `xpl-icon icon="external-link"`).
+     *   When `has-children` is true and no `trailing` slot content is provided, an
+     *   auto chevron is rendered automatically in this position: `chevron-down` when
+     *   collapsed, `chevron-up` when expanded.
+     * - default slot — nested `xpl-side-nav-item` children (expandable parents only).
+     * **v2 breaking changes (beta):**
+     * - `slot="icon"` renamed to `slot="leading"` — no alias kept.
+     * - Parent rows (`has-children`) now render the leading icon alongside the chevron.
+     *   Previously parents showed chevron + label only (no leading icon).
+     * - The chevron has moved from the leading position to the trailing position.
+     * - A slotted `slot="trailing"` replaces the auto chevron on parent rows.
+     * **Migration:**
+     * | Before (v1) | After (v2) | Action |
+     * |---|---|---|
+     * | `slot="icon"` | `slot="leading"` | Rename the slot attribute |
+     * | Parent row: chevron only (no leading) | Parent row: leading icon + chevron | Pass `icon` prop or `slot="leading"` |
+     * | (no trailing slot) | `slot="trailing"` | Add for custom trailing content |
+     */
     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;
@@ -3570,7 +3680,7 @@ declare namespace LocalJSX {
          */
         "styled"?: boolean;
         /**
-          * The value attribute for the checkbox input. (submittted in form as name/value pair)
+          * The value attribute for the checkbox input. (submitted in form as name/value pair)
          */
         "value"?: string;
     }
@@ -4207,6 +4317,10 @@ declare namespace LocalJSX {
           * Whether the field is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Whether the field is in an error state. When true, the input renders with the error border styling. The error message itself is owned by the parent `xpl-input` wrapper.
+         */
+        "error"?: boolean;
         /**
           * The `inputId` is used to associate the input with a label.
          */
@@ -4856,56 +4970,104 @@ declare namespace LocalJSX {
          */
         "truncate"?: boolean;
     }
+    /**
+     * Slot-based sidebar for app navigation: a scrollable main `section` and a fixed
+     * `nav-footer`. Compose with `xpl-side-nav-item` for rows.
+     * **Mobile (v2):** below the Tailwind `md` breakpoint, the sidebar collapses to a
+     * ~56px top bar with a toggle button (`sidebar-left-show` / `sidebar-left-hide`).
+     * Activating the toggle opens a drawer containing the `section` + `nav-footer`
+     * content behind an `xpl-backdrop` scrim. The drawer traps focus while open;
+     * Escape or a backdrop click closes it and returns focus to the toggle. Above
+     * `md` the toggle and backdrop are hidden via CSS and the sidebar renders inline.
+     * The toggle is always rendered (no gating prop) and hidden above the breakpoint
+     * in CSS. Open state is exposed via the `open` prop (controlled or uncontrolled),
+     * the `openChange` event, and the `toggle()` / `setOpen()` methods.
+     * **v2 breaking change (beta):** consumers who wrapped their own mobile toggle
+     * around `xpl-side-nav` should remove it — the toggle and drawer are now built in.
+     */
     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;
+        /**
+          * Emitted when the mobile drawer open state changes: toggle activation, Escape, or a backdrop click. Detail is the new open state (`true` = open, `false` = closed).
+         */
+        "onOpenChange"?: (event: XplSideNavCustomEvent<boolean>) => void;
+        /**
+          * Whether the mobile drawer is open. Reflected to the `open` attribute so CSS and host state stay in sync. Controlled (consumer owns `open`) or uncontrolled (built-in toggle flips it). Has no visible effect above the `md` breakpoint, where the sidebar always renders inline.
+          * @default false
+         */
+        "open"?: boolean;
     }
+    /**
+     * Navigation row for `xpl-side-nav`. Renders a button (default) or a slot-only
+     * anchor container (`link` mode). Three slot positions are available:
+     * - `slot="leading"` — leading icon column (renamed from `slot="icon"` in v2).
+     *   The `icon` prop is a convenience shorthand that renders an `xpl-icon` here
+     *   when no slotted `leading` content is present.
+     * - `slot="trailing"` — trailing content (e.g. `xpl-icon icon="external-link"`).
+     *   When `has-children` is true and no `trailing` slot content is provided, an
+     *   auto chevron is rendered automatically in this position: `chevron-down` when
+     *   collapsed, `chevron-up` when expanded.
+     * - default slot — nested `xpl-side-nav-item` children (expandable parents only).
+     * **v2 breaking changes (beta):**
+     * - `slot="icon"` renamed to `slot="leading"` — no alias kept.
+     * - Parent rows (`has-children`) now render the leading icon alongside the chevron.
+     *   Previously parents showed chevron + label only (no leading icon).
+     * - The chevron has moved from the leading position to the trailing position.
+     * - A slotted `slot="trailing"` replaces the auto chevron on parent rows.
+     * **Migration:**
+     * | Before (v1) | After (v2) | Action |
+     * |---|---|---|
+     * | `slot="icon"` | `slot="leading"` | Rename the slot attribute |
+     * | Parent row: chevron only (no leading) | Parent row: leading icon + chevron | Pass `icon` prop or `slot="leading"` |
+     * | (no trailing slot) | `slot="trailing"` | Add for custom trailing content |
+     */
     interface XplSideNavItem {
         /**
-          * Whether the component is disabled
+          * Whether the item is currently disabled.
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Whether the item is currently expanded (only applies when hasChildren is true)
+          * Whether the item is currently expanded (only applies when `has-children` 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.
+          * Whether the item has child items; when true, shows expand/collapse and a default slot for nested items. Mutually exclusive with `link`. If `link` is already true, setting `has-children` is reverted.
           * @default false
          */
         "hasChildren"?: boolean;
         /**
-          * Whether the component is hidden
+          * 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.
+          * Optional icon name; renders as the default content for `slot="leading"`. When `slot="leading"` content is present, this prop is ignored. In v2, this prop applies to all item types including parent rows (`has-children`).
          */
         "icon"?: string;
         /**
-          * The display label for the navigation item (button / expandable rows; omit in <code>link</code> mode).
+          * The display label for the navigation item (button / expandable rows; omit in `link` 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>).
+          * 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, `label` and `icon` props should not be used. Link mode does not support `has-children`; use the default button mode for expandable items. When `link` is true, `hasChildren` is always false.
           * @default false
          */
         "link"?: boolean;
         /**
-          * Emitted when the expanded state changes (hasChildren items only). Detail is the new expanded value.
+          * Emitted when the expanded state changes (`has-children` 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.
+          * 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
+          * Whether the item is currently in a selected state.
           * @default false
          */
         "selected"?: boolean;
@@ -5714,6 +5876,7 @@ declare namespace LocalJSX {
     interface XplInputPhoneAttributes {
         "defaultCountry": string;
         "disabled": boolean;
+        "error": boolean;
         "inputId": string;
         "isInternational": boolean;
         "name": string;
@@ -5850,6 +6013,7 @@ declare namespace LocalJSX {
     }
     interface XplSideNavAttributes {
         "label": string;
+        "open": boolean;
     }
     interface XplSideNavItemAttributes {
         "disabled": boolean;
@@ -6140,7 +6304,46 @@ declare module "@stencil/core" {
             "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>;
+            /**
+             * Slot-based sidebar for app navigation: a scrollable main `section` and a fixed
+             * `nav-footer`. Compose with `xpl-side-nav-item` for rows.
+             * **Mobile (v2):** below the Tailwind `md` breakpoint, the sidebar collapses to a
+             * ~56px top bar with a toggle button (`sidebar-left-show` / `sidebar-left-hide`).
+             * Activating the toggle opens a drawer containing the `section` + `nav-footer`
+             * content behind an `xpl-backdrop` scrim. The drawer traps focus while open;
+             * Escape or a backdrop click closes it and returns focus to the toggle. Above
+             * `md` the toggle and backdrop are hidden via CSS and the sidebar renders inline.
+             * The toggle is always rendered (no gating prop) and hidden above the breakpoint
+             * in CSS. Open state is exposed via the `open` prop (controlled or uncontrolled),
+             * the `openChange` event, and the `toggle()` / `setOpen()` methods.
+             * **v2 breaking change (beta):** consumers who wrapped their own mobile toggle
+             * around `xpl-side-nav` should remove it — the toggle and drawer are now built in.
+             */
             "xpl-side-nav": LocalJSX.IntrinsicElements["xpl-side-nav"] & JSXBase.HTMLAttributes<HTMLXplSideNavElement>;
+            /**
+             * Navigation row for `xpl-side-nav`. Renders a button (default) or a slot-only
+             * anchor container (`link` mode). Three slot positions are available:
+             * - `slot="leading"` — leading icon column (renamed from `slot="icon"` in v2).
+             *   The `icon` prop is a convenience shorthand that renders an `xpl-icon` here
+             *   when no slotted `leading` content is present.
+             * - `slot="trailing"` — trailing content (e.g. `xpl-icon icon="external-link"`).
+             *   When `has-children` is true and no `trailing` slot content is provided, an
+             *   auto chevron is rendered automatically in this position: `chevron-down` when
+             *   collapsed, `chevron-up` when expanded.
+             * - default slot — nested `xpl-side-nav-item` children (expandable parents only).
+             * **v2 breaking changes (beta):**
+             * - `slot="icon"` renamed to `slot="leading"` — no alias kept.
+             * - Parent rows (`has-children`) now render the leading icon alongside the chevron.
+             *   Previously parents showed chevron + label only (no leading icon).
+             * - The chevron has moved from the leading position to the trailing position.
+             * - A slotted `slot="trailing"` replaces the auto chevron on parent rows.
+             * **Migration:**
+             * | Before (v1) | After (v2) | Action |
+             * |---|---|---|
+             * | `slot="icon"` | `slot="leading"` | Rename the slot attribute |
+             * | Parent row: chevron only (no leading) | Parent row: leading icon + chevron | Pass `icon` prop or `slot="leading"` |
+             * | (no trailing slot) | `slot="trailing"` | Add for custom trailing content |
+             */
             "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>;

package/dist/types/stencil-public-runtime.d.ts

@@ -1070,6 +1070,7 @@ export declare namespace JSXBase {
         importance?: 'low' | 'auto' | 'high';
         height?: number | string;
         loading?: 'lazy' | 'auto' | 'eager';
+        referrerPolicy?: ReferrerPolicy;
         sizes?: string;
         src?: string;
         srcSet?: string;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@xplortech/apollo-core",
-  "version": "2.9.0",
-  "main": "dist/index.cjs.js",
+  "version": "2.10.0",
+  "type": "module",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
@@ -10,13 +11,13 @@
     ".": {
       "types": "./dist/types/components.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs.js",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./loader": {
       "types": "./loader/index.d.ts",
       "import": "./loader/index.js",
-      "require": "./loader/index.cjs.js"
+      "require": "./loader/index.cjs"
     },
     "./components": {
       "types": "./dist/components/index.d.ts",
@@ -27,7 +28,10 @@
       "import": "./dist/components/*.js"
     },
     "./css/*": "./build/*.css",
-    "./dist/*": "./dist/*",
+    "./dist/*": {
+      "import": "./dist/*",
+      "types": "./dist/*"
+    },
     "./loader/*": "./loader/*"
   },
   "repository": {
@@ -58,7 +62,7 @@
     "*.css",
     "./loader/*",
     "./dist/index.js",
-    "./dist/index.cjs.js",
+    "./dist/index.cjs",
     "./dist/esm/loader.js",
     "./dist/cjs/loader.cjs.js"
   ],
@@ -70,24 +74,27 @@
     "build-partial:css.storybook": "cp -r build/ .storybook/build",
     "build-partial:css.vue": "cp build/style.css ../apollo-vue/css/apollo.css",
     "build:stencil": "node ../../scripts/generate-icon-docs.mjs && stencil build --docs --prod && cp -r dist .storybook && cp -r loader .storybook && node .storybook/patch-stencil-sourcemaps.mjs",
-    "postbuild": "node ../../scripts/copy-readmes-to-dist.mjs",
+    "postbuild": "node ../../scripts/copy-readmes-to-dist.mjs && node ../../scripts/finalize-apollo-core-cjs.mjs",
     "clean": "rm -rf dist/ loader/ storybook-static/ www/ build/ src/components/components.d.ts",
     "dev": "run-p dev:*",
     "dev:css": "postcss src/style.css -o build/style.css -w",
     "dev:stencil": "stencil build --dev --watch --serve",
-    "lint": "npm-run-all lint:*",
     "lint:css": "stylelint 'src/**/*.css'",
+    "lint:css:ci": "stylelint 'src/**/*.css' -q",
     "test:stylelint": "node --test stylelint/patterns.test.mjs",
     "stylelint:check-legacy": "node stylelint/check-legacy-files.mjs",
+    "lint": "npm-run-all lint:ts lint:css:ci lint:html lint:js lint:prettier-css test:stylelint",
     "lint:ts": "eslint src/components/**/*{.ts,.tsx} --no-warn-ignored",
     "lint:html": "prettier --check src/**/*.html",
     "lint:js": "prettier --check *{.js,.json}",
     "lint:prettier-css": "prettier --check \"src/**/*.css\"",
-    "format": "npm run lint:css -- --fix && npm run lint:ts -- --fix && prettier --write *{.js,.json} && prettier --write src/**/*.html && prettier --write \"src/**/*.css\"",
+    "format": "npm run lint:css:ci -- --fix && npm run lint:ts -- --fix && prettier --write *{.js,.json} && prettier --write src/**/*.html && prettier --write \"src/**/*.css\"",
     "generate:icons": "node ../../scripts/generate-icon-docs.mjs",
-    "test": "stencil test --spec",
-    "test.watch": "stencil test --spec --watch",
-    "test.e2e": "stencil test --e2e --runInBand",
+    "test": "vitest run --project spec --project spec-dom",
+    "test.watch": "vitest --project spec --project spec-dom",
+    "test.e2e": "vitest run --project browser",
+    "test.storybook": "vitest run --project storybook",
+    "test.storybook:update": "vitest run --project storybook --update",
     "storybook": "npm run storybook:start",
     "storybook:start": "storybook dev -p 9009",
     "stencil-generate": "stencil generate"
@@ -104,9 +111,10 @@
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^4.1.3",
     "@mdx-js/react": "^3.1.1",
-    "@stencil/core": "^4.31.0",
-    "@stencil/react-output-target": "0.5.3",
-    "@stencil/vue-output-target": "^0.13.1",
+    "@stencil/core": "^4.43.5",
+    "@stencil/react-output-target": "1.6.0",
+    "@stencil/vitest": "^1.13.3",
+    "@stencil/vue-output-target": "^0.14.0",
     "@storybook/addon-a11y": "^10.1.3",
     "@storybook/addon-designs": "^11.1.1",
     "@storybook/addon-docs": "^10.1.3",
@@ -115,7 +123,6 @@
     "@storybook/addon-vitest": "^10.1.3",
     "@storybook/builder-vite": "^10.1.3",
     "@storybook/web-components-vite": "^10.1.3",
-    "@types/jest": "^26.0.21",
     "@vitest/browser-playwright": "^4.0.13",
     "@vitest/coverage-v8": "^4.0.13",
     "@vueless/storybook-dark-mode": "^10.0.3",
@@ -123,12 +130,11 @@
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "eslint-plugin-react": "^7.37.5",
+    "happy-dom": "^20.10.6",
     "highlight.js": "^11.10.0",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
     "lit": "^3.3.2",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.56.1",
+    "playwright": "1.59.1",
     "postcss": "^8.4.23",
     "postcss-cli": "^8.3.1",
     "postcss-extend-rule": "^4.0.0",
@@ -140,9 +146,10 @@
     "storybook-addon-tag-badges": "^3.0.2",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.5.3",
-    "uuid": "^8.3.2",
-    "vite": "^7.1.9",
-    "vitest": "^4.0.13"
+    "uuid": "^14.0.1",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.9",
+    "vitest-plugin-vis": "5.1.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
@@ -165,7 +172,8 @@
     ],
     "implicitDependencies": [
       "@xplortech/apollo-icons",
-      "@xplortech/apollo-foundation"
+      "@xplortech/apollo-foundation",
+      "@xplortech/apollo-data"
     ],
     "targets": {
       "build": {
@@ -179,7 +187,8 @@
           "{projectRoot}/.storybook/dist",
           "{projectRoot}/.storybook/loader",
           "{projectRoot}/src/components/components.d.ts",
-          "{workspaceRoot}/packages/apollo-react/src/components.ts",
+          "{projectRoot}/src/components/components/**/readme.md",
+          "{workspaceRoot}/packages/apollo-react/src/components/stencil-generated",
           "{workspaceRoot}/packages/apollo-react/css/apollo.css",
           "{workspaceRoot}/packages/apollo-vue/src/components.ts",
           "{workspaceRoot}/packages/apollo-vue/css/apollo.css"

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

@@ -1 +0,0 @@
-import{r as a,h as e,H as l}from"./p-C7bgJs6C.js";const i=class{constructor(e){a(this,e),this.withSubnav=!1,this.withUtility=!0,this.navWidth="default",this.navOpen=!0}closeNavOnMobile(){window.innerWidth<=640&&(this.navOpen=!1)}navToggleHandler(){this.navOpen=!this.navOpen}navWithHandler(a){this.navWidth=a.detail}onWindowResize(){this.closeNavOnMobile()}connectedCallback(){this.closeNavOnMobile()}componentWillLoad(){this.navOpen=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.navOpen}render(){let a="xpl-application-shell";this.withUtility&&(a+=" xpl-application-shell--with_utility");let i="xpl-application-shell__nav";return i+=this.navOpen?` xpl-application-shell__nav--${this.navWidth}--open`:` xpl-application-shell__nav--${this.navWidth}`,e(l,{key:"f61e8399f5a5e935354c817ee0d1386afcddce28",class:a},e("div",{key:"4886a782d1511d3aac9df0a90afc38351b94d4fd",class:i},e("slot",{key:"d80279f234d498eb51491bd1d6850d7babfd6ece",name:"nav"})),e("div",{key:"dd26f273261026555a3f73885fd04ffdbbf871cb",class:"xpl-application-shell__subnav"},e("slot",{key:"3b120224a8d1cb30503514befeb96e3a08fc22ba",name:"subnav"})),e("div",{key:"7ac6b8f10b2dca85e774e1117f9117952a3052cf",class:"xpl-application-shell__utility"},e("slot",{key:"d9d4b15e7c3e7bec0edc237df3634c8fd2648df4",name:"utility"})),e("div",{key:"00ee0b5da796ea84731e740a58b162dad8250696",class:"xpl-application-shell__content"},e("slot",{key:"bf997f59491a08597089a0531cfecf90c703f565",name:"content"})),e("xpl-backdrop",{key:"84264e5a5da96be74547610e5b8d45195014d34c",onClick:()=>this.navToggleHandler(),class:{"xpl-application-shell__backdrop--open":this.navOpen},relative:!0}))}};export{i as xpl_application_shell}

package/dist/apollo-core/p-1947e7a8.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as e}from"./p-C7bgJs6C.js";const i=class{constructor(t){s(this,t),this.xs=6,this.sm=6,this.md=6,this.lg=6}render(){let s="xpl-grid-item";return s+=` xpl-grid-item-xs-${this.xs}`,s+=` xpl-grid-item-sm-${this.sm}`,s+=` xpl-grid-item-md-${this.md}`,s+=` xpl-grid-item-lg-${this.lg}`,t(e,{key:"43cf6dd21d3d06e2d8012b716e5db5aeee676aac",class:s},t("slot",{key:"e08e03e4152007df7158d7122f883da1050dfde7"}))}};export{i as xpl_grid_item}

package/dist/apollo-core/p-27928cb0.entry.js

@@ -1 +0,0 @@
-import{r as a,h as e,H as c,g as d}from"./p-C7bgJs6C.js";const s=class{constructor(e){a(this,e)}componentDidLoad(){if(this.link){const a=this.el.getElementsByTagName("a")[0]||this.el.getElementsByTagName("button")[0],e=document.createTextNode(this.name),c=document.createElement("span");c.appendChild(e),a.setAttribute("class","xpl-large-card__anchor"),a.appendChild(c)}}render(){const a="graph-content",d=this.el.querySelector(`[slot="${a}"]`);return e(c,{key:"9b45179112de8d1ac309520425a1a5c340493487",role:"group",class:"xpl-large-card "+(this.link?"xpl-large-card__link":""),tabindex:"0"},e("dt",{key:"4838c93a72df9ea794b3bbbd7f78f3e84a606109",class:"xpl-large-card__header"},e("header",{key:"eb4b2e8515be1e0763595e1cf646dc2b25bfb739"},e("slot",{key:"62fdafe4b8ce03af5ff353c3ffa377fa547b572b",name:"title"},this.name),this.link&&e("span",{key:"ac0086a3402af5f12668a560ad418aaf40a56357",class:"xpl-data-card__header-arrow"},e("xpl-icon",{key:"74eaffc571098a88d69d7248166889671ba441a2",icon:"chevron-right",size:16}))),this.description&&e("div",{key:"d7d2499b7d8da9c09062ea5a456b588e52df2d82",class:"xpl-large-card__description"},this.description)),e("dd",{key:"652e32e8b200e783f03608f97cbbcc70f59421e3",class:"xpl-large-card__body"},d&&e("slot",{key:"9d9f285d34bd8e2b6666577bd2023ae474636c4c",name:a})))}get el(){return d(this)}};export{s as xpl_large_card}

package/dist/apollo-core/p-34438721.entry.js

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

package/dist/apollo-core/p-35c2f72d.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as r,g as e}from"./p-C7bgJs6C.js";const i=class{constructor(t){s(this,t)}componentDidLoad(){const s=Array.from(this.container.querySelectorAll(".xpl-grid-item"));let t=0,r=0,e=0,i=0;s.forEach((s=>{t+=+s.getAttribute("lg")||6,r+=+s.getAttribute("md")||6,e+=+s.getAttribute("sm")||6,i+=+s.getAttribute("xs")||6,t%6==0&&s.classList.add("xpl-grid-item-lg-last"),r%6==0&&s.classList.add("xpl-grid-item-md-last"),e%6==0&&s.classList.add("xpl-grid-item-sm-last"),i%6==0&&s.classList.add("xpl-grid-item-xs-last")}))}render(){return t(r,{key:"aeee950fb242a14f50ceda1d199cf427597b70f6",class:"xpl-grid"})}get container(){return e(this)}};export{i as xpl_grid}

package/dist/apollo-core/p-368c81f1.entry.js

@@ -1 +0,0 @@
-import{r as a,h as e,H as t,g as s}from"./p-C7bgJs6C.js";const c=class{constructor(e){a(this,e),this.selectedItemCount=0}componentDidLoad(){const a=this.el.querySelector('[slot="actions-right"]');null!==a&&(a.style.marginLeft="auto")}listenToSelectedItemCountChange(a){this.selectedItemCount=a.detail.length}render(){return e(t,{key:"156bc52063283c17215e1d3a90c25939ae92685b",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},e("div",{key:"184e28d57a16d8ba6e10f29a95c931a036f44515",class:"toolbar"},e("p",{key:"ff6a7137db216c71859eac4398bbaf8bc6fe18f9",class:"selected-item-count"},this.selectedItemCount," Selected"),e("div",{key:"a610539a08383a3d1d3dad8d95a8b75f43eaf1a3",class:"actions"},e("slot",{key:"dd8ea3150b40926ab40f36d38770daaa969a6fff",name:"actions-left"}),e("slot",{key:"b51f8940fb52dd6880841a917574f782e0d0c72c",name:"actions-right"}))))}get el(){return s(this)}};export{c as xpl_toolbar}