vrembem 4.0.0-next.46 → 4.0.0-next.47

package/dev/index.css

@@ -2761,7 +2761,6 @@
   }
   .select::picker(select) {
     cursor: default;
-    transform: translateY(0);
     margin-block: var(--vb-select-picker-offset, 0.5em);
     padding: var(--vb-select-picker-padding, 0.5em 0);
     border: var(--vb-select-picker-border, none);
@@ -2774,14 +2773,17 @@
     box-shadow: var(--vb-select-picker-box-shadow, var(--vb-box-shadow-md));
     transition-timing-function: var(--vb-form-control-transition-timing-function);
     transition-duration: var(--vb-form-control-transition-duration);
-    transition-property: opacity, transform;
+    transition-property: opacity, display, overlay;
+    transition-behavior: allow-discrete;
   }
   @starting-style {
     .select::picker(select) {
-      transform: translateY(-0.5em);
       opacity: 0;
     }
   }
+  .select:not(:open)::picker(select) {
+    opacity: 0;
+  }
   .select option {
     cursor: pointer;
     padding: var(--vb-select-option-padding, 0.25em 1em 0.25em 0.5em);
@@ -2801,6 +2803,10 @@
   .select option:hover {
     background-color: var(--vb-select-option-background-hover, color-mix(in oklch, currentcolor 4%, transparent));
   }
+  .select option:focus-visible {
+    background-color: var(--vb-select-option-background-hover, color-mix(in oklch, var(--vb-select-accent, var(--vb-form-control-accent)) 8%, transparent));
+    outline: none;
+  }
   .select option:active {
     background-color: var(--vb-select-option-background-active, color-mix(in oklch, currentcolor 8%, transparent));
   }
@@ -3034,127 +3040,16 @@
   }
 }
 @layer components {
-  .drawer-frame {
-    position: relative;
-    overflow: hidden auto;
-    display: flex;
-    height: var(--vb-drawer-frame-height, 100vh);
-  }
-  .drawer-main {
-    position: relative;
-    overflow: auto;
-    flex: 1 1 auto;
-    height: 100%;
-  }
-  .drawer {
-    position: absolute;
-    z-index: var(--vb-drawer-z-index, 900);
-    inset: 0 auto 0 0;
-    width: var(--vb-drawer-width, 18em);
-  }
-  .drawer__panel,
-  .drawer > .panel {
-    outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) transparent;
-    outline-offset: var(--vb-focus-ring-offset);
-    position: absolute;
-    inset: 0;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    border: none;
-    border-radius: 0;
-  }
-  .drawer__panel:focus-visible,
-  .drawer > .panel:focus-visible {
-    outline-color: oklch(from var(--vb-focus-ring-color) l c h/100%);
-  }
-  .drawer__container {
-    position: relative;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
-  .drawer.is-closed {
-    visibility: hidden;
-  }
-  .drawer.is-opening,
-  .drawer.is-opened,
-  .drawer.is-closing {
-    visibility: visible;
-  }
-  .drawer.is-opening,
-  .drawer.is-closing {
-    transition: opacity var(--vb-transition);
-  }
-  .drawer.is-opening .drawer__panel,
-  .drawer.is-closing .drawer__panel {
-    transition: transform var(--vb-transition);
-  }
-  .drawer.is-opening,
-  .drawer.is-opened {
-    opacity: 1;
-  }
-  .drawer.is-opening .drawer__panel,
-  .drawer.is-opened .drawer__panel {
-    transform: translateX(0);
-  }
-  .drawer.is-closing,
-  .drawer.is-closed {
-    opacity: 0;
-  }
-  .drawer.is-closing .drawer__panel,
-  .drawer.is-closed .drawer__panel {
-    transform: translateX(-100%);
-  }
-  .drawer--switch {
-    inset: 0 0 0 auto;
-  }
-  .drawer--switch.is-closing .drawer__panel, .drawer--switch.is-closed .drawer__panel {
-    transform: translateX(100%);
-  }
-  .drawer:not(.drawer--modal).is-opening ~ .drawer-main, .drawer:not(.drawer--modal).is-closing ~ .drawer-main {
-    transition: margin var(--vb-transition);
-  }
-  .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: var(--vb-drawer-width, 18em);
-  }
-  .drawer--modal {
-    position: fixed;
-    inset: 0;
-    width: auto;
-    max-width: none;
-    visibility: hidden;
-  }
-  .drawer--modal::before {
-    content: "";
-    position: fixed;
-    inset: 0;
-    opacity: 0;
-    background-color: var(--vb-drawer-backdrop-color, var(--vb-backdrop-color));
-  }
-  .drawer--modal .drawer__panel {
-    --vb-panel-box-shadow: var(--vb-box-shadow-xl);
-    inset: 0 auto 0 0;
-    width: var(--vb-drawer-width, 18em);
-    max-width: var(--vb-drawer-max-width, 80%);
-  }
-  .drawer--modal.drawer--switch .drawer__panel {
-    inset: 0 0 0 auto;
-  }
-  .drawer--modal {
-    --vb-drawer-z-index: 950;
+  vb-drawer {
+    --vb-drawer-breakpoint: md;
+    --vb-drawer-position: left;
+    display: block;
   }
-  .drawer--modal.is-opening::before,
-  .drawer--modal.is-closing::before {
-    transition: opacity var(--vb-drawer-transition-duration, var(--vb-transition-duration)) var(--vb-drawer-transition-timing-function, var(--vb-transition-timing-function));
+  vb-drawer.is-modal {
+    display: contents;
   }
-  .drawer--modal.is-opening::before,
-  .drawer--modal.is-opened::before {
-    opacity: var(--vb-drawer-backdrop-opacity, var(--vb-backdrop-opacity));
+  vb-drawer.is-modal > :not(dialog) {
+    display: none;
   }
 }
 @layer components {
@@ -3301,12 +3196,12 @@
     flex-direction: row;
     align-items: center;
   }
-  .menu--inline .menu__sep {
+  .menu--inline > .menu__sep {
     width: var(--vb-menu-sep-size, 1px);
     height: auto;
     margin: var(--vb-menu-sep-gap, 0.5em);
   }
-  .menu--inline .menu__action {
+  .menu--inline > .menu__item > .menu__action {
     justify-content: center;
     white-space: nowrap;
   }
@@ -3315,12 +3210,12 @@
       flex-direction: row;
       align-items: center;
     }
-    .xs\:menu--inline .menu__sep {
+    .xs\:menu--inline > .menu__sep {
       width: var(--vb-menu-sep-size, 1px);
       height: auto;
       margin: 0 var(--vb-menu-sep-gap, 0.5em);
     }
-    .xs\:menu--inline .menu__action {
+    .xs\:menu--inline > .menu__item > .menu__action {
       justify-content: center;
       white-space: nowrap;
     }
@@ -3330,12 +3225,12 @@
       flex-direction: row;
       align-items: center;
     }
-    .sm\:menu--inline .menu__sep {
+    .sm\:menu--inline > .menu__sep {
       width: var(--vb-menu-sep-size, 1px);
       height: auto;
       margin: 0 var(--vb-menu-sep-gap, 0.5em);
     }
-    .sm\:menu--inline .menu__action {
+    .sm\:menu--inline > .menu__item > .menu__action {
       justify-content: center;
       white-space: nowrap;
     }
@@ -3345,12 +3240,12 @@
       flex-direction: row;
       align-items: center;
     }
-    .md\:menu--inline .menu__sep {
+    .md\:menu--inline > .menu__sep {
       width: var(--vb-menu-sep-size, 1px);
       height: auto;
       margin: 0 var(--vb-menu-sep-gap, 0.5em);
     }
-    .md\:menu--inline .menu__action {
+    .md\:menu--inline > .menu__item > .menu__action {
       justify-content: center;
       white-space: nowrap;
     }
@@ -3360,12 +3255,12 @@
       flex-direction: row;
       align-items: center;
     }
-    .lg\:menu--inline .menu__sep {
+    .lg\:menu--inline > .menu__sep {
       width: var(--vb-menu-sep-size, 1px);
       height: auto;
       margin: 0 var(--vb-menu-sep-gap, 0.5em);
     }
-    .lg\:menu--inline .menu__action {
+    .lg\:menu--inline > .menu__item > .menu__action {
       justify-content: center;
       white-space: nowrap;
     }
@@ -3375,142 +3270,118 @@
       flex-direction: row;
       align-items: center;
     }
-    .xl\:menu--inline .menu__sep {
+    .xl\:menu--inline > .menu__sep {
       width: var(--vb-menu-sep-size, 1px);
       height: auto;
       margin: 0 var(--vb-menu-sep-gap, 0.5em);
     }
-    .xl\:menu--inline .menu__action {
+    .xl\:menu--inline > .menu__item > .menu__action {
       justify-content: center;
       white-space: nowrap;
     }
   }
 }
 @layer components {
-  .modal {
-    position: fixed;
-    z-index: var(--vb-modal-z-index, 1000);
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 0;
-    height: 0;
-    visibility: hidden;
+  body:has(dialog.modal:modal) {
+    overflow: hidden;
   }
-  .modal::before {
-    content: "";
+  dialog.modal {
+    --vb-panel-box-shadow: var(--vb-box-shadow-xl);
     position: fixed;
     inset: 0;
-    opacity: 0;
-    background-color: var(--vb-modal-backdrop-color, var(--vb-backdrop-color));
-  }
-  .modal__dialog,
-  .modal > .panel {
-    outline: var(--vb-focus-ring-width) var(--vb-focus-ring-style) transparent;
-    outline-offset: var(--vb-focus-ring-offset);
-    --vb-panel-box-shadow: var(--vb-box-shadow-xl);
-    position: relative;
-    transform: translateY(calc(var(--vb-modal-travel, 5em) * -1));
-    overflow: auto;
-    display: flex;
     flex-direction: column;
-    width: var(--vb-modal-width, 36em);
-    max-width: var(--vb-modal-max-width, 100%);
-    opacity: 0;
-  }
-  .modal__dialog:focus-visible,
-  .modal > .panel:focus-visible {
-    outline-color: oklch(from var(--vb-focus-ring-color) l c h/100%);
+    width: var(--vb-modal-width, 32rem);
+    max-width: var(--vb-modal-max-width, calc(100% - var(--vb-modal-offset, 1rem) * 2));
+    margin: auto;
+    transition-timing-function: var(--vb-modal-transition-timing-function, var(--vb-transition-timing-function));
+    transition-duration: var(--vb-modal-transition-duration, var(--vb-transition-duration));
+    transition-property: var(--vb-modal-transition-property, opacity, display, transform, overlay);
+    transition-behavior: allow-discrete;
   }
-  .modal__dialog[role=alertdialog],
-  .modal > .panel[role=alertdialog] {
-    outline-color: oklch(from var(--vb-important) l c h/100%);
+  dialog.modal::backdrop {
+    opacity: var(--vb-modal-backdrop-opacity, var(--vb-backdrop-opacity));
+    background-color: var(--vb-modal-backdrop-color, var(--vb-backdrop-color));
+    transition-timing-function: var(--vb-modal-transition-timing-function, var(--vb-transition-timing-function));
+    transition-duration: var(--vb-modal-transition-duration, var(--vb-transition-duration));
+    transition-property: var(--vb-modal-transition-property, opacity, display, transform, overlay);
+    transition-behavior: allow-discrete;
   }
-  .modal__container {
-    position: relative;
-    overflow: auto;
+  dialog.modal:open {
     display: flex;
-    flex-direction: column;
-    flex-grow: 1;
   }
-  .modal.is-opening,
-  .modal.is-opened,
-  .modal.is-closing {
-    width: 100%;
-    height: 100%;
-    padding: var(--vb-modal-margin, 1em);
-    visibility: visible;
+  dialog.modal:not(:open) {
+    transform: translate(var(--vb-modal-transform-x, 0), var(--vb-modal-transform-y, calc(var(--vb-modal-travel, 5rem) * -1)));
+    display: none;
+    opacity: 0;
   }
-  .modal.is-opening::before,
-  .modal.is-closing::before {
-    transition: opacity var(--vb-modal-transition-duration, var(--vb-transition-duration)) var(--vb-modal-transition-timing-function, var(--vb-transition-timing-function));
+  dialog.modal:not(:open)::backdrop {
+    opacity: 0;
   }
-  .modal.is-opening .modal__dialog,
-  .modal.is-closing .modal__dialog {
-    transition-timing-function: var(--vb-modal-transition-timing-function, var(--vb-transition-timing-function));
-    transition-duration: var(--vb-modal-transition-duration, var(--vb-transition-duration));
-    transition-property: opacity, transform;
+  @starting-style {
+    dialog.modal {
+      transform: translate(var(--vb-modal-transform-x, 0), var(--vb-modal-transform-y, calc(var(--vb-modal-travel, 5rem) * -1)));
+      opacity: 0;
+    }
+    dialog.modal::backdrop {
+      opacity: 0;
+    }
   }
-  .modal.is-opening::before,
-  .modal.is-opened::before {
-    opacity: var(--vb-modal-backdrop-opacity, var(--vb-backdrop-opacity));
+  dialog.modal--drawer {
+    --vb-modal-width: 100%;
+    --vb-modal-offset: 0;
+    --vb-panel-border-radius: 0;
   }
-  .modal.is-opening .modal__dialog,
-  .modal.is-opened .modal__dialog {
-    transform: translateY(0);
-    opacity: 1;
+  dialog.modal--drawer.modal--pos-left, dialog.modal--drawer.modal--pos-right {
+    --vb-modal-width: 18em;
   }
-  .modal--full .modal__dialog {
-    transform: scale(var(--vb-modal-full-scale, 0.75));
+  dialog.modal--full {
+    transform: scale(1);
     width: 100%;
-    max-width: none;
     height: 100%;
   }
-  .modal--full.is-opening .modal__dialog, .modal--full.is-opened .modal__dialog {
-    transform: scale(1);
+  dialog.modal--full:not(:open) {
+    transform: scale(var(--vb-modal-full-scale, 0.75));
   }
-  .modal--pos-top {
-    justify-content: flex-start;
+  @starting-style {
+    dialog.modal--full {
+      transform: scale(var(--vb-modal-full-scale, 0.75));
+    }
   }
-  .modal--pos-bottom {
-    justify-content: flex-end;
+  dialog.modal--pos-top {
+    margin-top: var(--vb-modal-offset, 1rem);
   }
-  .modal--pos-bottom .modal__dialog {
-    transform: translateY(var(--vb-modal-travel, 5em));
+  dialog.modal--pos-bottom {
+    --vb-modal-transform-y: var(--vb-modal-travel, 5rem);
+    margin-bottom: var(--vb-modal-offset, 1rem);
   }
-  .modal--pos-left .modal__dialog,
-  .modal--pos-right .modal__dialog {
+  dialog.modal--pos-left,
+  dialog.modal--pos-right {
     --vb-modal-width: 16em;
     --vb-modal-max-width: 90%;
     height: 100%;
+    max-height: calc(100% - var(--vb-modal-offset, 1rem) * 2);
   }
-  .modal--pos-left {
-    align-items: flex-start;
-  }
-  .modal--pos-left .modal__dialog {
-    left: 0;
-    transform: translateX(-100%);
-  }
-  .modal--pos-right {
-    align-items: flex-end;
+  dialog.modal--pos-left {
+    --vb-modal-transform-y: 0;
+    --vb-modal-transform-x: -100%;
+    margin-left: var(--vb-modal-offset, 1rem);
   }
-  .modal--pos-right .modal__dialog {
-    right: 0;
-    transform: translateX(100%);
+  dialog.modal--pos-right {
+    --vb-modal-transform-y: 0;
+    --vb-modal-transform-x: 100%;
+    margin-right: var(--vb-modal-offset, 1rem);
   }
-  .modal--size-xs .modal__dialog {
-    --vb-modal-width: 20em;
+  dialog.modal--size-xs {
+    --vb-modal-width: 16rem;
   }
-  .modal--size-sm .modal__dialog {
-    --vb-modal-width: 24em;
+  dialog.modal--size-sm {
+    --vb-modal-width: 24rem;
   }
-  .modal--size-lg .modal__dialog {
-    --vb-modal-width: 48em;
+  dialog.modal--size-lg {
+    --vb-modal-width: 40rem;
   }
-  .modal--size-xl .modal__dialog {
-    --vb-modal-width: 60em;
+  dialog.modal--size-xl {
+    --vb-modal-width: 48rem;
   }
 }
 @layer components {
@@ -3626,127 +3497,248 @@
 }
 @layer components {
   .popover {
-    pointer-events: none;
-    position: absolute;
-    z-index: var(--vb-popover-z-index, 10);
-    top: 0;
-    left: 0;
-    display: block;
-    width: var(--vb-popover-width, 16em);
+    position: fixed;
+    inset: unset;
+    transform: translate(0, 0);
+    position-anchor: auto;
+    position-area: bottom;
+    position-try-fallbacks: flip-block;
+    width: var(--vb-popover-width, 14rem);
     max-width: var(--vb-popover-max-width, calc(100vw - 2rem));
-    margin: 0;
-    padding: var(--vb-popover-padding, 0.5em);
+    margin: var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem);
+    padding: var(--vb-popover-padding, 0.5rem);
     border: var(--vb-popover-border, none);
     border-radius: var(--vb-popover-border-radius, var(--vb-border-radius));
-    font-size: var(--vb-popover-font-size, var(--vb-font-size-sm));
+    font-size: var(--vb-popover-font-size, inherit);
     line-height: var(--vb-popover-line-height, inherit);
     color: var(--vb-popover-foreground, var(--vb-foreground));
-    opacity: 0;
     background: var(--vb-popover-background, var(--vb-background));
     background-clip: padding-box;
     box-shadow: var(--vb-popover-box-shadow, var(--vb-box-shadow-md));
     transition-timing-function: var(--vb-popover-transition-timing-function, var(--vb-transition-timing-function));
     transition-duration: var(--vb-popover-transition-duration, var(--vb-transition-duration-short));
-    transition-property: var(--vb-popover-transition-property, opacity);
-  }
-  .popover::before {
-    content: "";
-    position: absolute;
-    inset: auto 0 100%;
-    width: 100%;
-    height: calc((var(--vb-popover-offset, 8) + 1) * 1px);
+    transition-property: var(--vb-popover-transition-property, opacity, display, transform, overlay);
+    transition-behavior: allow-discrete;
   }
-  .popover.is-virtual::before {
-    content: none;
-  }
-  .popover.is-active {
-    pointer-events: auto;
-    z-index: calc(var(--vb-popover-z-index, 10) + 1);
-    opacity: 1;
-  }
-  .popover:hover, .popover:focus, .popover:focus-within {
-    z-index: calc(var(--vb-popover-z-index, 10) + 2);
-  }
-  .popover[data-floating-placement^=top]::before {
-    inset: 100% 0 auto;
-    width: 100%;
-    height: calc((var(--vb-popover-offset, 8) + 1) * 1px);
-  }
-  .popover[data-floating-placement^=bottom]::before {
-    inset: auto 0 100%;
-    width: 100%;
-    height: calc((var(--vb-popover-offset, 8) + 1) * 1px);
-  }
-  .popover[data-floating-placement^=left]::before {
-    inset: 0 auto 0 100%;
-    width: calc((var(--vb-popover-offset, 8) + 1) * 1px);
-    height: 100%;
-  }
-  .popover[data-floating-placement^=right]::before {
-    inset: 0 100% 0 auto;
-    width: calc((var(--vb-popover-offset, 8) + 1) * 1px);
-    height: 100%;
+  .popover:not(:popover-open) {
+    transform: translate(var(--vb-popover-transform-x, 0), var(--vb-popover-transform-y, calc(var(--vb-popover-offset, 0.5rem) * -1)));
+    opacity: 0;
   }
-  .popover__arrow,
-  .popover__arrow::after {
-    width: var(--vb-popover-arrow-size, 8px);
-    height: var(--vb-popover-arrow-size, 8px);
-    position: absolute;
-    z-index: -1;
-    visibility: hidden;
-    background-color: inherit;
+  @starting-style {
+    .popover {
+      transform: translate(var(--vb-popover-transform-x, 0), var(--vb-popover-transform-y, calc(var(--vb-popover-offset, 0.5rem) * -1)));
+      opacity: 0;
+    }
   }
-  .popover__arrow::after {
+  .popover--arrow,
+  .popover--arrow-top,
+  .popover--arrow-bottom,
+  .popover--arrow-left,
+  .popover--arrow-right {
+    container-type: anchored;
+    overflow: visible;
+    filter: var(--vb-popover-drop-shadow, var(--vb-drop-shadow-md));
+    box-shadow: none;
+  }
+  .popover--arrow::before,
+  .popover--arrow-top::before,
+  .popover--arrow-bottom::before,
+  .popover--arrow-left::before,
+  .popover--arrow-right::before {
+    pointer-events: none;
+    transform-origin: center;
+    display: inline-block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 0;
+    height: 0;
+    border-color: var(--vb-arrow-color, currentcolor) transparent transparent;
+    border-style: solid;
+    border-width: var(--vb-arrow-size, 0.4rem);
+    border-bottom-width: 0;
+    border-radius: var(--vb-arrow-radius, 0);
+    transform: rotate(180deg);
     content: "";
-    transform: rotate(45deg);
-    visibility: visible;
-    background-clip: padding-box;
-  }
-  [data-floating-placement^=top] > .popover__arrow {
-    bottom: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
-  }
-  [data-floating-placement^=top] > .popover__arrow::after {
-    transform: rotate(-135deg);
-  }
-  [data-floating-placement^=bottom] > .popover__arrow {
-    top: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
-  }
-  [data-floating-placement^=bottom] > .popover__arrow::after {
-    transform: rotate(45deg);
-  }
-  [data-floating-placement^=left] > .popover__arrow {
-    right: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
-  }
-  [data-floating-placement^=left] > .popover__arrow::after {
-    transform: rotate(135deg);
-  }
-  [data-floating-placement^=right] > .popover__arrow {
-    left: calc(var(--vb-popover-arrow-size, 8px) * -0.5);
-  }
-  [data-floating-placement^=right] > .popover__arrow::after {
-    transform: rotate(-45deg);
-  }
-  .popover--size-auto {
-    --vb-popover-width: auto;
-  }
-  .popover--size-sm {
-    --vb-popover-width: 12em;
-  }
-  .popover--size-lg {
-    --vb-popover-width: 20em;
+    position: absolute;
+    color: var(--vb-popover-background, var(--vb-background));
+  }
+  .popover--arrow-top::before,
+  .popover--arrow.popover--pos-bottom::before {
+    bottom: 100%;
+    left: calc(50% - 0.4rem);
+  }
+  @container anchored(fallback: flip-block) {
+    .popover--arrow-top::before,
+    .popover--arrow.popover--pos-bottom::before {
+      top: 100%;
+      bottom: auto;
+      rotate: 180deg;
+    }
+  }
+  .popover--arrow-bottom::before,
+  .popover--arrow.popover--pos-top::before {
+    top: 100%;
+    left: calc(50% - 0.4rem);
+    rotate: 180deg;
+  }
+  @container anchored(fallback: flip-block) {
+    .popover--arrow-bottom::before,
+    .popover--arrow.popover--pos-top::before {
+      top: auto;
+      bottom: 100%;
+      rotate: 0deg;
+    }
+  }
+  .popover--arrow-right::before,
+  .popover--arrow.popover--pos-left::before {
+    top: calc(50% - 0.2rem);
+    left: calc(100% - 0.2rem);
+    rotate: 90deg;
+  }
+  @container anchored(fallback: flip-inline) {
+    .popover--arrow-right::before,
+    .popover--arrow.popover--pos-left::before {
+      right: calc(100% - 0.2rem);
+      left: auto;
+      rotate: 270deg;
+    }
+  }
+  .popover--arrow-left::before,
+  .popover--arrow.popover--pos-right::before {
+    top: calc(50% - 0.2rem);
+    right: calc(100% - 0.2rem);
+    rotate: 270deg;
+  }
+  @container anchored(fallback: flip-inline) {
+    .popover--arrow-left::before,
+    .popover--arrow.popover--pos-right::before {
+      right: auto;
+      left: calc(100% - 0.2rem);
+      rotate: 90deg;
+    }
   }
   .popover--tooltip {
-    --vb-popover-event: hover;
-    --vb-popover-placement: top;
-    --vb-popover-toggle-delay: 300;
-    --vb-popover-width: auto;
+    --vb-popover-width: fit-content;
     --vb-popover-max-width: 16rem;
     --vb-popover-padding: 0.5rem 0.75rem;
+    --vb-popover-font-size: var(--vb-font-size-sm);
     --vb-popover-background: var(--vb-foreground-strong);
     --vb-popover-foreground: var(--vb-background);
-  }
-  .popover--tooltip.is-active {
+    --vb-popover-transform-x: 0;
+    --vb-popover-transform-y: var(--vb-popover-offset, 0.5rem);
     pointer-events: none;
+    position-area: top;
+    position-try-fallbacks: flip-block;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--width-auto {
+    --vb-popover-width: fit-content;
+  }
+  .popover--width-sm {
+    --vb-popover-width: 10rem;
+  }
+  .popover--width-lg {
+    --vb-popover-width: 18rem;
+  }
+  .popover--pos-bottom {
+    --vb-popover-transform-x: 0;
+    --vb-popover-transform-y: calc(var(--vb-popover-offset, 0.5rem) * -1);
+    position-area: bottom;
+    position-try-fallbacks: flip-block;
+    margin: var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-bottom-start {
+    --vb-popover-transform-x: 0;
+    --vb-popover-transform-y: calc(var(--vb-popover-offset, 0.5rem) * -1);
+    top: anchor(bottom);
+    left: calc(anchor(left) - var(--vb-popover-margin, 1.5rem));
+    position-area: unset;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    margin: var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-bottom-end {
+    --vb-popover-transform-x: 0;
+    --vb-popover-transform-y: calc(var(--vb-popover-offset, 0.5rem) * -1);
+    top: anchor(bottom);
+    right: calc(anchor(right) - var(--vb-popover-margin, 1.5rem));
+    position-area: unset;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    margin: var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-top {
+    --vb-popover-transform-x: 0;
+    --vb-popover-transform-y: var(--vb-popover-offset, 0.5rem);
+    position-area: top;
+    position-try-fallbacks: flip-block;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-top-start {
+    --vb-popover-transform-x: 0;
+    --vb-popover-transform-y: var(--vb-popover-offset, 0.5rem);
+    bottom: anchor(top);
+    left: calc(anchor(left) - var(--vb-popover-margin, 1.5rem));
+    position-area: unset;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-top-end {
+    --vb-popover-transform-x: 0;
+    --vb-popover-transform-y: var(--vb-popover-offset, 0.5rem);
+    right: calc(anchor(right) - var(--vb-popover-margin, 1.5rem));
+    bottom: anchor(top);
+    position-area: unset;
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-right {
+    --vb-popover-transform-x: calc(var(--vb-popover-offset, 0.5rem) * -1);
+    --vb-popover-transform-y: 0;
+    position-area: right;
+    position-try-fallbacks: flip-inline;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem);
+  }
+  .popover--pos-right-start {
+    --vb-popover-transform-x: calc(var(--vb-popover-offset, 0.5rem) * -1);
+    --vb-popover-transform-y: 0;
+    top: calc(anchor(top) - var(--vb-popover-margin, 1.5rem));
+    left: anchor(right);
+    position-area: unset;
+    position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem);
+  }
+  .popover--pos-right-end {
+    --vb-popover-transform-x: calc(var(--vb-popover-offset, 0.5rem) * -1);
+    --vb-popover-transform-y: 0;
+    bottom: calc(anchor(bottom) - var(--vb-popover-margin, 1.5rem));
+    left: anchor(right);
+    position-area: unset;
+    position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem);
+  }
+  .popover--pos-left {
+    --vb-popover-transform-x: var(--vb-popover-offset, 0.5rem);
+    --vb-popover-transform-y: 0;
+    position-area: left;
+    position-try-fallbacks: flip-inline;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-left-start {
+    --vb-popover-transform-x: var(--vb-popover-offset, 0.5rem);
+    --vb-popover-transform-y: 0;
+    top: calc(anchor(top) - var(--vb-popover-margin, 1.5rem));
+    right: anchor(left);
+    position-area: unset;
+    position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem);
+  }
+  .popover--pos-left-end {
+    --vb-popover-transform-x: var(--vb-popover-offset, 0.5rem);
+    --vb-popover-transform-y: 0;
+    right: anchor(left);
+    bottom: calc(anchor(bottom) - var(--vb-popover-margin, 1.5rem));
+    position-area: unset;
+    position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
+    margin: var(--vb-popover-margin, 1.5rem) var(--vb-popover-offset, 0.5rem) var(--vb-popover-margin, 1.5rem) var(--vb-popover-margin, 1.5rem);
   }
 }
 @layer components {
@@ -4857,7 +4849,7 @@
     box-shadow: 0 0 0 0 transparent;
   }
   .box-shadow-outline {
-    box-shadow: var(--vb-box-shadow-0);
+    box-shadow: var(--vb-box-shadow-outline);
   }
   .box-shadow-xs {
     box-shadow: var(--vb-box-shadow-xs);
@@ -4874,6 +4866,24 @@
   .box-shadow-xl {
     box-shadow: var(--vb-box-shadow-xl);
   }
+  .drop-shadow-outline {
+    filter: var(--vb-drop-shadow-outline);
+  }
+  .drop-shadow-xs {
+    filter: var(--vb-drop-shadow-xs);
+  }
+  .drop-shadow-sm {
+    filter: var(--vb-drop-shadow-sm);
+  }
+  .drop-shadow-md {
+    filter: var(--vb-drop-shadow-md);
+  }
+  .drop-shadow-lg {
+    filter: var(--vb-drop-shadow-lg);
+  }
+  .drop-shadow-xl {
+    filter: var(--vb-drop-shadow-xl);
+  }
   .display-inline {
     display: inline;
   }
@@ -5717,6 +5727,9 @@
   .width-auto {
     width: auto;
   }
+  .width-fit-content {
+    width: fit-content;
+  }
   .width-100 {
     width: 100%;
   }
@@ -5917,17 +5930,24 @@
     --vb-border-radius-lg: 0.5rem;
     --vb-border-radius-circle: 9999px;
     --vb-box-shadow-0: 0 0 0 1px var(--vb-box-shadow-outline-color);
-    --vb-box-shadow-1: 0 2px 2px 0 var(--vb-box-shadow-color);
-    --vb-box-shadow-2: 0 4px 4px -1px var(--vb-box-shadow-color);
-    --vb-box-shadow-3: 0 6px 6px -2px var(--vb-box-shadow-color);
-    --vb-box-shadow-4: 0 12px 12px -3px var(--vb-box-shadow-color);
-    --vb-box-shadow-5: 0 24px 24px -4px var(--vb-box-shadow-color);
+    --vb-drop-shadow-0: 0 0 1px var(--vb-drop-shadow-outline-color);
+    --vb-shadow-1: 0 2px 2px var(--vb-shadow-color);
+    --vb-shadow-2: 0 4px 4px var(--vb-shadow-color);
+    --vb-shadow-3: 0 6px 6px var(--vb-shadow-color);
+    --vb-shadow-4: 0 12px 12px var(--vb-shadow-color);
+    --vb-shadow-5: 0 24px 24px var(--vb-shadow-color);
     --vb-box-shadow-outline: var(--vb-box-shadow-0);
-    --vb-box-shadow-xs: var(--vb-box-shadow-0), var(--vb-box-shadow-1);
-    --vb-box-shadow-sm: var(--vb-box-shadow-0), var(--vb-box-shadow-1), var(--vb-box-shadow-2);
-    --vb-box-shadow-md: var(--vb-box-shadow-0), var(--vb-box-shadow-1), var(--vb-box-shadow-2), var(--vb-box-shadow-3);
-    --vb-box-shadow-lg: var(--vb-box-shadow-0), var(--vb-box-shadow-1), var(--vb-box-shadow-2), var(--vb-box-shadow-3), var(--vb-box-shadow-4);
-    --vb-box-shadow-xl: var(--vb-box-shadow-0), var(--vb-box-shadow-1), var(--vb-box-shadow-2), var(--vb-box-shadow-3), var(--vb-box-shadow-4), var(--vb-box-shadow-5);
+    --vb-box-shadow-xs: var(--vb-box-shadow-0), var(--vb-shadow-1);
+    --vb-box-shadow-sm: var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2);
+    --vb-box-shadow-md: var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2), var(--vb-shadow-3);
+    --vb-box-shadow-lg: var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2), var(--vb-shadow-3), var(--vb-shadow-4);
+    --vb-box-shadow-xl: var(--vb-box-shadow-0), var(--vb-shadow-1), var(--vb-shadow-2), var(--vb-shadow-3), var(--vb-shadow-4), var(--vb-shadow-5);
+    --vb-drop-shadow-outline: drop-shadow(var(--vb-drop-shadow-0));
+    --vb-drop-shadow-xs: drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1));
+    --vb-drop-shadow-sm: drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2));
+    --vb-drop-shadow-md: drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2)) drop-shadow(var(--vb-shadow-3));
+    --vb-drop-shadow-lg: drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2)) drop-shadow(var(--vb-shadow-3)) drop-shadow(var(--vb-shadow-4));
+    --vb-drop-shadow-xl: drop-shadow(var(--vb-drop-shadow-0)) drop-shadow(var(--vb-shadow-1)) drop-shadow(var(--vb-shadow-2)) drop-shadow(var(--vb-shadow-3)) drop-shadow(var(--vb-shadow-4)) drop-shadow(var(--vb-shadow-5));
     --vb-font-family-sans: system-ui, ui-sans-serif, sans-serif;
     --vb-font-family-serif: ui-serif, serif;
     --vb-font-family-mono: ui-monospace, monospace;
@@ -6010,8 +6030,9 @@
     --vb-border-color: oklch(0% 0 0deg / 0.1);
     --vb-border-color-strong: oklch(0% 0 0deg / 0.2);
     --vb-border-color-stronger: oklch(0% 0 0deg / 0.3);
-    --vb-box-shadow-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/8%);
+    --vb-shadow-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/8%);
     --vb-box-shadow-outline-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/8%);
+    --vb-drop-shadow-outline-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/32%);
   }
   @media (prefers-color-scheme: dark) {
     :root,
@@ -6036,8 +6057,9 @@
       --vb-border-color: oklch(100% 0 0deg / 0.1);
       --vb-border-color-strong: oklch(100% 0 0deg / 0.2);
       --vb-border-color-stronger: oklch(100% 0 0deg / 0.3);
-      --vb-box-shadow-color: oklch(16% calc(var(--vb-neutral-c) * 0.6) var(--vb-neutral-h)/80%);
+      --vb-shadow-color: oklch(16% calc(var(--vb-neutral-c) * 0.6) var(--vb-neutral-h)/80%);
       --vb-box-shadow-outline-color: oklch(98% calc(var(--vb-neutral-c) * 0.1) var(--vb-neutral-h)/8%);
+      --vb-drop-shadow-outline-color: oklch(98% calc(var(--vb-neutral-c) * 0.1) var(--vb-neutral-h)/32%);
     }
   }
   [data-mode=light] {
@@ -6061,8 +6083,9 @@
     --vb-border-color: oklch(0% 0 0deg / 0.1);
     --vb-border-color-strong: oklch(0% 0 0deg / 0.2);
     --vb-border-color-stronger: oklch(0% 0 0deg / 0.3);
-    --vb-box-shadow-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/8%);
+    --vb-shadow-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/8%);
     --vb-box-shadow-outline-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/8%);
+    --vb-drop-shadow-outline-color: oklch(40% var(--vb-neutral-c) var(--vb-neutral-h)/32%);
   }
   [data-mode=dark] {
     color-scheme: dark;
@@ -6085,8 +6108,9 @@
     --vb-border-color: oklch(100% 0 0deg / 0.1);
     --vb-border-color-strong: oklch(100% 0 0deg / 0.2);
     --vb-border-color-stronger: oklch(100% 0 0deg / 0.3);
-    --vb-box-shadow-color: oklch(16% calc(var(--vb-neutral-c) * 0.6) var(--vb-neutral-h)/80%);
+    --vb-shadow-color: oklch(16% calc(var(--vb-neutral-c) * 0.6) var(--vb-neutral-h)/80%);
     --vb-box-shadow-outline-color: oklch(98% calc(var(--vb-neutral-c) * 0.1) var(--vb-neutral-h)/8%);
+    --vb-drop-shadow-outline-color: oklch(98% calc(var(--vb-neutral-c) * 0.1) var(--vb-neutral-h)/32%);
   }
 }