@lookwe/lit-mixins 1.0.0

package/README.md

@@ -0,0 +1,141 @@
+# Lit Mixins
+
+This repository provides a collection of mixins for enhancing [LitElement](https://lit.dev/) components with advanced functionalities, including element internals, form association, focus delegation, popover control and more...
+
+## Installation
+
+Install the mixins package using npm:
+
+```bash
+npm install @lookwe/lit-mixins
+```
+
+---
+
+## Available Mixins
+
+### 1. **`mixinElementInternals`**
+
+Provides access to the `ElementInternals` API for a custom element, allowing you to manage form participation, accessibility roles, and more.
+
+**Usage Example:**
+
+```ts
+import { LitElement } from 'lit';
+
+import { internals, mixinElementInternals } from '@lookwe/lit-mixins';
+
+class MyElement extends mixinElementInternals(LitElement) {
+	constructor() {
+		super();
+		this[internals].role = 'button'; // Assign a role for accessibility
+	}
+}
+customElements.define('my-element', MyElement);
+```
+
+**Key Features:**
+
+- Provides a `readonly` property `[internals]` to access `ElementInternals`.
+
+---
+
+### 2. **`mixinFormAssociated`**
+
+Enables your custom element to integrate with HTML forms, similar to native form controls.
+
+**Usage Example:**
+
+```ts
+import { LitElement } from 'lit';
+import { property } from 'lit/decorator.js';
+
+import { getFormValue, mixinElementInternals, mixinFormAssociated } from '@lookwe/lit-mixins';
+
+class MyFormControl extends mixinFormAssociated(mixinElementInternals(LitElement)) {
+	@property() accessor value = '';
+
+	// ...
+
+	[getFormValue]() {
+		return this.value; // Return the form value
+	}
+
+	formResetCallback() {
+		this.value = this.getAttribute('value') || ''; // Reset value on form reset
+	}
+
+	formStateRestoreCallback(state) {
+		this.value = state || ''; // Restore form state
+	}
+}
+customElements.define('my-form-control', MyFormControl);
+```
+
+**Key Features:**
+
+- Provides properties like `form`, `labels`, and `name` for form integration.
+- Supports callbacks like `formResetCallback` and `formStateRestoreCallback` for custom behaviors.
+
+---
+
+### 3. **`mixinDelegateFocus`**
+
+Allows your component to delegate focus to a specific internal element, enhancing accessibility.
+
+**Usage Example:**
+
+```ts
+import { html, LitElement } from 'lit';
+
+import { getFocusElement, mixinDelegateFocus } from '@lookwe/lit-mixins';
+
+class MyFocusableElement extends mixinDelegateFocus(LitElement) {
+	render() {
+		return html` <div tabindex="0">Focusable Content</div> `;
+	}
+
+	[getFocusElement]() {
+		return this.shadowRoot.querySelector('[tabindex="0"]'); // Delegate focus to this element
+	}
+}
+customElements.define('my-focusable-element', MyFocusableElement);
+```
+
+**Key Features:**
+
+- Delegates focus to the first focusable child element.
+- Supports overriding `focus()` and `blur()` methods.
+
+---
+
+### 4. **`mixinPopoverTarget`**
+
+Enables your component to act as a controller for popovers, using the Popover API.
+
+**Usage Example:**
+
+```ts
+import { html, LitElement } from 'lit';
+
+import { mixinPopoverTarget } from '@lookwe/lit-mixins';
+
+class MyPopoverController extends mixinPopoverTarget(LitElement) {
+	render() {
+		return html`
+			<button
+				.popoverTargetElement="${this.popoverTargetElement}"
+				.popoverTargetAction="${this.popoverTargetAction}"
+			>
+				Toggle Popover
+			</button>
+		`;
+	}
+}
+customElements.define('my-popover-controller', MyPopoverController);
+```
+
+**Key Features:**
+
+- Provides properties like `popoverTarget`, `popoverTargetElement`, and `popoverTargetAction`.
+- Supports actions such as `'hide'`, `'show'`, and `'toggle'`.

package/index.d.ts

@@ -0,0 +1,4 @@
+export * from './internal/delegate-focus';
+export * from './internal/element-internals';
+export * from './internal/form-associated';
+export * from './internal/popover-target';

package/index.js

@@ -0,0 +1,4 @@
+export { getFocusElement, mixinDelegatesFocus } from './internal/delegate-focus.js';
+export { internals, mixinElementInternals } from './internal/element-internals.js';
+export { getFormState, getFormValue, mixinFormAssociated } from './internal/form-associated.js';
+export { mixinPopoverTarget } from './internal/popover-target.js';

package/internal/delegate-focus.d.ts

@@ -0,0 +1,41 @@
+import { ReactiveElement } from 'lit';
+import { MixinBase, MixinReturn } from '@lookwe/utils';
+/**
+ * A unique symbol to retrieve the focus element.
+ *
+ * @example
+ *
+ * class MyElement extends mixinDelegatesFocus(ReactiveElement) {
+ * 	overrride [getFocusElement](): HTMLElement | null {
+ *      return this.renderRoot.querySelector('[tabindex="0"]');
+ *  }
+ * }
+ *
+ */
+export declare const getFocusElement: unique symbol;
+/**
+ * An instance with an `getFocusElement` symbol property for the component's focus element.
+ */
+export interface WithDelegatesFocus {
+    [getFocusElement]?(): HTMLElement | null;
+}
+/**
+ * The constructor of a `WithDelegatesFocus` element.
+ */
+export interface WithDelegatesFocusConstructor {
+    /**
+     * Options used when calling attachShadow. The first focusable part is given focus.
+     */
+    readonly shadowRootOptions: ShadowRootInit & {
+        delegatesFocus: true;
+    };
+}
+/**
+ * The first focusable part is given focus, and the shadow host is given any available :focus styling.
+ *
+ * @param base  The class to mix functionality into.
+ * @returns The provided class with `WithDelegatesFocus` mixed in.
+ */
+export declare function mixinDelegatesFocus<T extends MixinBase<ReactiveElement> & {
+    shadowRootOptions: ShadowRootInit;
+}>(base: T): MixinReturn<T & WithDelegatesFocusConstructor, WithDelegatesFocus>;

package/internal/delegate-focus.js

@@ -0,0 +1,49 @@
+/**
+ * A unique symbol to retrieve the focus element.
+ *
+ * @example
+ *
+ * class MyElement extends mixinDelegatesFocus(ReactiveElement) {
+ * 	overrride [getFocusElement](): HTMLElement | null {
+ *      return this.renderRoot.querySelector('[tabindex="0"]');
+ *  }
+ * }
+ *
+ */
+const getFocusElement = Symbol('getFocusElement');
+/**
+ * The first focusable part is given focus, and the shadow host is given any available :focus styling.
+ *
+ * @param base  The class to mix functionality into.
+ * @returns The provided class with `WithDelegatesFocus` mixed in.
+ */
+function mixinDelegatesFocus(base) {
+    var _a, _b;
+    class WithDelegatesFocusElement extends (_b = base) {
+        focus(options) {
+            const focusElement = this[getFocusElement]();
+            if (focusElement && focusElement !== this)
+                focusElement.focus(options);
+            else
+                super.focus(options);
+        }
+        blur() {
+            const focusElement = this[getFocusElement]();
+            if (focusElement && focusElement !== this)
+                focusElement.blur();
+            else
+                super.blur();
+        }
+        [getFocusElement]() {
+            return this;
+        }
+    }
+    _a = WithDelegatesFocusElement;
+    WithDelegatesFocusElement.shadowRootOptions = {
+        ...Reflect.get(_b, "shadowRootOptions", _a),
+        delegatesFocus: true,
+    };
+    return WithDelegatesFocusElement;
+}
+
+export { getFocusElement, mixinDelegatesFocus };

package/internal/element-internals.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { MixinBase, MixinReturn } from '@lookwe/utils';
+/**
+ * A unique symbol used for protected access to an instance's `ElementInternals`.
+ *
+ * @example
+ *
+ * class MyElement extends mixinElementInternals(LitElement) {
+ * 	constructor() {
+ * 		super();
+ * 		this[internals].role = 'button';
+ * 	}
+ * }
+ *
+ */
+export declare const internals: unique symbol;
+/**
+ * An instance with an `internals` symbol property for the component's `ElementInternals`.
+ *
+ * Use this when protected access is needed for an instance's `ElementInternals`
+ * from other files. A unique symbol is used to access the internals.
+ */
+export interface WithElementInternals {
+    /**
+     * An instance's `ElementInternals`.
+     */
+    readonly [internals]: ElementInternals;
+}
+/**
+ * Mixes in an attached `ElementInternals` instance.
+ *
+ * This mixin is only needed when other shared code needs access to a component's `ElementInternals`, such as
+ * form-associated mixins.
+ *
+ * @param base  The class to mix functionality into.
+ * @returns The provided class with `WithElementInternals` mixed in.
+ */
+export declare function mixinElementInternals<T extends MixinBase<LitElement>>(base: T): MixinReturn<T, WithElementInternals>;

package/internal/element-internals.js

@@ -0,0 +1,45 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
+
+/**
+ * A unique symbol used for protected access to an instance's `ElementInternals`.
+ *
+ * @example
+ *
+ * class MyElement extends mixinElementInternals(LitElement) {
+ * 	constructor() {
+ * 		super();
+ * 		this[internals].role = 'button';
+ * 	}
+ * }
+ *
+ */
+const internals = Symbol('internals');
+/**
+ * Mixes in an attached `ElementInternals` instance.
+ *
+ * This mixin is only needed when other shared code needs access to a component's `ElementInternals`, such as
+ * form-associated mixins.
+ *
+ * @param base  The class to mix functionality into.
+ * @returns The provided class with `WithElementInternals` mixed in.
+ */
+function mixinElementInternals(base) {
+    var _WithElementInternalsElement_internals;
+    class WithElementInternalsElement extends base {
+        constructor() {
+            super(...arguments);
+            _WithElementInternalsElement_internals.set(this, undefined);
+        }
+        get [(_WithElementInternalsElement_internals = new WeakMap(), internals)]() {
+            // Create internals in getter so that it can be used in methods called on
+            // construction in `ReactiveElement`, such as `requestUpdate()`.
+            if (!__classPrivateFieldGet(this, _WithElementInternalsElement_internals, "f")) {
+                __classPrivateFieldSet(this, _WithElementInternalsElement_internals, this.attachInternals(), "f");
+            }
+            return __classPrivateFieldGet(this, _WithElementInternalsElement_internals, "f");
+        }
+    }
+    return WithElementInternalsElement;
+}
+
+export { internals, mixinElementInternals };

package/internal/form-associated.d.ts

@@ -0,0 +1,176 @@
+import { LitElement } from 'lit';
+import { MixinBase, MixinReturn } from '@lookwe/utils';
+import { WithElementInternals } from './element-internals.js';
+/**
+ * A form-associated element.
+ *
+ * IMPORTANT: Requires declares for lit-analyzer.
+ *
+ * @example
+ *
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ * class MyControl extends base {
+ * 	// Writable mixin properties for lit-html binding, needed for lit-analyzer
+ * 	declare disabled: boolean;
+ * 	declare name: string;
+ * }
+ *
+ */
+export interface FormAssociated {
+    /**
+     * The associated form element with which this element's value will submit.
+     */
+    readonly form: HTMLFormElement | null;
+    /**
+     * The labels this element is associated with.
+     */
+    readonly labels: NodeList;
+    /**
+     * The HTML name to use in form submission.
+     */
+    name: string;
+    /**
+     * Whether or not the element is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Gets the current form value of a component.
+     *
+     * @returns The current form value.
+     */
+    [getFormValue](): FormValue | null;
+    /**
+     * Gets the current form state of a component. Defaults to the component's `[formValue]`.
+     *
+     * Use this when the state of an element is different from its value, such as checkboxes (internal boolean state and a
+     * user string value).
+     *
+     * @returns The current form state, defaults to the form value.
+     */
+    [getFormState](): FormValue | null;
+    /**
+     * A callback for when a form component should be disabled or enabled. This can be called in a variety of situations,
+     * such as disabled `<fieldset>`s.
+     *
+     * @param disabled  Whether or not the form control should be disabled.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * A callback for when the form requests to reset its value. Typically, the default value that is reset is represented
+     * in the attribute of an element.
+     *
+     * This means the attribute used for the value should not update as the value changes. For example,
+     * a checkbox should not change its default `checked`
+     * attribute when selected. Ensure form values do not reflect.
+     */
+    formResetCallback(): void;
+    /**
+     * A callback for when the form restores the state of a component. For example,
+     * when a page is reloaded or forms are autofilled.
+     *
+     * @param state   The state to restore, or null to reset the form control's value.
+     * @param reason  The reason state was restored, either `'restore'` or `'autocomplete'`.
+     */
+    formStateRestoreCallback(state: FormRestoreState | null, reason: FormRestoreReason): void;
+    /**
+     * An optional callback for when the associated form changes.
+     *
+     * @param form  The new associated form, or `null` if there is none.
+     */
+    formAssociatedCallback?(form: HTMLFormElement | null): void;
+}
+/**
+ * The constructor of a `FormAssociated` element.
+ */
+export interface FormAssociatedConstructor {
+    /**
+     * Indicates that an element is participating in form association.
+     */
+    readonly formAssociated: true;
+}
+/**
+ * A symbol property to retrieve the form value for an element.
+ */
+export declare const getFormValue: unique symbol;
+/**
+ * A symbol property to retrieve the form state for an element.
+ */
+export declare const getFormState: unique symbol;
+/**
+ * Mixes in form-associated behavior for a class. This allows an element to add values to `<form>`
+ * elements.
+ *
+ * Implementing classes should provide a `[formValue]` to return the current value of the element,
+ * as well as reset and restore callbacks.
+ *
+ * @param base  The class to mix functionality into. The base class must use `mixinElementInternals()`.
+ * @returns The provided class with `FormAssociated` mixed in.
+ * @example
+ *
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyControl extends base {
+ *   \@property()
+ *   accessor value = '';
+ *
+ *   override [getFormValue]() {
+ *     return this.value;
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.getAttribute('value');
+ *     this.value = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.value = state;
+ *   }
+ * }
+ *
+ * @example
+ *
+ * // Elements may optionally provide a `[formState]` if their values do not represent the state of the component.
+ *
+ * const BaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyCheckbox extends BaseClass {
+ *   \@property()
+ *   accessor value = 'on';
+ *
+ *   \@property({type: Boolean})
+ *   accessor checked = false;
+ *
+ *   override [getFormValue]() {
+ *     return this.checked ? this.value : null;
+ *   }
+ *
+ *   override [getFormState]() {
+ *     return String(this.checked);
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.hasAttribute('checked');
+ *     this.checked = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.checked = Boolean(state);
+ *   }
+ * }
+ *
+ */
+export declare function mixinFormAssociated<T extends MixinBase<LitElement & WithElementInternals>>(base: T): MixinReturn<T & FormAssociatedConstructor, FormAssociated>;
+/**
+ * A value that can be provided for form submission and state.
+ */
+export type FormValue = File | string | FormData;
+/**
+ * A value to be restored for a component's form value. If a component's form state is a `FormData`
+ * object, its entry list of name and values will be provided.
+ */
+export type FormRestoreState = File | string | Array<[string, FormDataEntryValue]>;
+/**
+ * The reason a form component is being restored for, either `'restore'` for browser restoration or `'autocomplete'` for
+ * restoring user values.
+ */
+export type FormRestoreReason = 'restore' | 'autocomplete';

package/internal/form-associated.js

@@ -0,0 +1,143 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __runInitializers, __esDecorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { stringConverter } from '@lookwe/lit-converters';
+import { internals } from './element-internals.js';
+
+/**
+ * A symbol property to retrieve the form value for an element.
+ */
+const getFormValue = Symbol('getFormValue');
+/**
+ * A symbol property to retrieve the form state for an element.
+ */
+const getFormState = Symbol('getFormState');
+/**
+ * Mixes in form-associated behavior for a class. This allows an element to add values to `<form>`
+ * elements.
+ *
+ * Implementing classes should provide a `[formValue]` to return the current value of the element,
+ * as well as reset and restore callbacks.
+ *
+ * @param base  The class to mix functionality into. The base class must use `mixinElementInternals()`.
+ * @returns The provided class with `FormAssociated` mixed in.
+ * @example
+ *
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyControl extends base {
+ *   \@property()
+ *   accessor value = '';
+ *
+ *   override [getFormValue]() {
+ *     return this.value;
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.getAttribute('value');
+ *     this.value = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.value = state;
+ *   }
+ * }
+ *
+ * @example
+ *
+ * // Elements may optionally provide a `[formState]` if their values do not represent the state of the component.
+ *
+ * const BaseClass = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyCheckbox extends BaseClass {
+ *   \@property()
+ *   accessor value = 'on';
+ *
+ *   \@property({type: Boolean})
+ *   accessor checked = false;
+ *
+ *   override [getFormValue]() {
+ *     return this.checked ? this.value : null;
+ *   }
+ *
+ *   override [getFormState]() {
+ *     return String(this.checked);
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.hasAttribute('checked');
+ *     this.checked = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.checked = Boolean(state);
+ *   }
+ * }
+ *
+ */
+function mixinFormAssociated(base) {
+    let FormAssociatedElement = (() => {
+        var _FormAssociatedElement_instances, _a, _FormAssociatedElement_updateFormValue, _FormAssociatedElement_name_accessor_storage, _FormAssociatedElement_disabled_accessor_storage;
+        let _classSuper = base;
+        let _name_decorators;
+        let _name_initializers = [];
+        let _name_extraInitializers = [];
+        let _disabled_decorators;
+        let _disabled_initializers = [];
+        let _disabled_extraInitializers = [];
+        return _a = class FormAssociatedElement extends _classSuper {
+                get form() {
+                    return this[internals].form;
+                }
+                get labels() {
+                    return this[internals].labels;
+                }
+                get name() { return __classPrivateFieldGet(this, _FormAssociatedElement_name_accessor_storage, "f"); }
+                set name(value) { __classPrivateFieldSet(this, _FormAssociatedElement_name_accessor_storage, value, "f"); }
+                get disabled() { return __classPrivateFieldGet(this, _FormAssociatedElement_disabled_accessor_storage, "f"); }
+                set disabled(value) { __classPrivateFieldSet(this, _FormAssociatedElement_disabled_accessor_storage, value, "f"); }
+                requestUpdate(name, oldValue, options) {
+                    super.requestUpdate(name, oldValue, options);
+                    // If any properties change, update the form value, which may have changed
+                    // as well.
+                    // Update the form value synchronously in `requestUpdate()` rather than
+                    // `update()` or `updated()`, which are async. This is necessary to ensure
+                    // that form data is updated in time for synchronous event listeners.
+                    if (!name)
+                        return;
+                    __classPrivateFieldGet(this, _FormAssociatedElement_instances, "m", _FormAssociatedElement_updateFormValue).call(this);
+                }
+                connectedCallback() {
+                    super.connectedCallback();
+                    __classPrivateFieldGet(this, _FormAssociatedElement_instances, "m", _FormAssociatedElement_updateFormValue).call(this);
+                }
+                [(_FormAssociatedElement_instances = new WeakSet(), _FormAssociatedElement_name_accessor_storage = new WeakMap(), _FormAssociatedElement_disabled_accessor_storage = new WeakMap(), _FormAssociatedElement_updateFormValue = function _FormAssociatedElement_updateFormValue() {
+                    if (!this.isConnected)
+                        return;
+                    this[internals].setFormValue(this[getFormValue](), this[getFormState]());
+                }, _name_decorators = [property({ reflect: true, converter: stringConverter })], _disabled_decorators = [property({ type: Boolean })], getFormState)]() {
+                    return this[getFormValue]();
+                }
+                formDisabledCallback(disabled) {
+                    this.disabled = disabled;
+                }
+                constructor() {
+                    super(...arguments);
+                    _FormAssociatedElement_instances.add(this);
+                    _FormAssociatedElement_name_accessor_storage.set(this, __runInitializers(this, _name_initializers, ''));
+                    _FormAssociatedElement_disabled_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _disabled_initializers, false)));
+                    __runInitializers(this, _disabled_extraInitializers);
+                }
+            },
+            (() => {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : undefined;
+                __esDecorate(_a, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+                __esDecorate(_a, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+                if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            })(),
+            _a.formAssociated = true,
+            _a;
+    })();
+    return FormAssociatedElement;
+}
+
+export { getFormState, getFormValue, mixinFormAssociated };

package/internal/popover-target.d.ts

@@ -0,0 +1,46 @@
+import { ReactiveElement } from 'lit';
+import { MixinBase, MixinReturn } from '@lookwe/utils';
+/**
+ * An instance with all the useful properties to use the [Popover
+ * api](https://developer.mozilla.org/docs/Web/API/Popover_API).
+ */
+export interface WithPopoverTarget {
+    /**
+     * Defines id to retrieve the controlled popover element.
+     *
+     * https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/popoverTargetElement
+     */
+    popoverTarget: string;
+    /**
+     * Defines the controlled popover element.
+     *
+     * https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/popoverTargetElement
+     */
+    popoverTargetElement: Element | null;
+    /**
+     * Defines the action to be performed ("hide", "show", or "toggle") on a controlled popover element.
+     *
+     * https://developer.mozilla.org/docs/Web/API/HTMLButtonElement/popoverTargetAction
+     */
+    popoverTargetAction: 'hide' | 'show' | 'toggle';
+}
+/**
+ * Mixes in popovertarget behavior for a class. This allows an element to control an external popover element.
+ *
+ * @param base  The class to mix functionality into.
+ * @returns The provided class with `WithPopoverTarget` mixed in.
+ * @example
+ *
+ * class MyButton extends mixinPopoverTarget(LitElement) {
+ * 	render() {
+ * 		return html`
+ * 			<button
+ * 				.popoverTargetElement=${this.popoverTargetElement}
+ * 				.popoverTargetAction=${this.popoverTargetAction}
+ * 			></button>
+ * 		`;
+ * 	}
+ * }
+ *
+ */
+export declare function mixinPopoverTarget<T extends MixinBase<ReactiveElement>>(base: T): MixinReturn<T, WithPopoverTarget>;

package/internal/popover-target.js

@@ -0,0 +1,83 @@
+import { __esDecorate, __classPrivateFieldGet, __classPrivateFieldSet, __runInitializers } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { stringConverter } from '@lookwe/lit-converters';
+
+/**
+ * Mixes in popovertarget behavior for a class. This allows an element to control an external popover element.
+ *
+ * @param base  The class to mix functionality into.
+ * @returns The provided class with `WithPopoverTarget` mixed in.
+ * @example
+ *
+ * class MyButton extends mixinPopoverTarget(LitElement) {
+ * 	render() {
+ * 		return html`
+ * 			<button
+ * 				.popoverTargetElement=${this.popoverTargetElement}
+ * 				.popoverTargetAction=${this.popoverTargetAction}
+ * 			></button>
+ * 		`;
+ * 	}
+ * }
+ *
+ */
+function mixinPopoverTarget(base) {
+    let WithPopoverTargetElement = (() => {
+        var _WithPopoverTargetElement_instances, _a, _WithPopoverTargetElement_popoverTargetElement, _WithPopoverTargetElement_getPopoverTargetElement, _WithPopoverTargetElement_popoverTarget_accessor_storage, _WithPopoverTargetElement_popoverTargetAction_accessor_storage;
+        let _classSuper = base;
+        let _instanceExtraInitializers = [];
+        let _popoverTarget_decorators;
+        let _popoverTarget_initializers = [];
+        let _popoverTarget_extraInitializers = [];
+        let _set_popoverTargetElement_decorators;
+        let _popoverTargetAction_decorators;
+        let _popoverTargetAction_initializers = [];
+        let _popoverTargetAction_extraInitializers = [];
+        return _a = class WithPopoverTargetElement extends _classSuper {
+                get popoverTarget() { return __classPrivateFieldGet(this, _WithPopoverTargetElement_popoverTarget_accessor_storage, "f"); }
+                set popoverTarget(value) { __classPrivateFieldSet(this, _WithPopoverTargetElement_popoverTarget_accessor_storage, value, "f"); }
+                set popoverTargetElement(popoverTargetElement) {
+                    __classPrivateFieldSet(this, _WithPopoverTargetElement_popoverTargetElement, popoverTargetElement, "f");
+                }
+                get popoverTargetElement() {
+                    if (__classPrivateFieldGet(this, _WithPopoverTargetElement_popoverTargetElement, "f") && __classPrivateFieldGet(this, _WithPopoverTargetElement_popoverTargetElement, "f").isConnected)
+                        return __classPrivateFieldGet(this, _WithPopoverTargetElement_popoverTargetElement, "f");
+                    return (__classPrivateFieldSet(this, _WithPopoverTargetElement_popoverTargetElement, __classPrivateFieldGet(this, _WithPopoverTargetElement_instances, "m", _WithPopoverTargetElement_getPopoverTargetElement).call(this), "f"));
+                }
+                get popoverTargetAction() { return __classPrivateFieldGet(this, _WithPopoverTargetElement_popoverTargetAction_accessor_storage, "f"); }
+                set popoverTargetAction(value) { __classPrivateFieldSet(this, _WithPopoverTargetElement_popoverTargetAction_accessor_storage, value, "f"); }
+                constructor() {
+                    super(...arguments);
+                    _WithPopoverTargetElement_instances.add(this);
+                    _WithPopoverTargetElement_popoverTarget_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _popoverTarget_initializers, '')));
+                    _WithPopoverTargetElement_popoverTargetElement.set(this, (__runInitializers(this, _popoverTarget_extraInitializers), null));
+                    _WithPopoverTargetElement_popoverTargetAction_accessor_storage.set(this, __runInitializers(this, _popoverTargetAction_initializers, 'toggle'));
+                    __runInitializers(this, _popoverTargetAction_extraInitializers);
+                }
+            },
+            _WithPopoverTargetElement_popoverTargetElement = new WeakMap(),
+            _WithPopoverTargetElement_instances = new WeakSet(),
+            _WithPopoverTargetElement_popoverTarget_accessor_storage = new WeakMap(),
+            _WithPopoverTargetElement_popoverTargetAction_accessor_storage = new WeakMap(),
+            _WithPopoverTargetElement_getPopoverTargetElement = function _WithPopoverTargetElement_getPopoverTargetElement() {
+                if (!this.popoverTarget)
+                    return null;
+                const root = this.getRootNode();
+                return root.querySelector(`#${CSS.escape(this.popoverTarget)}`);
+            },
+            (() => {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : undefined;
+                _popoverTarget_decorators = [property({ reflect: true, attribute: 'popovertarget', converter: stringConverter })];
+                _set_popoverTargetElement_decorators = [property({ attribute: false })];
+                _popoverTargetAction_decorators = [property({ attribute: 'popovertargetaction' })];
+                __esDecorate(_a, null, _popoverTarget_decorators, { kind: "accessor", name: "popoverTarget", static: false, private: false, access: { has: obj => "popoverTarget" in obj, get: obj => obj.popoverTarget, set: (obj, value) => { obj.popoverTarget = value; } }, metadata: _metadata }, _popoverTarget_initializers, _popoverTarget_extraInitializers);
+                __esDecorate(_a, null, _set_popoverTargetElement_decorators, { kind: "setter", name: "popoverTargetElement", static: false, private: false, access: { has: obj => "popoverTargetElement" in obj, set: (obj, value) => { obj.popoverTargetElement = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+                __esDecorate(_a, null, _popoverTargetAction_decorators, { kind: "accessor", name: "popoverTargetAction", static: false, private: false, access: { has: obj => "popoverTargetAction" in obj, get: obj => obj.popoverTargetAction, set: (obj, value) => { obj.popoverTargetAction = value; } }, metadata: _metadata }, _popoverTargetAction_initializers, _popoverTargetAction_extraInitializers);
+                if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            })(),
+            _a;
+    })();
+    return WithPopoverTargetElement;
+}
+
+export { mixinPopoverTarget };

package/package.json

@@ -0,0 +1,85 @@
+{
+	"name": "@lookwe/lit-mixins",
+	"description": "Some lit mixins",
+	"homepage": "https://github.com/Lookwe69/lit-mixins",
+	"bugs": {
+		"url": "https://github.com/Lookwe69/lit-mixins/issues"
+	},
+	"keywords": [
+		"lui mixin",
+		"web-components mixin",
+		"typescript",
+		"lit mixin",
+		"lit element internals",
+		"lit popover target"
+	],
+	"author": "Lookwe",
+	"version": "1.0.0",
+	"type": "module",
+	"scripts": {
+		"build": "rollup --config rollup-dist.config.js",
+		"build:watch": "npm run build -- --watch",
+		"build:prepack": "rollup --config rollup-prepack.config.js",
+		"clean": "rm -rf dist && rm -rf coverage && rm -rf internal",
+		"lint": "npm run lint:eslint && npm run lint:ts",
+		"lint:eslint": "eslint 'src/**/*.ts'",
+		"lint:ts": "tsc --noEmit",
+		"format": "prettier --check --ignore-path .gitignore --ignore-path .prettierignore .",
+		"format:fix": "npm run format -- --write && npm run format -- --write --plugin=@homer0/prettier-plugin-jsdoc",
+		"test": "npm run build && wtr && MODE=prod wtr",
+		"test:dev": "npm run build && wtr",
+		"test:dev:watch": "npm run build && wtr --watch",
+		"test:prod": "MODE=prod wtr",
+		"test:prod:watch": "npm run build && MODE=prod wtr --watch",
+		"test:coverage": "npm run test -- --coverage",
+		"prepare-pack": "npm run clean && npm run build:prepack",
+		"prepack": "npm run prepare-pack",
+		"semantic-release": "semantic-release"
+	},
+	"files": [
+		"index.js",
+		"index.d.ts",
+		"internal"
+	],
+	"main": "index.js",
+	"module": "index.js",
+	"types": "index.d.ts",
+	"exports": {
+		".": "./index.js",
+		"./delegate-focus": "./internal/delegate-focus.js",
+		"./element-internals": "./internal/element-internals.js",
+		"./form-associated": "./internal/form-associated.js",
+		"./popover-target": "./internal/popover-target.js"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"dependencies": {
+		"@lookwe/lit-converters": "^1.0.1",
+		"@lookwe/utils": "^1.1.0",
+		"lit": "^3.2.1",
+		"tslib": "^2.8.0"
+	},
+	"devDependencies": {
+		"@homer0/prettier-plugin-jsdoc": "^9.1.0",
+		"@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+		"@open-wc/testing": "^4.0.0",
+		"@rollup/plugin-node-resolve": "^16.0.0",
+		"@rollup/plugin-replace": "^6.0.2",
+		"@rollup/plugin-typescript": "^12.1.2",
+		"@types/mocha": "^10.0.10",
+		"@web/dev-server-rollup": "^0.6.4",
+		"@web/test-runner": "^0.17.3",
+		"@web/test-runner-commands": "^0.9.0",
+		"@web/test-runner-playwright": "^0.11.0",
+		"eslint": "^9.18.0",
+		"globals": "^15.14.0",
+		"prettier": "^3.4.2",
+		"rollup": "^4.31.0",
+		"rollup-plugin-multi-input": "^1.5.0",
+		"semantic-release": "^24.2.1",
+		"sinon": "^19.0.2",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.21.0"
+	}
+}