@fastkit/vui 0.8.7 → 0.8.10

package/dist/vui.mjs

@@ -1,7 +1,7 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, useKeybord, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
-import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, Transition, reactive } from 'vue';
+import { inject, computed, provide, createVNode, mergeProps, defineComponent, Fragment, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, vShow, onBeforeUpdate, vModelSelect, nextTick, Transition, reactive } from 'vue';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, renderSlotOrEmpty as renderSlotOrEmpty$1, defineSlotsProps as defineSlotsProps$1, htmlAttributesPropOptions, navigationableInheritProps, useNavigationable, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
@@ -404,19 +404,24 @@ function defineFormSelectorComponent(opts) {
           "indeterminate": true,
           "class": "mr-1",
           "size": CONTROL_LOADING_SPINNER_SIZES[this.size || 'md']
-        }, null), this.loadingMessageRef]), this.propItems.map(attrs => {
-          const selected = selectorControl.isSelected(attrs.value);
-          return itemRenderer({
-            selected,
-            control: selectorControl,
-            attrs: { ...attrs,
-              modelValue: selected,
-              key: attrs.value
-            },
-            slots: {
-              default: () => attrs.label(this.selectorControl)
-            }
-          });
+        }, null), this.loadingMessageRef]), this.propGroups.map(group => {
+          const {
+            items
+          } = group;
+          return createVNode(Fragment, null, [items.map(attrs => {
+            const selected = selectorControl.isSelected(attrs.value);
+            return itemRenderer({
+              selected,
+              control: selectorControl,
+              attrs: { ...attrs,
+                modelValue: selected,
+                key: attrs.value
+              },
+              slots: {
+                default: () => attrs.label(this.selectorControl)
+              }
+            });
+          })]);
         }), renderSlotOrEmpty(this.$slots, 'default')])
       });
     }
@@ -441,7 +446,7 @@ function useElevation(props, opts = {}) {
     };
 }
 
-function _isSlot$e(s) {
+function _isSlot$f(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -462,7 +467,7 @@ const VSkeltonLoaderBone = defineComponent({
       const TagName = props.tag;
       return createVNode(TagName, mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
-      }), _isSlot$e(_slot = renderSlotOrEmpty$1(ctx.slots)) ? _slot : {
+      }), _isSlot$f(_slot = renderSlotOrEmpty$1(ctx.slots)) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1285,7 +1290,7 @@ const VButtonGroup = defineComponent({
 
 });
 
-function _isSlot$d(s) {
+function _isSlot$e(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1534,7 +1539,7 @@ const VPagination = defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$d(children) ? children : {
+        }, _isSlot$e(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -1690,7 +1695,7 @@ const VDrawerLayout = defineComponent({
 
 });
 
-function _isSlot$c(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1727,7 +1732,7 @@ const VHero = defineComponent({
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$c(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$d(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           }), adornment && createVNode("div", {
             "class": "v-hero__adornment"
@@ -1739,7 +1744,7 @@ const VHero = defineComponent({
 
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1780,7 +1785,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$b(label) ? label : {
+  }, _isSlot$c(label) ? label : {
     default: () => [label]
   });
 }
@@ -1935,7 +1940,7 @@ const VNavigationItem = defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$b(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$c(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && createVNode(VExpandTransition, null, {
         default: () => [withDirectives(createVNode("div", {
@@ -2119,7 +2124,7 @@ const VCheckbox = defineComponent({
 
 });
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2131,7 +2136,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$a(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$b(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2183,7 +2188,7 @@ const VRadio = defineComponent({
 
 });
 
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2194,7 +2199,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$9(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$a(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2256,7 +2261,7 @@ const VSwitch = defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -2268,7 +2273,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$8(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2307,10 +2312,14 @@ const VOption = defineComponent({
       selectorItemControl,
       classes
     } = this;
-    return createVNode("label", {
+    return createVNode("label", mergeProps({
       "class": classes,
-      "onClick": selectorItemControl.handleClickElement
-    }, [createVNode("span", {
+      "onClick": selectorItemControl.handleClickElement,
+      "tabindex": selectorItemControl.tabindex,
+      "data-value": selectorItemControl.propValue
+    }, {
+      'aria-disabled': selectorItemControl.isDisabled
+    }), [createVNode("span", {
       "class": "v-option__label"
     }, [renderSlotOrEmpty(this.$slots, 'default')])]);
   }
@@ -2464,6 +2473,13 @@ const VControlField = defineComponent({
 
 });
 
+function _isSlot$8(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const ARROW_KEY_TYPES = useKeybord.Key(['ArrowUp', 'ArrowDown']);
+const CHOICE_KEY_TYPES = useKeybord.Key(['Enter', ' ']);
+const KEYBORD_EVENT_TYPES = useKeybord.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 const {
   props: props$3,
   emits: emits$3
@@ -2485,6 +2501,7 @@ const VSelect = defineComponent({
   emits: emits$3,
 
   setup(props, ctx) {
+    const menuRef = ref(null);
     const menuOpened = ref(false);
 
     const showMenu = () => {
@@ -2547,6 +2564,107 @@ const VSelect = defineComponent({
       return children;
     };
 
+    const clearKeyFocused = () => {
+      const menu = menuRef.value;
+      if (!menu) return;
+      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      if (!bodyEl) return;
+      const els = Array.from(bodyEl.querySelectorAll('.v-option'));
+      els.forEach(el => el.classList.remove('v-option--key-focused'));
+    };
+
+    const getItemElements = () => {
+      const menu = menuRef.value;
+      if (!menu) return;
+      const bodyEl = menu.stackMenuControl.bodyRef.value;
+      if (!bodyEl) return;
+      const els = Array.from(bodyEl.querySelectorAll('.v-option')).filter(el => {
+        if (el.tabIndex === -1) return false;
+        const disabled = el.getAttribute('disabled');
+        const ariaDisabled = el.getAttribute('aria-disabled');
+        if (ariaDisabled === 'true') return false;
+        return disabled == null || disabled === '';
+      });
+      if (!els.length) return;
+      return els;
+    };
+
+    const arrowKeyHandler = ev => {
+      const {
+        key
+      } = ev;
+      if (!menuOpened.value || !ARROW_KEY_TYPES.includes(key)) return;
+      const els = getItemElements();
+      if (!els) return;
+      const currentEl = els.find(el => el.classList.contains('v-option--key-focused'));
+      const currentIndex = currentEl && els.indexOf(currentEl);
+      let nextIndex;
+      const {
+        length
+      } = els;
+      const isUp = key === 'ArrowUp';
+
+      if (currentIndex == null) {
+        nextIndex = isUp ? length - 1 : 0;
+      } else {
+        const shiftAmount = key === 'ArrowUp' ? -1 : 1;
+        nextIndex = currentIndex + shiftAmount;
+
+        if (nextIndex < 0) {
+          nextIndex = length - 1;
+        } else if (nextIndex >= length) {
+          nextIndex = 0;
+        }
+      }
+
+      const nextEl = els[nextIndex];
+
+      if (nextEl) {
+        clearKeyFocused();
+        nextEl.classList.add('v-option--key-focused');
+        nextEl.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+          behavior: 'smooth'
+        });
+        ev.preventDefault();
+      }
+    };
+
+    const choiceKeyHandler = ev => {
+      const {
+        key
+      } = ev;
+      if (!menuOpened.value || !CHOICE_KEY_TYPES.includes(key)) return;
+      const els = getItemElements();
+      if (!els) return;
+      const currentEl = els.find(el => el.classList.contains('v-option--key-focused'));
+
+      if (currentEl) {
+        const ev = new MouseEvent('click', {
+          view: window,
+          bubbles: true,
+          cancelable: true
+        });
+        currentEl.dispatchEvent(ev);
+        ev.preventDefault();
+        nextTick(() => {
+          currentEl.classList.add('v-option--key-focused');
+        });
+      }
+    };
+
+    const keybordEventHandler = ev => {
+      if (ARROW_KEY_TYPES.includes(ev.key)) return arrowKeyHandler(ev);
+      if (CHOICE_KEY_TYPES.includes(ev.key)) return choiceKeyHandler(ev);
+    };
+
+    useKeybord([{
+      key: KEYBORD_EVENT_TYPES,
+      handler: keybordEventHandler
+    }], {
+      autorun: true
+    });
     return { ...inputControl.expose(),
       ...control,
       iconName,
@@ -2555,7 +2673,9 @@ const VSelect = defineComponent({
       focus,
       showMenu,
       closeMenu,
-      renderSelections
+      renderSelections,
+      menuRef: () => menuRef,
+      clearKeyFocused
     };
   },
 
@@ -2567,18 +2687,29 @@ const VSelect = defineComponent({
       selectedItems
     } = this;
     const children = this.$slots.default && this.$slots.default() || [];
-    const propOptions = this.propItems.map(item => {
-      return createVNode(VOption, {
+    const propGroups = this.propGroups.map(group => {
+      let _slot;
+
+      return createVNode(VOptionGroup, {
+        "key": group.id,
+        "groupId": group.id,
+        "label": group.label(selectorControl),
+        "disabled": group.disabled
+      }, _isSlot$8(_slot = group.items.map(item => createVNode(VOption, {
         "disabled": item.disabled,
         "value": item.value,
         "key": item.value
       }, {
         default: () => item.label(selectorControl)
+      }))) ? _slot : {
+        default: () => [_slot]
       });
     });
     return createVNode(VFormControl, {
       "nodeControl": nodeControl,
-      "class": ['v-select', this.classes],
+      "class": ['v-select', this.classes, {
+        'v-select--multiple': this.multiple
+      }],
       "label": this.label,
       "hint": this.hint,
       "hinttip": this.hinttip,
@@ -2594,11 +2725,13 @@ const VSelect = defineComponent({
         "distance": 0,
         "alwaysRender": true,
         "modelValue": this.menuOpened,
-        "onUpdate:modelValue": $event => this.menuOpened = $event
+        "onUpdate:modelValue": $event => this.menuOpened = $event,
+        "ref": this.menuRef(),
+        "onClose": this.clearKeyFocused
       }, {
         default: () => [createVNode("div", {
           "class": ['v-select__body', this.classes]
-        }, [children, propOptions])],
+        }, [children, propGroups])],
         activator: ({
           attrs,
           control
@@ -2611,6 +2744,7 @@ const VSelect = defineComponent({
           "endAdornment": this.endAdornment,
           "size": this.size,
           "focused": this.menuOpened,
+          "autoHeight": this.multiple,
           "onClick": ev => {
             if (this.canOperation && !control.isActive) {
               let t = ev.target;
@@ -5610,4 +5744,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, createWysiwygColorTool, createWysiwygExtension, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { ARROW_KEY_TYPES, AVATAR_SIZES, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, KEYBORD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygColorExtension, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygLinter, WysiwygLinterBadWords, WysiwygLinterHeadingLevel, WysiwygLinterPlugin, WysiwygLinterPunctuation, WysiwygOrderedListTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, createWysiwygColorTool, createWysiwygExtension, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.8.7",
+  "version": "0.8.10",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.8.7",
-    "@fastkit/icon-font": "0.8.7",
-    "@fastkit/tiny-logger": "0.8.7",
-    "@fastkit/vite-kit": "0.8.7",
-    "@fastkit/vue-kit": "0.8.7",
+    "@fastkit/color-scheme": "0.8.10",
+    "@fastkit/icon-font": "0.8.10",
+    "@fastkit/tiny-logger": "0.8.10",
+    "@fastkit/vite-kit": "0.8.10",
+    "@fastkit/vue-kit": "0.8.10",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
     "@tiptap/extension-text-style": "^2.0.0-beta.23",

package/src/components/VOption/VOption.scss

@@ -1,12 +1,13 @@
 @use '../../styles/core.scss';
 
 .v-option {
+  @include core.button-reset();
+
   position: relative;
   display: flex;
   width: 100%;
-  padding: 0.375em 1em;
-  cursor: pointer;
-  user-select: none;
+  padding: 0.75em 1em;
+  // font-size: 0.875em;
 
   input {
     @include core.hidden-input-element;
@@ -35,7 +36,8 @@
   }
 
   &:hover,
-  &:focus-within {
+  &:focus-within,
+  &--key-focused {
     &::before {
       opacity: 0.12;
     }
@@ -58,4 +60,15 @@
   &--has-not-value &__label {
     font-style: italic;
   }
+
+  &[disabled],
+  &[tabindex='-1'] {
+    color: var(--palette-muted);
+    pointer-events: none;
+    opacity: 0.4;
+
+    &::before {
+      opacity: 0 !important;
+    }
+  }
 }

package/src/components/VOption/VOption.tsx

@@ -42,7 +42,14 @@ export const VOption = defineComponent({
   render() {
     const { selectorItemControl, classes } = this;
     return (
-      <label class={classes} onClick={selectorItemControl.handleClickElement}>
+      <label
+        class={classes}
+        onClick={selectorItemControl.handleClickElement}
+        tabindex={selectorItemControl.tabindex}
+        data-value={selectorItemControl.propValue}
+        {...({
+          'aria-disabled': selectorItemControl.isDisabled,
+        } as any)}>
         <span class="v-option__label">
           {renderSlotOrEmpty(this.$slots, 'default')}
         </span>

package/src/components/VOptionGroup/VOptionGroup.scss

@@ -1,3 +1,16 @@
 .v-option-group {
   display: block;
+
+  &__label {
+    padding: 1em;
+    // padding: 0.875em 1em;
+    font-size: 0.875em;
+    color: var(--palette-caption);
+    opacity: 0.6;
+  }
+
+  &--disabled &__label {
+    color: var(--palette-muted);
+    opacity: 0.4;
+  }
 }

package/src/components/VSelect/VSelect.scss

@@ -58,6 +58,20 @@
       white-space: nowrap;
       vertical-align: middle;
     }
+
+    .v-select--multiple & {
+      display: block;
+    }
+
+    .v-select--multiple &__inner {
+      display: block;
+      overflow: auto;
+      white-space: unset;
+    }
+  }
+
+  &--multiple .v-control-field__body {
+    padding: 0.2em 0;
   }
 
   &__placeholder {