feat(popovers): round 1 of position corrections

* add `hx-popover[relative-to]` functionality
* add test for `hx-popover` in scrolling `<hx-div>`
* update `hx-popover` to reposition on document `scroll` events
* update `hx-popover` listener logic to add/remove listeners on
  open/close instead of connect/disconnect
* simplify `hx-popover` open/close logic to use use
  `<hx-disclosure>` instead of `[data-popover]`
* update positioning CSS to support `*-start` and `*-end`
  positions with arrows
* verify deprecated `<hx-popover-*>` elements are still styled correctly

-----

DEPRECATED:
* deprecate `<hx-popover-head>` in favor of `hx-popover > header`
* deprecate `<hx-popover-body>` in favor of `hx-popover > hx-div`
* deprecate `<hx-popover-foot>` in favor of `hx-popover > footer`

BREAKING:
* position calculations will always return fixed coordinates in relation
  to the viewport
* removed `[data-popover]` configuration in favor of `<hx-disclosure>`
  * `data-popover="popoverId"` --> `<hx-disclosure aria-controls="popoverId">`

Author: Ryan A. Johnson

docs/_data/nav.json5

@@ -94,9 +94,6 @@
             { label: '<hx-panelhead>', path: 'hx-panelhead' },
             { label: '<hx-pill>', path: 'hx-pill' },
             { label: '<hx-popover>', path: 'hx-popover' },
-            { label: '<hx-popover-body>', path: 'hx-popover-body' },
-            { label: '<hx-popover-foot>', path: 'hx-popover-foot' },
-            { label: '<hx-popover-head>', path: 'hx-popover-head' },
             { label: '<hx-progress>', path: 'hx-progress' },
             { label: '<hx-reveal>', path: 'hx-reveal' },
             { label: '<hx-search>', path: 'hx-search' },

docs/components/popovers/index.html

@@ -4,10 +4,8 @@
 also:
   components/buttons: Buttons
   components/popovers/test.html: Testing - Popovers
-  elements/hx-popover-body: <hx-popover-body>
-  elements/hx-popover-foot: <hx-popover-foot>
-  elements/hx-popover-head: <hx-popover-head>
   elements/hx-popover: <hx-popover>
+  api/module-HelixUI_Utils_Position_Offset.html: API - Positioning
 ---
 {% extends 'component.njk' %}
 {% block content %}
@@ -27,45 +25,54 @@ <h2 id="basic-popover">Basic Popover</h2>
         </form>
       </header>
 
-      <div>
-        <button data-popover="myPopover" class="hxBtn">Toggle</button>
+      <div
+        v-for="_position in positions"
+        v-if="_position.value === position.value"
+      >
+        <hx-disclosure aria-controls="demoPopover" class="hxBtn">
+          Toggle
+        </hx-disclosure>
 
-        <hx-popover id="myPopover"
+        <hx-popover
+          id="demoPopover"
+          :key="position.label"
           :position="position.value"
-          v-for="_position in positions"
-          v-if="_position.value === position.value">
-
-          <hx-popover-head>
+        >
+          <header>
             Popover Header
-          </hx-popover-head>
+          </header>
 
-          <hx-popover-body>
-            <p>This is my popover body</p>
-          </hx-popover-body>
+          <hx-div>
+            <p>This is my popover body.</p>
+          </hx-div>
 
-          <hx-popover-foot>
+          <footer>
             <button class="hxBtn hxPrimary">Submit</button>
             <button class="hxBtn">Cancel</button>
-          </hx-popover-foot>
+          </footer>
         </hx-popover>
       </div>
 
       <footer>
         {% code 'html' %}{% raw %}
-          <button data-popover="myPopover" class="hxBtn">Toggle</button>
-          <hx-popover id="myPopover" position="{{ position.value }}">
-            <hx-popover-head>
+          <hx-disclosure aria-controls="demoPopover" class="hxBtn">
+            Toggle
+          </hx-disclosure>
+          <hx-popover id="demoPopover" position="{{ position.value }}">
+            <header>
               Popover Header
-            </hx-popover-head>
+            </header>
 
-            <hx-popover-body>
-              <p>This is my popover body</p>
-            </hx-popover-body>
+            <hx-div>
+              <p>
+                This is my popover body.
+              </p>
+            </hx-div>
 
-            <hx-popover-foot>
+            <footer>
               <button class="hxBtn hxPrimary">Submit</button>
               <button class="hxBtn">Cancel</button>
-            </hx-popover-foot>
+            </footer>
           </hx-popover>{% endraw %}
         {% endcode %}
       </footer>

docs/components/popovers/popover-demo.js

@@ -1,23 +1,31 @@
 if (document.getElementById('vue-popoverDemo')) {
     const POSITIONS = [
+        { label: 'Top Start', value: 'top-start' },
         { label: 'Top Left', value: 'top-left' },
         { label: 'Top', value: 'top' },
         { label: 'Top Right', value: 'top-right' },
+        { label: 'Top End', value: 'top-end' },
+        { label: 'Right Start', value: 'right-start' },
         { label: 'Right Top', value: 'right-top' },
         { label: 'Right', value: 'right' },
         { label: 'Right Bottom', value: 'right-bottom' },
+        { label: 'Right End', value: 'right-end' },
+        { label: 'Bottom End', value: 'bottom-end' },
         { label: 'Bottom Right', value: 'bottom-right' },
         { label: 'Bottom', value: 'bottom' },
         { label: 'Bottom Left', value: 'bottom-left' },
+        { label: 'Bottom Start', value: 'bottom-start' },
+        { label: 'Left End', value: 'left-end' },
         { label: 'Left Bottom', value: 'left-bottom' },
         { label: 'Left', value: 'left' },
         { label: 'Left Top', value: 'left-top' },
+        { label: 'Left Start', value: 'left-start' },
     ];
 
     new Vue({
         el: '#vue-popoverDemo',
         data: {
-            position: POSITIONS[6],
+            position: POSITIONS[11],
             positions: POSITIONS,
         },
     });