@prosekit/lit 0.1.1 → 0.1.2

package/dist/{chunk-I6N76F4U.js → chunk-7WLKD2U6.js}

@@ -31,11 +31,11 @@ var defaultPopoverOptions = {
     size({
       apply: ({ availableWidth, availableHeight, elements }) => {
         elements.floating.style.setProperty(
-          "--prosekit-popover-available-width",
+          "max-width",
           `${Math.floor(availableWidth)}px`
         );
         elements.floating.style.setProperty(
-          "--prosekit-popover-available-height",
+          "max-height",
           `${Math.floor(availableHeight)}px`
         );
       },

package/dist/prosekit-lit-autocomplete-popover.js

@@ -5,7 +5,7 @@ import "./chunk-GWGDLLFN.js";
 import "./chunk-6P3YKUWI.js";
 import {
   Popover
-} from "./chunk-I6N76F4U.js";
+} from "./chunk-7WLKD2U6.js";
 import "./chunk-PCXKL6TA.js";
 import {
   __decorateClass
@@ -82,9 +82,6 @@ var AutocompletePopoverController = class {
       this.onChange(query != null ? query : "", !!this.reference);
       this.handleDismiss = options.ignoreMatch;
       this.handleSubmit = options.deleteMatch;
-      setTimeout(() => {
-        this.host.requestUpdate();
-      }, 0);
     };
     const handleLeave = () => {
       this.reference = null;
@@ -121,38 +118,49 @@ var defaultDetectOverflowOptions = {
   padding: 8
 };
 var defaultPopoverOptions = {
-  placement: "bottom-end",
+  // The main axis is the y axis, and we place the popover at the bottom of the
+  // reference element.
+  //
+  // The cross axis is the x axis, and we place the popover at the start of the
+  // reference element. The reference element and the popover are left-aligned.
+  placement: "bottom-start",
   middleware: [
     // Use the text caret as the reference point
     inline(),
-    offset(({ rects }) => ({
-      // Put the popover at the bottom right corner
-      alignmentAxis: -rects.floating.width,
+    offset(() => ({
       // Move down the popover by 4px
       mainAxis: 4
     })),
     // Flip the popover to the top if it's overflowing the viewport
+    //
+    // When `flipAlignment` is true, which is the default, ensure `flip() `is
+    // placed before `shift()` in your middleware array.
+    //
+    // https://floating-ui.com/docs/flip#flipalignment
     flip({
-      fallbackStrategy: "initialPlacement",
-      fallbackAxisSideDirection: "start",
+      // Flip the popover to the top if necessary.
+      mainAxis: true,
+      // We don't want to flip the popover to the left or right, since `shift()`
+      // will handle this.
       crossAxis: false,
       ...defaultDetectOverflowOptions
     }),
+    // We need to place `shift()` after `flip()`. See https://floating-ui.com/docs/flip#flipalignment
+    shift({
+      ...defaultDetectOverflowOptions
+    }),
     size({
       apply: ({ availableWidth, availableHeight, elements }) => {
         elements.floating.style.setProperty(
-          "--prosekit-popover-available-width",
+          "max-width",
           `${Math.floor(availableWidth)}px`
         );
         elements.floating.style.setProperty(
-          "--prosekit-popover-available-height",
+          "max-height",
           `${Math.floor(availableHeight)}px`
         );
       },
       ...defaultDetectOverflowOptions
-    }),
-    shift({
-      ...defaultDetectOverflowOptions
     })
   ]
 };

package/dist/prosekit-lit-combo-box.js

@@ -1,6 +1,6 @@
 import {
   Popover
-} from "./chunk-I6N76F4U.js";
+} from "./chunk-7WLKD2U6.js";
 import {
   ListManager
 } from "./chunk-PCXKL6TA.js";

package/dist/prosekit-lit-inline-popover.js

@@ -1,6 +1,6 @@
 import {
   Popover
-} from "./chunk-I6N76F4U.js";
+} from "./chunk-7WLKD2U6.js";
 import {
   __decorateClass
 } from "./chunk-O5JP3B34.js";

package/dist/prosekit-lit-popover.js

@@ -1,7 +1,7 @@
 import {
   Popover,
   propNames
-} from "./chunk-I6N76F4U.js";
+} from "./chunk-7WLKD2U6.js";
 import "./chunk-O5JP3B34.js";
 export {
   Popover,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "author": {
     "name": "ocavue",