@aotearoan/neon 28.4.1 → 28.5.0

package/dist/src/components/layout/list-layout/NeonListLayout.d.ts

@@ -51,6 +51,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>;
         required: true;
     };
+    /**
+     * Loading state for the initial load.
+     */
+    initializing: {
+        type: BooleanConstructor;
+    };
     /**
      * Loading state for pagination, set when loading a new page.
      */
@@ -85,12 +91,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     emit: (event: "page-change" | "show-more" | "toggle-selected", ...args: any[]) => void;
-    initializing: import("vue").Ref<boolean, boolean>;
     slots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
     showMore: () => void;
     toggleSelected: (id: string, selected: boolean) => void;
+    onPageChange: (newPage: number) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("page-change" | "show-more" | "toggle-selected")[], "page-change" | "show-more" | "toggle-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The title of the header.
@@ -133,6 +139,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: () => Array<NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>>;
         required: true;
     };
+    /**
+     * Loading state for the initial load.
+     */
+    initializing: {
+        type: BooleanConstructor;
+    };
     /**
      * Loading state for pagination, set when loading a new page.
      */
@@ -176,6 +188,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     backButton: boolean;
     backLabel: string;
     selectable: boolean;
+    initializing: boolean;
 }, {}, {
     NeonSplashLoader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         color: {
@@ -222,10 +235,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             name: {
                 type: StringConstructor;
-                required: true;
-            }; /**
-             * Breadcrumbs to display above the header.
-             */
+                required: true; /**
+                 * Breadcrumbs to display above the header.
+                 */
+            };
             id: {
                 type: StringConstructor;
                 default: null;
@@ -250,10 +263,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             name: {
                 type: StringConstructor;
-                required: true;
-            }; /**
-             * Breadcrumbs to display above the header.
-             */
+                required: true; /**
+                 * Breadcrumbs to display above the header.
+                 */
+            };
             id: {
                 type: StringConstructor;
                 default: null;
@@ -287,13 +300,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         imageColor: {
             type: () => NeonFunctionalColor;
+            /**
+             * Breadcrumbs to display above the header.
+             */
             default: () => NeonFunctionalColor;
         };
         title: {
             type: StringConstructor;
-            required: true;
-        };
-        /**
+            required: true; /**
+             * Whether to display a back button
+             */
+        }; /**
          * Whether to display a back button
          */
         subtitle: {
@@ -317,13 +334,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         imageColor: {
             type: () => NeonFunctionalColor;
+            /**
+             * Breadcrumbs to display above the header.
+             */
             default: () => NeonFunctionalColor;
         };
         title: {
             type: StringConstructor;
-            required: true;
-        };
-        /**
+            required: true; /**
+             * Whether to display a back button
+             */
+        }; /**
          * Whether to display a back button
          */
         subtitle: {
@@ -351,12 +372,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             size: {
                 type: () => import("../../../neon").NeonButtonSize;
-                default: import("../../../neon").NeonButtonSize; /**
-                 * The subtitle of the header.
-                 */
-            }; /**
-             * The subtitle of the header.
-             */
+                default: import("../../../neon").NeonButtonSize;
+            };
             color: {
                 type: () => NeonFunctionalColor;
                 default: NeonFunctionalColor;
@@ -399,7 +416,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             transparent: {
                 type: BooleanConstructor;
                 default: boolean;
-            };
+            }; /**
+             * Emitted when in selectable mode and the selected state of a card is toggled.
+             * @type {string, boolean} - the id of the card which is toggled & the new selected state.
+             */
             outline: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -454,12 +474,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             size: {
                 type: () => import("../../../neon").NeonButtonSize;
-                default: import("../../../neon").NeonButtonSize; /**
-                 * The subtitle of the header.
-                 */
-            }; /**
-             * The subtitle of the header.
-             */
+                default: import("../../../neon").NeonButtonSize;
+            };
             color: {
                 type: () => NeonFunctionalColor;
                 default: NeonFunctionalColor;
@@ -502,7 +518,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             transparent: {
                 type: BooleanConstructor;
                 default: boolean;
-            };
+            }; /**
+             * Emitted when in selectable mode and the selected state of a card is toggled.
+             * @type {string, boolean} - the id of the card which is toggled & the new selected state.
+             */
             outline: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -588,10 +607,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -616,10 +635,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -661,14 +680,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
             }>, {
                 neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
-                routerUrl: import("vue").ComputedRef<string | undefined>;
+                routerUrl: import("vue").ComputedRef<string | undefined>; /**
+                 * Make cards selectable.
+                 */
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
                 }>;
                 activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                 exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                 onClick: () => void;
-                onSpace: () => Promise<void>;
+                onSpace: () => Promise<void>; /**
+                 * Model for configuring the on demand loading layout.
+                 */
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 href: {
                     type: StringConstructor;
@@ -697,10 +720,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -725,10 +748,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -756,10 +779,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             name: {
                 type: StringConstructor;
-                required: true;
-            }; /**
-             * Breadcrumbs to display above the header.
-             */
+                required: true; /**
+                 * Breadcrumbs to display above the header.
+                 */
+            };
             id: {
                 type: StringConstructor;
                 default: null;
@@ -784,10 +807,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             name: {
                 type: StringConstructor;
-                required: true;
-            }; /**
-             * Breadcrumbs to display above the header.
-             */
+                required: true; /**
+                 * Breadcrumbs to display above the header.
+                 */
+            };
             id: {
                 type: StringConstructor;
                 default: null;
@@ -850,27 +873,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         color: {
             type: () => NeonFunctionalColor;
-            default: null; /**
-             * Make cards selectable.
-             */
-        }; /**
-         * Make cards selectable.
-         */
+            default: null;
+        };
         selectable: {
             type: BooleanConstructor;
-            default: boolean; /**
-             * Model for configuring the on demand loading layout.
-             */
-        }; /**
-         * Model for configuring the on demand loading layout.
-         */
+            default: boolean;
+        };
         loadOnDemand: {
-            type: () => NeonLoadOnDemandModel; /**
-             * Model for configuring pagination, either pagination or loadOnDemand should be provided.
-             */
-        }; /**
-         * Model for configuring pagination, either pagination or loadOnDemand should be provided.
-         */
+            type: () => NeonLoadOnDemandModel;
+        };
         pagination: {
             type: () => NeonPaginationModel;
         };
@@ -890,6 +901,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;
         }>;
+        cards: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+        onPageChange: (newPage: number) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("page-change" | "show-more" | "toggle-selected")[], "page-change" | "show-more" | "toggle-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         items: {
             type: () => NeonCardListModel<NeonIdentifiable | (NeonIdentifiable & NeonSelectable)>[];
@@ -897,27 +910,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         color: {
             type: () => NeonFunctionalColor;
-            default: null; /**
-             * Make cards selectable.
-             */
-        }; /**
-         * Make cards selectable.
-         */
+            default: null;
+        };
         selectable: {
             type: BooleanConstructor;
-            default: boolean; /**
-             * Model for configuring the on demand loading layout.
-             */
-        }; /**
-         * Model for configuring the on demand loading layout.
-         */
+            default: boolean;
+        };
         loadOnDemand: {
-            type: () => NeonLoadOnDemandModel; /**
-             * Model for configuring pagination, either pagination or loadOnDemand should be provided.
-             */
-        }; /**
-         * Model for configuring pagination, either pagination or loadOnDemand should be provided.
-         */
+            type: () => NeonLoadOnDemandModel;
+        };
         pagination: {
             type: () => NeonPaginationModel;
         };
@@ -936,6 +937,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         NeonSelectableCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             modelValue: {
                 type: BooleanConstructor;
+                /**
+                 * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty
+                 * state. Use this component directly inside the NeonPage <em>contents</em> slot.
+                 */
                 required: true;
             };
             color: {
@@ -953,6 +958,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 type: BooleanConstructor;
+                /**
+                 * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty
+                 * state. Use this component directly inside the NeonPage <em>contents</em> slot.
+                 */
                 required: true;
             };
             color: {
@@ -1055,8 +1064,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 disabled: {
                     type: BooleanConstructor;
-                    default: boolean;
-                };
+                    default: boolean; /**
+                     * Items to display as cards. Each item should be a NeonCardListModel.
+                     */
+                }; /**
+                 * Items to display as cards. Each item should be a NeonCardListModel.
+                 */
             }>, {
                 checkbox: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
                 sanitizedAttributes: import("vue").ComputedRef<{
@@ -1094,8 +1107,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 disabled: {
                     type: BooleanConstructor;
-                    default: boolean;
-                };
+                    default: boolean; /**
+                     * Items to display as cards. Each item should be a NeonCardListModel.
+                     */
+                }; /**
+                 * Items to display as cards. Each item should be a NeonCardListModel.
+                 */
             }>> & Readonly<{
                 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                 "onIndeterminate-change"?: ((...args: any[]) => any) | undefined;
@@ -1111,10 +1128,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -1139,10 +1156,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -1245,12 +1262,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 size: {
                     type: () => import("../../../neon").NeonButtonSize;
-                    default: import("../../../neon").NeonButtonSize; /**
-                     * The subtitle of the header.
-                     */
-                }; /**
-                 * The subtitle of the header.
-                 */
+                    default: import("../../../neon").NeonButtonSize;
+                };
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
@@ -1293,7 +1306,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 transparent: {
                     type: BooleanConstructor;
                     default: boolean;
-                };
+                }; /**
+                 * Emitted when in selectable mode and the selected state of a card is toggled.
+                 * @type {string, boolean} - the id of the card which is toggled & the new selected state.
+                 */
                 outline: {
                     type: BooleanConstructor;
                     default: boolean;
@@ -1348,12 +1364,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 size: {
                     type: () => import("../../../neon").NeonButtonSize;
-                    default: import("../../../neon").NeonButtonSize; /**
-                     * The subtitle of the header.
-                     */
-                }; /**
-                 * The subtitle of the header.
-                 */
+                    default: import("../../../neon").NeonButtonSize;
+                };
                 color: {
                     type: () => NeonFunctionalColor;
                     default: NeonFunctionalColor;
@@ -1396,7 +1408,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 transparent: {
                     type: BooleanConstructor;
                     default: boolean;
-                };
+                }; /**
+                 * Emitted when in selectable mode and the selected state of a card is toggled.
+                 * @type {string, boolean} - the id of the card which is toggled & the new selected state.
+                 */
                 outline: {
                     type: BooleanConstructor;
                     default: boolean;
@@ -1482,10 +1497,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -1510,10 +1525,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -1555,14 +1570,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     };
                 }>, {
                     neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
-                    routerUrl: import("vue").ComputedRef<string | undefined>;
+                    routerUrl: import("vue").ComputedRef<string | undefined>; /**
+                     * Make cards selectable.
+                     */
                     sanitizedAttributes: import("vue").ComputedRef<{
                         [x: string]: unknown;
                     }>;
                     activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                     exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                     onClick: () => void;
-                    onSpace: () => Promise<void>;
+                    onSpace: () => Promise<void>; /**
+                     * Model for configuring the on demand loading layout.
+                     */
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     href: {
                         type: StringConstructor;
@@ -1591,10 +1610,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                         name: {
                             type: StringConstructor;
-                            required: true;
-                        }; /**
-                         * Breadcrumbs to display above the header.
-                         */
+                            required: true; /**
+                             * Breadcrumbs to display above the header.
+                             */
+                        };
                         id: {
                             type: StringConstructor;
                             default: null;
@@ -1619,10 +1638,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                         name: {
                             type: StringConstructor;
-                            required: true;
-                        }; /**
-                         * Breadcrumbs to display above the header.
-                         */
+                            required: true; /**
+                             * Breadcrumbs to display above the header.
+                             */
+                        };
                         id: {
                             type: StringConstructor;
                             default: null;
@@ -1650,10 +1669,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -1678,10 +1697,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -1716,12 +1735,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             size: {
                 type: () => import("../../../neon").NeonButtonSize;
-                default: import("../../../neon").NeonButtonSize; /**
-                 * The subtitle of the header.
-                 */
-            }; /**
-             * The subtitle of the header.
-             */
+                default: import("../../../neon").NeonButtonSize;
+            };
             color: {
                 type: () => NeonFunctionalColor;
                 default: NeonFunctionalColor;
@@ -1764,7 +1779,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             transparent: {
                 type: BooleanConstructor;
                 default: boolean;
-            };
+            }; /**
+             * Emitted when in selectable mode and the selected state of a card is toggled.
+             * @type {string, boolean} - the id of the card which is toggled & the new selected state.
+             */
             outline: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -1819,12 +1837,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             size: {
                 type: () => import("../../../neon").NeonButtonSize;
-                default: import("../../../neon").NeonButtonSize; /**
-                 * The subtitle of the header.
-                 */
-            }; /**
-             * The subtitle of the header.
-             */
+                default: import("../../../neon").NeonButtonSize;
+            };
             color: {
                 type: () => NeonFunctionalColor;
                 default: NeonFunctionalColor;
@@ -1867,7 +1881,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             transparent: {
                 type: BooleanConstructor;
                 default: boolean;
-            };
+            }; /**
+             * Emitted when in selectable mode and the selected state of a card is toggled.
+             * @type {string, boolean} - the id of the card which is toggled & the new selected state.
+             */
             outline: {
                 type: BooleanConstructor;
                 default: boolean;
@@ -1953,10 +1970,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -1981,10 +1998,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -2026,14 +2043,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
             }>, {
                 neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
-                routerUrl: import("vue").ComputedRef<string | undefined>;
+                routerUrl: import("vue").ComputedRef<string | undefined>; /**
+                 * Make cards selectable.
+                 */
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
                 }>;
                 activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                 exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                 onClick: () => void;
-                onSpace: () => Promise<void>;
+                onSpace: () => Promise<void>; /**
+                 * Model for configuring the on demand loading layout.
+                 */
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 href: {
                     type: StringConstructor;
@@ -2062,10 +2083,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -2090,10 +2111,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -2156,14 +2177,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
         }>, {
             neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
-            routerUrl: import("vue").ComputedRef<string | undefined>;
+            routerUrl: import("vue").ComputedRef<string | undefined>; /**
+             * Make cards selectable.
+             */
             sanitizedAttributes: import("vue").ComputedRef<{
                 [x: string]: unknown;
             }>;
             activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
             exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
             onClick: () => void;
-            onSpace: () => Promise<void>;
+            onSpace: () => Promise<void>; /**
+             * Model for configuring the on demand loading layout.
+             */
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             href: {
                 type: StringConstructor;
@@ -2192,10 +2217,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -2220,10 +2245,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -2247,6 +2272,53 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 disabled: boolean;
             }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        NeonLoadingStateCard: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+            NeonInline: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+                gap: {
+                    type: () => import("../../../neon").NeonLayoutSize;
+                    default: () => import("../../../neon").NeonLayoutSize;
+                };
+                breakpoint: {
+                    type: () => import("../../../neon").NeonResponsive;
+                };
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+                gap: {
+                    type: () => import("../../../neon").NeonLayoutSize;
+                    default: () => import("../../../neon").NeonLayoutSize;
+                };
+                breakpoint: {
+                    type: () => import("../../../neon").NeonResponsive;
+                };
+            }>> & Readonly<{}>, {
+                gap: import("../../../neon").NeonLayoutSize;
+            }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+            NeonSkeletonLoader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+                count: {
+                    type: NumberConstructor;
+                    default: number;
+                };
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+                count: {
+                    type: NumberConstructor;
+                    default: number;
+                };
+            }>> & Readonly<{}>, {
+                count: number;
+            }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+            NeonStack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+                gap: {
+                    type: () => import("../../../neon").NeonLayoutSize;
+                    default: () => import("../../../neon").NeonLayoutSize;
+                };
+            }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+                gap: {
+                    type: () => import("../../../neon").NeonLayoutSize;
+                    default: () => import("../../../neon").NeonLayoutSize;
+                };
+            }>> & Readonly<{}>, {
+                gap: import("../../../neon").NeonLayoutSize;
+            }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         NeonSplashLoader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             color: {
                 type: () => NeonFunctionalColor;
@@ -2292,10 +2364,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -2320,10 +2392,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -2347,19 +2419,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 disabled: boolean;
             }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-        NeonStack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-            gap: {
-                type: () => import("../../../neon").NeonLayoutSize;
-                default: () => import("../../../neon").NeonLayoutSize;
-            };
-        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-            gap: {
-                type: () => import("../../../neon").NeonLayoutSize;
-                default: () => import("../../../neon").NeonLayoutSize;
-            };
-        }>> & Readonly<{}>, {
-            gap: import("../../../neon").NeonLayoutSize;
-        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     NeonHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         title: {
@@ -2382,8 +2441,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         backLabel: {
-            type: StringConstructor;
-            /**
+            type: StringConstructor; /**
              * Whether to display a back button
              */
             default: string;
@@ -2415,8 +2473,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         backLabel: {
-            type: StringConstructor;
-            /**
+            type: StringConstructor; /**
              * Whether to display a back button
              */
             default: string;
@@ -2473,10 +2530,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -2501,10 +2558,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: StringConstructor;
-                    required: true;
-                }; /**
-                 * Breadcrumbs to display above the header.
-                 */
+                    required: true; /**
+                     * Breadcrumbs to display above the header.
+                     */
+                };
                 id: {
                     type: StringConstructor;
                     default: null;
@@ -2546,14 +2603,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
             }>, {
                 neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
-                routerUrl: import("vue").ComputedRef<string | undefined>;
+                routerUrl: import("vue").ComputedRef<string | undefined>; /**
+                 * Make cards selectable.
+                 */
                 sanitizedAttributes: import("vue").ComputedRef<{
                     [x: string]: unknown;
                 }>;
                 activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                 exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
                 onClick: () => void;
-                onSpace: () => Promise<void>;
+                onSpace: () => Promise<void>; /**
+                 * Model for configuring the on demand loading layout.
+                 */
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 href: {
                     type: StringConstructor;
@@ -2582,10 +2643,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -2610,10 +2671,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
                         type: StringConstructor;
-                        required: true;
-                    }; /**
-                     * Breadcrumbs to display above the header.
-                     */
+                        required: true; /**
+                         * Breadcrumbs to display above the header.
+                         */
+                    };
                     id: {
                         type: StringConstructor;
                         default: null;
@@ -2651,10 +2712,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
                 hideFadeEnd: {
-                    type: BooleanConstructor; /**
-                     * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty
-                     * state. Use this component directly inside the NeonPage <em>contents</em> slot.
-                     */
+                    type: BooleanConstructor;
                     default: boolean;
                 };
             }>, {
@@ -2676,10 +2734,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     default: boolean;
                 };
                 hideFadeEnd: {
-                    type: BooleanConstructor; /**
-                     * A page level layout component for displaying a list with a page header, filter bar, card list, pagination & an empty
-                     * state. Use this component directly inside the NeonPage <em>contents</em> slot.
-                     */
+                    type: BooleanConstructor;
                     default: boolean;
                 };
             }>> & Readonly<{}>, {