diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index e0df78ce3f6..94f2caf7bd6 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -5,7 +5,7 @@ import {router} from '@inertiajs/vue3';
 import {action} from 'storybook/actions';
 import './storybook.css';
 import './theme.css';
-import {translate} from '@/translations/translator';
+import {translate, translateChoice} from '@/translations/translator';
 import registerUiComponents from '@/bootstrap/ui';
 import DateFormatter from '@/components/DateFormatter';
 import cleanCodeSnippet from './clean-code-snippet';
@@ -23,6 +23,7 @@ router.on('before', (event) => {
 
 setup(async (app) => {
   window.__ = translate;
+  window.__n = translateChoice;
 
   window.Statamic = {
       $config: {
@@ -54,6 +55,7 @@ setup(async (app) => {
   };
 
   app.config.globalProperties.__ = translate;
+  app.config.globalProperties.__n = translateChoice;
   app.config.globalProperties.$date = new DateFormatter;
   app.config.globalProperties.cp_url = (url) => url;
   app.config.globalProperties.$portals = portals;
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index ef88592e729..f6c298bd51e 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -9,6 +9,8 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
+    --focus-outline-color: var(--color-blue-400);
+
     /* GROUP VARIABLES -- DECORATION -- COLOURS
     =================================================== */
     --color-code-background: hsl(287deg 80% 93.5%);
diff --git a/resources/js/components/SiteSelector.vue b/resources/js/components/SiteSelector.vue
index fc78763f689..8b7090cfb4e 100644
--- a/resources/js/components/SiteSelector.vue
+++ b/resources/js/components/SiteSelector.vue
@@ -15,6 +15,8 @@ defineEmits(['update:modelValue']);
         :options="sites"
         option-label="name"
         option-value="handle"
+        align="end"
+        :adaptive-width="true"
         :model-value="modelValue"
         @update:model-value="$emit('update:modelValue', $event)"
     />
diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index c4794abc566..4af951955b7 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -15,10 +15,10 @@
                 <template #no-options><div class="hidden" /></template>
                 <template #option="option">
                     <div class="flex items-center">
-                        <span v-text="option.label" />
+                        <span class="flex-shrink-0 truncate" v-text="option.label" />
                         <span
                             v-text="option.value"
-                            class="font-mono text-2xs text-gray-500 dark:text-dark-150"
+                            class="font-mono text-2xs text-gray-500 dark:text-dark-150 truncate"
                             :class="{ 'ml-2': option.label }"
                         />
                     </div>
@@ -29,7 +29,7 @@
             </Combobox>
         </div>
 
-        <div class="w-auto min-w-32">
+        <div class="w-auto min-w-40">
             <Select
                 class="w-full"
                 :model-value="condition.operator"
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index 2d87c454185..ff3d19101d2 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -76,7 +76,7 @@
                             <button
                                 type="button"
                                 class="opacity-75 hover:opacity-100 cursor-pointer"
-                                :aria-label="__('Deselect option')"
+                                :aria-label="__('Remove :label', { label: rule })"
                                 @click="remove(rule)"
                             >
                                 &times;
@@ -236,6 +236,8 @@ export default {
             if (!this.rules.includes(rule)) {
                 this.rules.push(rule);
             }
+
+	        this.$nextTick(() => this.$refs.rulesSelect.focus());
         },
 
         add(rule) {
@@ -258,8 +260,6 @@ export default {
             if (this.searchNotFound(rulesSelect) || this.hasUnfinishedParameters(rule)) return;
 
             this.add(rule);
-
-            this.$nextTick(() => this.$refs.searchInput.blur());
         },
 
         remove(rule) {
diff --git a/resources/js/components/fieldtypes/DictionaryFieldtype.vue b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
index b6dba0dfc7c..64f74f62787 100644
--- a/resources/js/components/fieldtypes/DictionaryFieldtype.vue
+++ b/resources/js/components/fieldtypes/DictionaryFieldtype.vue
@@ -32,7 +32,7 @@
                     <div
                         v-for="option in selectedOptions"
                         :key="getOptionValue(option)"
-                        class="sortable-item cursor-grab"
+                        class="sortable-item cursor-grab active:cursor-grabbing"
                     >
                         <Badge size="lg" color="white">
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
@@ -42,18 +42,14 @@
                                 v-if="!disabled && !readOnly"
                                 type="button"
                                 class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
-                                :aria-label="__('Deselect option')"
+                                :aria-label="__('Remove :label', { label: getOptionLabel(option) })"
                                 @click="deselect(option.value)"
                             >
                                 <span>&times;</span>
                             </button>
-                            <button
-                                v-else
-                                type="button"
-                                class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700"
-                            >
+                            <span v-else class="-mx-3 cursor-pointer px-3 text-gray-400 hover:text-gray-700">
                                 <span>&times;</span>
-                            </button>
+                            </span>
                         </Badge>
                     </div>
                 </div>
diff --git a/resources/js/components/global-header/SiteSelector.vue b/resources/js/components/global-header/SiteSelector.vue
index d6a2051e937..1db9ea61fc6 100644
--- a/resources/js/components/global-header/SiteSelector.vue
+++ b/resources/js/components/global-header/SiteSelector.vue
@@ -10,6 +10,8 @@
             size="sm"
             variant="ghost"
             icon="globe-arrow"
+            align="end"
+            :adaptive-width="true"
             class="[&_[data-ui-combobox-trigger]]:text-white/85"
         />
     </div>
diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 55aa6b197af..23765e2cee3 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -9,7 +9,6 @@ import {
     ComboboxRoot,
     ComboboxTrigger,
     ComboboxPortal,
-    ComboboxViewport,
     ComboboxVirtualizer,
     FocusScope
 } from 'reka-ui';
@@ -20,12 +19,14 @@ import Icon from '../Icon/Icon.vue';
 import Badge from '../Badge.vue';
 import fuzzysort from 'fuzzysort';
 import { SortableList } from '@/components/sortable/Sortable.js';
-import Scrollbar from "@ui/Combobox/Scrollbar.vue";
 
 const emit = defineEmits(['update:modelValue', 'search', 'selected', 'added']);
 
 const props = defineProps({
-	id: { type: String },
+	/** When `true`, the dropdown will expand to fit longer option labels. */
+	adaptiveWidth: { type: Boolean, default: false },
+	/** The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end` */
+	align: { type: String, default: 'start' },
 	/** When `true`, the selected value will be clearable. */
 	clearable: { type: Boolean, default: false },
 	/** When `true`, the options dropdown will close after selecting an option. */
@@ -35,13 +36,15 @@ const props = defineProps({
 	discreteFocusOutline: { type: Boolean, default: false },
 	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
 	icon: { type: String, default: null },
+	/** ID attribute for the input element */
+	id: { type: String },
 	/** When `true`, the Combobox will avoid filtering options, allowing you to handle filtering yourself by listening to the `search` event and updating the `options` prop. */
 	ignoreFilter: { type: Boolean, default: false },
 	/** When `true`, the option labels will be rendered with `v-html` instead of `v-text`. */
 	labelHtml: { type: Boolean, default: false },
 	/** The maximum number of selectable options. */
 	maxSelections: { type: Number, default: null },
-	/** The controlled value of the select. */
+	/** The controlled value of the combobox. */
 	modelValue: { type: [Object, String, Number], default: null },
 	/** When `true`, multiple options are allowed. */
 	multiple: { type: Boolean, default: false },
@@ -55,11 +58,11 @@ const props = defineProps({
 	readOnly: { type: Boolean, default: false },
 	/** When `true`, the options will be searchable. */
 	searchable: { type: Boolean, default: true },
-	/** Controls the size of the select. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl` */
+	/** Controls the size of the combobox. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl` */
 	size: { type: String, default: 'base' },
 	/** When `true`, additional options can be added by typing in the search input and pressing enter. */
 	taggable: { type: Boolean, default: false },
-	/** Controls the appearance of the select. <br><br> Options: `default`, `filled`, `ghost`, `subtle` */
+	/** Controls the appearance of the combobox. <br><br> Options: `default`, `filled`, `ghost`, `subtle` */
 	variant: { type: String, default: 'default' },
 });
 
@@ -111,9 +114,9 @@ const triggerClasses = cva({
 
 const itemClasses = cva({
     base: [
-        'w-full flex items-center gap-2 relative select-none cursor-pointer text-sm',
+        'w-full flex items-center gap-2 relative select-none cursor-pointer text-sm overflow-hidden',
         'py-1.5 px-2 antialiased rounded-lg',
-        'data-disabled:text-gray-300 data-disabled:pointer-events-none data-highlighted:outline-hidden',
+        'data-disabled:text-gray-300 dark:data-disabled:text-gray-500 data-disabled:pointer-events-none data-highlighted:outline-hidden',
     ],
     variants: {
         size: {
@@ -122,12 +125,27 @@ const itemClasses = cva({
             xs: 'text-xs',
         },
         selected: {
-            false: 'text-gray-900 dark:text-gray-300 data-highlighted:bg-gray-100 data-highlighted:text-gray-900 dark:data-highlighted:bg-gray-700 dark:data-highlighted:text-gray-300',
+            false: 'text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-700',
             true: 'bg-blue-50 dark:bg-blue-600 text-blue-600! dark:text-blue-50!',
         },
     },
 });
 
+const searchQuery = ref('');
+const dropdownOpen = ref(false);
+const rootRef = useTemplateRef('root');
+const triggerRef = useTemplateRef('trigger');
+const viewportRef = useTemplateRef('viewport');
+const searchInputRef = useTemplateRef('search');
+
+watch(searchQuery, (value) => emit('search', value, () => {}));
+watch(dropdownOpen, () => searchQuery.value = '');
+
+const getOptionLabel = (option) => option?.[props.optionLabel];
+const getOptionValue = (option) => option?.[props.optionValue];
+const isSelected = (option) => selectedOptions.value.some((item) => getOptionValue(item) === getOptionValue(option));
+const isDisabled = (option) => !isSelected(option) && props.multiple && limitReached.value;
+
 const selectedOptions = computed(() => {
     let selections = props.modelValue === null ? [] : props.modelValue;
 
@@ -148,17 +166,6 @@ const selectedOption = computed(() => {
     return selectedOptions.value[0];
 });
 
-const getOptionLabel = (option) => option?.[props.optionLabel];
-const getOptionValue = (option) => option?.[props.optionValue];
-const isSelected = (option) => selectedOptions.value.some((item) => getOptionValue(item) === getOptionValue(option));
-
-const isOptionDisabled = (option) => {
-    if (isSelected(option)) return false;
-    if (props.multiple && limitReached.value) return true;
-
-    return false;
-};
-
 const limitReached = computed(() => {
     if (! props.maxSelections) return false;
 
@@ -181,14 +188,27 @@ const limitIndicatorColor = computed(() => {
     return 'text-gray';
 });
 
-const triggerRef = useTemplateRef('trigger');
-const viewportRef = useTemplateRef('viewport');
-const scrollbarRef = useTemplateRef('scrollbar');
-const searchQuery = ref('');
-const searchInputRef = useTemplateRef('search');
+const canClearSelection = computed(() => props.clearable && props.modelValue);
+const shouldCloseOnSelect = computed(() => props.closeOnSelect || !props.multiple);
+const shouldShowOptionsChevron = computed(() => props.options.length > 0 || props.ignoreFilter);
+const shouldShowLimitIndicator = computed(() => props.multiple && props.maxSelections && props.maxSelections !== Infinity);
+
+const shouldShowInput = computed(() => {
+	if (!props.searchable) return false;
+
+	return dropdownOpen.value || !props.modelValue || (props.multiple && props.placeholder);
+});
+
+const placeholder = computed(() => {
+	if (props.multiple && selectedOptions.value.length > 0) {
+		return __n(':count item selected|:count items selected', selectedOptions.value.length);
+	}
+
+	if (selectedOption.value) {
+		return getOptionLabel(selectedOption.value);
+	}
 
-watch(searchQuery, (value) => {
-    emit('search', value, () => {});
+	return props.placeholder;
 });
 
 const filteredOptions = computed(() => {
@@ -213,140 +233,108 @@ const filteredOptions = computed(() => {
     return results;
 });
 
-watch(filteredOptions, () => {
-	nextTick(() => scrollbarRef.value?.update());
-});
-
 function clear() {
     searchQuery.value = '';
     emit('update:modelValue', null);
 }
 
+function select(option) {
+	dropdownOpen.value = !shouldCloseOnSelect.value;
+	if (shouldCloseOnSelect.value) triggerRef.value.$el.focus();
+}
+
 function deselect(option) {
     emit('update:modelValue', props.modelValue.filter((item) => item !== option));
 }
 
-const dropdownOpen = ref(false);
-const virtualizerReady = ref(false);
-const closeOnSelect = computed(() => props.closeOnSelect || !props.multiple);
-const optionWidth = ref(null);
-
-function updateDropdownOpen(open) {
-    if (props.disabled) return;
+function updateModelValue(value) {
+	let originalValue = props.modelValue || [];
 
-    // Prevent dropdown from opening when it's a taggable combobox with no options.
-    if (props.taggable && props.options.length === 0) {
-        return;
-    }
+	searchQuery.value = '';
+	emit('update:modelValue', value);
 
-    dropdownOpen.value = open;
+	if (!Array.isArray(value)) value = [value];
+	if (!Array.isArray(originalValue)) originalValue = [originalValue];
 
-    if (!open) {
-        virtualizerReady.value = false;
-    }
-
-    if (open) {
-        nextTick(() => {
-            measureOptionWidths();
-	        scrollbarRef.value?.update();
-            virtualizerReady.value = true;
-        });
-    }
+	value
+		.filter((option) => !originalValue?.includes(option))
+		.forEach((option) => emit('selected', option));
 }
 
-function measureOptionWidths() {
-    if (!filteredOptions.value || filteredOptions.value.length === 0) return;
-
-    // Find the options with the longest labels by character count.
-    // We only measure these candidates rather than all options for performance.
-    const candidates = [...filteredOptions.value]
-        .sort((a, b) => (getOptionLabel(b)?.length || 0) - (getOptionLabel(a)?.length || 0))
-        .slice(0, 5);
-
-    let maxWidth = 0;
-    const measurementCanvas = document.createElement('canvas');
-    const context = measurementCanvas.getContext('2d');
-
-    // Get computed font from a rendered item or use a reasonable default
-    // This matches the itemClasses styling
-    context.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-
-    candidates.forEach(option => {
-        const label = getOptionLabel(option);
-        const metrics = context.measureText(label);
-        const textWidth = metrics.width;
-
-        // Add padding and icon space
-        // py-1.5 px-2 = 0.375rem top/bottom, 0.5rem left/right = 8px left/right = 16px total
-        // gap-2 = 0.5rem = 8px for icon/text gap
-        // icon size-4 = 1rem = 16px
-        let totalWidth = textWidth + 32; // Base padding
+function updateDropdownOpen(open) {
+    if (props.disabled || props.readOnly) return;
+	if (props.taggable && props.options.length === 0) return;
 
-        if (option.image) totalWidth += 20; // icon (20px) + gap (8px)
-        if (totalWidth > maxWidth) maxWidth = totalWidth;
-    });
+    dropdownOpen.value = open;
 
-    // Add ComboboxContent padding (p-2 = 0.5rem * 2 = 16px on each side = 32px total)
-    optionWidth.value = Math.ceil(maxWidth + 32);
+    if (open) {
+	    nextTick(() => searchInputRef?.value?.$el?.focus());
+        requestAnimationFrame(() => requestAnimationFrame(() => scrollToSelectedOption()));
+    }
 }
 
-function updateModelValue(value) {
-    let originalValue = props.modelValue || [];
-
-    searchQuery.value = '';
-    emit('update:modelValue', value);
-
-    if (!Array.isArray(value)) value = [value];
-    if (!Array.isArray(originalValue)) originalValue = [originalValue];
+function openDropdown(e) {
+	if (dropdownOpen.value) return;
+	if (typeof e.preventDefault === 'function') e.preventDefault();
 
-    value
-        .filter((option) => !originalValue?.includes(option))
-        .forEach((option) => emit('selected', option));
+	updateDropdownOpen(true);
 }
 
 function onPaste(e) {
-    if (!props.taggable) {
-        return;
-    }
+	if (!props.taggable) return;
 
     const pastedValue = e.clipboardData.getData('text');
 
     updateModelValue([...props.modelValue, ...pastedValue.split(',').map((v) => v.trim())]);
 }
 
-// When it's a taggable combobox with no options, we need to push the value here as updateModelValue won't be called.
 function pushTaggableOption(e) {
-    if (props.taggable && props.options.length === 0) {
-        if (e.target.value === '') return;
+	if (!props.taggable || !props.options.length) return;
+	if (e.target.value === '') return;
 
-        if (props.modelValue.includes(e.target.value)) {
-            searchQuery.value = '';
-            return;
-        }
+	e.preventDefault();
 
-        emit('added', e.target.value);
+	if (props.modelValue.includes(e.target.value)) {
+		searchQuery.value = '';
+		return;
+	}
 
-        updateModelValue([...props.modelValue, e.target.value]);
-    }
+	emit('added', e.target.value);
+
+	updateModelValue([...props.modelValue, e.target.value]);
 }
 
-function openDropdown(e) {
-    if (dropdownOpen.value) return;
-    if (typeof e.preventDefault === 'function') e.preventDefault();
+async function scrollToSelectedOption() {
+	if (props.multiple || !props.modelValue) return;
+
+	await rootRef.value?.highlightSelected?.();
 
-    updateDropdownOpen(true);
+	const index = filteredOptions.value.findIndex(
+		(option) => getOptionValue(option) === props.modelValue
+	);
 
-    nextTick(() => searchInputRef?.value?.$el?.focus());
+	if (index >= 0 && viewportRef.value) {
+		const estimatedItemHeight = 40;
+		const viewportHeight = viewportRef.value.clientHeight;
+		const itemPosition = index * estimatedItemHeight;
+		const centeredPosition = itemPosition - (viewportHeight / 2) + (estimatedItemHeight / 2);
+
+		requestAnimationFrame(() => {
+			viewportRef.value.scrollTop = Math.max(0, centeredPosition);
+		});
+	}
 }
 
-function selectOption(option) {
-    dropdownOpen.value = !closeOnSelect.value;
-    if (closeOnSelect.value) triggerRef.value.$el.focus();
+function focus() {
+	shouldShowInput.value
+		? nextTick(() => searchInputRef.value?.$el.focus())
+		: nextTick(() => triggerRef.value?.$el.focus());
 }
 
 defineExpose({
     searchQuery,
     filteredOptions,
+	focus,
 });
 </script>
 
@@ -354,166 +342,167 @@ defineExpose({
     <div :class="wrapperClasses" v-bind="wrapperAttrs">
         <div class="flex w-full min-w-0">
             <ComboboxRoot
+                ref="root"
+	            class="cursor-pointer flex-1 min-w-0"
+	            :multiple
+	            :open="dropdownOpen"
+	            :model-value="modelValue"
+                :by="(option, value) => getOptionValue(option) === value"
                 :disabled="disabled || readOnly"
-                :model-value="modelValue"
-                :multiple
-                :open="dropdownOpen"
                 :reset-search-term-on-blur="false"
                 :reset-search-term-on-select="false"
-                @update:model-value="updateModelValue"
-                @update:open="updateDropdownOpen"
-                class="cursor-pointer flex-1 min-w-0"
                 data-ui-combobox
                 ignore-filter
+	            @update:open="updateDropdownOpen"
+	            @update:model-value="updateModelValue"
             >
                 <ComboboxAnchor class="block w-full" data-ui-combobox-anchor>
                     <ComboboxTrigger
                         as="div"
                         ref="trigger"
+                        :tabindex="disabled || readOnly ? -1 : 0"
                         :class="triggerClasses"
+                        data-ui-combobox-trigger
                         @keydown.enter="openDropdown"
                         @keydown.space="openDropdown"
-                        data-ui-combobox-trigger
                     >
                         <div class="flex-1 min-w-0">
-                            <!-- Dropdown open: search input -->
                             <ComboboxInput
-                                v-if="searchable && (dropdownOpen || !modelValue || (multiple && placeholder))"
+                                v-if="shouldShowInput"
+                                :id
+                                :placeholder
                                 ref="search"
-                                class="w-full bg-transparent text-gray-900 dark:text-gray-300 opacity-100 focus:outline-none placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:hidden"
+                                class="w-full bg-transparent text-gray-900 dark:text-gray-300 opacity-100 focus:outline-none placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:hidden cursor-pointer"
                                 type="search"
-                                :id="id"
-                                v-model="searchQuery"
-                                :placeholder
                                 autocomplete="off"
+                                v-model="searchQuery"
                                 @paste.prevent="onPaste"
-                                @keydown.enter.prevent="pushTaggableOption"
-                                @blur="pushTaggableOption"
-                                @keydown.space="openDropdown"
+                                @blur.prevent="pushTaggableOption"
+                                @keydown.enter="pushTaggableOption"
                             />
 
-                            <!-- Dropdown open: placeholder -->
                             <div
-                                v-else-if="!searchable && (dropdownOpen || !modelValue)"
-                                class="w-full text-start flex items-center gap-2 bg-transparent cursor-pointer focus:outline-none"
-                                data-ui-combobox-placeholder
-                            >
-                                <Icon v-if="icon" :name="icon" class="text-gray-500 dark:text-white dark:opacity-50" />
-                                <span class="block truncate text-gray-500 dark:text-gray-400 select-none" v-text="placeholder" />
-                            </div>
-
-                            <!-- Dropdown closed: selected option -->
-                            <div
-                                v-else
-                                class="w-full text-start bg-transparent flex items-center gap-2 cursor-pointer focus:outline-none"
-                                data-ui-combobox-selected-option
+	                            v-else
+	                            class="w-full text-start bg-transparent flex items-center gap-2 cursor-pointer focus:outline-none select-none"
+	                            data-ui-combobox-selected-option
                             >
                                 <slot v-if="selectedOption" name="selected-option" v-bind="{ option: selectedOption }">
                                     <div v-if="icon" class="size-4">
-                                        <Icon :name="icon" class="text-white/85 dark:text-white dark:opacity-50" />
+                                        <Icon :name="icon" class="text-gray-900 dark:text-white dark:opacity-50" />
                                     </div>
                                     <span v-if="labelHtml" v-html="getOptionLabel(selectedOption)" class="block truncate" />
                                     <span v-else v-text="getOptionLabel(selectedOption)" class="block truncate" />
                                 </slot>
+                                <span v-else class="block truncate text-gray-500 dark:text-gray-400" v-text="placeholder" />
                             </div>
                         </div>
 
-                        <div v-if="(clearable && modelValue) || (options.length || ignoreFilter)" class="flex gap-1.5 items-center ms-1.5 -me-1">
-                            <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" data-ui-combobox-clear-button />
-                            <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40 size-4" data-ui-combobox-chevron />
+                        <div v-if="canClearSelection || shouldShowOptionsChevron" class="flex gap-1.5 items-center ms-1.5 -me-1">
+                            <Button
+	                            v-if="canClearSelection"
+	                            icon="x"
+	                            variant="ghost"
+	                            size="xs"
+	                            round
+	                            :disabled="disabled || readOnly"
+	                            :aria-label="__('Clear selection')"
+	                            data-ui-combobox-clear-button
+	                            @click="clear"
+                            />
+                            <Icon
+	                            v-if="shouldShowOptionsChevron"
+	                            name="chevron-down"
+	                            class="text-gray-400 dark:text-white/40 size-4"
+	                            aria-hidden="true"
+	                            data-ui-combobox-chevron
+                            />
                         </div>
                     </ComboboxTrigger>
                 </ComboboxAnchor>
 
                 <ComboboxPortal>
                     <ComboboxContent
-                        :hidden="!dropdownOpen"
+	                    :align
+	                    :side-offset="5"
                         position="popper"
-                        :side-offset="5"
-                        align="start"
                         :class="[
-                            'shadow-ui-sm z-(-well-z-index-above) rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
-                            'max-h-[var(--reka-combobox-content-available-height)] min-w-[var(--reka-combobox-trigger-width)]',
-                            'overflow-hidden'
+                            'shadow-ui-sm z-(-well-z-index-above) rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800',
+                            'max-h-[var(--reka-combobox-content-available-height)] min-w-[var(--reka-combobox-trigger-width)] overflow-hidden',
+                            adaptiveWidth && 'w-max max-w-md',
                         ]"
-                        :style="optionWidth ? { width: `${optionWidth}px` } : {}"
                         data-ui-combobox-content
-                        @escape-key-down="nextTick(() => $refs.trigger.$el.focus())"
+                        @escape-key-down="focus"
                     >
                         <FocusScope
                             :trapped="!searchable"
                             @mount-auto-focus.prevent
                             @unmount-auto-focus="(event) => {
                                 if (event.defaultPrevented) return;
-                                nextTick(() => $refs.trigger?.$el?.focus());
+                                focus();
                                 event.preventDefault();
                             }"
                         >
-                            <div class="relative">
-                                <ComboboxViewport
-                                    ref="viewport"
-                                    class="max-h-[calc(var(--reka-combobox-content-available-height)-2rem)] overflow-y-scroll"
-                                    :class="{
-										'min-h-[2.25px]': filteredOptions.length === 0,
-										'min-h-[2.5rem]': filteredOptions.length === 1,
-										'min-h-[5rem]': filteredOptions.length === 2,
-										'min-h-[7.5rem]': filteredOptions.length >= 3,
-                                        'pr-3': scrollbarRef?.isVisible,
-                                    }"
-                                    data-ui-combobox-viewport
-                                >
-                                    <ComboboxEmpty class="p-2 text-sm" data-ui-combobox-empty>
+                            <div ref="viewport" class="relative max-h-[300px] overflow-y-auto py-2" data-ui-combobox-viewport>
+                                <!-- Hidden width measurer for wide dropdown mode -->
+                                <div v-if="adaptiveWidth" aria-hidden="true" class="h-0 overflow-y-clip px-2">
+                                    <div v-for="option in filteredOptions" :key="getOptionValue(option)" class="py-1.5 px-2 text-sm whitespace-nowrap">
+                                        {{ getOptionLabel(option) }}
+                                    </div>
+                                </div>
+
+                                <ComboboxEmpty class="py-1 px-4 text-sm" role="status" aria-live="polite" data-ui-combobox-empty>
                                     <slot name="no-options" v-bind="{ searchQuery }">
                                         {{ __('No options available.') }}
                                     </slot>
                                 </ComboboxEmpty>
 
                                 <ComboboxVirtualizer
-                                    v-if="virtualizerReady && filteredOptions.length"
-                                    v-slot="{ option, virtualItem }"
-                                    :options="filteredOptions"
+                                    v-if="filteredOptions.length"
+                                    :key="JSON.stringify(modelValue)"
                                     :estimate-size="40"
+                                    :options="filteredOptions"
                                     :text-content="(opt) => getOptionLabel(opt)"
+                                    v-slot="{ option }"
                                 >
-                                    <div class="py-1 w-full overflow-x-hidden">
+                                    <div class="py-1 px-2 w-full overflow-x-hidden">
                                         <ComboboxItem
-                                            :key="virtualItem.index + JSON.stringify(modelValue)"
+	                                        as="button"
                                             :value="getOptionValue(option)"
                                             :text-value="getOptionLabel(option)"
-                                            :disabled="isOptionDisabled(option)"
+                                            :disabled="isDisabled(option)"
                                             :class="itemClasses({ size: size, selected: isSelected(option) })"
-                                            as="button"
                                             :data-ui-combobox-item="getOptionValue(option)"
-                                            @select="selectOption(option)"
+	                                        :title="getOptionLabel(option)"
+                                            @select="select(option)"
                                         >
                                             <slot name="option" v-bind="option">
-                                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
-                                                <span v-if="labelHtml" v-html="getOptionLabel(option)" />
-                                                <span v-else>{{ __(getOptionLabel(option)) }}</span>
+                                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" :alt="getOptionLabel(option)">
+                                                <span v-if="labelHtml" class="truncate" v-html="getOptionLabel(option)" />
+                                                <span class="truncate" v-else>{{ __(getOptionLabel(option)) }}</span>
                                             </slot>
                                         </ComboboxItem>
                                     </div>
                                 </ComboboxVirtualizer>
-                            </ComboboxViewport>
-
-	                        <!--
-	                            Custom Scrollbar
-	                            (we can't use the browser's scrollbar here because of virtualization, so we need to create our own).
-	                        -->
-	                       <Scrollbar ref="scrollbar" :viewport="viewportRef" />
-                        </div>
+                            </div>
                         </FocusScope>
                     </ComboboxContent>
                 </ComboboxPortal>
             </ComboboxRoot>
 
-            <div v-if="maxSelections && maxSelections !== Infinity && multiple" class="ms-2 mt-3 text-xs" :class="limitIndicatorColor" data-ui-combobox-limit-indicator>
+            <div
+	            v-if="shouldShowLimitIndicator"
+	            class="ms-2 mt-3 text-xs"
+	            :class="limitIndicatorColor"
+	            :aria-label="__(':count of :max selections', { count: selectedOptions.length, max: maxSelections })"
+	            aria-live="polite"
+	            data-ui-combobox-limit-indicator
+            >
                 <span v-text="selectedOptions.length"></span>/<span v-text="maxSelections"></span>
             </div>
         </div>
 
         <slot name="selected-options" v-bind="{ disabled, readOnly, getOptionLabel, getOptionValue, labelHtml, deselect }">
-            <sortable-list
+            <SortableList
                 v-if="multiple"
                 data-ui-combobox-selected-options
                 item-class="sortable-item"
@@ -528,7 +517,7 @@ defineExpose({
                     <div
                         v-for="option in selectedOptions"
                         :key="getOptionValue(option)"
-                        class="sortable-item mt-2"
+                        class="sortable-item mt-2 cursor-grab active:cursor-grabbing"
                     >
                         <Badge pill size="lg" class="[&>*]:st-text-trim-ex-alphabetic">
                             <div v-if="labelHtml" v-html="getOptionLabel(option)"></div>
@@ -538,18 +527,18 @@ defineExpose({
                                 v-if="!disabled && !readOnly"
                                 type="button"
                                 class="opacity-75 hover:opacity-100 cursor-pointer"
-                                :aria-label="__('Deselect option')"
+                                :aria-label="__('Remove :label', { label: getOptionLabel(option) })"
                                 @click="deselect(option.value)"
                             >
                                 &times;
                             </button>
-                            <button v-else type="button" class="opacity-75">
+                            <span v-else class="opacity-75" aria-hidden="true">
                                 &times;
-                            </button>
+                            </span>
                         </Badge>
                     </div>
                 </div>
-            </sortable-list>
+            </SortableList>
         </slot>
     </div>
 </template>
diff --git a/resources/js/components/ui/Combobox/Scrollbar.vue b/resources/js/components/ui/Combobox/Scrollbar.vue
deleted file mode 100644
index a568c91f69e..00000000000
--- a/resources/js/components/ui/Combobox/Scrollbar.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<script setup>
-import { ref, watch, onUnmounted, nextTick } from 'vue';
-
-const props = defineProps({
-	viewport: { type: Object, default: null },
-});
-
-const isVisible = ref(false);
-const thumbHeight = ref(0);
-const thumbTop = ref(0);
-const isDragging = ref(false);
-
-let resizeObserver = null;
-
-function update() {
-	const element = props.viewport?.$el || props.viewport;
-	if (!element) return;
-
-	const scrollHeight = element.scrollHeight;
-	const clientHeight = element.clientHeight;
-	const scrollTop = element.scrollTop;
-
-	isVisible.value = scrollHeight > clientHeight;
-
-	if (isVisible.value) {
-		// Calculate thumb height as a percentage of visible area
-		const thumbHeightPercent = (clientHeight / scrollHeight) * 100;
-		thumbHeight.value = Math.max(thumbHeightPercent, 10); // Minimum 10%
-
-		// Calculate thumb position
-		const maxScroll = scrollHeight - clientHeight;
-		const scrollPercent = maxScroll > 0 ? scrollTop / maxScroll : 0;
-		const maxThumbTop = 100 - thumbHeight.value;
-		thumbTop.value = scrollPercent * maxThumbTop;
-	}
-}
-
-function handleMouseDown(event) {
-	event.preventDefault();
-	isDragging.value = true;
-	
-	document.addEventListener('mousemove', handleMouseMove);
-	document.addEventListener('mouseup', handleMouseUp);
-}
-
-function handleMouseMove(event) {
-	if (!isDragging.value) return;
-	
-	const element = props.viewport?.$el || props.viewport;
-	if (!element) return;
-	
-	const scrollbarTrack = element.parentElement.querySelector('.absolute.top-0.right-0');
-	if (!scrollbarTrack) return;
-	
-	const trackRect = scrollbarTrack.getBoundingClientRect();
-	const mouseY = event.clientY - trackRect.top;
-	const trackHeight = trackRect.height;
-	
-	// Calculate scroll position based on mouse position
-	const scrollPercent = Math.max(0, Math.min(1, mouseY / trackHeight));
-	const maxScroll = element.scrollHeight - element.clientHeight;
-	
-	element.scrollTop = scrollPercent * maxScroll;
-}
-
-function handleMouseUp() {
-	isDragging.value = false;
-	document.removeEventListener('mousemove', handleMouseMove);
-	document.removeEventListener('mouseup', handleMouseUp);
-}
-
-watch(
-	() => props.viewport,
-	(viewport, oldViewport) => {
-		const oldElement = oldViewport?.$el || oldViewport;
-
-		if (oldElement) {
-			oldElement.removeEventListener('scroll', update);
-			resizeObserver?.disconnect();
-		}
-
-		if (viewport) {
-			const element = viewport.$el || viewport;
-			if (element) {
-				element.addEventListener('scroll', update);
-
-				resizeObserver = new ResizeObserver(() => update());
-				resizeObserver.observe(element);
-
-				nextTick(() => update());
-			}
-		}
-	},
-	{ immediate: true }
-);
-
-onUnmounted(() => {
-	const element = props.viewport?.$el || props.viewport;
-
-	if (element) {
-		element.removeEventListener('scroll', update);
-	}
-	
-	resizeObserver?.disconnect();
-	
-	document.removeEventListener('mousemove', handleMouseMove);
-	document.removeEventListener('mouseup', handleMouseUp);
-});
-
-defineExpose({
-	update,
-	isVisible,
-});
-</script>
-
-<template>
-	<div v-if="isVisible" class="absolute top-0 right-0 w-[6px] py-1 px-0.5 h-full pointer-events-none">
-		<div
-			class="absolute right-0 w-1.5 rounded-md bg-black/25 hover:bg-black/40 dark:bg-white/25 dark:hover:bg-white/40 transition-colors pointer-events-auto cursor-pointer"
-			:class="{ 'bg-black/40 dark:bg-white/40': isDragging }"
-			:style="{
-                height: `${thumbHeight}%`,
-                top: `${thumbTop}%`
-            }"
-			@mousedown="handleMouseDown"
-		/>
-	</div>
-</template>
\ No newline at end of file
diff --git a/resources/js/components/ui/Select/Select.vue b/resources/js/components/ui/Select/Select.vue
index e5c5b2c5875..f3fd3b88e4b 100644
--- a/resources/js/components/ui/Select/Select.vue
+++ b/resources/js/components/ui/Select/Select.vue
@@ -5,24 +5,29 @@ import Combobox from '../Combobox/Combobox.vue';
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
-    clearable: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
-    icon: { type: String, default: null },
-    /** The controlled value of the select. */
-    modelValue: { type: [Object, String, Number], default: null },
-    /** Key of the option's label in the option's object. */
-    optionLabel: { type: String, default: 'label' },
-    /** Array of option objects */
-    options: { type: Array, default: null },
-    /** Key of the option's value in the option's object. */
-    optionValue: { type: String, default: 'value' },
-    placeholder: { type: String, default: () => __('Select...') },
-    readOnly: { type: Boolean, default: false },
-    /** Controls the size of the select. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl` */
-    size: { type: String, default: 'base' },
-    /** Controls the appearance of the select. <br><br> Options: `default`, `filled`, `ghost`, `subtle` */
-    variant: { type: String, default: 'default' },
+	/** When `true`, the dropdown will expand to fit longer option labels. */
+	adaptiveWidth: { type: Boolean, default: false },
+	/** The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end` */
+	align: { type: String, default: 'start' },
+	/** When `true`, the selected value will be clearable. */
+	clearable: { type: Boolean, default: false },
+	disabled: { type: Boolean, default: false },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+	icon: { type: String, default: null },
+	/** The controlled value of the select. */
+	modelValue: { type: [Object, String, Number], default: null },
+	/** Key of the option's label in the option's object. */
+	optionLabel: { type: String, default: 'label' },
+	/** Array of option objects */
+	options: { type: Array, default: null },
+	/** Key of the option's value in the option's object. */
+	optionValue: { type: String, default: 'value' },
+	placeholder: { type: String, default: () => __('Select...') },
+	readOnly: { type: Boolean, default: false },
+	/** Controls the size of the select. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl` */
+	size: { type: String, default: 'base' },
+	/** Controls the appearance of the select. <br><br> Options: `default`, `filled`, `ghost`, `subtle` */
+	variant: { type: String, default: 'default' },
 });
 
 defineOptions({
@@ -52,6 +57,8 @@ const usingOptionSlot = !!slots['option'];
         :searchable="false"
         :size
         :variant
+        :align
+        :adaptive-width
         @update:modelValue="emit('update:modelValue', $event)"
     >
         <template #selected-option="{ option }" v-if="usingSelectedOptionSlot">
diff --git a/resources/js/stories/Combobox.stories.ts b/resources/js/stories/Combobox.stories.ts
new file mode 100644
index 00000000000..013e7cc9225
--- /dev/null
+++ b/resources/js/stories/Combobox.stories.ts
@@ -0,0 +1,991 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {expect, fn, userEvent, within} from 'storybook/test';
+import {Combobox} from '@ui';
+import {ref} from 'vue';
+import {icons} from "@/stories/icons";
+
+const meta = {
+    title: 'Forms/Combobox',
+    component: Combobox,
+    argTypes: {
+        icon: {
+            control: 'select',
+            options: icons,
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'base', 'lg', 'xl'],
+        },
+        variant: {
+            control: 'select',
+            options: ['default', 'filled', 'ghost', 'subtle'],
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the selected option changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string | string[]) => void' },
+            },
+        },
+        search: {
+            description: 'Event handler called when the search query changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(query: string) => void' },
+            },
+        },
+        selected: {
+            description: 'Event handler called when an option is selected.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' },
+            },
+        },
+        added: {
+            description: 'Event handler called when a taggable option is added.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' },
+            },
+        },
+    },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            const options = [
+                { label: 'The Midnight', value: 'the_midnight' },
+                { label: 'The 1975', value: 'the_1975' },
+                { label: 'Sunglasses Kid', value: 'sunglasses_kid' },
+                { label: 'FM-84', value: 'fm_84' },
+                { label: 'Timecop1983', value: 'timecop1983' },
+            ];
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                placeholder="Select a band..."
+                :options="options"
+            />
+        `,
+    }),
+};
+
+const defaultOptions = [
+    { label: 'The Midnight', value: 'the_midnight' },
+    { label: 'The 1975', value: 'the_1975' },
+    { label: 'Sunglasses Kid', value: 'sunglasses_kid' },
+    { label: 'FM-84', value: 'fm_84' },
+    { label: 'Timecop1983', value: 'timecop1983' },
+];
+
+const defaultCode = `
+<Combobox
+    placeholder="Select a band..."
+    :options="[
+        { label: 'The Midnight', value: 'the_midnight' },
+        { label: 'The 1975', value: 'the_1975' },
+        { label: 'Sunglasses Kid', value: 'sunglasses_kid' },
+        { label: 'FM-84', value: 'fm_84' },
+        { label: 'Timecop1983', value: 'timecop1983' },
+    ]"
+/>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                placeholder="Select a band..."
+                :options="options"
+            />
+        `,
+    }),
+};
+
+const sizesCode = `
+<Combobox size="xs" placeholder="Extra Small" :options="options" />
+<Combobox size="sm" placeholder="Small" :options="options" />
+<Combobox size="base" placeholder="Base" :options="options" />
+<Combobox size="lg" placeholder="Large" :options="options" />
+<Combobox size="xl" placeholder="Extra Large" :options="options" />
+`;
+
+export const _Sizes: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: sizesCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const options = defaultOptions;
+            return { options };
+        },
+        template: `<div class="flex flex-col gap-4">${sizesCode}</div>`,
+    }),
+};
+
+const variantsCode = `
+<Combobox variant="default" placeholder="Default" :options="options" />
+<Combobox variant="filled" placeholder="Filled" :options="options" />
+<Combobox variant="ghost" placeholder="Ghost" :options="options" />
+<Combobox variant="subtle" placeholder="Subtle" :options="options" />
+`;
+
+export const _Variants: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: variantsCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const options = defaultOptions;
+            return { options };
+        },
+        template: `<div class="flex flex-col gap-4">${variantsCode}</div>`,
+    }),
+};
+
+const clearableCode = `
+<Combobox clearable placeholder="Select a band..." :options="options" />
+`;
+
+export const _Clearable: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: clearableCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref('the_midnight');
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                clearable
+                placeholder="Select a band..."
+                :options="options"
+            />
+        `,
+    }),
+};
+
+const multipleCode = `
+<Combobox multiple placeholder="Select bands..." :options="options" />
+`;
+
+export const _Multiple: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: multipleCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(['the_midnight', 'fm_84']);
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                :multiple="true"
+                placeholder="Select bands..."
+                :options="options"
+            />
+        `,
+    }),
+};
+
+const maxSelectionsCode = `
+<Combobox
+    multiple
+    :max-selections="3"
+    placeholder="Select up to 3 bands..."
+    :options="options"
+/>
+`;
+
+export const _MaxSelections: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: maxSelectionsCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(['the_midnight', 'fm_84']);
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                :multiple="true"
+                :max-selections="3"
+                placeholder="Select up to 3 bands..."
+                :options="options"
+            />
+        `,
+    }),
+};
+
+const taggableCode = `
+<Combobox
+    multiple
+    taggable
+    placeholder="Add tags..."
+    :options="options"
+/>
+`;
+
+export const _Taggable: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: taggableCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(['the_midnight']);
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                :multiple="true"
+                :taggable="true"
+                placeholder="Add tags..."
+                :options="options"
+            />
+        `,
+    }),
+};
+
+const searchDisabledCode = `
+<Combobox :searchable="false" placeholder="Select a band..." :options="options" />
+`;
+
+export const _SearchDisabled: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: searchDisabledCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                :searchable="false"
+                placeholder="Select a band..."
+                :options="options"
+            />
+        `,
+    }),
+};
+
+const ignoreFilterCode = `
+<Combobox
+    :ignore-filter="true"
+    placeholder="Server-side filtering..."
+    :options="filteredOptions"
+    @search="onSearch"
+/>
+`;
+
+export const _IgnoreFilter: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: ignoreFilterCode },
+            description: {
+                story: 'When `ignoreFilter` is true, the Combobox will not filter options locally. Use this when you want to handle filtering yourself via the `search` event, such as with server-side filtering.',
+            },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            const allOptions = defaultOptions;
+            const filteredOptions = ref([...allOptions]);
+
+            const onSearch = (query: string) => {
+                if (!query) {
+                    filteredOptions.value = [...allOptions];
+                    return;
+                }
+                filteredOptions.value = allOptions.filter((opt) =>
+                    opt.label.toLowerCase().includes(query.toLowerCase())
+                );
+            };
+
+            return { value, filteredOptions, onSearch };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                :ignore-filter="true"
+                placeholder="Server-side filtering..."
+                :options="filteredOptions"
+                @search="onSearch"
+            />
+        `,
+    }),
+};
+
+const optionSlotsCode = `
+<Combobox 
+    placeholder="Select author..." 
+    :options="[
+        { label: 'Tyler Lyle', image: '/assets/tyler.jpg', value: 'tyler' },
+        { label: 'Tim McEwan', image: '/assets/tim.jpg', value: 'tim' },
+        { label: 'Nikki Flores', image: '/assets/nikki.jpg', value: 'nikki' },
+    ]"
+>
+    <template #selected-option="{ option }">
+        <img :src="option.image" class="size-5 rounded-full" />
+        <span v-text="option.label" />
+	</template>
+    <template #option="{ label, image }">
+        <img :src="image" class="size-5 rounded-full" />
+        <span v-text="label" />
+    </template>
+</Combobox>
+`;
+
+export const _OptionSlots: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: optionSlotsCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref('tyler');
+            const options = [
+                { label: 'Tyler Lyle', image: 'https://i.pravatar.cc/100?u=tyler', value: 'tyler' },
+                { label: 'Tim McEwan', image: 'https://i.pravatar.cc/100?u=tim', value: 'tim' },
+                { label: 'Nikki Flores', image: 'https://i.pravatar.cc/100?u=nikki', value: 'nikki' },
+            ];
+            return { value, options };
+        },
+        template: `
+            <Combobox
+                v-model="value"
+                placeholder="Select author..."
+                :options="options"
+            >
+	            <template #selected-option="{ option }">
+		            <img :src="option.image" class="size-5 rounded-full" />
+		            <span v-text="option.label" />
+	            </template>
+                <template #option="{ label, image }">
+                    <img :src="image" class="size-5 rounded-full" />
+                    <span v-text="label" />
+                </template>
+            </Combobox>
+        `,
+    }),
+};
+
+const adaptiveWidthCode = `
+<Combobox
+    adaptive-width
+    placeholder="Select..."
+    :options="[
+        { label: 'Short', value: 'short' },
+        { label: 'A much longer option label', value: 'long' },
+        { label: 'An extremely long option that demonstrates adaptive width', value: 'very_long' },
+    ]"
+/>
+`;
+
+export const _AdaptiveWidth: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: adaptiveWidthCode },
+        },
+    },
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            const options = [
+                { label: 'Short', value: 'short' },
+                { label: 'A much longer option label', value: 'long' },
+                { label: 'An extremely long option that demonstrates adaptive width', value: 'very_long' },
+            ];
+            return { value, options };
+        },
+        template: `
+            <div class="w-48">
+                <Combobox
+                    v-model="value"
+                    adaptive-width
+                    placeholder="Select..."
+                    :options="options"
+                />
+            </div>
+        `,
+    }),
+};
+
+export const TestTriggerWidth: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const content = document.querySelector('[data-ui-combobox-content]');
+        await expect(content).toBeTruthy();
+        expect(content?.classList.contains('w-max')).toBe(false);
+    },
+};
+
+export const TestAdaptiveWidth: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            const options = [
+                { label: 'A very long option label that should make the dropdown wider', value: 'long' },
+            ];
+            return { value, options };
+        },
+        template: `<div class="w-48"><Combobox v-model="value" :options="options" adaptive-width placeholder="Select..." /></div>`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const content = document.querySelector('[data-ui-combobox-content]');
+        await expect(content).toBeTruthy();
+        expect(content?.classList.contains('w-max')).toBe(true);
+    },
+};
+
+export const TestCanSelectOption: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'] };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." @update:modelValue="onUpdate" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const option = await within(document.body).findByText('The Midnight');
+        await userEvent.click(option);
+
+        expect(args['onUpdate:modelValue']).toHaveBeenCalledWith('the_midnight');
+
+        await new Promise((r) => setTimeout(r, 100));
+        const selectedOption = canvasElement.querySelector('[data-ui-combobox-selected-option]');
+        expect(selectedOption?.textContent).toContain('The Midnight');
+    },
+};
+
+export const TestCanSelectMultipleOptions: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(['the_midnight']);
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'] };
+        },
+        template: `<Combobox v-model="value" :options="options" multiple placeholder="Select..." @update:modelValue="onUpdate" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const option = await within(document.body).findByText('FM-84');
+        await userEvent.click(option);
+
+        await expect(args['onUpdate:modelValue']).toHaveBeenCalled();
+        const lastCall = args['onUpdate:modelValue'].mock.calls[args['onUpdate:modelValue'].mock.calls.length - 1];
+        expect(lastCall[0]).toContain('the_midnight');
+        expect(lastCall[0]).toContain('fm_84');
+
+        const selectedOptions = canvasElement.querySelector('[data-ui-combobox-selected-options]');
+        expect(selectedOptions).toBeTruthy();
+        expect(selectedOptions?.textContent).toContain('The Midnight');
+        expect(selectedOptions?.textContent).toContain('FM-84');
+    },
+};
+
+export const TestDropdownClosesOnSelection: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeTruthy();
+
+        const option = await within(document.body).findByText('The Midnight');
+        await userEvent.click(option);
+
+        await new Promise((r) => setTimeout(r, 100));
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeFalsy();
+    },
+};
+
+export const TestCanClearSelection: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref('the_midnight');
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'] };
+        },
+        template: `<Combobox v-model="value" :options="options" clearable placeholder="Select..." @update:modelValue="onUpdate" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        const clearButton = canvas.getByRole('button', { name: /clear/i });
+
+        await userEvent.click(clearButton);
+
+        expect(args['onUpdate:modelValue']).toHaveBeenCalledWith(null);
+    },
+};
+
+export const TestMaxSelectionsLimit: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(['the_midnight', 'the_1975']);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" multiple :max-selections="2" :close-on-select="false" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const disabledOption = document.querySelector('[data-ui-combobox-item="sunglasses_kid"]');
+        expect(disabledOption?.hasAttribute('data-disabled')).toBe(true);
+
+        // Deselect one option by clicking it
+        const selectedOption = document.querySelector('[data-ui-combobox-item="the_midnight"]');
+        await userEvent.click(selectedOption!);
+        await new Promise((r) => setTimeout(r, 100));
+
+        // Reopen dropdown to check state
+        await userEvent.click(trigger);
+        await new Promise((r) => setTimeout(r, 100));
+
+        const nowEnabledOption = document.querySelector('[data-ui-combobox-item="sunglasses_kid"]');
+        expect(nowEnabledOption).toBeTruthy();
+        expect(nowEnabledOption!.hasAttribute('data-disabled')).toBe(false);
+    },
+};
+
+export const TestCanDeselectOptions: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(['the_midnight', 'fm_84']);
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'] };
+        },
+        template: `<Combobox v-model="value" :options="options" multiple placeholder="Select..." @update:modelValue="onUpdate" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        const removeButtons = canvas.getAllByRole('button', { name: /remove/i });
+
+        await userEvent.click(removeButtons[0]);
+
+        await expect(args['onUpdate:modelValue']).toHaveBeenCalled();
+
+        const lastCall = args['onUpdate:modelValue'].mock.calls[args['onUpdate:modelValue'].mock.calls.length - 1];
+        expect(lastCall[0]).toContain('fm_84');
+        expect(lastCall[0]).not.toContain('the_midnight');
+    },
+};
+
+export const TestCanSearchOptions: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const input = document.querySelector('input[type="search"]') as HTMLInputElement;
+        await userEvent.type(input, 'midnight');
+
+        await new Promise((r) => setTimeout(r, 100));
+
+        const options = document.querySelectorAll('[data-ui-combobox-item]');
+        expect(options.length).toBe(1);
+        expect(options[0].getAttribute('data-ui-combobox-item')).toBe('the_midnight');
+    },
+};
+
+export const TestSearchDisabledWhenNotSearchable: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref('the_midnight');
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" :searchable="false" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const input = canvasElement.querySelector('input[type="search"]');
+        expect(input).toBeFalsy();
+    },
+};
+
+export const TestIgnoreFilterDoesNotFilter: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" ignore-filter placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const input = document.querySelector('input[type="search"]') as HTMLInputElement;
+        await userEvent.type(input, 'xyz');
+
+        await new Promise((r) => setTimeout(r, 100));
+
+        const options = document.querySelectorAll('[data-ui-combobox-item]');
+        expect(options.length).toBe(5);
+    },
+};
+
+export const TestTaggableCanAddOptions: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+        onAdded: fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref<string[]>([]);
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'], onAdded: args.onAdded };
+        },
+        template: `<Combobox v-model="value" :options="options" multiple taggable placeholder="Add tags..." @update:modelValue="onUpdate" @added="onAdded" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const input = document.querySelector('input[type="search"]') as HTMLInputElement;
+        await userEvent.click(input);
+        await userEvent.type(input, 'new-tag');
+        await userEvent.keyboard('{Enter}');
+
+        await expect(args['onUpdate:modelValue']).toHaveBeenCalled();
+        expect(args.onAdded).toHaveBeenCalledWith('new-tag');
+    },
+};
+
+export const TestDropdownOpensOnSpace: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        trigger.focus();
+        await userEvent.keyboard(' ');
+
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeTruthy();
+    },
+};
+
+export const TestDropdownOpensOnEnter: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        trigger.focus();
+        await userEvent.keyboard('{Enter}');
+
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeTruthy();
+    },
+};
+
+export const TestDropdownClosesOnEscape: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(null);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeTruthy();
+
+        await userEvent.keyboard('{Escape}');
+
+        await new Promise((r) => setTimeout(r, 100));
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeFalsy();
+    },
+};
+
+const manyOptions = [
+    { label: 'Option 1', value: 'option_1' },
+    { label: 'Option 2', value: 'option_2' },
+    { label: 'Option 3', value: 'option_3' },
+    { label: 'Option 4', value: 'option_4' },
+    { label: 'Option 5', value: 'option_5' },
+    { label: 'Option 6', value: 'option_6' },
+    { label: 'Option 7', value: 'option_7' },
+    { label: 'Option 8', value: 'option_8' },
+    { label: 'Option 9', value: 'option_9' },
+    { label: 'Option 10', value: 'option_10' },
+    { label: 'Option 11', value: 'option_11' },
+    { label: 'Option 12', value: 'option_12' },
+    { label: 'Option 13', value: 'option_13' },
+    { label: 'Option 14', value: 'option_14' },
+    { label: 'Option 15', value: 'option_15' },
+];
+
+export const TestScrollsToSelectedOption: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref('option_10');
+            return { value, options: manyOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" placeholder="Select..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const trigger = canvasElement.querySelector('[data-ui-combobox-trigger]');
+        await expect(trigger).toBeTruthy();
+
+        await userEvent.click(trigger!);
+        await new Promise((r) => setTimeout(r, 150));
+
+        // The selected option (Option 10) should be highlighted
+        const highlightedOption = document.querySelector('[data-ui-combobox-item][data-highlighted]');
+        await expect(highlightedOption).toBeTruthy();
+        expect(highlightedOption?.getAttribute('data-ui-combobox-item')).toBe('option_10');
+
+        // Arrow down should go to Option 11, not Option 1
+        await userEvent.keyboard('{ArrowDown}');
+        await new Promise((r) => setTimeout(r, 50));
+
+        const newHighlightedOption = document.querySelector('[data-ui-combobox-item][data-highlighted]');
+        expect(newHighlightedOption?.getAttribute('data-ui-combobox-item')).toBe('option_11');
+
+        // Arrow up twice should go to Option 10 then Option 9
+        await userEvent.keyboard('{ArrowUp}');
+        await userEvent.keyboard('{ArrowUp}');
+        await new Promise((r) => setTimeout(r, 50));
+
+        const upHighlightedOption = document.querySelector('[data-ui-combobox-item][data-highlighted]');
+        expect(upHighlightedOption?.getAttribute('data-ui-combobox-item')).toBe('option_9');
+    },
+};
+
+export const TestDisabledStatePreventsInteraction: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref('the_midnight');
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'] };
+        },
+        template: `<Combobox v-model="value" :options="options" disabled clearable placeholder="Select..." @update:modelValue="onUpdate" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const trigger = canvasElement.querySelector('[data-ui-combobox-trigger]');
+        await expect(trigger).toBeTruthy();
+
+        // Click should not open dropdown
+        await userEvent.click(trigger!);
+        await new Promise((r) => setTimeout(r, 100));
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeFalsy();
+
+        // Clear button should not work (it exists but click shouldn't trigger update)
+        const clearButton = canvasElement.querySelector('[data-ui-combobox-clear-button]');
+        if (clearButton) {
+            await userEvent.click(clearButton);
+            await new Promise((r) => setTimeout(r, 100));
+        }
+
+        // Model value should not have changed
+        await expect(args['onUpdate:modelValue']).not.toHaveBeenCalled();
+    },
+};
+
+export const TestDisabledStateMultiplePreventsInteraction: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref(['the_midnight', 'fm_84']);
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'] };
+        },
+        template: `<Combobox v-model="value" :options="options" disabled multiple placeholder="Select..." @update:modelValue="onUpdate" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const trigger = canvasElement.querySelector('[data-ui-combobox-trigger]');
+        await expect(trigger).toBeTruthy();
+
+        // Click should not open dropdown
+        await userEvent.click(trigger!);
+        await new Promise((r) => setTimeout(r, 100));
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeFalsy();
+
+        // Remove buttons should not exist on badges when disabled
+        const removeButtons = canvasElement.querySelectorAll('[data-ui-combobox-selected-options] button[aria-label*="Remove"]');
+        expect(removeButtons.length).toBe(0);
+
+        // Model value should not have changed
+        await expect(args['onUpdate:modelValue']).not.toHaveBeenCalled();
+    },
+};
diff --git a/resources/js/stories/Select.stories.ts b/resources/js/stories/Select.stories.ts
index 146b569b850..6a1a1c2b5ce 100644
--- a/resources/js/stories/Select.stories.ts
+++ b/resources/js/stories/Select.stories.ts
@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/vue3';
 import {Select} from '@ui';
 import {icons} from "@/stories/icons";
+import {ref} from "vue";
 
 const meta = {
     title: 'Forms/Select',
@@ -31,13 +32,23 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const defaultOptions = [
+    { label: 'The Midnight', value: 'the_midnight' },
+    { label: 'The 1975', value: 'the_1975' },
+    { label: 'Sunglasses Kid', value: 'sunglasses_kid' },
+    { label: 'FM-84', value: 'fm_84' },
+    { label: 'Timecop1983', value: 'timecop1983' },
+];
+
 const defaultCode = `
 <Select
-    label="Favorite band"
+    placeholder="Select a band..."
     :options="[
         { label: 'The Midnight', value: 'the_midnight' },
         { label: 'The 1975', value: 'the_1975' },
-        { label: 'Sunglasses Kid', value: 'sunglasses_kid' }
+        { label: 'Sunglasses Kid', value: 'sunglasses_kid' },
+        { label: 'FM-84', value: 'fm_84' },
+        { label: 'Timecop1983', value: 'timecop1983' },
     ]"
 />
 `;
@@ -46,147 +57,149 @@ export const _DocsIntro: Story = {
     tags: ['!dev'],
     parameters: {
         docs: {
-            source: { code: defaultCode }
-        }
+            source: { code: defaultCode },
+        },
     },
     render: () => ({
         components: { Select },
-        template: defaultCode,
+        setup() {
+            const value = ref(null);
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+            <Select
+                v-model="value"
+                placeholder="Select a band..."
+                :options="options"
+            />
+        `,
     }),
 };
 
 const sizesCode = `
-<Select
-    label="Favorite band"
-    size="sm"
-    :options="[
-        { label: 'The Midnight', value: 'the_midnight' },
-        { label: 'The 1975', value: 'the_1975' },
-        { label: 'Sunglasses Kid', value: 'sunglasses_kid' }
-    ]"
-/>
+<Select size="xs" placeholder="Extra Small" :options="options" />
+<Select size="sm" placeholder="Small" :options="options" />
+<Select size="base" placeholder="Base" :options="options" />
+<Select size="lg" placeholder="Large" :options="options" />
+<Select size="xl" placeholder="Extra Large" :options="options" />
 `;
 
 export const _Sizes: Story = {
     tags: ['!dev'],
     parameters: {
         docs: {
-            source: { code: sizesCode }
-        }
+            source: { code: sizesCode },
+        },
     },
     render: () => ({
         components: { Select },
-        template: sizesCode,
+        setup() {
+            const options = defaultOptions;
+            return { options };
+        },
+        template: `<div class="flex flex-col gap-4">${sizesCode}</div>`,
     }),
 };
 
 const variantsCode = `
-<Select
-    label="Favorite band"
-    :options="[
-        { label: 'The Midnight', value: 'the_midnight' },
-        { label: 'The 1975', value: 'the_1975' },
-        { label: 'Sunglasses Kid', value: 'sunglasses_kid' }
-    ]"
-/>
-<Select
-    label="Favorite band"
-    variant="filled"
-    :options="[
-        { label: 'The Midnight', value: 'the_midnight' },
-        { label: 'The 1975', value: 'the_1975' },
-        { label: 'Sunglasses Kid', value: 'sunglasses_kid' }
-    ]"
-/>
-<Select
-    label="Favorite band"
-    variant="ghost"
-    :options="[
-        { label: 'The Midnight', value: 'the_midnight' },
-        { label: 'The 1975', value: 'the_1975' },
-        { label: 'Sunglasses Kid', value: 'sunglasses_kid' }
-    ]"
-/>
-<Select
-    label="Favorite band"
-    variant="subtle"
-    :options="[
-        { label: 'The Midnight', value: 'the_midnight' },
-        { label: 'The 1975', value: 'the_1975' },
-        { label: 'Sunglasses Kid', value: 'sunglasses_kid' }
-    ]"
-/>
+<Select variant="default" placeholder="Default" :options="options" />
+<Select variant="filled" placeholder="Filled" :options="options" />
+<Select variant="ghost" placeholder="Ghost" :options="options" />
+<Select variant="subtle" placeholder="Subtle" :options="options" />
 `;
 
 export const _Variants: Story = {
     tags: ['!dev'],
     parameters: {
         docs: {
-            source: { code: variantsCode }
-        }
+            source: { code: variantsCode },
+        },
     },
     render: () => ({
         components: { Select },
-        template: variantsCode,
+        setup() {
+            const options = defaultOptions;
+            return { options };
+        },
+        template: `<div class="flex flex-col gap-4">${variantsCode}</div>`,
     }),
 };
 
 const clearableCode = `
-<Select
-    label="Favorite band"
-    :clearable="true"
-    :options="[
-        { label: 'The Midnight', value: 'the_midnight' },
-        { label: 'The 1975', value: 'the_1975' },
-        { label: 'Sunglasses Kid', value: 'sunglasses_kid' }
-    ]"
-/>
+<Combobox clearable placeholder="Select a band..." :options="options" />
 `;
 
 export const _Clearable: Story = {
     tags: ['!dev'],
     parameters: {
         docs: {
-            source: { code: clearableCode }
-        }
+            source: { code: clearableCode },
+        },
     },
     render: () => ({
         components: { Select },
-        template: clearableCode,
+        setup() {
+            const value = ref('the_midnight');
+            const options = defaultOptions;
+            return { value, options };
+        },
+        template: `
+		    <Select
+			    v-model="value"
+			    clearable
+			    placeholder="Select a band..."
+			    :options="options"
+		    />
+        `,
     }),
 };
 
 const iconCode = `
-<Select
-    icon="money-bag-dollar"
-    label="Currency"
-    :options="[
-        { label: 'U.S. Dollar', value: 'usd' },
-        { label: 'Euro', value: 'euro' },
-        { label: 'Gold Doubloon', value: 'gold_doublon' }
-    ]"
-/>
+<Select icon="money-bag-dollar" placeholder="Select a currency..." :options="options" />
 `;
 
 export const _Icon: Story = {
     tags: ['!dev'],
     parameters: {
         docs: {
-            source: { code: iconCode }
-        }
+            source: { code: iconCode },
+        },
     },
     render: () => ({
         components: { Select },
-        template: iconCode,
+        setup() {
+            const value = ref('the_midnight');
+            return { value };
+        },
+        template: `
+	        <Select
+                v-model="value"
+		        icon="money-bag-dollar"
+                placeholder="Select a currency..."
+		        :options="[
+                    { label: 'U.S. Dollar', value: 'usd' },
+                    { label: 'Euro', value: 'euro' },
+                    { label: 'Gold Doubloon', value: 'gold_doublon' }
+                ]"
+	        />
+        `,
     }),
 };
 
-const customListItemsCode = `
-<Select label="Author" :options="[
-    { label: 'Tyler Lyle', image: '/assets/tyler.jpg' },
-    { label: 'Tim McEwan', image: '/assets/tim.jpg' },
-    { label: 'Nikki Flores', image: '/assets/nikki.jpg' },
-]">
+const optionSlotsCode = `
+<Select
+    placeholder="Select author..."
+    :options="[
+        { label: 'Tyler Lyle', image: '/assets/tyler.jpg', value: 'tyler' },
+        { label: 'Tim McEwan', image: '/assets/tim.jpg', value: 'tim' },
+        { label: 'Nikki Flores', image: '/assets/nikki.jpg', value: 'nikki' },
+    ]"
+>
+    <template #selected-option="{ option }">
+        <img :src="option.image" class="size-5 rounded-full" />
+        <span v-text="option.label" />
+	</template>
     <template #option="{ label, image }">
         <img :src="image" class="size-5 rounded-full" />
         <span v-text="label" />
@@ -194,15 +207,82 @@ const customListItemsCode = `
 </Select>
 `;
 
-export const _CustomListItems: Story = {
+export const _OptionSlots: Story = {
     tags: ['!dev'],
     parameters: {
         docs: {
-            source: { code: customListItemsCode }
-        }
+            source: { code: optionSlotsCode },
+        },
     },
     render: () => ({
         components: { Select },
-        template: customListItemsCode,
+        setup() {
+            const value = ref('tyler');
+            const options = [
+                { label: 'Tyler Lyle', image: 'https://i.pravatar.cc/100?u=tyler', value: 'tyler' },
+                { label: 'Tim McEwan', image: 'https://i.pravatar.cc/100?u=tim', value: 'tim' },
+                { label: 'Nikki Flores', image: 'https://i.pravatar.cc/100?u=nikki', value: 'nikki' },
+            ];
+            return { value, options };
+        },
+        template: `
+            <Select
+                v-model="value"
+                placeholder="Select author..."
+                :options="options"
+            >
+	            <template #selected-option="{ option }">
+		            <img :src="option.image" class="size-5 rounded-full" />
+		            <span v-text="option.label" />
+	            </template>
+                <template #option="{ label, image }">
+                    <img :src="image" class="size-5 rounded-full" />
+                    <span v-text="label" />
+                </template>
+            </Select>
+        `,
     }),
 };
+
+const adaptiveWidthCode = `
+<Select
+    adaptive-width
+    placeholder="Select..."
+    :options="[
+        { label: 'Short', value: 'short' },
+        { label: 'A much longer option label', value: 'long' },
+        { label: 'An extremely long option that demonstrates adaptive width', value: 'very_long' },
+    ]"
+/>
+`;
+
+export const _AdaptiveWidth: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: adaptiveWidthCode },
+        },
+    },
+    render: () => ({
+        components: { Select },
+        setup() {
+            const value = ref(null);
+            const options = [
+                { label: 'Short', value: 'short' },
+                { label: 'A much longer option label', value: 'long' },
+                { label: 'An extremely long option that demonstrates adaptive width', value: 'very_long' },
+            ];
+            return { value, options };
+        },
+        template: `
+            <div class="w-48">
+                <Select
+                    v-model="value"
+                    adaptive-width
+                    placeholder="Select..."
+                    :options="options"
+                />
+            </div>
+        `,
+    }),
+};
\ No newline at end of file
diff --git a/resources/js/stories/docs/Combobox.mdx b/resources/js/stories/docs/Combobox.mdx
new file mode 100644
index 00000000000..fba290cc178
--- /dev/null
+++ b/resources/js/stories/docs/Combobox.mdx
@@ -0,0 +1,58 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ComboboxStories from '../Combobox.stories';
+
+<Meta of={ComboboxStories} />
+
+# Combobox
+A flexible selection component that combines a text input with a dropdown list. Supports single and multiple selection, search/filtering, tagging, and keyboard navigation.
+
+<Canvas of={ComboboxStories._DocsIntro} sourceState={'shown'} />
+
+You should provide an array of option objects via the `options` prop. The objects must contain `value` and `label` keys by default, but you can customize the keys using the `optionValue` and `optionLabel` props.
+
+## Sizes
+Use the `size` prop to control the input's height and type scale. Available sizes: `xs`, `sm`, `base`, `lg`, `xl`.
+<Canvas of={ComboboxStories._Sizes} sourceState={'shown'} />
+
+## Variants
+Use the `variant` prop to change the appearance of the combobox. Available variants: `default`, `filled`, `ghost`, `subtle`.
+<Canvas of={ComboboxStories._Variants} sourceState={'shown'} />
+
+## Clearable
+Add a clear button to your combobox by setting the `clearable` prop.
+<Canvas of={ComboboxStories._Clearable} sourceState={'shown'} />
+
+## Multiple Selections
+Enable multiple selection mode with the `multiple` prop. Selected items appear as badges below the input and can be reordered via drag and drop.
+<Canvas of={ComboboxStories._Multiple} sourceState={'shown'} />
+
+## Max Selections
+Limit the number of selections with the `maxSelections` prop. A counter is displayed showing the current selection count.
+<Canvas of={ComboboxStories._MaxSelections} sourceState={'shown'} />
+
+## Taggable
+Allow users to add new options by typing and pressing enter. Set `taggable` to `true` to enable this feature. Users can also paste comma-separated values to add multiple tags at once.
+<Canvas of={ComboboxStories._Taggable} sourceState={'shown'} />
+
+## Disable Search
+By default, the combobox is searchable. You may disable search by setting the `searchable` prop to `false`.
+<Canvas of={ComboboxStories._SearchDisabled} sourceState={'shown'} />
+
+## Server-side Searching
+When `ignoreFilter` is `true`, the combobox won't filter options locally. Use this with the `search` event to implement server-side searching.
+<Canvas of={ComboboxStories._IgnoreFilter} sourceState={'shown'} />
+
+## Customize Options
+You may customize how options are rendered using the `selected-option` and `option` slots.
+
+- The `selected-option` slot is used to display the currently selected option in the "trigger"
+- The `option` slot is used to display individual options in the dropdown
+
+<Canvas of={ComboboxStories._OptionSlots} sourceState={'shown'} />
+
+## Adaptive Width
+By default, the dropdown matches the trigger width. Set `adaptiveWidth` to `true` to allow the dropdown to expand to fit longer option labels.
+<Canvas of={ComboboxStories._AdaptiveWidth} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={ComboboxStories} />
diff --git a/resources/js/stories/docs/Select.mdx b/resources/js/stories/docs/Select.mdx
index 09d0a2ba85a..b955af130d0 100644
--- a/resources/js/stories/docs/Select.mdx
+++ b/resources/js/stories/docs/Select.mdx
@@ -4,31 +4,39 @@ import * as SelectStories from '../Select.stories';
 <Meta of={SelectStories} />
 
 # Select
-Displays a list of options for the user to pick from - triggered by an input style button.
+Displays a list of options for the user to pick from - triggered by an input style button. Built on top of the [Combobox](/?path=/docs/forms-combobox--docs) component.
+
 <Canvas of={SelectStories._DocsIntro} sourceState={'shown'} />
 
-## Data Format
-Pass data into the select with the `options` prop as an array of objects. The objects must contain a `value` and a `label`, but can contain any other day you would like as well.
+You should provide an array of option objects via the `options` prop. The objects must contain `value` and `label` keys by default, but you can customize the keys using the `optionValue` and `optionLabel` props.
 
 ## Sizes
-Use the `size` prop to control the input's height and type scale. The scales match the button sizes to make sure everything lines up nicely.
+Use the `size` prop to control the input's height and type scale. Available sizes: `xs`, `sm`, `base`, `lg`, `xl`.
 <Canvas of={SelectStories._Sizes} sourceState={'shown'} />
 
 ## Variants
-Use the `variant` prop to change the appearance of the select.
+Use the `variant` prop to change the appearance of the combobox. Available variants: `default`, `filled`, `ghost`, `subtle`.
 <Canvas of={SelectStories._Variants} sourceState={'shown'} />
 
 ## Clearable
-Add a clear button to your select by setting the `clearable` prop.
+Add a clear button to your combobox by setting the `clearable` prop.
 <Canvas of={SelectStories._Clearable} sourceState={'shown'} />
 
 ## Icon
 Adds an icon to your select box.
 <Canvas of={SelectStories._Icon} sourceState={'shown'} />
 
-## Custom List Items
-You can customize the markup and display of the list items inside of an `#options` slot, with full access to whatever data is passed into the select.
-<Canvas of={SelectStories._CustomListItems} sourceState={'shown'} />
+## Customize Options
+You may customize how options are rendered using the `selected-option` and `option` slots.
+
+- The `selected-option` slot is used to display the currently selected option in the "trigger"
+- The `option` slot is used to display individual options in the dropdown
+
+<Canvas of={SelectStories._OptionSlots} sourceState={'shown'} />
+
+## Adaptive Width
+By default, the dropdown matches the trigger width. Set `adaptiveWidth` to `true` to allow the dropdown to expand to fit longer option labels.
+<Canvas of={SelectStories._AdaptiveWidth} sourceState={'shown'} />
 
 ## Arguments
 <ArgTypes of={SelectStories} />