More button options and dividers in overflow menus

docs/components/button.md

@@ -58,6 +58,38 @@
 <Button color="blue" transparent><GlobeIcon/> Visit website</Button>
 ```
 
+## Hover-filled
+
+<DemoContainer>
+<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
+</DemoContainer>
+
+```vue
+<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
+```
+
+## Hover-filled-only
+
+<DemoContainer>
+<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
+</DemoContainer>
+
+```vue
+<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
+<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
+<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
+```
+
 ## Icon-only
 
 <DemoContainer>

docs/components/overflow-menu.md

@@ -1,32 +1,47 @@
-<script setup>
-const options = [
+# Overflow Menu
+<DemoContainer>
+  <OverflowMenu :options="[
   {
-    'id': 'like',
+    'id': 'play',
     'color': 'primary',
+    'action': () => {},
+    'hoverFilledOnly': true
+  },
+  { divider: true },
+  {
+    'id': 'duplicate',
     'action': () => {}
   },
   {
     'id': 'report',
     'action': () => {}
   },
+  {
+    'id': 'remain',
+    'action': () => {},
+    'remainOnClick': true,
+  },
+  { divider: true },
   {
     'id': 'delete',
     'color': 'danger',
-    'action': () => {}
+    'action': () => {},
+    'hoverFilled': true,
   }
-]
-</script>
-
-# Overflow Menu
-<DemoContainer>
-  <OverflowMenu :options="options" class="btn">
+]" class="btn">
     More options...
-    <template #like>
-      <HeartIcon /> Like
+    <template #play>
+      <PlayIcon /> Play
+    </template>
+    <template #duplicate>
+      <CopyIcon /> Duplicate
     </template>
     <template #report>
       <ReportIcon /> Report
     </template>
+    <template #remain>
+      <ClearIcon /> I shall remain
+    </template>
     <template #delete>
       <TrashIcon /> Delete
     </template>
@@ -34,7 +49,37 @@ const options = [
 </DemoContainer>
 
 ```vue
-<OverflowMenu :options="options" class="btn">
+<OverflowMenu
+  class="btn"
+  :options="[
+    {
+      'id': 'play',
+      'color': 'primary',
+      'action': () => {},
+      'hoverFilledOnly': true
+    },
+    { divider: true },
+    {
+      'id': 'duplicate',
+      'action': () => {}
+    },
+    {
+      'id': 'report',
+      'action': () => {}
+    },
+    {
+      'id': 'remain',
+      'action': () => {},
+      'remainOnClick': true,
+    },
+    { divider: true },
+    {
+      'id': 'delete',
+      'color': 'danger',
+      'action': () => {},
+      'hoverFilled': true,
+    }
+]">
   More options...
   <template #like>
     <HeartIcon /> Like