vrembem 4.0.0-next.25 → 4.0.0-next.27

package/README.md

@@ -58,11 +58,13 @@ Import and mount the components you'll need:
 ```js
 // Import all under the vb namespace
 import * as vb from 'vrembem';
-const drawer = new vb.Drawer({ autoMount: true });
+const drawer = new vb.Drawer();
+await drawer.mount();
 
 // Or import individual components
 import { Drawer } from 'vrembem';
-const drawer = new Drawer({ autoMount: true });
+const drawer = new Drawer();
+await drawer.mount();
 ```
 
 ## Markup

package/dev/base.css

@@ -495,7 +495,7 @@ input::-moz-placeholder {
   color: var(--vb-button-foreground-focus, var(--vb-button-foreground-hover, var(--vb-button-foreground, var(--vb-foreground))));
 }
 .button:focus-visible {
-  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-button-focus-ring-color, var(--vb-focus-ring-color, var(--vb-button-accent, var(--vb-form-control-accent)))) h s l/var(--vb-button-focus-ring-opacity, var(--vb-focus-ring-opacity)));
+  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-button-focus-ring-color, var(--vb-focus-ring-color, var(--vb-button-accent, var(--vb-form-control-accent)))) h s l/var(--vb-button-focus-ring-opacity, var(--vb-focus-ring-opacity, 40%)));
   border-color: var(--vb-button-border-color-focus-visible, var(--vb-button-border-color-focus, var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-button-accent, var(--vb-form-control-accent))))));
   background-color: var(--vb-button-background-focus-visible, var(--vb-button-background-focus, var(--vb-button-background-hover, var(--vb-button-background, transparent))));
   box-shadow: var(--vb-button-box-shadow-focus-visible, var(--vb-button-box-shadow-focus, var(--vb-button-box-shadow-hover, var(--vb-button-box-shadow, none))));
@@ -865,24 +865,36 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .dialog {
+  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) transparent;
+  outline-offset: var(--vb-focus-ring-offset);
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: auto;
-  border: var(--vb-dialog-border);
-  border-radius: var(--vb-dialog-border-radius);
-  background: var(--vb-dialog-background);
+  transition-property: outline, border-color;
+  transition-duration: var(--vb-dialog-transition-duration, var(--vb-transition-duration));
+  transition-timing-function: var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function));
+  border: var(--vb-dialog-border, var(--vb-border));
+  border-radius: var(--vb-dialog-border-radius, var(--vb-border-radius));
+  background: var(--vb-dialog-background, var(--vb-background));
   background-clip: padding-box;
-  box-shadow: var(--vb-dialog-box-shadow);
-  color: var(--vb-dialog-foreground);
+  box-shadow: var(--vb-dialog-box-shadow, var(--vb-box-shadow-4));
+  color: var(--vb-dialog-foreground, var(--vb-foreground));
   -webkit-overflow-scrolling: touch;
 }
+.dialog:focus-visible, .dialog[role=alertdialog] {
+  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-dialog-focus-ring-color, var(--vb-focus-ring-color, var(--vb-primary-50))) h s l/var(--vb-dialog-focus-ring-opacity, var(--vb-focus-ring-opacity, 1)));
+  border-color: var(--vb-dialog-focus-ring-color, var(--vb-focus-ring-color, var(--vb-primary-50)));
+}
+.dialog[role=alertdialog] {
+  --vb-dialog-focus-ring-color: var(--vb-important-50);
+}
 
 .dialog__header,
 .dialog__body,
 .dialog__footer {
   flex: 0 0 auto;
-  padding: var(--vb-dialog-padding);
+  padding: var(--vb-dialog-padding, 1em);
 }
 
 .dialog__header,
@@ -891,32 +903,32 @@ a.card:hover, a.card:focus, a.card:focus-within {
   z-index: 1;
   display: flex;
   align-items: center;
-  background: var(--vb-dialog-background);
+  background: var(--vb-dialog-background, var(--vb-background));
   vertical-align: middle;
-  gap: var(--vb-dialog-gap);
+  gap: var(--vb-dialog-gap, 0.5em);
 }
 
 .dialog__header {
   top: 0;
-  border-bottom: var(--vb-dialog-sep-border);
+  border-bottom: var(--vb-dialog-sep-border, var(--vb-border));
 }
 
 .dialog__body {
   flex-grow: 1;
 }
 .dialog__body + .dialog__body {
-  border-top: var(--vb-dialog-sep-border);
+  border-top: var(--vb-dialog-sep-border, var(--vb-border));
 }
 
 .dialog__footer {
   bottom: 0;
-  border-top: var(--vb-dialog-sep-border);
+  border-top: var(--vb-dialog-sep-border, var(--vb-border));
 }
 
 .dialog__title {
   flex-grow: 1;
-  font-size: var(--vb-dialog-title-font-size);
-  font-weight: var(--vb-dialog-title-font-weight);
+  font-size: var(--vb-dialog-title-font-size, var(--vb-font-size-lg));
+  font-weight: var(--vb-dialog-title-font-weight, var(--vb-font-weight-semi-bold));
   line-height: var(--vb-dialog-title-line-height);
 }
 
@@ -926,7 +938,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
 .drawer-frame {
   position: relative;
   display: flex;
-  height: 100vh;
+  height: var(--vb-drawer-frame-height, 100vh);
   overflow: hidden auto;
 }
 
@@ -943,6 +955,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
  */
 .drawer {
   position: absolute;
+  z-index: var(--vb-drawer-z-index, 900);
   top: 0;
   bottom: 0;
   visibility: hidden;
@@ -957,22 +970,22 @@ a.card:hover, a.card:focus, a.card:focus-within {
   top: 0;
   display: flex;
   flex-direction: column;
-  width: 18em;
+  width: var(--vb-drawer-width, 18em);
   max-width: 100%;
   height: 100%;
   overflow: auto;
+  transition-duration: var(--vb-drawer-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
+  transition-timing-function: var(--vb-drawer-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
+  border-top: none;
+  border-bottom: none;
   border-radius: 0;
-  background: var(--vb-background-darker);
-  box-shadow: none;
+  background-clip: border-box;
   opacity: 0;
   -webkit-overflow-scrolling: touch;
 }
-.drawer__dialog .dialog__header,
-.drawer__dialog .dialog__footer {
-  background: var(--vb-background-darker);
-}
-.drawer__dialog .dialog__body {
-  background: var(--vb-background-darker);
+.drawer:not(.drawer_modal) .drawer__dialog {
+  --vb-dialog-background: var(--vb-background-darker);
+  --vb-dialog-box-shadow: none;
 }
 
 /**
@@ -987,8 +1000,8 @@ a.card:hover, a.card:focus, a.card:focus-within {
 .drawer.is-closing {
   visibility: visible;
   flex: 0 0 auto;
-  width: 18em;
-  max-width: 100%;
+  width: var(--vb-drawer-width, 18em);
+  max-width: var(--vb-drawer-max-width, 80%);
   height: 100%;
   overflow: visible;
 }
@@ -996,14 +1009,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
 .drawer.is-opening,
 .drawer.is-closing {
   transition-property: background-color, opacity, transform;
-  transition-duration: var(--vb-drawer-transition-duration);
-  transition-timing-function: var(--vb-drawer-transition-timing-function);
+  transition-duration: var(--vb-drawer-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
+  transition-timing-function: var(--vb-drawer-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
 }
 .drawer.is-opening .drawer__dialog,
 .drawer.is-closing .drawer__dialog {
   transition-property: opacity, transform;
-  transition-duration: var(--vb-drawer-transition-duration);
-  transition-timing-function: var(--vb-drawer-transition-timing-function);
 }
 
 .drawer.is-opening .drawer__dialog,
@@ -1026,6 +1037,10 @@ a.card:hover, a.card:focus, a.card:focus-within {
   left: 0;
   transform: translateX(-100%);
 }
+.drawer:not(.drawer_switch) .drawer__dialog {
+  border-left: none;
+}
+
 .drawer.is-opening,
 .drawer.is-opened {
   transform: translateX(0);
@@ -1043,6 +1058,10 @@ a.card:hover, a.card:focus, a.card:focus-within {
   left: auto;
   transform: translateX(100%);
 }
+.drawer_switch .drawer__dialog {
+  border-right: none;
+}
+
 .drawer_switch.is-closing {
   transform: translateX(100%);
 }
@@ -1050,19 +1069,19 @@ a.card:hover, a.card:focus, a.card:focus-within {
 /**
  * Drawer main margins
  */
-.drawer:not(.drawer_modal, .drawer_switch).is-opening ~ .drawer-main, .drawer:not(.drawer_modal, .drawer_switch).is-opened ~ .drawer-main {
-  margin-left: 18em;
+.drawer:not(.drawer_switch, .drawer_modal).is-opening ~ .drawer-main, .drawer:not(.drawer_switch, .drawer_modal).is-opened ~ .drawer-main {
+  margin-left: var(--vb-drawer-width, 18em);
 }
 
 .drawer.drawer_switch:not(.drawer_modal).is-opening ~ .drawer-main, .drawer.drawer_switch:not(.drawer_modal).is-opened ~ .drawer-main {
-  margin-right: 18em;
+  margin-right: var(--vb-drawer-width, 18em);
 }
 
 /**
  * Drawer modal styles
  */
 .drawer_modal {
-  z-index: 900;
+  --vb-drawer-z-index: 950;
   right: auto;
   left: 0;
   width: 0;
@@ -1076,18 +1095,16 @@ a.card:hover, a.card:focus, a.card:focus-within {
   inset: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--vb-neutral-10);
+  background-color: var(--vb-drawer-screen-color, var(--vb-neutral-10));
   opacity: 0;
 }
 .drawer_modal .drawer__dialog {
   position: absolute;
-  z-index: 901;
   left: 0;
-  width: 18em;
-  max-width: 80%;
+  width: var(--vb-drawer-width, 18em);
+  max-width: var(--vb-drawer-max-width, 80%);
   transform: translateX(-100%);
-  background-color: white;
-  box-shadow: var(--vb-box-shadow-5);
+  background-clip: padding-box;
 }
 .drawer_modal.drawer_switch {
   right: auto;
@@ -1099,13 +1116,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
   left: auto;
   transform: translateX(100%);
 }
-.drawer_modal .dialog__header,
-.drawer_modal .dialog__footer {
-  background: white;
-}
-.drawer_modal .dialog__body {
-  background: white;
-}
 
 /**
  * Drawer modal transition
@@ -1120,7 +1130,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
 
 .drawer_modal.is-opening::before,
 .drawer_modal.is-closing::before {
-  transition: opacity var(--vb-drawer-transition-duration) var(--vb-drawer-transition-timing-function);
+  transition: opacity var(--vb-drawer-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration))) var(--vb-drawer-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
 }
 
 .drawer_modal.is-opening,
@@ -1129,7 +1139,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 .drawer_modal.is-opening::before,
 .drawer_modal.is-opened::before {
-  opacity: 0.8;
+  opacity: var(--vb-drawer-screen-opacity, 0.8);
 }
 .drawer_modal.is-opening .drawer__dialog,
 .drawer_modal.is-opened .drawer__dialog {
@@ -3527,7 +3537,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
   color: var(--vb-input-foreground-focus, var(--vb-input-foreground-hover, var(--vb-input-foreground, var(--vb-foreground))));
 }
 .input:focus-visible {
-  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-input-focus-ring-color, var(--vb-focus-ring-color, var(--vb-input-accent, var(--vb-form-control-accent)))) h s l/var(--vb-input-focus-ring-opacity, var(--vb-focus-ring-opacity)));
+  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-input-focus-ring-color, var(--vb-focus-ring-color, var(--vb-input-accent, var(--vb-form-control-accent)))) h s l/var(--vb-input-focus-ring-opacity, var(--vb-focus-ring-opacity, 40%)));
 }
 .input:read-only {
   background-color: var(--vb-input-background-readonly, var(--vb-background-dark));
@@ -3640,7 +3650,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
   color: var(--vb-menu-foreground-focus, var(--vb-menu-foreground-hover, var(--vb-menu-foreground, var(--vb-foreground))));
 }
 .menu__action:focus-visible {
-  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-menu-focus-ring-color, var(--vb-focus-ring-color, var(--vb-menu-accent, var(--vb-form-control-accent)))) h s l/var(--vb-menu-focus-ring-opacity, var(--vb-focus-ring-opacity)));
+  outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) hsl(from var(--vb-menu-focus-ring-color, var(--vb-focus-ring-color, var(--vb-menu-accent, var(--vb-form-control-accent)))) h s l/var(--vb-menu-focus-ring-opacity, var(--vb-focus-ring-opacity, 40%)));
   border-color: var(--vb-menu-border-color-focus-visible, var(--vb-menu-border-color-focus, var(--vb-menu-border-color-hover, var(--vb-menu-border-color, var(--vb-menu-accent, var(--vb-form-control-accent))))));
   background-color: var(--vb-menu-background-focus-visible, var(--vb-menu-background-focus, var(--vb-menu-background-hover, var(--vb-menu-background, var(--vb-background-hover)))));
   box-shadow: var(--vb-menu-box-shadow-focus-visible, var(--vb-menu-box-shadow-focus, var(--vb-menu-box-shadow-hover, var(--vb-menu-box-shadow, none))));
@@ -3692,9 +3702,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
   --vb-menu-font-size: var(--vb-font-size-lg);
 }
 
+/**
+ * Modal
+ */
 .modal {
   position: fixed;
-  z-index: 1000;
+  z-index: var(--vb-modal-z-index, 1000);
   top: 0;
   right: 0;
   display: flex;
@@ -3712,29 +3725,23 @@ a.card:hover, a.card:focus, a.card:focus-within {
   inset: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--vb-neutral-10);
+  background-color: var(--vb-modal-screen-color, var(--vb-neutral-10));
   opacity: 0;
 }
 
 .modal__dialog {
-  width: 36em;
-  max-width: 100%;
+  width: var(--vb-modal-width, 36em);
+  max-width: var(--vb-modal-max-width, 100%);
   overflow: auto;
-  transform: translateY(-5em);
-  transition-property: outline;
-  transition-duration: var(--vb-modal-transition-duration);
-  transition-timing-function: var(--vb-modal-transition-timing-function);
-  outline: 0 solid transparent;
-  box-shadow: var(--vb-box-shadow-5);
+  transform: translateY(calc(var(--vb-modal-travel, 5em) * -1));
+  transition-duration: var(--vb-modal-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
+  transition-timing-function: var(--vb-modal-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
   opacity: 0;
 }
-.modal__dialog:focus {
-  outline: 4px solid var(--vb-primary-50);
-}
-.modal__dialog[role=alertdialog]:focus {
-  outline: 4px solid var(--vb-important-50);
-}
 
+/**
+ * State classes
+ */
 .modal.is-closed {
   visibility: hidden;
 }
@@ -3745,23 +3752,23 @@ a.card:hover, a.card:focus, a.card:focus-within {
   visibility: visible;
   width: 100%;
   height: 100%;
-  padding: 1em;
+  padding: var(--vb-modal-screen-padding, 1em);
 }
 
 .modal.is-opening::before,
 .modal.is-closing::before {
-  transition: opacity var(--vb-modal-transition-duration) var(--vb-modal-transition-timing-function);
+  transition: opacity var(--vb-modal-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration))) var(--vb-modal-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
 }
 .modal.is-opening .modal__dialog,
 .modal.is-closing .modal__dialog {
   transition-property: opacity, transform;
-  transition-duration: var(--vb-modal-transition-duration);
-  transition-timing-function: var(--vb-modal-transition-timing-function);
+  transition-duration: var(--vb-modal-transition-duration, var(--vb-dialog-transition-duration, var(--vb-transition-duration)));
+  transition-timing-function: var(--vb-modal-transition-timing-function, var(--vb-dialog-transition-timing-function, var(--vb-transition-timing-function)));
 }
 
 .modal.is-opening::before,
 .modal.is-opened::before {
-  opacity: 0.8;
+  opacity: var(--vb-modal-screen-opacity, 0.8);
 }
 .modal.is-opening .modal__dialog,
 .modal.is-opened .modal__dialog {
@@ -3770,19 +3777,19 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .modal.is-closing .modal__dialog {
-  transform: translateY(-5em);
+  transform: translateY(calc(var(--vb-modal-travel, 5em) * -1));
 }
 
 .modal_full .modal__dialog {
   width: 100%;
   height: 100%;
-  transform: scale(0.75);
+  transform: scale(var(--vb-modal-full-scale, 0.75));
 }
 .modal_full.is-opened .modal__dialog, .modal_full.is-opening .modal__dialog {
   transform: scale(1);
 }
 .modal_full.is-closing .modal__dialog {
-  transform: scale(0.75);
+  transform: scale(var(--vb-modal-full-scale, 0.75));
 }
 
 .modal_pos_top {
@@ -3793,16 +3800,16 @@ a.card:hover, a.card:focus, a.card:focus-within {
   justify-content: flex-end;
 }
 .modal_pos_bottom .modal__dialog {
-  transform: translateY(5em);
+  transform: translateY(var(--vb-modal-travel, 5em));
 }
 .modal_pos_bottom.is-closing .modal__dialog {
-  transform: translateY(5em);
+  transform: translateY(var(--vb-modal-travel, 5em));
 }
 
 .modal_pos_left .modal__dialog,
 .modal_pos_right .modal__dialog {
-  width: 16em;
-  max-width: 90%;
+  --vb-modal-width: 16em;
+  --vb-modal-max-width: 90%;
   height: 100%;
 }
 
@@ -3829,23 +3836,23 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .modal_size_xs .modal__dialog {
-  width: 20em;
+  --vb-modal-width: 20em;
 }
 
 .modal_size_sm .modal__dialog {
-  width: 24em;
+  --vb-modal-width: 24em;
 }
 
 .modal_size_md .modal__dialog {
-  width: 36em;
+  --vb-modal-width: 36em;
 }
 
 .modal_size_lg .modal__dialog {
-  width: 48em;
+  --vb-modal-width: 48em;
 }
 
 .modal_size_xl .modal__dialog {
-  width: 60em;
+  --vb-modal-width: 60em;
 }
 
 .notice {
@@ -3889,12 +3896,12 @@ a.card:hover, a.card:focus, a.card:focus-within {
 .popover {
   position: absolute;
   z-index: var(--vb-popover-z-index, 10);
-  top: 100%;
+  top: 0;
   left: 0;
   display: block;
   width: var(--vb-popover-width, 16em);
   max-width: var(--vb-popover-max-width, calc(100vw - 20px));
-  margin: calc(var(--vb-popover-offset) * 1px) 0 0;
+  margin: 0;
   padding: var(--vb-popover-padding, 0.5em);
   transition-property: var(--vb-popover-transition-property, opacity);
   transition-duration: var(--vb-popover-transition-duration, var(--vb-transition-duration-short));
@@ -3926,37 +3933,25 @@ a.card:hover, a.card:focus, a.card:focus-within {
   z-index: calc(var(--vb-popover-z-index, 10) + 2);
 }
 
-.popover[data-popper-placement^=top] {
-  margin: 0 0 calc(var(--vb-popover-offset) * 1px) 0;
-}
-.popover[data-popper-placement^=top]::before {
+.popover[data-floating-placement^=top]::before {
   inset: 100% 0 auto;
   width: 100%;
   height: calc((var(--vb-popover-offset) + 1) * 1px);
 }
 
-.popover[data-popper-placement^=bottom] {
-  margin: calc(var(--vb-popover-offset) * 1px) 0 0 0;
-}
-.popover[data-popper-placement^=bottom]::before {
+.popover[data-floating-placement^=bottom]::before {
   inset: auto 0 100%;
   width: 100%;
   height: calc((var(--vb-popover-offset) + 1) * 1px);
 }
 
-.popover[data-popper-placement^=left] {
-  margin: 0 calc(var(--vb-popover-offset) * 1px) 0 0;
-}
-.popover[data-popper-placement^=left]::before {
+.popover[data-floating-placement^=left]::before {
   inset: 0 auto 0 100%;
   width: calc((var(--vb-popover-offset) + 1) * 1px);
   height: 100%;
 }
 
-.popover[data-popper-placement^=right] {
-  margin: 0 0 0 calc(var(--vb-popover-offset) * 1px);
-}
-.popover[data-popper-placement^=right]::before {
+.popover[data-floating-placement^=right]::before {
   inset: 0 100% 0 auto;
   width: calc((var(--vb-popover-offset) + 1) * 1px);
   height: 100%;
@@ -3979,31 +3974,31 @@ a.card:hover, a.card:focus, a.card:focus-within {
   background-clip: padding-box;
 }
 
-[data-popper-placement^=top] > .popover__arrow {
+[data-floating-placement^=top] > .popover__arrow {
   bottom: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
 }
-[data-popper-placement^=top] > .popover__arrow::after {
+[data-floating-placement^=top] > .popover__arrow::after {
   transform: rotate(-135deg);
 }
 
-[data-popper-placement^=bottom] > .popover__arrow {
+[data-floating-placement^=bottom] > .popover__arrow {
   top: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
 }
-[data-popper-placement^=bottom] > .popover__arrow::after {
+[data-floating-placement^=bottom] > .popover__arrow::after {
   transform: rotate(45deg);
 }
 
-[data-popper-placement^=left] > .popover__arrow {
+[data-floating-placement^=left] > .popover__arrow {
   right: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
 }
-[data-popper-placement^=left] > .popover__arrow::after {
+[data-floating-placement^=left] > .popover__arrow::after {
   transform: rotate(135deg);
 }
 
-[data-popper-placement^=right] > .popover__arrow {
+[data-floating-placement^=right] > .popover__arrow {
   left: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
 }
-[data-popper-placement^=right] > .popover__arrow::after {
+[data-floating-placement^=right] > .popover__arrow::after {
   transform: rotate(-45deg);
 }
 
@@ -4020,6 +4015,7 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .popover_tooltip {
+  --vb-popover-event: hover;
   --vb-popover-placement: top;
   --vb-popover-toggle-delay: 300;
   --vb-popover-width: auto;