From 4fee8be2a062c9276e6151d67addd1be7baeb6b2 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 8 Sep 2023 23:22:02 +0200
Subject: [PATCH 01/11] init, basic typing

---
 .vscode/settings.json                         |  6 ++-
 .../Autocomplete/Autocomplete.svelte          | 40 ++++++++++---------
 .../src/lib/components/Autocomplete/types.ts  |  4 +-
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 80d6be736..99bee1471 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,5 @@
 {
-    "cSpell.language": "en"
-}
\ No newline at end of file
+  "cSpell.language": "en",
+  "prettier.singleQuote": true,
+  "prettier.semi": true
+}
diff --git a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
index 560efe6e7..fcf90fe6c 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
+++ b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
@@ -1,15 +1,19 @@
 <script lang="ts" context="module">
 	import { slide } from 'svelte/transition';
-	import { type Transition, type TransitionParams, prefersReducedMotionStore } from '../../index.js';
+	import { prefersReducedMotionStore, type Transition, type TransitionParams } from '../../index.js';
 	import { dynamicTransition } from '../../internal/transitions.js';
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	type SlideTransition = typeof slide;
 	type TransitionIn = Transition;
 	type TransitionOut = Transition;
+	type Value = unknown;
 </script>
 
-<script lang="ts" generics="TransitionIn extends Transition = SlideTransition, TransitionOut extends Transition = SlideTransition">
+<script
+	lang="ts"
+	generics="Value = unknown, TransitionIn extends Transition = SlideTransition, TransitionOut extends Transition = SlideTransition"
+>
 	import { createEventDispatcher } from 'svelte';
 	// import { flip } from 'svelte/animate';
 	// import {slide} from 'svelte/transition';
@@ -19,33 +23,33 @@
 
 	// Event Dispatcher
 	type AutocompleteEvent = {
-		selection: AutocompleteOption;
+		selection: AutocompleteOption<Value>;
 	};
 	const dispatch = createEventDispatcher<AutocompleteEvent>();
 
 	// Props
 	/**
 	 * Bind the input value.
-	 * @type {unknown}
+	 * @type {Value | undefined}
 	 */
-	export let input: unknown = undefined;
+	export let input: Value | undefined = undefined;
 	/**
 	 * Define values for the list.
-	 * @type {AutocompleteOption[]}
+	 * @type {AutocompleteOption<Value>[]}
 	 */
-	export let options: AutocompleteOption[] = [];
+	export let options: AutocompleteOption<Value>[] = [];
 	/** Limit the total number of suggestions. */
 	export let limit: number | undefined = undefined;
 	/**
 	 * Provide allowlist values.
-	 * @type {unknown[]}
+	 * @type {Value[]}
 	 */
-	export let allowlist: unknown[] = [];
+	export let allowlist: Value[] = [];
 	/**
 	 * Provide denylist values.
-	 * @type {unknown[]}
+	 * @type {Value[]}
 	 */
-	export let denylist: unknown[] = [];
+	export let denylist: Value[] = [];
 	/** Provide a HTML markup to display when no match is found. */
 	export let emptyState = 'No Results Found.';
 	// Props (region)
@@ -90,20 +94,20 @@
 	// Local
 	$: listedOptions = options;
 
-	function filterByAllowDeny(allowlist: unknown[], denylist: unknown[]) {
+	function filterByAllowDeny(_allowlist: typeof allowlist, _denylist: typeof denylist) {
 		let _options = [...options];
 		// Allowed Options
-		if (allowlist.length) {
-			_options = _options.filter((option) => allowlist.includes(option.value));
+		if (_allowlist.length) {
+			_options = _options.filter((option) => _allowlist.includes(option.value));
 		}
 
 		// Denied Options
-		if (denylist.length) {
-			_options = _options.filter((option) => !denylist.includes(option.value));
+		if (_denylist.length) {
+			_options = _options.filter((option) => !_denylist.includes(option.value));
 		}
 
 		// Reset options
-		if (!allowlist.length && !denylist.length) {
+		if (!_allowlist.length && !_denylist.length) {
 			_options = options;
 		}
 
@@ -125,7 +129,7 @@
 		return _options;
 	}
 
-	function onSelection(option: AutocompleteOption) {
+	function onSelection(option: AutocompleteOption<Value>) {
 		/** @event {AutocompleteOption} selection - Fire on option select. */
 		dispatch('selection', option);
 	}
diff --git a/packages/skeleton/src/lib/components/Autocomplete/types.ts b/packages/skeleton/src/lib/components/Autocomplete/types.ts
index 74b2319a8..ed168f8a7 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/types.ts
+++ b/packages/skeleton/src/lib/components/Autocomplete/types.ts
@@ -1,10 +1,10 @@
 // Autocomplete Types
 
-export interface AutocompleteOption {
+export interface AutocompleteOption<Value = unknown> {
 	/** provide a unique display label per option. Supports HTML. */
 	label: string;
 	/** Provide a unique option value. */
-	value: unknown;
+	value: Value;
 	/** Provide a comma separated list of keywords. */
 	keywords?: any;
 	/** Pass arbitrary data per option. */

From 620aaafa697043fd099c7abc3585e1b0b12b546c Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 8 Sep 2023 23:41:11 +0200
Subject: [PATCH 02/11] finishing touches

---
 .../src/lib/components/Autocomplete/Autocomplete.svelte     | 6 +++---
 packages/skeleton/src/lib/components/Autocomplete/types.ts  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
index fcf90fe6c..bff057cae 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
+++ b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
@@ -114,7 +114,7 @@
 		listedOptions = _options;
 	}
 
-	function filterOptions(): AutocompleteOption[] {
+	function filterOptions(): AutocompleteOption<Value>[] {
 		// Create a local copy of options
 		let _options = [...listedOptions];
 		// Filter options
@@ -130,14 +130,14 @@
 	}
 
 	function onSelection(option: AutocompleteOption<Value>) {
-		/** @event {AutocompleteOption} selection - Fire on option select. */
+		/** @event {AutocompleteOption<Value>} selection - Fire on option select. */
 		dispatch('selection', option);
 	}
 
 	// State
 	$: filterByAllowDeny(allowlist, denylist);
 	$: optionsFiltered = input ? filterOptions() : listedOptions;
-	$: sliceLimit = limit !== undefined ? limit : optionsFiltered.length;
+	$: sliceLimit = limit ?? optionsFiltered.length;
 	// Reactive
 	$: classesBase = `${$$props.class ?? ''}`;
 	$: classesNav = `${regionNav}`;
diff --git a/packages/skeleton/src/lib/components/Autocomplete/types.ts b/packages/skeleton/src/lib/components/Autocomplete/types.ts
index ed168f8a7..fd381c5a3 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/types.ts
+++ b/packages/skeleton/src/lib/components/Autocomplete/types.ts
@@ -1,7 +1,7 @@
 // Autocomplete Types
 
 export interface AutocompleteOption<Value = unknown> {
-	/** provide a unique display label per option. Supports HTML. */
+	/** Provide a unique display label per option. Supports HTML. */
 	label: string;
 	/** Provide a unique option value. */
 	value: Value;

From 31dee882e3cf0fafa6259ae665d0f369e60d9ceb Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 8 Sep 2023 23:53:33 +0200
Subject: [PATCH 03/11] changeset

---
 packages/skeleton/.changeset/gold-jars-pretend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/skeleton/.changeset/gold-jars-pretend.md

diff --git a/packages/skeleton/.changeset/gold-jars-pretend.md b/packages/skeleton/.changeset/gold-jars-pretend.md
new file mode 100644
index 000000000..4c2f2f014
--- /dev/null
+++ b/packages/skeleton/.changeset/gold-jars-pretend.md
@@ -0,0 +1,5 @@
+---
+'@skeletonlabs/skeleton': patch
+---
+
+Added support for type generics on values provided to Autocomplete component

From 55af0a1c24b132f150e5d9bce73c80e2825a44ef Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Sat, 9 Sep 2023 00:10:29 +0200
Subject: [PATCH 04/11] changeset update according to guidelines

---
 packages/skeleton/.changeset/gold-jars-pretend.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/skeleton/.changeset/gold-jars-pretend.md b/packages/skeleton/.changeset/gold-jars-pretend.md
index 4c2f2f014..7683bce92 100644
--- a/packages/skeleton/.changeset/gold-jars-pretend.md
+++ b/packages/skeleton/.changeset/gold-jars-pretend.md
@@ -2,4 +2,4 @@
 '@skeletonlabs/skeleton': patch
 ---
 
-Added support for type generics on values provided to Autocomplete component
+bugfix:Added support for type generics on values provided to Autocomplete component

From 05ebc8c7d175d31b0e98af0ab8bdac1376d021f8 Mon Sep 17 00:00:00 2001
From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
Date: Mon, 11 Sep 2023 13:48:14 -0400
Subject: [PATCH 05/11] adjusted types in docs

---
 .../components/autocomplete/+page.svelte      | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
index 12776381e..5e58f4cea 100644
--- a/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
@@ -39,37 +39,38 @@
 
 	let inputDemo = '';
 	let inputAllowlist = '';
-	const flavorOptions: AutocompleteOption[] = [
+	type FlavorOption = AutocompleteOption<string>;
+	const flavorOptions = [
 		{ label: 'Vanilla', value: 'vanilla', keywords: 'plain, basic', meta: { healthy: false } },
 		{ label: 'Chocolate', value: 'chocolate', keywords: 'dark, white', meta: { healthy: false } },
 		{ label: 'Strawberry', value: 'strawberry', keywords: 'fruit', meta: { healthy: true } },
 		{ label: 'Neapolitan', value: 'neapolitan', keywords: 'mix, strawberry, chocolate, vanilla', meta: { healthy: false } },
 		{ label: 'Pineapple', value: 'pineapple', keywords: 'fruit', meta: { healthy: true } },
 		{ label: 'Peach', value: 'peach', keywords: 'fruit', meta: { healthy: true } }
-	];
-	const flavorAllowlist: string[] = ['neapolitan', 'pineapple', 'peach'];
-	let flavorDenylist: string[] = ['vanilla', 'chocolate'];
+	] satisfies FlavorOption[];
+	const flavorAllowlist = ['neapolitan', 'pineapple', 'peach'];
+	let flavorDenylist = ['vanilla', 'chocolate'];
 
 	// Input Chip
 	let inputChip = '';
-	let inputChipList: string[] = ['vanilla', 'chocolate'];
+	let inputChipList = ['vanilla', 'chocolate'];
 
-	function onDemoSelection(event: CustomEvent<AutocompleteOption>): void {
+	function onDemoSelection(event: CustomEvent<FlavorOption>): void {
 		console.log(event.detail);
 		inputDemo = event.detail.label;
 	}
 
-	function onAllowedlistSelect(event: CustomEvent<AutocompleteOption>): void {
+	function onAllowedlistSelect(event: CustomEvent<FlavorOption>): void {
 		console.log(event.detail);
 		inputAllowlist = event.detail.label;
 	}
 
-	function onDeniedlistSelect(event: CustomEvent<AutocompleteOption>): void {
+	function onDeniedlistSelect(event: CustomEvent<FlavorOption>): void {
 		console.log(event.detail);
 		flavorDenylist = [event.detail.value as string];
 	}
 
-	function onInputChipSelect(event: CustomEvent<AutocompleteOption>): void {
+	function onInputChipSelect(event: CustomEvent<FlavorOption>): void {
 		console.log('onInputChipSelect', event.detail);
 		if (inputChipList.includes(event.detail.value as string) === false) {
 			inputChipList = [...inputChipList, event.detail.value as string];
@@ -77,7 +78,7 @@
 		}
 	}
 
-	function onPopupDemoSelect(event: CustomEvent<AutocompleteOption>): void {
+	function onPopupDemoSelect(event: CustomEvent<FlavorOption>): void {
 		inputPopupDemo = event.detail.label;
 	}
 </script>
@@ -101,7 +102,7 @@
 				<CodeBlock
 					language="ts"
 					code={`
-const flavorOptions: AutocompleteOption[] = [
+const flavorOptions: AutocompleteOption<string>[] = [
 	{ label: 'Vanilla', value: 'vanilla', keywords: 'plain, basic', meta: { healthy: false } },
 	{ label: 'Chocolate', value: 'chocolate', keywords: 'dark, white', meta: { healthy: false } },
 	{ label: 'Strawberry', value: 'strawberry', keywords: 'fruit', meta: { healthy: true } },
@@ -115,7 +116,7 @@ const flavorOptions: AutocompleteOption[] = [
 				<CodeBlock
 					language="ts"
 					code={`
-function onFlavorSelection(event: CustomEvent<AutocompleteOption>): void {
+function onFlavorSelection(event: CustomEvent<AutocompleteOption<string>>): void {
 	inputDemo = event.detail.label;
 }
 				`}
@@ -160,7 +161,7 @@ function onFlavorSelection(event: CustomEvent<AutocompleteOption>): void {
 			<CodeBlock
 				language="ts"
 				code={`
-const flavorOptions: AutocompleteOption[] = [
+const flavorOptions: AutocompleteOption<string>[] = [
 	{ ..., keywords: 'mix, strawberry, chocolate, vanilla' },
 	{ ..., meta: { healthy: false } },
 ];

From c9fbfb93aad087b3f68b4ecb29bec1bdcd3f1176 Mon Sep 17 00:00:00 2001
From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
Date: Mon, 11 Sep 2023 13:48:42 -0400
Subject: [PATCH 06/11] adjust param names

---
 .../lib/components/Autocomplete/Autocomplete.svelte  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
index bff057cae..c8dbab6f8 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
+++ b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
@@ -94,20 +94,20 @@
 	// Local
 	$: listedOptions = options;
 
-	function filterByAllowDeny(_allowlist: typeof allowlist, _denylist: typeof denylist) {
+	function filterByAllowDeny(allowlist: Value[], denylist: Value[]) {
 		let _options = [...options];
 		// Allowed Options
-		if (_allowlist.length) {
-			_options = _options.filter((option) => _allowlist.includes(option.value));
+		if (allowlist.length) {
+			_options = _options.filter((option) => allowlist.includes(option.value));
 		}
 
 		// Denied Options
-		if (_denylist.length) {
-			_options = _options.filter((option) => !_denylist.includes(option.value));
+		if (denylist.length) {
+			_options = _options.filter((option) => !denylist.includes(option.value));
 		}
 
 		// Reset options
-		if (!_allowlist.length && !_denylist.length) {
+		if (!allowlist.length && !denylist.length) {
 			_options = options;
 		}
 

From 55919b9b02fb20b9f1a43309984b249855278e3f Mon Sep 17 00:00:00 2001
From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
Date: Mon, 11 Sep 2023 14:07:34 -0400
Subject: [PATCH 07/11] don't need these type assertions anymore

---
 .../src/routes/(inner)/components/autocomplete/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
index 5e58f4cea..65dfbd723 100644
--- a/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
@@ -67,13 +67,13 @@
 
 	function onDeniedlistSelect(event: CustomEvent<FlavorOption>): void {
 		console.log(event.detail);
-		flavorDenylist = [event.detail.value as string];
+		flavorDenylist = [event.detail.value];
 	}
 
 	function onInputChipSelect(event: CustomEvent<FlavorOption>): void {
 		console.log('onInputChipSelect', event.detail);
-		if (inputChipList.includes(event.detail.value as string) === false) {
-			inputChipList = [...inputChipList, event.detail.value as string];
+		if (inputChipList.includes(event.detail.value) === false) {
+			inputChipList = [...inputChipList, event.detail.value];
 			inputChip = '';
 		}
 	}

From 5234b60441d7e95153b8f3af77fa56e1e11c928c Mon Sep 17 00:00:00 2001
From: Evgenii Perminov <119697239+HugeLetters@users.noreply.github.com>
Date: Mon, 11 Sep 2023 21:26:53 +0200
Subject: [PATCH 08/11] Update
 packages/skeleton/.changeset/gold-jars-pretend.md

Co-authored-by: CokaKoala <31664583+AdrianGonz97@users.noreply.github.com>
---
 packages/skeleton/.changeset/gold-jars-pretend.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/skeleton/.changeset/gold-jars-pretend.md b/packages/skeleton/.changeset/gold-jars-pretend.md
index 7683bce92..f2914fb94 100644
--- a/packages/skeleton/.changeset/gold-jars-pretend.md
+++ b/packages/skeleton/.changeset/gold-jars-pretend.md
@@ -1,5 +1,5 @@
 ---
-'@skeletonlabs/skeleton': patch
+'@skeletonlabs/skeleton': minor
 ---
 
-bugfix:Added support for type generics on values provided to Autocomplete component
+feat: Added support for generic types on values provided to Autocomplete component

From 67459520a1e653772d988ba6a0b4b455f1099801 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Mon, 11 Sep 2023 21:27:57 +0200
Subject: [PATCH 09/11] revert settings

---
 .vscode/settings.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 99bee1471..0353da65d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,3 @@
 {
-  "cSpell.language": "en",
-  "prettier.singleQuote": true,
-  "prettier.semi": true
+  "cSpell.language": "en"
 }

From 16961a11bd1f3bd8fa8f7434f61b3a7fcfe10541 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Mon, 11 Sep 2023 21:54:21 +0200
Subject: [PATCH 10/11] generic for meta property

---
 .../components/Autocomplete/Autocomplete.svelte | 17 ++++++++++-------
 .../src/lib/components/Autocomplete/types.ts    |  6 +++---
 .../components/autocomplete/+page.svelte        |  6 +++---
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
index c8dbab6f8..ed4c1dbda 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
+++ b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
@@ -8,11 +8,13 @@
 	type TransitionIn = Transition;
 	type TransitionOut = Transition;
 	type Value = unknown;
+	type Meta = unknown;
 </script>
 
 <script
 	lang="ts"
-	generics="Value = unknown, TransitionIn extends Transition = SlideTransition, TransitionOut extends Transition = SlideTransition"
+	generics="Value = unknown, Meta = unknown, 
+	TransitionIn extends Transition = SlideTransition, TransitionOut extends Transition = SlideTransition"
 >
 	import { createEventDispatcher } from 'svelte';
 	// import { flip } from 'svelte/animate';
@@ -20,10 +22,11 @@
 
 	// Types
 	import type { AutocompleteOption } from './types.js';
+	type Option = AutocompleteOption<Value, Meta>;
 
 	// Event Dispatcher
 	type AutocompleteEvent = {
-		selection: AutocompleteOption<Value>;
+		selection: Option;
 	};
 	const dispatch = createEventDispatcher<AutocompleteEvent>();
 
@@ -35,9 +38,9 @@
 	export let input: Value | undefined = undefined;
 	/**
 	 * Define values for the list.
-	 * @type {AutocompleteOption<Value>[]}
+	 * @type {Option[]}
 	 */
-	export let options: AutocompleteOption<Value>[] = [];
+	export let options: Option[] = [];
 	/** Limit the total number of suggestions. */
 	export let limit: number | undefined = undefined;
 	/**
@@ -114,7 +117,7 @@
 		listedOptions = _options;
 	}
 
-	function filterOptions(): AutocompleteOption<Value>[] {
+	function filterOptions(): Option[] {
 		// Create a local copy of options
 		let _options = [...listedOptions];
 		// Filter options
@@ -129,8 +132,8 @@
 		return _options;
 	}
 
-	function onSelection(option: AutocompleteOption<Value>) {
-		/** @event {AutocompleteOption<Value>} selection - Fire on option select. */
+	function onSelection(option: Option) {
+		/** @event {Option} selection - Fire on option select. */
 		dispatch('selection', option);
 	}
 
diff --git a/packages/skeleton/src/lib/components/Autocomplete/types.ts b/packages/skeleton/src/lib/components/Autocomplete/types.ts
index fd381c5a3..f312197f8 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/types.ts
+++ b/packages/skeleton/src/lib/components/Autocomplete/types.ts
@@ -1,12 +1,12 @@
 // Autocomplete Types
 
-export interface AutocompleteOption<Value = unknown> {
+export interface AutocompleteOption<Value = unknown, Meta = unknown> {
 	/** Provide a unique display label per option. Supports HTML. */
 	label: string;
 	/** Provide a unique option value. */
 	value: Value;
 	/** Provide a comma separated list of keywords. */
-	keywords?: any;
+	keywords?: string;
 	/** Pass arbitrary data per option. */
-	meta?: any;
+	meta?: Meta;
 }
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
index 65dfbd723..ff4f8f998 100644
--- a/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
@@ -39,15 +39,15 @@
 
 	let inputDemo = '';
 	let inputAllowlist = '';
-	type FlavorOption = AutocompleteOption<string>;
-	const flavorOptions = [
+	type FlavorOption = AutocompleteOption<string, { healthy: boolean }>;
+	const flavorOptions: FlavorOption[] = [
 		{ label: 'Vanilla', value: 'vanilla', keywords: 'plain, basic', meta: { healthy: false } },
 		{ label: 'Chocolate', value: 'chocolate', keywords: 'dark, white', meta: { healthy: false } },
 		{ label: 'Strawberry', value: 'strawberry', keywords: 'fruit', meta: { healthy: true } },
 		{ label: 'Neapolitan', value: 'neapolitan', keywords: 'mix, strawberry, chocolate, vanilla', meta: { healthy: false } },
 		{ label: 'Pineapple', value: 'pineapple', keywords: 'fruit', meta: { healthy: true } },
 		{ label: 'Peach', value: 'peach', keywords: 'fruit', meta: { healthy: true } }
-	] satisfies FlavorOption[];
+	];
 	const flavorAllowlist = ['neapolitan', 'pineapple', 'peach'];
 	let flavorDenylist = ['vanilla', 'chocolate'];
 

From bbaa2bfb58480722c6ea97a9a749eaeac4e48c9c Mon Sep 17 00:00:00 2001
From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
Date: Mon, 18 Sep 2023 12:27:21 -0400
Subject: [PATCH 11/11] fixed doc type

---
 .../src/lib/components/Autocomplete/Autocomplete.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
index ed4c1dbda..6183b9421 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
+++ b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
@@ -38,7 +38,7 @@
 	export let input: Value | undefined = undefined;
 	/**
 	 * Define values for the list.
-	 * @type {Option[]}
+	 * @type {AutocompleteOption[]}
 	 */
 	export let options: Option[] = [];
 	/** Limit the total number of suggestions. */