@prosekit/lit 0.0.20 → 0.0.22

package/dist/_tsup-dts-rollup.d.ts

@@ -2,7 +2,6 @@ import { AutoUpdateOptions } from '@floating-ui/dom';
 import { CommandArgs } from '@prosekit/core';
 import { ComputePositionConfig } from '@floating-ui/dom';
 import { CSSResult } from 'lit';
-import { CSSResultGroup } from 'lit';
 import { Editor } from '@prosekit/core';
 import { Extension } from '@prosekit/core';
 import { ExtensionTyping } from '@prosekit/core';
@@ -17,13 +16,10 @@ import { TemplateResult } from 'lit';
 import { UserProjectConfigExport } from 'vitest/dist/config.js';
 import { VirtualElement } from '@floating-ui/dom';
 
-export declare class AutocompleteEmpty extends LitElement implements AutocompleteEmptyProps {
-    /** @hidden */
-    static styles: CSSResultGroup;
+export declare class AutocompleteEmpty extends LightElement implements AutocompleteEmptyProps {
     listContext?: AutocompleteListContext;
+    connectedCallback(): void;
     protected willUpdate(_changedProperties: PropertyValues<this>): void;
-    /** @hidden */
-    render(): TemplateResult<1> | null;
 }
 
 export declare interface AutocompleteEmptyProps {
@@ -34,21 +30,16 @@ export declare interface AutocompleteEmptyProps {
  * navigation. Preferably pass a `value`, otherwise the value will be inferred
  * from the rendered item's `textContent`.
  */
-declare class AutocompleteItem extends LitElement implements Partial<AutocompleteItemProps> {
-    /** @hidden */
-    static styles: CSSResultGroup;
+declare class AutocompleteItem extends LightElement implements Partial<AutocompleteItemProps> {
     value: string;
     selected: boolean;
     /** @hidden */
     onSelect?: VoidFunction;
-    /** @hidden */
-    defaultSlot?: HTMLSlotElement;
     listContext?: AutocompleteListContext;
     get content(): string;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    connectedCallback(): void;
+    protected willUpdate(): void;
     protected updated(changedProperties: PropertyValues<this>): void;
-    /** @hidden */
-    render(): TemplateResult<1> | null;
 }
 export { AutocompleteItem }
 export { AutocompleteItem as AutocompleteItem_alias_1 }
@@ -60,9 +51,7 @@ declare interface AutocompleteItemProps {
 export { AutocompleteItemProps }
 export { AutocompleteItemProps as AutocompleteItemProps_alias_1 }
 
-declare class AutocompleteList extends LitElement implements Partial<AutocompleteListProps> {
-    /** @hidden */
-    static styles: CSSResultGroup;
+declare class AutocompleteList extends LightElement implements Partial<AutocompleteListProps> {
     /** @hidden */
     private listManager;
     /** @hidden */
@@ -71,17 +60,12 @@ declare class AutocompleteList extends LitElement implements Partial<Autocomplet
     editor?: Editor;
     popoverContext: AutocompletePopoverContext | null;
     context: AutocompleteListContext;
-    protected firstUpdated(): void;
+    connectedCallback(): void;
     private get items();
     selectFirstItem(): void;
     private updateValue;
-    private registerValue;
-    /** @hidden */
-    defaultSlot?: HTMLSlotElement;
     /** @hidden */
     willUpdate(changedProperties: PropertyValues<this>): void;
-    /** @hidden */
-    render(): TemplateResult<1>;
 }
 export { AutocompleteList }
 export { AutocompleteList as AutocompleteList_alias_1 }
@@ -89,7 +73,6 @@ export { AutocompleteList as AutocompleteList_alias_1 }
 export declare interface AutocompleteListContext {
     scores: Map<string, number>;
     selectedValue: string;
-    registerValue: (value: string) => VoidFunction;
 }
 
 export declare class AutocompleteListController implements ReactiveController {
@@ -109,9 +92,7 @@ declare interface AutocompleteListProps {
 export { AutocompleteListProps }
 export { AutocompleteListProps as AutocompleteListProps_alias_1 }
 
-export declare class AutocompletePopover extends LitElement implements Partial<AutocompletePopoverProps> {
-    /** @hidden */
-    static styles: CSSResultGroup;
+export declare class AutocompletePopover extends Popover implements Partial<AutocompletePopoverProps> {
     /** @hidden */
     private controller;
     editor?: Editor;
@@ -123,13 +104,9 @@ export declare class AutocompletePopover extends LitElement implements Partial<A
     private get list();
     private updateContext;
     /** @hidden */
-    defaultSlot?: HTMLSlotElement;
-    /** @hidden */
-    protected get active(): boolean;
-    /** @hidden */
     willUpdate(): void;
     /** @hidden */
-    render(): TemplateResult<1>;
+    hide(): void;
 }
 
 export declare interface AutocompletePopoverContext {
@@ -165,10 +142,6 @@ export { AutoUpdateOptions }
 
 export declare const blockComponentStyles: CSSResult;
 
-declare class BlockElement extends LitElement {
-    setHidden(hidden: boolean): void;
-}
-
 export declare class CodeBlockPopover extends Popover implements Partial<CodeBlockPopoverProps> {
     editor?: Editor;
     /** @hidden */
@@ -210,7 +183,7 @@ export declare const comboBoxContext: {
     __context__: ComboBoxContext;
 };
 
-export declare class ComboBoxInput extends LightBlockElement {
+export declare class ComboBoxInput extends LightElement {
     placeholder: string;
     comboBoxContext: ComboBoxContext | null;
     private visible;
@@ -225,12 +198,8 @@ export declare interface ComboBoxInputProps {
     placeholder?: string;
 }
 
-declare class ComboBoxItem extends LightBlockElement {
-    /** @hidden */
-    static styles: CSSResultGroup;
+declare class ComboBoxItem extends LightElement {
     editor?: Editor;
-    /** @hidden */
-    defaultSlot?: HTMLSlotElement;
     selected: boolean;
     comboBoxContext?: ComboBoxContext;
     /** @hidden */
@@ -246,7 +215,7 @@ declare type ComboBoxItemProps = {
 export { ComboBoxItemProps }
 export { ComboBoxItemProps as ComboBoxItemProps_alias_1 }
 
-declare class ComboBoxList extends LightBlockElement {
+declare class ComboBoxList extends LightElement {
     comboBoxContext: ComboBoxContext | null;
     connectedCallback(): void;
 }
@@ -311,8 +280,9 @@ export declare function isComboBoxItem(element?: Element | null): element is Com
 
 export declare function isComboBoxList(element?: Element | null): element is ComboBoxList;
 
-export declare class LightBlockElement extends BlockElement {
+export declare class LightElement extends LitElement {
     createRenderRoot(): this;
+    setHidden(hidden: boolean): void;
 }
 
 export declare class ListManager<Item extends {
@@ -357,11 +327,9 @@ export declare class ListManager<Item extends {
 /**
  * A custom element that displays a popover anchored to a reference element.
  */
-export declare class Popover extends LightBlockElement implements Partial<PopoverProps> {
+export declare class Popover extends LightElement implements Partial<PopoverProps> {
     /** @hidden */
     constructor();
-    /** @hidden */
-    static styles: CSSResultGroup;
     /**
      * Controls the visibility of the popover element. When set to `true`, the popover is displayed and positioned
      * relative to its reference element. When set to `false`, the popover is hidden and its positioning logic is
@@ -394,7 +362,11 @@ export declare class Popover extends LightBlockElement implements Partial<Popove
      */
     autoUpdateOptions?: AutoUpdateOptions;
     /** @hidden */
-    private cleanupAutoUpdate?;
+    private disposeAutoUpdate?;
+    /** @hidden */
+    private disposeEventListeners?;
+    /** @hidden */
+    connectedCallback(): void;
     /** @hidden */
     disconnectedCallback(): void;
     /** @hidden */
@@ -404,7 +376,9 @@ export declare class Popover extends LightBlockElement implements Partial<Popove
     /** @hidden */
     private compute;
     /** @hidden */
-    private cleanup;
+    hide(): void;
+    private handleDocumentMouseDown;
+    private handleDocumentKeyDown;
 }
 
 /**
@@ -464,10 +438,4 @@ export declare function queryClosestComboBoxItem(element?: Element | null): Comb
 /** Rounds a value to the nearest device pixel ratio. */
 export declare function roundByDPR(value: number): number;
 
-export declare class ShadowBlockElement extends BlockElement {
-    /** @hidden */
-    static styles: CSSResultGroup;
-    setHidden(hidden: boolean): void;
-}
-
 export { }

package/dist/{chunk-LBLOUW67.js → chunk-KJJEZNYD.js}

@@ -5,9 +5,9 @@ import {
   ListManager
 } from "./chunk-PCXKL6TA.js";
 import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-3UDA5JEW.js";
+  LightElement,
+  __decorateClass
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/autocomplete-popover/context.ts
 import { createContext } from "@lit/context";
@@ -18,8 +18,8 @@ var commandPopoverContext = createContext(
 // src/components/autocomplete-list/component.ts
 import { consume, provide } from "@lit/context";
 import "@prosekit/core";
-import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import "lit";
+import { customElement, property, state } from "lit/decorators.js";
 
 // src/utils/command-score.ts
 import commandScoreModule from "@superhuman/command-score";
@@ -84,7 +84,7 @@ var AutocompleteListController = class {
 
 // src/components/autocomplete-list/component.ts
 var propNames = ["editor"];
-var AutocompleteList = class extends LitElement {
+var AutocompleteList = class extends LightElement {
   constructor() {
     super(...arguments);
     /** @hidden */
@@ -115,15 +115,15 @@ var AutocompleteList = class extends LitElement {
     this.popoverContext = null;
     this.context = {
       scores: /* @__PURE__ */ new Map(),
-      selectedValue: "",
-      registerValue: (value) => this.registerValue(value)
+      selectedValue: ""
     };
   }
   get active() {
     var _a, _b;
     return (_b = (_a = this.popoverContext) == null ? void 0 : _a.active) != null ? _b : false;
   }
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
     this.listManager.selectFirstItem();
     this.addEventListener(
       "mousemove",
@@ -143,25 +143,18 @@ var AutocompleteList = class extends LitElement {
     );
   }
   get items() {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isAutocompleteItem)) != null ? _c : [];
+    return Array.from(
+      this.querySelectorAll("prosekit-autocomplete-item")
+    ).filter(isAutocompleteItem);
   }
   selectFirstItem() {
     this.listManager.selectFirstItem();
   }
   updateValue(selectedValue) {
-    if (this.context.selectedValue === selectedValue)
+    if (this.context.selectedValue === selectedValue) {
       return;
-    this.context = { ...this.context, selectedValue };
-  }
-  registerValue(value) {
-    if (!this.context.scores.has(value)) {
-      this.context.scores.set(value, 0);
-      this.requestUpdate();
     }
-    return () => {
-      this.context.scores.delete(value);
-    };
+    this.context = { ...this.context, selectedValue };
   }
   /** @hidden */
   willUpdate(changedProperties) {
@@ -169,23 +162,17 @@ var AutocompleteList = class extends LitElement {
     if (changedProperties.has("editor") && this.editor) {
       this.controller.setEditor(this.editor);
     }
-    const query2 = (_b = (_a = this.popoverContext) == null ? void 0 : _a.query) != null ? _b : "";
+    const query = (_b = (_a = this.popoverContext) == null ? void 0 : _a.query) != null ? _b : "";
     const scores = new Map(
       this.items.map((item) => {
         const content = item.content;
-        const score = commandScore(content, query2);
+        const score = commandScore(content, query);
         return [content, score];
       })
     );
     this.context = { ...this.context, scores };
   }
-  /** @hidden */
-  render() {
-    return html`<slot></slot>`;
-  }
 };
-/** @hidden */
-AutocompleteList.styles = blockComponentStyles;
 __decorateClass([
   property({ attribute: false })
 ], AutocompleteList.prototype, "editor", 2);
@@ -197,9 +184,6 @@ __decorateClass([
   provide({ context: commandListContext }),
   state()
 ], AutocompleteList.prototype, "context", 2);
-__decorateClass([
-  query("slot")
-], AutocompleteList.prototype, "defaultSlot", 2);
 AutocompleteList = __decorateClass([
   customElement("prosekit-autocomplete-list")
 ], AutocompleteList);

package/dist/{chunk-KA7LSXZQ.js → chunk-P336E72L.js}

@@ -1,17 +1,13 @@
 import {
-  LightBlockElement
-} from "./chunk-TRZW33VF.js";
-import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-3UDA5JEW.js";
+  LightElement,
+  __decorateClass
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/popover/index.ts
 import {
   autoUpdate,
   computePosition
 } from "@floating-ui/dom";
-import "lit";
 import { customElement, property } from "lit/decorators.js";
 
 // src/utils/round-by-dpr.ts
@@ -40,16 +36,46 @@ var propNames = [
   "autoUpdate",
   "autoUpdateOptions"
 ];
-var Popover = class extends LightBlockElement {
+var Popover = class extends LightElement {
   /** @hidden */
   constructor() {
     super();
     this.active = false;
     this.autoUpdate = false;
+    this.handleDocumentMouseDown = (event) => {
+      const path = event.composedPath();
+      if (!path.includes(this)) {
+        this.hide();
+      }
+    };
+    this.handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape" && this.active) {
+        event.stopPropagation();
+        this.hide();
+        return;
+      }
+    };
+  }
+  /** @hidden */
+  connectedCallback() {
+    super.connectedCallback();
+    const handleMouseDown = this.handleDocumentMouseDown.bind(this);
+    const handleKeyDown = this.handleDocumentKeyDown.bind(this);
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    this.disposeEventListeners = () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }
   /** @hidden */
   disconnectedCallback() {
-    this.cleanup();
+    var _a, _b;
+    super.disconnectedCallback();
+    (_a = this.disposeAutoUpdate) == null ? void 0 : _a.call(this);
+    this.disposeAutoUpdate = void 0;
+    (_b = this.disposeEventListeners) == null ? void 0 : _b.call(this);
+    this.disposeEventListeners = void 0;
   }
   /** @hidden */
   updated() {
@@ -58,14 +84,16 @@ var Popover = class extends LightBlockElement {
   }
   /** @hidden */
   start() {
-    this.cleanup();
+    var _a;
+    (_a = this.disposeAutoUpdate) == null ? void 0 : _a.call(this);
+    this.disposeAutoUpdate = void 0;
     const reference = this.reference;
     if (!reference)
       return;
     if (!this.active)
       return;
     if (this.autoUpdate) {
-      this.cleanupAutoUpdate = autoUpdate(
+      this.disposeAutoUpdate = autoUpdate(
         reference,
         this,
         () => void this.compute(),
@@ -94,14 +122,10 @@ var Popover = class extends LightBlockElement {
     this.style.transform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`;
   }
   /** @hidden */
-  cleanup() {
-    var _a;
-    (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
-    this.cleanupAutoUpdate = void 0;
+  hide() {
+    this.active = false;
   }
 };
-/** @hidden */
-Popover.styles = blockComponentStyles;
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Popover.prototype, "active", 2);

package/dist/{chunk-RTIPZK6D.js → chunk-XOVIMVFL.js}

@@ -2,16 +2,16 @@ import {
   commandListContext
 } from "./chunk-6P3YKUWI.js";
 import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-3UDA5JEW.js";
+  LightElement,
+  __decorateClass
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/autocomplete-item/component.ts
 import { consume } from "@lit/context";
-import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import "lit";
+import { customElement, property, state } from "lit/decorators.js";
 var propNames = ["value", "onSelect"];
-var AutocompleteItem = class extends LitElement {
+var AutocompleteItem = class extends LightElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -21,32 +21,23 @@ var AutocompleteItem = class extends LitElement {
     const text = this.value || this.textContent || "";
     return text.trim().toLowerCase();
   }
-  willUpdate(changedProperties) {
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = "option";
+  }
+  willUpdate() {
     var _a, _b;
     const content = this.content;
     this.selected = content === ((_a = this.listContext) == null ? void 0 : _a.selectedValue);
     const score = ((_b = this.listContext) == null ? void 0 : _b.scores.get(content)) || 0;
-    this.inert = score <= 0;
-    this.hidden = score <= 0;
-    if (changedProperties.has("listContext") && this.listContext) {
-      this.listContext.registerValue(this.content);
-    }
+    this.setHidden(score <= 0);
   }
   updated(changedProperties) {
     if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected")) {
       this.scrollIntoView({ block: "nearest" });
     }
   }
-  /** @hidden */
-  render() {
-    if (this.hidden) {
-      return null;
-    }
-    return html`<div role="option" aria-selected="${this.selected}"><slot></slot></div>`;
-  }
 };
-/** @hidden */
-AutocompleteItem.styles = blockComponentStyles;
 __decorateClass([
   property({ type: String, reflect: true, attribute: "data-value" })
 ], AutocompleteItem.prototype, "value", 2);
@@ -56,9 +47,6 @@ __decorateClass([
 __decorateClass([
   property({ attribute: false })
 ], AutocompleteItem.prototype, "onSelect", 2);
-__decorateClass([
-  query("slot")
-], AutocompleteItem.prototype, "defaultSlot", 2);
 __decorateClass([
   consume({ context: commandListContext, subscribe: true }),
   state({})

package/dist/{chunk-IQHL2ANE.js → chunk-XTIVRSSC.js}

@@ -2,19 +2,15 @@ import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";
 import {
-  LightBlockElement
-} from "./chunk-TRZW33VF.js";
-import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-3UDA5JEW.js";
+  LightElement,
+  __decorateClass
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/combo-box-item/component.ts
 import { consume } from "@lit/context";
-import "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 var propNames = [];
-var ComboBoxItem = class extends LightBlockElement {
+var ComboBoxItem = class extends LightElement {
   constructor() {
     super(...arguments);
     this.selected = false;
@@ -22,21 +18,16 @@ var ComboBoxItem = class extends LightBlockElement {
   updated() {
     var _a, _b, _c, _d;
     const content = ((_a = this.textContent) != null ? _a : "").trim();
-    const query2 = ((_c = (_b = this.comboBoxContext) == null ? void 0 : _b.inputValue) != null ? _c : "").trim();
-    const match = content.toLowerCase().includes(query2.toLowerCase());
+    const query = ((_c = (_b = this.comboBoxContext) == null ? void 0 : _b.inputValue) != null ? _c : "").trim();
+    const match = content.toLowerCase().includes(query.toLowerCase());
     this.selected = match && content === ((_d = this.comboBoxContext) == null ? void 0 : _d.selectedValue);
     this.ariaSelected = String(this.selected);
     this.setHidden(!match);
   }
 };
-/** @hidden */
-ComboBoxItem.styles = blockComponentStyles;
 __decorateClass([
   property({ attribute: false })
 ], ComboBoxItem.prototype, "editor", 2);
-__decorateClass([
-  query("slot")
-], ComboBoxItem.prototype, "defaultSlot", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "data-selected" })
 ], ComboBoxItem.prototype, "selected", 2);

package/dist/{chunk-3UDA5JEW.js → chunk-ZN7DMIEB.js}

@@ -10,17 +10,22 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
-// src/styles/block-component.styles.ts
-import { css as css2 } from "lit";
-
-// src/styles/component.styles.ts
-import { css } from "lit";
-var componentStyles = css`:host{box-sizing:border-box}:host *,:host ::after,:host ::before{box-sizing:inherit}`;
-
-// src/styles/block-component.styles.ts
-var blockComponentStyles = css2`${componentStyles}:host{display:block;border-style:solid;border-width:0}:host([hidden]){display:none}`;
+// src/components/block-element/index.ts
+import { LitElement } from "lit";
+var LightElement = class extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+  setHidden(hidden) {
+    if (this.hidden !== hidden) {
+      this.hidden = hidden;
+      const display = this.style.display;
+      this.style.display = hidden ? "none" : display === "none" ? "" : display;
+    }
+  }
+};
 
 export {
   __decorateClass,
-  blockComponentStyles
+  LightElement
 };

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

@@ -2,16 +2,20 @@ import {
   commandListContext
 } from "./chunk-6P3YKUWI.js";
 import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-3UDA5JEW.js";
+  LightElement,
+  __decorateClass
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/autocomplete-empty/index.ts
 import { consume } from "@lit/context";
-import { LitElement, html } from "lit";
+import "lit";
 import { customElement, state } from "lit/decorators.js";
 var propNames = [];
-var AutocompleteEmpty = class extends LitElement {
+var AutocompleteEmpty = class extends LightElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = "option";
+  }
   willUpdate(_changedProperties) {
     var _a;
     const scores = (_a = this.listContext) == null ? void 0 : _a.scores;
@@ -24,19 +28,9 @@ var AutocompleteEmpty = class extends LitElement {
         }
       }
     }
-    this.hidden = hasMatch;
-    this.inert = hasMatch;
-  }
-  /** @hidden */
-  render() {
-    if (this.hidden) {
-      return null;
-    }
-    return html`<div role="option"><slot></slot></div>`;
+    this.setHidden(hasMatch);
   }
 };
-/** @hidden */
-AutocompleteEmpty.styles = blockComponentStyles;
 __decorateClass([
   consume({ context: commandListContext, subscribe: true }),
   state()

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

@@ -1,9 +1,9 @@
 import {
   AutocompleteItem,
   propNames
-} from "./chunk-RTIPZK6D.js";
+} from "./chunk-XOVIMVFL.js";
 import "./chunk-6P3YKUWI.js";
-import "./chunk-3UDA5JEW.js";
+import "./chunk-ZN7DMIEB.js";
 export {
   AutocompleteItem,
   propNames

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

@@ -1,11 +1,11 @@
 import {
   AutocompleteList,
   propNames
-} from "./chunk-LBLOUW67.js";
-import "./chunk-RTIPZK6D.js";
+} from "./chunk-KJJEZNYD.js";
+import "./chunk-XOVIMVFL.js";
 import "./chunk-6P3YKUWI.js";
 import "./chunk-PCXKL6TA.js";
-import "./chunk-3UDA5JEW.js";
+import "./chunk-ZN7DMIEB.js";
 export {
   AutocompleteList,
   propNames

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

@@ -1,21 +1,20 @@
 import {
   commandPopoverContext
-} from "./chunk-LBLOUW67.js";
-import "./chunk-RTIPZK6D.js";
+} from "./chunk-KJJEZNYD.js";
+import "./chunk-XOVIMVFL.js";
 import "./chunk-6P3YKUWI.js";
 import "./chunk-PCXKL6TA.js";
-import "./chunk-KA7LSXZQ.js";
-import "./chunk-TRZW33VF.js";
 import {
-  __decorateClass,
-  blockComponentStyles
-} from "./chunk-3UDA5JEW.js";
+  Popover
+} from "./chunk-P336E72L.js";
+import {
+  __decorateClass
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/autocomplete-popover/index.ts
 import { provide } from "@lit/context";
 import "@prosekit/core";
-import { html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 
 // src/components/autocomplete-list/helpers.ts
 function isAutocompleteList(element) {
@@ -79,8 +78,8 @@ var AutocompletePopoverController = class {
       if (span) {
         this.reference = span;
       }
-      const query2 = defaultQueryBuilder(options.match);
-      this.onChange(query2 != null ? query2 : "", !!this.reference);
+      const query = defaultQueryBuilder(options.match);
+      this.onChange(query != null ? query : "", !!this.reference);
       this.handleDismiss = options.ignoreMatch;
       this.handleSubmit = options.deleteMatch;
       setTimeout(() => {
@@ -159,7 +158,7 @@ var defaultPopoverOptions = {
 
 // src/components/autocomplete-popover/index.ts
 var propNames = ["editor", "regex", "popoverOptions"];
-var AutocompletePopover = class extends LitElement {
+var AutocompletePopover = class extends Popover {
   constructor() {
     super(...arguments);
     /** @hidden */
@@ -182,41 +181,42 @@ var AutocompletePopover = class extends LitElement {
     };
   }
   get list() {
-    var _a, _b, _c;
-    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isAutocompleteList)) != null ? _c : null;
+    const element = this.querySelector("prosekit-autocomplete-list");
+    return isAutocompleteList(element) ? element : null;
   }
-  updateContext(query2, active) {
-    if (this.context.query === query2 && this.context.active === active) {
+  updateContext(query, active) {
+    if (this.context.query === query && this.context.active === active) {
       return;
     }
-    this.context = { ...this.context, query: query2, active };
+    this.context = { ...this.context, query, active };
     requestAnimationFrame(() => {
       var _a;
       (_a = this.list) == null ? void 0 : _a.selectFirstItem();
     });
   }
   /** @hidden */
-  get active() {
-    var _a;
-    return !!((_a = this.controller) == null ? void 0 : _a.reference);
-  }
-  /** @hidden */
   willUpdate() {
+    var _a, _b;
     if (this.editor) {
       this.controller.setEditor(this.editor);
     }
     if (this.regex) {
       this.controller.setRegex(this.regex);
     }
+    this.active = !!((_a = this.controller) == null ? void 0 : _a.reference);
+    this.reference = (_b = this.controller.reference) != null ? _b : void 0;
+    this.options = this.popoverOptions;
   }
   /** @hidden */
-  render() {
+  hide() {
     var _a;
-    return html`<prosekit-popover .active="${this.active}" .reference="${(_a = this.controller.reference) != null ? _a : void 0}" .options="${this.popoverOptions}"><slot></slot></prosekit-popover>`;
+    super.hide();
+    if ((_a = this.controller) == null ? void 0 : _a.reference) {
+      this.controller.reference = null;
+      this.reference = void 0;
+    }
   }
 };
-/** @hidden */
-AutocompletePopover.styles = blockComponentStyles;
 __decorateClass([
   property({ attribute: false })
 ], AutocompletePopover.prototype, "editor", 2);
@@ -233,9 +233,6 @@ __decorateClass([
 __decorateClass([
   property({ attribute: false })
 ], AutocompletePopover.prototype, "onSelect", 2);
-__decorateClass([
-  query("slot")
-], AutocompletePopover.prototype, "defaultSlot", 2);
 AutocompletePopover = __decorateClass([
   customElement("prosekit-autocomplete-popover")
 ], AutocompletePopover);

package/dist/prosekit-lit-code-block-popover.js

@@ -1,10 +1,9 @@
 import {
   Popover
-} from "./chunk-KA7LSXZQ.js";
-import "./chunk-TRZW33VF.js";
+} from "./chunk-P336E72L.js";
 import {
   __decorateClass
-} from "./chunk-3UDA5JEW.js";
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/code-block-popover/index.ts
 import { offset } from "@floating-ui/dom";

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

@@ -2,18 +2,16 @@ import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";
 import {
-  LightBlockElement
-} from "./chunk-TRZW33VF.js";
-import {
+  LightElement,
   __decorateClass
-} from "./chunk-3UDA5JEW.js";
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/combo-box-input/index.ts
 import { consume } from "@lit/context";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 var propNames = ["placeholder"];
-var ComboBoxInput = class extends LightBlockElement {
+var ComboBoxInput = class extends LightElement {
   constructor() {
     super(...arguments);
     this.placeholder = "";

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

@@ -1,10 +1,9 @@
 import {
   ComboBoxItem,
   propNames
-} from "./chunk-IQHL2ANE.js";
+} from "./chunk-XTIVRSSC.js";
 import "./chunk-C4MW43I4.js";
-import "./chunk-TRZW33VF.js";
-import "./chunk-3UDA5JEW.js";
+import "./chunk-ZN7DMIEB.js";
 export {
   ComboBoxItem,
   propNames

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

@@ -2,17 +2,15 @@ import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";
 import {
-  LightBlockElement
-} from "./chunk-TRZW33VF.js";
-import {
+  LightElement,
   __decorateClass
-} from "./chunk-3UDA5JEW.js";
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/combo-box-list/component.ts
 import { consume } from "@lit/context";
 import { customElement, state } from "lit/decorators.js";
 var propNames = [];
-var ComboBoxList = class extends LightBlockElement {
+var ComboBoxList = class extends LightElement {
   constructor() {
     super(...arguments);
     this.comboBoxContext = null;

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

@@ -1,17 +1,16 @@
-import "./chunk-IQHL2ANE.js";
+import "./chunk-XTIVRSSC.js";
 import {
   ListManager
 } from "./chunk-PCXKL6TA.js";
 import {
   Popover
-} from "./chunk-KA7LSXZQ.js";
+} from "./chunk-P336E72L.js";
 import {
   comboBoxContext
 } from "./chunk-C4MW43I4.js";
-import "./chunk-TRZW33VF.js";
 import {
   __decorateClass
-} from "./chunk-3UDA5JEW.js";
+} from "./chunk-ZN7DMIEB.js";
 
 // src/components/combo-box/index.ts
 import { provide } from "@lit/context";

package/dist/prosekit-lit-popover.js

@@ -1,9 +1,8 @@
 import {
   Popover,
   propNames
-} from "./chunk-KA7LSXZQ.js";
-import "./chunk-TRZW33VF.js";
-import "./chunk-3UDA5JEW.js";
+} from "./chunk-P336E72L.js";
+import "./chunk-ZN7DMIEB.js";
 export {
   Popover,
   propNames

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -86,12 +86,12 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
-    "@lit/context": "^1.0.0",
-    "@prosekit/core": "^0.0.16",
-    "@prosekit/extensions": "^0.0.18",
-    "@prosekit/pm": "^0.0.6",
+    "@lit/context": "^1.0.1",
+    "@prosekit/core": "^0.0.18",
+    "@prosekit/extensions": "^0.0.20",
+    "@prosekit/pm": "^0.0.7",
     "@superhuman/command-score": "^0.5.0",
-    "lit": "^3.0.0"
+    "lit": "^3.0.2"
   },
   "devDependencies": {
     "@prosekit/dev": "*",

package/dist/chunk-TRZW33VF.js

@@ -1,35 +0,0 @@
-import {
-  blockComponentStyles
-} from "./chunk-3UDA5JEW.js";
-
-// src/components/block-element/index.ts
-import { LitElement } from "lit";
-var BlockElement = class extends LitElement {
-  setHidden(hidden) {
-    if (this.hidden !== hidden) {
-      this.hidden = hidden;
-      const display = this.style.display;
-      this.style.display = hidden ? "none" : display === "none" ? "" : display;
-    }
-  }
-};
-var LightBlockElement = class extends BlockElement {
-  createRenderRoot() {
-    return this;
-  }
-};
-var ShadowBlockElement = class extends BlockElement {
-  setHidden(hidden) {
-    if (this.hidden !== hidden) {
-      this.hidden = hidden;
-      const display = this.style.display;
-      this.style.display = hidden ? "none" : display === "none" ? "" : display;
-    }
-  }
-};
-/** @hidden */
-ShadowBlockElement.styles = blockComponentStyles;
-
-export {
-  LightBlockElement
-};

package/src/index.ts

@@ -1 +0,0 @@
-export {}