@aotearoan/neon 21.0.2 → 22.0.0

package/dist/src/components/user-input/search/NeonSearch.d.ts

@@ -13,12 +13,12 @@ import { NeonInputMode } from '@/common/enums/NeonInputMode';
  */
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
-     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected
-     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).
+     * The selected model value(s). In the case of single select this should be set to a single NeonSearchOption or null.
+     * In the case of multiple selection (multiple=true) pass an Array of selected NeonSearchOptions or an empty array
+     * if nothing is selected.
      */
     modelValue: {
-        type: (StringConstructor | (() => Array<NeonSearchOption>))[];
-        required: true;
+        type: ((() => NeonSearchOption) | (() => Array<NeonSearchOption>))[];
     };
     /**
      * Placeholder to display in search input when there is no search string entered.
@@ -108,9 +108,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         icon: {
             type: StringConstructor;
-            default: null; /**
-             * The color of the search.
-             */
+            default: null;
         };
         iconAriaLabel: {
             type: StringConstructor;
@@ -128,7 +126,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonSize;
         };
         color: {
-            type: () => NeonFunctionalColor;
+            type: () => NeonFunctionalColor; /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             default: NeonFunctionalColor;
         };
         alternateColor: {
@@ -141,8 +142,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         placement: {
             type: () => NeonDropdownPlacement;
-            default: NeonDropdownPlacement;
-        };
+            default: NeonDropdownPlacement; /**
+             * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+             * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+             * for multiple selection an empty array is returned.
+             */
+        }; /**
+         * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+         * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+         * for multiple selection an empty array is returned.
+         */
         placementContainer: {
             type: () => HTMLElement;
             default: null;
@@ -156,7 +165,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -178,7 +186,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         toggleOpen: () => void;
         onBlur: () => void;
         onFocus: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], import("vue").PublicProps, {
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement")[], import("vue").PublicProps, {
         disabled: boolean;
         label: string;
         placement: NeonDropdownPlacement;
@@ -232,12 +240,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             imageAlt: {
                 type: StringConstructor;
-                default: string; /**
-                 * Disable the search
-                 */
-            }; /**
-             * Disable the search
-             */
+                default: string;
+            };
         }>, {
             svg: import("vue").ComputedRef<string | null>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -279,12 +283,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             imageAlt: {
                 type: StringConstructor;
-                default: string; /**
-                 * Disable the search
-                 */
-            }; /**
-             * Disable the search
-             */
+                default: string;
+            };
         }>> & Readonly<{}>, {
             disabled: boolean;
             label: string;
@@ -317,9 +317,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }>, {
                 attrs: {
                     [x: string]: unknown;
-                }; /**
-                 * The color of the search.
-                 */
+                };
                 icon: import("vue").ComputedRef<string>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
@@ -373,14 +371,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: StringConstructor;
                 default: null;
             };
-            /**
-             * Disable the search
-             */
             iconAriaLabel: {
                 type: StringConstructor;
-            }; /**
-             * The size of the dropdown - Small, Medium or Large.
-             */
+            };
             iconPosition: {
                 type: () => import("../../../neon").NeonHorizontalPosition;
                 default: import("../../../neon").NeonHorizontalPosition;
@@ -473,14 +466,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: StringConstructor;
                 default: null;
             };
-            /**
-             * Disable the search
-             */
             iconAriaLabel: {
                 type: StringConstructor;
-            }; /**
-             * The size of the dropdown - Small, Medium or Large.
-             */
+            };
             iconPosition: {
                 type: () => import("../../../neon").NeonHorizontalPosition;
                 default: import("../../../neon").NeonHorizontalPosition;
@@ -602,9 +590,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }>, {
                 attrs: {
                     [x: string]: unknown;
-                }; /**
-                 * The color of the search.
-                 */
+                };
                 icon: import("vue").ComputedRef<string>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
@@ -699,9 +685,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }>, {
                     attrs: {
                         [x: string]: unknown;
-                    }; /**
-                     * The color of the search.
-                     */
+                    };
                     icon: import("vue").ComputedRef<string>;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
@@ -796,9 +780,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         icon: {
             type: StringConstructor;
-            default: null; /**
-             * The color of the search.
-             */
+            default: null;
         };
         iconAriaLabel: {
             type: StringConstructor;
@@ -816,7 +798,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonSize;
         };
         color: {
-            type: () => NeonFunctionalColor;
+            type: () => NeonFunctionalColor; /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             default: NeonFunctionalColor;
         };
         alternateColor: {
@@ -829,8 +814,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         placement: {
             type: () => NeonDropdownPlacement;
-            default: NeonDropdownPlacement;
-        };
+            default: NeonDropdownPlacement; /**
+             * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+             * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+             * for multiple selection an empty array is returned.
+             */
+        }; /**
+         * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+         * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+         * for multiple selection an empty array is returned.
+         */
         placementContainer: {
             type: () => HTMLElement;
             default: null;
@@ -844,7 +837,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -902,9 +894,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         icon: {
             type: StringConstructor;
-            default: null; /**
-             * The color of the search.
-             */
+            default: null;
         };
         iconAriaLabel: {
             type: StringConstructor;
@@ -922,7 +912,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonSize;
         };
         color: {
-            type: () => NeonFunctionalColor;
+            type: () => NeonFunctionalColor; /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             default: NeonFunctionalColor;
         };
         alternateColor: {
@@ -935,8 +928,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         placement: {
             type: () => NeonDropdownPlacement;
-            default: NeonDropdownPlacement;
-        };
+            default: NeonDropdownPlacement; /**
+             * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+             * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+             * for multiple selection an empty array is returned.
+             */
+        }; /**
+         * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+         * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+         * for multiple selection an empty array is returned.
+         */
         placementContainer: {
             type: () => HTMLElement;
             default: null;
@@ -950,7 +951,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -972,7 +972,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         toggleOpen: () => void;
         onBlur: () => void;
         onFocus: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], import("vue").PublicProps, {
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement")[], import("vue").PublicProps, {
         disabled: boolean;
         label: string;
         placement: NeonDropdownPlacement;
@@ -1026,12 +1026,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             imageAlt: {
                 type: StringConstructor;
-                default: string; /**
-                 * Disable the search
-                 */
-            }; /**
-             * Disable the search
-             */
+                default: string;
+            };
         }>, {
             svg: import("vue").ComputedRef<string | null>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -1073,12 +1069,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             imageAlt: {
                 type: StringConstructor;
-                default: string; /**
-                 * Disable the search
-                 */
-            }; /**
-             * Disable the search
-             */
+                default: string;
+            };
         }>> & Readonly<{}>, {
             disabled: boolean;
             label: string;
@@ -1111,9 +1103,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }>, {
                 attrs: {
                     [x: string]: unknown;
-                }; /**
-                 * The color of the search.
-                 */
+                };
                 icon: import("vue").ComputedRef<string>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
@@ -1167,14 +1157,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: StringConstructor;
                 default: null;
             };
-            /**
-             * Disable the search
-             */
             iconAriaLabel: {
                 type: StringConstructor;
-            }; /**
-             * The size of the dropdown - Small, Medium or Large.
-             */
+            };
             iconPosition: {
                 type: () => import("../../../neon").NeonHorizontalPosition;
                 default: import("../../../neon").NeonHorizontalPosition;
@@ -1267,14 +1252,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: StringConstructor;
                 default: null;
             };
-            /**
-             * Disable the search
-             */
             iconAriaLabel: {
                 type: StringConstructor;
-            }; /**
-             * The size of the dropdown - Small, Medium or Large.
-             */
+            };
             iconPosition: {
                 type: () => import("../../../neon").NeonHorizontalPosition;
                 default: import("../../../neon").NeonHorizontalPosition;
@@ -1396,9 +1376,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }>, {
                 attrs: {
                     [x: string]: unknown;
-                }; /**
-                 * The color of the search.
-                 */
+                };
                 icon: import("vue").ComputedRef<string>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
@@ -1493,9 +1471,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }>, {
                     attrs: {
                         [x: string]: unknown;
-                    }; /**
-                     * The color of the search.
-                     */
+                    };
                     icon: import("vue").ComputedRef<string>;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
@@ -1590,9 +1566,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         icon: {
             type: StringConstructor;
-            default: null; /**
-             * The color of the search.
-             */
+            default: null;
         };
         iconAriaLabel: {
             type: StringConstructor;
@@ -1610,7 +1584,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonSize;
         };
         color: {
-            type: () => NeonFunctionalColor;
+            type: () => NeonFunctionalColor; /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             default: NeonFunctionalColor;
         };
         alternateColor: {
@@ -1623,8 +1600,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         placement: {
             type: () => NeonDropdownPlacement;
-            default: NeonDropdownPlacement;
-        };
+            default: NeonDropdownPlacement; /**
+             * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+             * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+             * for multiple selection an empty array is returned.
+             */
+        }; /**
+         * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+         * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+         * for multiple selection an empty array is returned.
+         */
         placementContainer: {
             type: () => HTMLElement;
             default: null;
@@ -1638,7 +1623,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         dropdownButton: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
         dropdownContent: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
@@ -1710,12 +1694,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         state: {
             type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState; /**
-             * The color of the search.
-             */
-        }; /**
-         * The color of the search.
-         */
+            default: import("../../../neon").NeonState;
+        };
         rows: {
             type: NumberConstructor;
             default: null;
@@ -1725,6 +1705,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         iconReadonly: {
+            /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -1737,7 +1721,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: number;
         };
         disabled: {
-            type: BooleanConstructor;
+            type: BooleanConstructor; /**
+             * Placement of the dropdown contents.
+             */
             default: boolean;
         };
         stateHighlight: {
@@ -1819,9 +1805,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>, {
             attrs: {
                 [x: string]: unknown;
-            }; /**
-             * The color of the search.
-             */
+            };
             icon: import("vue").ComputedRef<string>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             name: {
@@ -1887,12 +1871,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         state: {
             type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState; /**
-             * The color of the search.
-             */
-        }; /**
-         * The color of the search.
-         */
+            default: import("../../../neon").NeonState;
+        };
         rows: {
             type: NumberConstructor;
             default: null;
@@ -1902,6 +1882,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         iconReadonly: {
+            /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -1914,7 +1898,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: number;
         };
         disabled: {
-            type: BooleanConstructor;
+            type: BooleanConstructor; /**
+             * Placement of the dropdown contents.
+             */
             default: boolean;
         };
         stateHighlight: {
@@ -2010,12 +1996,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         state: {
             type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState; /**
-             * The color of the search.
-             */
-        }; /**
-         * The color of the search.
-         */
+            default: import("../../../neon").NeonState;
+        };
         rows: {
             type: NumberConstructor;
             default: null;
@@ -2025,6 +2007,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         iconReadonly: {
+            /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -2037,7 +2023,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: number;
         };
         disabled: {
-            type: BooleanConstructor;
+            type: BooleanConstructor; /**
+             * Placement of the dropdown contents.
+             */
             default: boolean;
         };
         stateHighlight: {
@@ -2119,9 +2107,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>, {
             attrs: {
                 [x: string]: unknown;
-            }; /**
-             * The color of the search.
-             */
+            };
             icon: import("vue").ComputedRef<string>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             name: {
@@ -2187,12 +2173,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         state: {
             type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState; /**
-             * The color of the search.
-             */
-        }; /**
-         * The color of the search.
-         */
+            default: import("../../../neon").NeonState;
+        };
         rows: {
             type: NumberConstructor;
             default: null;
@@ -2202,6 +2184,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         iconReadonly: {
+            /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -2214,7 +2200,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: number;
         };
         disabled: {
-            type: BooleanConstructor;
+            type: BooleanConstructor; /**
+             * Placement of the dropdown contents.
+             */
             default: boolean;
         };
         stateHighlight: {
@@ -2290,14 +2278,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     changeHighlighted: (key: string) => void;
     showOptions: () => boolean;
     removeSelected: (removed: NeonSearchOption) => void;
+    activeDescendant: import("vue").ComputedRef<string | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "filter-changed")[], "update:modelValue" | "filter-changed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
-     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected
-     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).
+     * The selected model value(s). In the case of single select this should be set to a single NeonSearchOption or null.
+     * In the case of multiple selection (multiple=true) pass an Array of selected NeonSearchOptions or an empty array
+     * if nothing is selected.
      */
     modelValue: {
-        type: (StringConstructor | (() => Array<NeonSearchOption>))[];
-        required: true;
+        type: ((() => NeonSearchOption) | (() => Array<NeonSearchOption>))[];
     };
     /**
      * Placeholder to display in search input when there is no search string entered.
@@ -2467,9 +2456,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>, {
             attrs: {
                 [x: string]: unknown;
-            }; /**
-             * The color of the search.
-             */
+            };
             icon: import("vue").ComputedRef<string>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             name: {
@@ -2516,9 +2503,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         icon: {
             type: StringConstructor;
-            default: null; /**
-             * The color of the search.
-             */
+            default: null;
         };
         iconAriaLabel: {
             type: StringConstructor;
@@ -2536,7 +2521,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonSize;
         };
         color: {
-            type: () => NeonFunctionalColor;
+            type: () => NeonFunctionalColor; /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             default: NeonFunctionalColor;
         };
         alternateColor: {
@@ -2549,8 +2537,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         placement: {
             type: () => NeonDropdownPlacement;
-            default: NeonDropdownPlacement;
-        };
+            default: NeonDropdownPlacement; /**
+             * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+             * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+             * for multiple selection an empty array is returned.
+             */
+        }; /**
+         * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+         * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+         * for multiple selection an empty array is returned.
+         */
         placementContainer: {
             type: () => HTMLElement;
             default: null;
@@ -2580,7 +2576,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         toggleOpen: () => void;
         onBlur: () => void;
         onFocus: () => void;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref")[], "update:modelValue" | "focus" | "blur" | "dropdown-placement" | "button-ref", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur" | "dropdown-placement")[], "update:modelValue" | "focus" | "blur" | "dropdown-placement", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         id: {
             type: StringConstructor;
         };
@@ -2602,9 +2598,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         icon: {
             type: StringConstructor;
-            default: null; /**
-             * The color of the search.
-             */
+            default: null;
         };
         iconAriaLabel: {
             type: StringConstructor;
@@ -2622,7 +2616,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: NeonSize;
         };
         color: {
-            type: () => NeonFunctionalColor;
+            type: () => NeonFunctionalColor; /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             default: NeonFunctionalColor;
         };
         alternateColor: {
@@ -2635,8 +2632,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         placement: {
             type: () => NeonDropdownPlacement;
-            default: NeonDropdownPlacement;
-        };
+            default: NeonDropdownPlacement; /**
+             * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+             * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+             * for multiple selection an empty array is returned.
+             */
+        }; /**
+         * @type {NeonSearchOption | NeonSearchOption[] | null} either the selected option (single select) or an array of
+         * the selected options (multi-select). In the case nothing is selected in single select mode <null> is returned &
+         * for multiple selection an empty array is returned.
+         */
         placementContainer: {
             type: () => HTMLElement;
             default: null;
@@ -2650,7 +2655,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onBlur?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onDropdown-placement"?: ((...args: any[]) => any) | undefined;
-        "onButton-ref"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean;
         label: string;
@@ -2705,12 +2709,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             imageAlt: {
                 type: StringConstructor;
-                default: string; /**
-                 * Disable the search
-                 */
-            }; /**
-             * Disable the search
-             */
+                default: string;
+            };
         }>, {
             svg: import("vue").ComputedRef<string | null>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -2752,12 +2752,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             imageAlt: {
                 type: StringConstructor;
-                default: string; /**
-                 * Disable the search
-                 */
-            }; /**
-             * Disable the search
-             */
+                default: string;
+            };
         }>> & Readonly<{}>, {
             disabled: boolean;
             label: string;
@@ -2790,9 +2786,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }>, {
                 attrs: {
                     [x: string]: unknown;
-                }; /**
-                 * The color of the search.
-                 */
+                };
                 icon: import("vue").ComputedRef<string>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
@@ -2846,14 +2840,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: StringConstructor;
                 default: null;
             };
-            /**
-             * Disable the search
-             */
             iconAriaLabel: {
                 type: StringConstructor;
-            }; /**
-             * The size of the dropdown - Small, Medium or Large.
-             */
+            };
             iconPosition: {
                 type: () => import("../../../neon").NeonHorizontalPosition;
                 default: import("../../../neon").NeonHorizontalPosition;
@@ -2946,14 +2935,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: StringConstructor;
                 default: null;
             };
-            /**
-             * Disable the search
-             */
             iconAriaLabel: {
                 type: StringConstructor;
-            }; /**
-             * The size of the dropdown - Small, Medium or Large.
-             */
+            };
             iconPosition: {
                 type: () => import("../../../neon").NeonHorizontalPosition;
                 default: import("../../../neon").NeonHorizontalPosition;
@@ -3075,9 +3059,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }>, {
                 attrs: {
                     [x: string]: unknown;
-                }; /**
-                 * The color of the search.
-                 */
+                };
                 icon: import("vue").ComputedRef<string>;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                 name: {
@@ -3172,9 +3154,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 }>, {
                     attrs: {
                         [x: string]: unknown;
-                    }; /**
-                     * The color of the search.
-                     */
+                    };
                     icon: import("vue").ComputedRef<string>;
                 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                     name: {
@@ -3261,9 +3241,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>, {
         attrs: {
             [x: string]: unknown;
-        }; /**
-         * The color of the search.
-         */
+        };
         icon: import("vue").ComputedRef<string>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         name: {
@@ -3322,12 +3300,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         state: {
             type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState; /**
-             * The color of the search.
-             */
-        }; /**
-         * The color of the search.
-         */
+            default: import("../../../neon").NeonState;
+        };
         rows: {
             type: NumberConstructor;
             default: null;
@@ -3337,6 +3311,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         iconReadonly: {
+            /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -3349,7 +3327,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: number;
         };
         disabled: {
-            type: BooleanConstructor;
+            type: BooleanConstructor; /**
+             * Placement of the dropdown contents.
+             */
             default: boolean;
         };
         stateHighlight: {
@@ -3420,12 +3400,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         state: {
             type: () => import("../../../neon").NeonState;
-            default: import("../../../neon").NeonState; /**
-             * The color of the search.
-             */
-        }; /**
-         * The color of the search.
-         */
+            default: import("../../../neon").NeonState;
+        };
         rows: {
             type: NumberConstructor;
             default: null;
@@ -3435,6 +3411,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: null;
         };
         iconReadonly: {
+            /**
+             * The HTML input mode as specified <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">here</a>.
+             * This can be used to simplify populating the filter field, e.g. providing the user's country from their address.
+             */
             type: BooleanConstructor;
             default: boolean;
         };
@@ -3447,7 +3427,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: number;
         };
         disabled: {
-            type: BooleanConstructor;
+            type: BooleanConstructor; /**
+             * Placement of the dropdown contents.
+             */
             default: boolean;
         };
         stateHighlight: {
@@ -3512,9 +3494,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>, {
             attrs: {
                 [x: string]: unknown;
-            }; /**
-             * The color of the search.
-             */
+            };
             icon: import("vue").ComputedRef<string>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             name: {