@veritree/ui 0.21.1-6 → 0.21.1-7

package/mixins/floating-ui-content.js

@@ -0,0 +1,81 @@
+import FloatingUi from '../src/components/Utils/FloatingUi.vue';
+
+export const floatingUiContentMixin = {
+  components: {
+    FloatingUi,
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    floatingUiClass: {
+      type: [String, Function],
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      visible: false,
+      el: null,
+    };
+  },
+
+  mounted() {
+    document.addEventListener('click', (e) => this.onDocumentClick(e));
+  },
+
+  destroyed() {
+    document.removeEventListener('click', this.onDocumentClick);
+  },
+
+  methods: {
+    show() {
+      if (this.visible) {
+        return;
+      }
+
+      this.visible = true;
+
+      this.$nextTick(() => {
+        this.component.setActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('shown');
+        }, 100);
+      });
+    },
+
+    hide() {
+      if (!this.visible) {
+        return;
+      }
+
+      this.visible = false;
+
+      this.$nextTick(() => {
+        this.component.clearActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('hidden');
+        }, 100);
+      });
+    },
+
+    onDocumentClick(e) {
+      if (!e) {
+        return;
+      }
+
+      e.stopPropagation();
+
+      if (this.visible && !this.el.contains(e.target)) {
+        this.componentTrigger.cancel();
+      }
+    },
+  },
+}

package/mixins/floating-ui.js

@@ -43,6 +43,8 @@ export const floatingUiMixin = {
       const trigger = document.getElementById(this.componentTrigger.id);
       const content = document.getElementById(this.componentContent.id);
 
+      // console.log(this.placement);
+
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [
@@ -52,7 +54,7 @@ export const floatingUiMixin = {
           size({
             apply({ rects }) {
               Object.assign(content.style, {
-                width: `${rects.reference.width}px`,
+                minWidth: `${rects.reference.width}px`,
               });
             },
           }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.21.1-6",
+  "version": "0.21.1-7",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -15,7 +15,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
+      apiDropdownMenu: () => {
         const { dark: isDark, headless: isHeadless } = this;
 
         const registerTrigger = (trigger) => {
@@ -39,8 +39,6 @@ export default {
 
         return {
           id: this.componentId,
-          isDark,
-          isHeadless,
           component: this.component,
           componentTrigger: this.componentTrigger,
           componentContent: this.componentContent,
@@ -59,14 +57,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -4,58 +4,36 @@
     :id="id"
     :headless="headless"
     :class="{ 'dropdown-menu-content': headless }"
+    :floating-ui-class="floatingUiClass"
   >
     <slot></slot>
   </FloatingUi>
 </template>
 
 <script>
-import FloatingUi from '../Utils/FloatingUi.vue';
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 
 export default {
   name: 'VTDropdownMenuContent',
 
-  components: {
-    FloatingUi,
-  },
-
-  inject: ['api'],
+  mixins: [floatingUiContentMixin],
 
-  props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      visible: false,
-    };
-  },
+  inject: ['apiDropdownMenu'],
 
   computed: {
     id() {
-      return `dropdown-menu-content-${this.api().id}`;
-    },
-
-    el() {
-      return document.getElementById(this.id);
+      return `dropdown-menu-content-${this.apiDropdownMenu().id}`;
     },
 
     component() {
-      return this.api().component;
+      return this.apiDropdownMenu().component;
     },
 
     componentTrigger() {
-      return this.api().componentTrigger;
+      return this.apiDropdownMenu().componentTrigger;
     },
   },
 
-  created() {
-    console.log(this.$attrs);
-  },
-
   mounted() {
     const content = {
       id: this.id,
@@ -63,47 +41,7 @@ export default {
       show: this.show,
     };
 
-    this.api().registerContent(content);
-
-    document.addEventListener('click', (e) => {
-      if (!e) {
-        return;
-      }
-
-      e.stopPropagation();
-
-      if (this.visible && !this.el.contains(e.target)) {
-        this.componentTrigger.cancel();
-      }
-    });
-  },
-
-  destroyed() {
-    document.removeEventListener('click', this.componentTrigger.cancel);
-  },
-
-  methods: {
-    show() {
-      if (this.visible) return;
-
-      this.visible = true;
-
-      this.$nextTick(() => {
-        this.component.setActive();
-        this.$emit('shown');
-      });
-    },
-
-    hide() {
-      if (!this.visible) return;
-
-      this.visible = false;
-
-      this.$nextTick(() => {
-        this.component.clearActive();
-        this.$emit('hidden');
-      });
-    },
+    this.apiDropdownMenu().registerContent(content);
   },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -3,8 +3,6 @@
     :class="{
       PopoverDivider: headless,
       '-mx-3 my-2 h-[1px]': !headless,
-      'bg-gray-200': !dark,
-      'bg-fd-500': dark,
     }"
   ></div>
 </template>
@@ -13,15 +11,20 @@
 export default {
   name: 'VTDropdownMenuDivider',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
+
+  headless: {
+    type: Boolean,
+    default: false,
+  },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,15 +3,28 @@
     :is="as"
     :id="id"
     :to="to"
-    :class="{
-      MenuItem: headless,
-      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 text-inherit no-underline':
-        !headless,
-      'hover:bg-secondary-200/10': !dark && !headless,
-      'text-white': dark && !headless,
-      'pointer-events-none opacity-75': disabled && !headless,
-      'bg-secondary-200/10': selected && !headless,
-    }"
+    :class="[
+      // default styles
+      headless
+        ? 'dropdown-menu-item'
+        : 'relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
+      // disabled state styles
+      headless
+        ? disabled
+          ? 'listbox-item--disabled'
+          : null
+        : disabled
+        ? 'pointer-events-none opacity-75'
+        : null,
+      // selected state styles
+      headless
+        ? selected
+          ? 'lisbox-item--selected'
+          : null
+        : selected
+        ? 'bg-secondary-200/10'
+        : null,
+    ]"
     :tabindex="tabIndex"
     :aria-disabled="disabled"
     role="menuitem"
@@ -34,7 +47,7 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDropdownMenuItem',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   props: {
     to: {
@@ -49,6 +62,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -61,15 +78,7 @@ export default {
 
   computed: {
     id() {
-      return `dropdown-menu-item-${this.api().id}-${genId()}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      return `dropdown-menu-item-${this.apiDropdownMenu().id}-${genId()}`;
     },
 
     as() {
@@ -77,7 +86,7 @@ export default {
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     el() {
@@ -85,7 +94,7 @@ export default {
     },
 
     componentTrigger() {
-      return this.api().componentTrigger;
+      return this.apiDropdownMenu().componentTrigger;
     },
   },
 
@@ -96,7 +105,7 @@ export default {
       focus: this.focus,
     };
 
-    this.api().registerItem(item);
+    this.apiDropdownMenu().registerItem(item);
 
     this.index = this.items.length - 1;
   },

package/src/components/DropdownMenu/VTDropdownMenuLabel.vue

@@ -15,15 +15,15 @@
 export default {
   name: 'VTDropdownMenuLabel',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -6,7 +6,7 @@
     :aria-controls="controls"
     @keydown.down.prevent="onKeyDownOrUp"
     @keydown.up.prevent="onKeyDownOrUp"
-    @keydown.esc.stop="onKeyesc"
+    @keydown.esc.stop="onKeyEsc"
   >
     <slot></slot>
   </div>
@@ -16,7 +16,7 @@
 export default {
   name: 'VTDropdownMenuTrigger',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   data() {
     return {
@@ -29,15 +29,15 @@ export default {
 
   computed: {
     id() {
-      return `dropdown-menu-trigger-${this.api().id}`;
+      return `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
     },
 
     componentContent() {
-      return this.api().componentContent;
+      return this.apiDropdownMenu().componentContent;
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     firstMenuItem() {
@@ -52,8 +52,6 @@ export default {
   watch: {
     expanded() {
       this.toggleAriaHasPopup();
-      if (this.expanded) {
-      }
     },
   },
 
@@ -65,7 +63,7 @@ export default {
       focus: this.focus,
     };
 
-    this.api().registerTrigger(trigger);
+    this.apiDropdownMenu().registerTrigger(trigger);
 
     this.setTrigger();
     this.addTriggerEvents();

package/src/components/Listbox/VTListbox.vue

@@ -15,9 +15,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
-        const { dark: isDark } = this;
-
+      apiListbox: () => {
         const registerTrigger = (trigger) => {
           if (!trigger) return;
           this.componentTrigger = trigger;
@@ -55,7 +53,6 @@ export default {
 
         return {
           id: this.componentId,
-          isDark,
           component: this.component,
           componentTrigger: this.componentTrigger,
           componentContent: this.componentContent,

package/src/components/Listbox/VTListboxContent.vue

@@ -5,6 +5,7 @@
     :aria-activedescendant="activeDescedant"
     :headless="headless"
     :class="{ 'listbox-content': headless }"
+    :floating-ui-class="floatingUiClass"
     role="listbox"
   >
     <slot></slot>
@@ -12,54 +13,32 @@
 </template>
 
 <script>
-import FloatingUi from '../Utils/FloatingUi.vue';
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 
 export default {
   name: 'VTListboxContent',
 
-  components: {
-    FloatingUi,
-  },
-
-  inject: ['api'],
+  mixins: [floatingUiContentMixin],
 
-  props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    bottom: {
-      type: Boolean,
-      default: false,
-    },
-    top: {
-      type: Boolean,
-      default: true,
-    },
-  },
+  inject: ['apiListbox'],
 
   data() {
     return {
       activeDescedant: null,
-      visible: false,
     };
   },
 
   computed: {
     id() {
-      return `listbox-content-${this.api().id}`;
-    },
-
-    el() {
-      return document.getElementById(this.id);
+      return `listbox-content-${this.apiListbox().id}`;
     },
 
     component() {
-      return this.api().component;
+      return this.apiListbox().component;
     },
 
     componentTrigger() {
-      return this.api().componentTrigger;
+      return this.apiListbox().componentTrigger;
     },
   },
 
@@ -71,52 +50,10 @@ export default {
       setActiveDescedant: this.setActiveDescedant,
     };
 
-    this.api().registerContent(content);
-
-    // T-107 Create a directive or mixin for this
-    document.addEventListener('click', (e) => {
-      if (!e) {
-        return;
-      }
-
-      e.stopPropagation();
-
-      if (this.visible && !this.el.contains(e.target)) {
-        this.componentTrigger.cancel();
-      }
-    });
-  },
-
-  destroyed() {
-    // T-162 Create a directive or mixin for this
-    document.removeEventListener('click', this.componentTrigger.cancel);
+    this.apiListbox().registerContent(content);
   },
 
   methods: {
-    show() {
-      if (this.visible) {
-        return;
-      }
-
-      this.visible = true;
-
-      this.$nextTick(() => {
-        this.component.setActive();
-      });
-    },
-
-    hide() {
-      if (!this.visible) {
-        return;
-      }
-
-      this.visible = false;
-
-      this.$nextTick(() => {
-        this.component.clearActive();
-      });
-    },
-
     setActiveDescedant(id) {
       this.activeDescedant = id;
     },

package/src/components/Listbox/VTListboxItem.vue

@@ -1,14 +1,28 @@
 <template>
   <li
     :id="id"
-    :class="{
-      ListboxItem: headless,
-      'relative z-10 flex items-center gap-2 px-3 py-2 no-underline': !headless,
-      'hover:bg-secondary-200/10': !dark && !headless,
-      'text-white': dark && !headless,
-      'pointer-events-none opacity-75': disabled && !headless,
-      'bg-secondary-200/10': selected && !headless,
-    }"
+    :class="[
+      // default styles
+      headless
+        ? 'listbox-item'
+        : 'relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
+      // disabled state styles
+      headless
+        ? disabled
+          ? 'listbox-item--disabled'
+          : null
+        : disabled
+        ? 'pointer-events-none opacity-75'
+        : null,
+      // selected state styles
+      headless
+        ? selected
+          ? 'lisbox-item--selected'
+          : null
+        : selected
+        ? 'bg-secondary-200/10'
+        : null,
+    ]"
     :aria-disabled="disabled"
     :aria-selected="String(selected)"
     :tabindex="tabIndex"
@@ -35,7 +49,7 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTListboxItem',
 
-  inject: ['api'],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -62,12 +76,8 @@ export default {
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
     items() {
-      return this.api().items;
+      return this.apiListbox().items;
     },
 
     el() {
@@ -75,19 +85,19 @@ export default {
     },
 
     componentTrigger() {
-      return this.api().componentTrigger;
+      return this.apiListbox().componentTrigger;
     },
 
     componentContent() {
-      return this.api().componentContent;
+      return this.apiListbox().componentContent;
     },
 
     list() {
-      return this.api().list;
+      return this.apiListbox().list;
     },
 
     search() {
-      return this.api().search;
+      return this.apiListbox().search;
     },
   },
 
@@ -116,13 +126,13 @@ export default {
       onClick: this.onClick,
     };
 
-    this.api().registerItem(item);
+    this.apiListbox().registerItem(item);
 
     this.index = this.items.length - 1;
   },
 
   beforeDestroy() {
-    this.api().unregisterItem(this.id);
+    this.apiListbox().unregisterItem(this.id);
   },
 
   methods: {
@@ -209,7 +219,7 @@ export default {
     onClick() {
       if (this.disabled) return;
 
-      this.api().emit(this.value);
+      this.apiListbox().emit(this.value);
       this.$nextTick(() => this.leaveMenu());
     },
 

package/src/components/Listbox/VTListboxLabel.vue

@@ -4,8 +4,6 @@
     :class="{
       ListboxLabel: headless,
       'mb-2 block text-xs font-normal uppercase': !headless,
-      'text-inherit': !dark && !headless,
-      'text-white': dark && !headless,
     }"
   >
     <slot></slot>
@@ -16,8 +14,6 @@
 export default {
   name: 'VTListboxLabel',
 
-  inject: ['api'],
-
   props: {
     as: {
       type: String,
@@ -28,11 +24,5 @@ export default {
       default: false,
     },
   },
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-  },
 };
 </script>

package/src/components/Listbox/VTListboxList.vue

@@ -1,22 +1,14 @@
 <template>
-  <ul
-    :id="id"
-    :class="{
-      ListboxList: headless,
-      '-mx-3 max-h-[160px] w-auto overflow-y-auto': !headless,
-    }"
-  >
+  <ul :id="id" :class="[headless ? 'listbox-list' : 'max-h-[160px] w-auto']">
     <slot></slot>
   </ul>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
-
 export default {
-  name: "VTListboxList",
+  name: 'VTListboxList',
 
-  inject: ["api"],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -27,11 +19,16 @@ export default {
 
   data() {
     return {
-      id: `listboxlist-${genId()}`,
       isMousemove: false,
     };
   },
 
+  computed: {
+    id() {
+      return `listbox-list-${this.apiListbox().id}`;
+    },
+  },
+
   mounted() {
     const list = {
       el: this.$el,
@@ -40,7 +37,7 @@ export default {
       unsetMousemove: this.unsetMousemove,
     };
 
-    this.api().registerList(list);
+    this.apiListbox().registerList(list);
   },
 
   methods: {

package/src/components/Listbox/VTListboxSearch.vue

@@ -19,7 +19,7 @@
 export default {
   name: 'VTListboxSearch',
 
-  inject: ['api'],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -37,15 +37,15 @@ export default {
 
   computed: {
     componentTrigger() {
-      return this.api().componentTrigger;
+      return this.apiListbox().componentTrigger;
     },
 
     list() {
-      return this.api().list;
+      return this.apiListbox().list;
     },
 
     items() {
-      return this.api().items;
+      return this.apiListbox().items;
     },
 
     item() {
@@ -58,7 +58,7 @@ export default {
       el: this.$el,
     };
 
-    this.api().registerSearch(search);
+    this.apiListbox().registerSearch(search);
     this.$nextTick(() => setTimeout(() => this.$el.focus(), 150));
   },
 

package/src/components/Listbox/VTListboxTrigger.vue

@@ -6,7 +6,7 @@
     :class="[
       headless
         ? 'listbox-button'
-        : 'flex w-full justify-between border border-solid py-2 px-3 rounded text-inherit max-w-full',
+        : 'flex w-full justify-between border border-solid py-2 px-3 gap-3 rounded text-inherit max-w-full',
       headless
         ? `listbox-button--${variant}`
         : isError
@@ -48,7 +48,7 @@ export default {
 
   components: { IconChevronDown },
 
-  inject: ['api'],
+  inject: ['apiListbox'],
 
   props: {
     disabled: {
@@ -74,7 +74,7 @@ export default {
 
   computed: {
     id() {
-      return `listbox-trigger-${this.api().id}`;
+      return `listbox-trigger-${this.apiListbox().id}`;
     },
 
     isError() {
@@ -82,11 +82,11 @@ export default {
     },
 
     componentContent() {
-      return this.api().componentContent;
+      return this.apiListbox().componentContent;
     },
 
     items() {
-      return this.api().items;
+      return this.apiListbox().items;
     },
 
     firstMenuItem() {
@@ -106,7 +106,7 @@ export default {
       id: this.id,
     };
 
-    this.api().registerTrigger(trigger);
+    this.apiListbox().registerTrigger(trigger);
   },
 
   methods: {

package/src/components/Popover/VTPopover.vue

@@ -20,9 +20,7 @@ export default {
 
   provide() {
     return {
-      api: () => {
-        const { dark: isDark, headless: isHeadless, right: isRight } = this;
-
+      apiPopover: () => {
         const registerTrigger = (trigger) => {
           if (!trigger) return;
           this.componentTrigger = trigger;
@@ -35,9 +33,6 @@ export default {
 
         return {
           id: this.componentId,
-          isDark,
-          isHeadless,
-          isRight,
           component: this.component,
           componentTrigger: this.componentTrigger,
           componentContent: this.componentContent,
@@ -53,14 +48,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {

package/src/components/Popover/VTPopoverContent.vue

@@ -3,96 +3,45 @@
     :visible="visible"
     :id="id"
     :headless="headless"
-    :class="{
-      'popover-content': headless,
-    }"
+    :class="{ 'popover-content': headless }"
+    :floating-ui-class="floatingUiClass"
   >
     <slot></slot>
   </FloatingUi>
 </template>
 
 <script>
-import FloatingUi from '../Utils/FloatingUi.vue';
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 
 export default {
   name: 'VTPopoverContent',
 
-  components: {
-    FloatingUi,
-  },
-
-  inject: ['api'],
+  mixins: [floatingUiContentMixin],
 
-  data() {
-    return {
-      visible: false,
-    };
-  },
+  inject: ['apiPopover'],
 
   computed: {
     id() {
-      return `popover-content-${this.api().id}`;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+      return `popover-content-${this.apiPopover().id}`;
     },
 
     component() {
-      return this.api().component;
+      return this.apiPopover().component;
     },
 
     componentTrigger() {
-      return this.api().componentTrigger;
+      return this.apiPopover().componentTrigger;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
-
-    // T-307 Create a directive or mixin for this
-    document.addEventListener('click', (e) => {
-      if (!e) {
-        return;
-      }
-
-      e.stopPropagation();
-
-      if (this.visible && !this.$el.contains(e.target)) {
-        this.hide();
-      }
-    });
-  },
-
-  destroyed() {
-    // T-325 Create a directive or mixin for this
-    document.removeEventListener('click', this.componentTrigger.onClick);
-  },
-
-  methods: {
-    show() {
-      if (this.visible) return;
-
-      this.visible = true;
-
-      this.$nextTick(() => {
-        this.component.setActive();
-      });
-    },
-
-    hide() {
-      if (!this.visible) return;
-
-      this.visible = false;
-
-      this.$nextTick(() => {
-        this.componentTrigger.focus();
+    const content = {
+      id: this.id,
+      show: this.show,
+      hide: this.hide,
+    };
 
-        setTimeout(() => {
-          this.component.clearActive();
-        }, 100);
-      });
-    },
+    this.apiPopover().registerContent(content);
   },
 };
 </script>

package/src/components/Popover/VTPopoverDivider.vue

@@ -3,8 +3,6 @@
     :class="{
       PopoverDivider: headless,
       'h-[1px]': !headless,
-      'bg-white': !dark,
-      'bg-fd-500': dark,
     }"
   ></div>
 </template>
@@ -13,15 +11,10 @@
 export default {
   name: 'VTPopoverDivider',
 
-  inject: ['api'],
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
     },
   },
 };

package/src/components/Popover/VTPopoverItem.vue

@@ -1,13 +1,12 @@
 <template>
   <component
     :is="as"
-    :class="{
-      PopoverItem: headless,
-      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 no-underline':
-        !headless,
-      'text-fd-500': !dark,
-      'text-white hover:bg-fd-450': dark,
-    }"
+    :class="[
+      // default styles
+      headless
+        ? 'popover-item'
+        : 'relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
+    ]"
     @click="onClick"
   >
     <slot></slot>
@@ -18,26 +17,30 @@
 export default {
   name: 'VTPopoverItem',
 
-  inject: ['api'],
+  inject: ['apiPopover'],
 
   props: {
-    to: {
-      type: [String, Object],
-      default: null,
+    headless: {
+      type: Boolean,
+      default: false,
     },
     href: {
       type: String,
       default: null,
     },
+    to: {
+      type: [String, Object],
+      default: null,
+    },
   },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiPopover().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiPopover().isHeadless;
     },
 
     as() {

package/src/components/Popover/VTPopoverTrigger.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id" @keydown.esc.prevent="onEsc">
+  <div :id="id" @keydown.esc.prevent="onKeyEsc">
     <slot></slot>
   </div>
 </template>
@@ -8,52 +8,149 @@
 export default {
   name: 'VTPopoverTrigger',
 
-  inject: ['api'],
+  inject: ['apiPopover'],
+
+  data() {
+    return {
+      expanded: false,
+      hasPopup: false,
+      controls: null,
+      trigger: null,
+    };
+  },
 
   computed: {
     id() {
-      return `popover-trigger-${this.api().id}`;
+      return `popover-trigger-${this.apiPopover().id}`;
     },
 
     componentContent() {
-      return this.api().componentContent;
+      return this.apiPopover().componentContent;
     },
   },
 
   mounted() {
-    this.api().registerTrigger(this);
-    this.handleSlotTrigger();
+    const trigger = {
+      id: this.id,
+      el: this.$el,
+      cancel: this.cancel,
+      focus: this.focus,
+    };
+
+    this.apiPopover().registerTrigger(trigger);
+
+    this.setTrigger();
+    this.addTriggerEvents();
+  },
+
+  destroyed() {
+    this.trigger.removeEventListener('click', this.onClick);
   },
 
   methods: {
-    handleSlotTrigger() {
-      const slot = this.$slots.default;
-      const trigger = slot[0].elm;
+    setTrigger() {
+      this.trigger = this.$el.querySelector(':first-child');
+    },
+
+    /**
+     * Add event listener to slot element
+     *
+     * The click event has to be added to the slot child element
+     * since we are not setting the onclick on the component
+     * itself.
+     *
+     * Slot must have only one child element. It avoids
+     * errors related to adding the event listener.
+     */
+    addTriggerEvents() {
+      this.trigger.addEventListener('click', (e) => {
+        this.onClick(e);
+      });
+    },
 
-      if (slot.length > 1) {
-        console.error('VTPopoverButton only accepts one item in its slot');
+    init(e) {
+      if (!this.componentContent) {
         return;
       }
 
-      trigger.addEventListener('click', (e) => {
-        this.onClick();
-        e.stopPropagation();
-      });
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
+
+      this.expanded = true;
+
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showComponentContent(), 100);
+    },
+
+    cancel() {
+      if (!this.componentContent) {
+        return;
+      }
+
+      this.expanded = false;
+
+      this.hideComponentContent();
     },
 
     focus() {
-      this.$el.focus();
+      if (this.trigger) this.trigger.focus();
     },
 
-    onClick() {
-      if (this.componentContent.visible) this.componentContent.hide();
-      else this.componentContent.show();
+    showComponentContent() {
+      this.componentContent.show();
     },
 
-    onEsc() {
-      if (!this.componentContent) return;
+    hideComponentContent() {
       this.componentContent.hide();
     },
+
+    toggleAriaHasPopup() {
+      if (this.expanded) {
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
+
+        return;
+      }
+
+      this.hasPopup = null;
+      this.controls = null;
+    },
+
+    onClick(e) {
+      this.init(e);
+    },
+
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
+
+      const keyCode = e.code;
+      const listItemPosition =
+        keyCode === 'ArrowDown'
+          ? 'firstMenuItem'
+          : keyCode === 'ArrowUp'
+          ? 'lastMenuItem'
+          : null;
+
+      // settimeout here is delaying the focusing the element
+      // since it is not rendered yet. All items will only
+      // be available when the content is fully visible.
+      this.$nextTick(() => {
+        setTimeout(() => this[listItemPosition].focus(), 100);
+      });
+    },
+
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
+    },
   },
 };
 </script>

package/src/components/Utils/FloatingUi.vue

@@ -16,6 +16,7 @@
           headless
             ? null
             : 'absolute z-50 grid min-w-min overflow-hidden rounded-md py-2 px-3 border-gray-100 bg-white shadow-300',
+          floatingUiClass ? floatingUiClass : null,
         ]"
       >
         <slot></slot>
@@ -45,6 +46,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    floatingUiClass: {
+      type: [String, Function],
+      default: null,
+    },
   },
 
   methods: {