@onereach/ui-components 5.0.2 → 5.1.0

package/dist/esm/v3/index.js

@@ -7,25 +7,25 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-4a3c3e7b.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-8c81a2d5.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-a03fe4ee.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-e4a72381.js';
 export { s as OrCardV3 } from './OrCard-cc82902c.js';
 export { s as OrCheckbox } from './OrCheckbox-5666c954.js';
-export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-6c054793.js';
-export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-bb32455e.js';
-export { s as OrCheckboxV3 } from './OrCheckbox-09f62aab.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-7fe25d85.js';
+export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-bea23696.js';
+export { s as OrCheckboxV3 } from './OrCheckbox-a571fc90.js';
 export { s as OrChip } from './OrChip-74e27265.js';
 export { s as OrChips } from './OrChips-348b13e4.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-0aadc737.js';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-e0046019.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-efdc9eee.js';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-252f482b.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-2800ee8b.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-6dd0f75d.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-912a6254.js';
 export { s as OrConfirm } from './OrConfirm-97ab80b9.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-fd33e48c.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-dae900de.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-fa35ffd0.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-40e867e5.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-4bfefbcd.js';
-export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-3d4aeabe.js';
+export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-888a2f98.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
@@ -33,7 +33,7 @@ export { s as OrErrorV3 } from './OrError-c01d0c29.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-891154e6.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-83cd7ed7.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-052ede5f.js';
-export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-9f581536.js';
+export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-c4631ef0.js';
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-06ab89d7.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-f7130a5c.js';
@@ -44,9 +44,9 @@ export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-0b0d
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-a3c4c7dc.js';
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-2c54367e.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-41b40eee.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-8463ca1d.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
-export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-4da56db0.js';
+export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-d4c46bb6.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-dcae31fb.js';
 export { s as OrList } from './OrList-aa7b5ef9.js';
 export { s as OrListOfInputs } from './OrListOfInputs-f8740785.js';
@@ -69,13 +69,13 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-a54a42c0.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from './OrRadioGroup-58c0214c.js';
-export { s as OrRadioV3 } from './OrRadio-7b722b16.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-82d10aa8.js';
+export { s as OrRadioV3 } from './OrRadio-48cd02a9.js';
 export { s as OrSearch } from './OrSearch-2800e9bf.js';
-export { s as OrSearchV3 } from './OrSearch-e6f6573f.js';
+export { s as OrSearchV3 } from './OrSearch-9c694c80.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-c8eb217d.js';
 export { s as OrSelect } from './OrSelect-9520d6e6.js';
-export { s as OrSelectV3 } from './OrSelect-db90c428.js';
+export { s as OrSelectV3 } from './OrSelect-3a39f89e.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-aaf73310.js';
 export { s as OrSidebarV3 } from './OrSidebar-34492810.js';
 export { O as OrSidebarPlacement } from './OrSidebarCollapseButton-f6f5ec80.js';
@@ -90,23 +90,23 @@ export { s as OrSlider } from './OrSlider-b7bd588e.js';
 export { s as OrSortingV3 } from './OrSorting-dc01b9de.js';
 export { s as OrStepper } from './OrStepper-4943002c.js';
 export { s as OrSwitch } from './OrSwitch-fb864132.js';
-export { s as OrSwitchV3 } from './OrSwitch-a6efd081.js';
+export { s as OrSwitchV3 } from './OrSwitch-f4d9e196.js';
 export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
 export { s as OrTabV3 } from './OrTab-2d567d8e.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-3fa4a344.js';
 export { s as OrTag } from './OrTag-1b3b1296.js';
-export { s as OrTagInputV3 } from './OrTagInput-f11a2d68.js';
+export { s as OrTagInputV3 } from './OrTagInput-8cc92992.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-9494f132.js';
 export { s as OrTagsV3 } from './OrTags-cec632b8.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from './OrTextarea-6c471ccd.js';
+export { s as OrTextareaV3 } from './OrTextarea-f3412790.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-fe62c6c3.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-b1ff46c1.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-e3b5ef7f.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-d6f117e2.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-93e80c1b.js';
@@ -115,7 +115,7 @@ export { s as OrTooltip } from './OrTooltip-7ac03028.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
 export { s as OrTooltipV3 } from './OrTooltip-16f99e83.js';
 export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-a0e57f4e.js';
-export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
+export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';
 export { u as useOverflow } from './useOverflow-c856b7b7.js';
@@ -149,7 +149,7 @@ import '@codemirror/lang-markdown';
 import '@codemirror/language';
 import '@lezer/highlight';
 import '@vueuse/math';
-import './OrDateTimePickerPopoverHeader-3c371f05.js';
+import './OrDateTimePickerPopoverHeader-8f0408b2.js';
 import 'lodash/padStart';
 import '@floating-ui/dom';
 import 'lodash/cloneDeep';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -149,5 +149,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "8f97fb078833ee45f4bb9bc20efe8c162d42ee89"
+  "gitHead": "836bd5ff950876d0076ddc862dcc93d5f64ca794"
 }

package/src/components/or-checkbox-v3/OrCheckbox.vue

@@ -22,6 +22,7 @@
       <OrLabel
         :control-id="controlAttributes.id"
         :variant="labelVariant"
+        :selected="isChecked"
         :required="required"
         :disabled="disabled"
       >

package/src/components/or-input-v3/OrInput.vue

@@ -219,6 +219,7 @@ export default defineComponent({
 
   emits: [
     'update:modelValue',
+
     'input',
     'keydown',
     'keyup',

package/src/components/or-label-v3/OrLabel.vue

@@ -2,6 +2,7 @@
   <div
     ref="root"
     :class="rootStyles"
+    :selected="selected ? '' : null"
     :disabled="disabled ? '' : null"
   >
     <label
@@ -22,11 +23,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { LabelVariant } from './props';
-import { LabelAddon, LabelRoot, LabelRootVariants, LabelText } from './styles';
+import { Label, LabelAddon, LabelText, LabelVariants } from './styles';
 
 export default defineComponent({
-  name: 'OrLabel',
-
   props: {
     controlId: {
       type: String,
@@ -38,6 +37,11 @@ export default defineComponent({
       default: LabelVariant.Input,
     },
 
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+
     required: {
       type: Boolean,
       default: false,
@@ -60,8 +64,8 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-label-v3',
-      ...LabelRoot,
-      ...LabelRootVariants[props.variant],
+      ...Label,
+      ...LabelVariants[props.variant],
     ]);
 
     const textStyles = computed(() => [

package/src/components/or-label-v3/props.ts

@@ -1,4 +1,5 @@
 export enum LabelVariant {
   Input = 'input',
   Toggle = 'toggle',
+  MenuItem = 'menu-item',
 }

package/src/components/or-label-v3/styles.ts

@@ -1,6 +1,6 @@
 import { LabelVariant } from './props';
 
-export const LabelRoot: string[] = [
+export const Label: string[] = [
   // Layout
   'layout-row justify-between',
 
@@ -8,8 +8,8 @@ export const LabelRoot: string[] = [
   'gap-sm',
 ];
 
-export const LabelRootVariants: Record<LabelVariant, string[]> = {
-  'input': [
+export const LabelVariants: Record<LabelVariant, string[]> = {
+  [LabelVariant.Input]: [
     // Typography
     'typography-caption-regular',
 
@@ -18,7 +18,7 @@ export const LabelRootVariants: Record<LabelVariant, string[]> = {
     'dark:theme-foreground-outline-dark',
   ],
 
-  'toggle': [
+  [LabelVariant.Toggle]: [
     // Typography
     'typography-body-2-regular',
 
@@ -26,6 +26,18 @@ export const LabelRootVariants: Record<LabelVariant, string[]> = {
     'theme-foreground-default',
     'dark:theme-foreground-default-dark',
   ],
+
+  [LabelVariant.MenuItem]: [
+    // Typography
+    'typography-body-2-regular',
+
+    // Typography (selected)
+    'selected:typography-body-2-semibold',
+
+    // Theme
+    'theme-foreground-default',
+    'dark:theme-foreground-default-dark',
+  ],
 };
 
 export const LabelText: string[] = [

package/src/components/or-select-v3/OrSelect.vue

@@ -39,14 +39,14 @@
         @blur="$emit('blur', $event)"
       >
         <template v-if="multiple">
-          <template v-if="proxyModelValue && proxyModelValue.length > 0">
+          <template v-if="!isEmptyModelValue">
             <slot
               name="valueTemplate"
               :model="proxyModelValue"
             >
               <OrTag
-                v-for="(option, i) in selection"
-                :key="i"
+                v-for="option in selection"
+                :key="option.value"
                 :variant="'reset'"
                 :disabled="disabled || readonly"
                 @reset="deselect(option)"
@@ -56,8 +56,13 @@
             </slot>
           </template>
 
-          <template v-else>
-            <span :class="placeholderStyles">{{ placeholder }}</span>
+          <template v-else-if="popoverState === 'closed' || !enableSearch">
+            <span
+              :class="placeholderStyles"
+              :disabled="disabled ? '' : null"
+            >
+              {{ placeholder }}
+            </span>
           </template>
         </template>
 
@@ -73,8 +78,13 @@
             </slot>
           </template>
 
-          <template v-else>
-            <span :class="placeholderStyles">{{ placeholder }}</span>
+          <template v-else-if="popoverState === 'closed' || !enableSearch">
+            <span
+              :class="placeholderStyles"
+              :disabled="disabled ? '' : null"
+            >
+              {{ placeholder }}
+            </span>
           </template>
         </template>
       </div>
@@ -83,13 +93,30 @@
         +{{ outerItems.length }}
       </template>
 
+      <template v-if="popoverState === 'open' && enableSearch && isDesktop">
+        <OrInput
+          ref="searchControl"
+          v-model="searchText"
+          :class="[...searchControlStyles, isEmptyModelValue && 'md:!ml-none']"
+          :type="'search'"
+          :placeholder="searchPlaceholder"
+          :size="size"
+          :disable-default-styles="true"
+          @click.stop
+        />
+      </template>
+
+      <template v-else>
+        <div :class="['grow']" />
+      </template>
+
       <div :class="['layout-inline-row', 'gap-sm']">
-        <template v-if="!multiple && proxyModelValue">
+        <template v-if="popoverState === 'closed' && !isEmptyModelValue">
           <OrIconButton
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', undefined)"
+            @click.stop="$emit('update:modelValue', multiple ? [] : undefined)"
           />
         </template>
 
@@ -107,14 +134,15 @@
         :full-width="true"
         :custom-styles="dropdownStyles"
         :disable-default-styles="true"
+        @close="clearSearchControl()"
       >
-        <template v-if="enableSearch">
+        <template v-if="popoverState === 'open' && enableSearch && isMobile">
           <OrInput
+            ref="searchControl"
             v-model="searchText"
+            :class="searchControlStyles"
             :type="'search'"
-            :placeholder="'Search'"
-            :size="'s'"
-            :disable-default-styles="true"
+            :placeholder="searchPlaceholder"
           />
         </template>
 
@@ -129,6 +157,7 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
+                  :selected="proxyModelValue && proxyModelValue.includes(option.value)"
                 >
                   <slot
                     name="optionTemplate"
@@ -139,7 +168,7 @@
                       v-model="proxyModelValue"
                       :value="option.value"
                       :label="option.label"
-                      :label-variant="'input'"
+                      :label-variant="'menu-item'"
                     />
                   </slot>
                 </OrMenuItem>
@@ -149,6 +178,8 @@
                 <OrMenuItem
                   v-for="(option, i) in group"
                   :key="i"
+                  :class="dropdownItemStyles"
+                  :selected="proxyModelValue === option.value"
                   @click.stop="proxyModelValue = option.value; close()"
                 >
                   <slot
@@ -168,12 +199,13 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
+                :selected="proxyModelValue && proxyModelValue.includes(option.value)"
               >
                 <OrCheckbox
                   v-model="proxyModelValue"
                   :value="option.value"
                   :label="option.label"
-                  :label-variant="'input'"
+                  :label-variant="'menu-item'"
                 >
                   <slot
                     name="optionTemplate"
@@ -188,6 +220,8 @@
               <OrMenuItem
                 v-for="(option, i) in resolvedSearchOptions"
                 :key="i"
+                :class="dropdownItemStyles"
+                :selected="proxyModelValue === option.value"
                 @click.stop="proxyModelValue = option.value; close()"
               >
                 <slot
@@ -237,7 +271,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
-import { useOverflow, useProxyModelValue } from '../../hooks';
+import { useOverflow, useProxyModelValue, useResponsive } from '../../hooks';
 import { isEmptyValue } from '../../utils/isEmptyValue';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -252,12 +286,10 @@ import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrTagV3 as OrTag } from '../or-tag-v3';
 import { SelectSize } from './props';
-import { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot } from './styles';
+import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction } from './types';
 
 export default defineComponent({
-  name: 'OrSelect',
-
   components: {
     OrCheckbox,
     OrError,
@@ -319,6 +351,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    searchPlaceholder: {
+      type: String,
+      default: undefined,
+    },
+
     hint: {
       type: String,
       default: undefined,
@@ -392,6 +429,8 @@ export default defineComponent({
 
     const control = ref<HTMLElement>();
 
+    const searchControl = ref<HTMLElement>();
+
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
     const popoverState = computed(() => popover.value?.state);
@@ -399,13 +438,17 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-select-v3',
-      ...SelectRoot,
+      ...Select,
     ]);
 
     const controlStyles = computed(() => [
       ...SelectControl,
     ]);
 
+    const searchControlStyles = computed(() => [
+      ...SelectSearchControl,
+    ]);
+
     const placeholderStyles = computed(() => [
       ...SelectPlaceholder,
     ]);
@@ -415,6 +458,10 @@ export default defineComponent({
       ...popover.value?.isFlipped ? SelectDropdownFlipped : SelectDropdownDefault,
     ]);
 
+    const dropdownItemStyles = computed(() => [
+      ...SelectDropdownItem,
+    ]);
+
     const noSearchResultsStyles = computed(() => [
       ...SelectNoSearchResults,
     ]);
@@ -442,7 +489,9 @@ export default defineComponent({
       const modelValue = proxyModelValue.value;
 
       if (Array.isArray(modelValue)) {
-        return modelValue.map((value) => props.options.find((option) => option.value === value));
+        return modelValue
+          .map((value) => props.options.find((option) => option.value === value))
+          .filter((value) => !!value);
       }
 
       return props.options.find((option) => option.value === modelValue);
@@ -521,20 +570,37 @@ export default defineComponent({
       }
     }
 
+    function clearSearchControl(): void {
+      searchText.value = '';
+    }
+
     const { innerItems, outerItems } = useOverflow(control);
 
+    // Utils
+    const { isDesktop, isMobile } = useResponsive();
+
+    // Effects
+    watch(searchControl, (control) => {
+      setTimeout(() => {
+        control?.focus();
+      });
+    });
+
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
+      searchControl,
       popover,
       popoverRoot,
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
+      dropdownItemStyles,
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
@@ -548,8 +614,11 @@ export default defineComponent({
       toggle,
       close,
       deselect,
+      clearSearchControl,
       innerItems,
       outerItems,
+      isDesktop,
+      isMobile,
     };
   },
 });

package/src/components/or-select-v3/styles.ts

@@ -1,4 +1,4 @@
-export const SelectRoot: string[] = [
+export const Select: string[] = [
   // Layout
   'layout-column',
 
@@ -10,8 +10,8 @@ export const SelectControl: string[] = [
   // Layout
   'layout-row',
 
-  // Box
-  'w-full',
+  // Layout (empty)
+  'empty:hidden',
 
   // Overflow
   'overflow-hidden',
@@ -23,6 +23,15 @@ export const SelectControl: string[] = [
   'typography-inherit',
 ];
 
+export const SelectSearchControl: string[] = [
+  // Layout
+  'grow',
+
+  // Spacing
+  '!mx-lg md:!-mx-sm+',
+  '!my-sm md:!my-none',
+];
+
 export const SelectPlaceholder: string[] = [
   // Theme
   'theme-foreground-outline',
@@ -66,6 +75,14 @@ export const SelectDropdownFlipped: string[] = [
   '!border-b-0',
 ];
 
+export const SelectDropdownItem: string[] = [
+  // Typography
+  '!typography-body-2-regular',
+
+  // Typography (selected)
+  'selected:!typography-body-2-semibold',
+];
+
 export const SelectNoSearchResults: string[] = [
   // Layout
   'layout-row justify-center',

package/src/directives/dropdown-close.ts

@@ -2,9 +2,6 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }

package/src/directives/dropdown-open.ts

@@ -2,17 +2,14 @@ import { DirectiveBinding, DirectiveHook, isVue3 } from 'vue-demi';
 
 const created: DirectiveHook = (element: HTMLElement, binding: DirectiveBinding<(event: Event) => void>) => {
   element.addEventListener('keydown', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
 
   element.addEventListener('click', (event) => {
-    event.preventDefault();
     event.stopPropagation();
+    event.preventDefault();
 
     binding.value(event);
   });