sheer-ui 0.4.2 → 0.5.0

package/src/lib/components/pin-input/usePasswordManager.svelte.ts

@@ -1,122 +0,0 @@
-import { getWindow, type DOMContext, type ReadableBox, type WritableBox } from '../../internal/tools/index.js';
-import type { PinInputRootPropsWithoutHTML } from './types.js';
-
-const PWM_BADGE_MARGIN_RIGHT = 18;
-const PWM_BADGE_SPACE_WIDTH_PX = 40;
-const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const;
-
-const PASSWORD_MANAGER_SELECTORS = [
-	'[data-lastpass-icon-root]', // LastPass,
-	'com-1password-button', // 1Password,
-	'[data-dashlanecreated]', // Dashlane,
-	'[style$="2147483647 !important;"]', // Bitwarden
-].join(',');
-
-type UsePasswordManagerBadgeProps = {
-	containerRef: WritableBox<HTMLElement | null>;
-	inputRef: WritableBox<HTMLInputElement | null>;
-	pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML['pushPasswordManagerStrategy']>;
-	isFocused: () => boolean;
-	domContext: DOMContext;
-};
-
-export function usePasswordManagerBadge({
-	containerRef,
-	inputRef,
-	pushPasswordManagerStrategy,
-	isFocused,
-	domContext,
-}: UsePasswordManagerBadgeProps) {
-	let hasPwmBadge = $state(false);
-	let hasPwmBadgeSpace = $state(false);
-	let done = $state(false);
-
-	function willPushPwmBadge() {
-		const strategy = pushPasswordManagerStrategy.current;
-		if (strategy === 'none') return false;
-
-		const increaseWidthCase = strategy === 'increase-width' && hasPwmBadge && hasPwmBadgeSpace;
-
-		return increaseWidthCase;
-	}
-
-	function trackPwmBadge() {
-		const container = containerRef.current;
-		const input = inputRef.current;
-		if (!container || !input || done || pushPasswordManagerStrategy.current === 'none') return;
-
-		const elementToCompare = container;
-
-		// get the top right-center point of the container
-		// that is usually where most password managers place their badge
-		const rightCornerX = elementToCompare.getBoundingClientRect().left + elementToCompare.offsetWidth;
-		const centeredY = elementToCompare.getBoundingClientRect().top + elementToCompare.offsetHeight / 2;
-		const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;
-		const y = centeredY;
-
-		// do an extra search to check for all the password manager badges
-		const passwordManagerStrategy = domContext.querySelectorAll(PASSWORD_MANAGER_SELECTORS);
-
-		// if no password manager is detected, dispatch document.elementFromPoint to
-		// identify the badges
-		if (passwordManagerStrategy.length === 0) {
-			const maybeBadgeEl = domContext.getDocument().elementFromPoint(x, y);
-
-			// if the found element is the container,
-			// then it is not a badge, most times there is no badge in this case
-			if (maybeBadgeEl === container) return;
-		}
-
-		hasPwmBadge = true;
-		done = true;
-	}
-
-	$effect(() => {
-		const container = containerRef.current;
-		if (!container || pushPasswordManagerStrategy.current === 'none') return;
-
-		// check if the pwm area is fully visible
-		function checkHasSpace() {
-			const viewportWidth = getWindow(container).innerWidth;
-			const distanceToRightEdge = viewportWidth - container!.getBoundingClientRect().right;
-			hasPwmBadgeSpace = distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX;
-		}
-
-		checkHasSpace();
-		const interval = setInterval(checkHasSpace, 1000);
-
-		return () => {
-			clearInterval(interval);
-		};
-	});
-
-	$effect(() => {
-		const focused = isFocused() || domContext.getActiveElement() === inputRef.current;
-
-		if (pushPasswordManagerStrategy.current === 'none' || !focused) return;
-
-		const t1 = setTimeout(trackPwmBadge, 0);
-		const t2 = setTimeout(trackPwmBadge, 2000);
-		const t3 = setTimeout(trackPwmBadge, 5000);
-		const t4 = setTimeout(() => {
-			done = true;
-		}, 6000);
-
-		return () => {
-			clearTimeout(t1);
-			clearTimeout(t2);
-			clearTimeout(t3);
-			clearTimeout(t4);
-		};
-	});
-
-	return {
-		get hasPwmBadge() {
-			return hasPwmBadge;
-		},
-		get willPushPwmBadge() {
-			return willPushPwmBadge();
-		},
-		PWM_BADGE_SPACE_WIDTH,
-	};
-}

package/src/lib/components/popover/components/popover-close.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
-	import { mergeProps } from '../../../internal/merge-props.js';
-	import type { PopoverCloseProps } from '../types.js';
-	import { PopoverCloseState } from '../popover.svelte.js';
-
-	import { createId } from '../../../internal/create-id.js';
-
-	const uid = $props.id();
-
-	let { child, children, id = createId(uid), ref = $bindable(null), ...restProps }: PopoverCloseProps = $props();
-
-	const closeState = PopoverCloseState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(value) => (ref = value),
-		),
-	});
-
-	const mergedProps = $derived(
-		mergeProps(
-			restProps,
-			{
-				'data-slot': 'popover-close',
-			},
-			closeState.props,
-		),
-	);
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<button {...mergedProps}>
-		{@render children?.()}
-	</button>
-{/if}

package/src/lib/components/popover/components/popover-content.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
-	import { mergeProps } from '../../../internal/merge-props.js';
-	import type { PopoverContentProps } from '../types.js';
-	import { PopoverContentState } from '../popover.svelte.js';
-	import { createId } from '../../../internal/create-id.js';
-	import { useNativePopoverLifecycle } from '../../../internal/native-popover.svelte.js';
-
-	const uid = $props.id();
-
-	let {
-		child,
-		children,
-		ref = $bindable(null),
-		id = createId(uid),
-		side = 'bottom',
-		align = 'center',
-		customAnchor = null,
-		style,
-		// No native equivalent — accepted for API compatibility but intentionally ignored.
-		// Native popovers don't trap focus or lock scroll (ARIA-correct for a non-modal
-		// popover), and the content is always mounted (the popover toggles `display` itself),
-		// so trapFocus / preventScroll / forceMount / the FU auto-focus hooks are no-ops.
-		// Dismissal is the UA's (`popover="auto"` light dismiss + top-layer Escape), so the
-		// onInteractOutside / onEscapeKeydown interception hooks are no-ops too.
-		// The remaining FU-only positioning props (sideOffset, avoidCollisions, …) ride in
-		// restProps; native CSS `anchor()` positioning ignores them.
-		trapFocus = true,
-		preventScroll = false,
-		forceMount = false,
-		onOpenAutoFocus = () => {},
-		onCloseAutoFocus = () => {},
-		onInteractOutside = () => {},
-		onEscapeKeydown = () => {},
-		...restProps
-	}: PopoverContentProps = $props();
-
-	const contentState = PopoverContentState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		customAnchor: boxWith(() => customAnchor),
-	});
-
-	const lifecycleProps = useNativePopoverLifecycle(contentState, { anchor: () => customAnchor, mode: 'auto' });
-
-	const mergedProps = $derived(
-		mergeProps(
-			{
-				'data-slot': 'popover-content',
-				class:
-					'bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden transition-[opacity,scale,translate,display,overlay] transition-discrete opacity-0 scale-95 open:data-[state=open]:opacity-100 open:data-[state=open]:scale-100 starting:open:data-[state=open]:opacity-0 starting:open:data-[state=open]:scale-95',
-			},
-			restProps,
-			contentState.props,
-			{ style },
-			lifecycleProps,
-		),
-	);
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps, ...contentState.snippetProps })}
-{:else}
-	<div {...mergedProps} bind:this={ref} data-side={side} data-align={align}>
-		{@render children?.()}
-	</div>
-{/if}

package/src/lib/components/popover/components/popover-trigger.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
-	import { mergeProps } from '../../../internal/merge-props.js';
-	import type { PopoverTriggerProps } from '../types.js';
-	import { PopoverTriggerState } from '../popover.svelte.js';
-	import { createId } from '../../../internal/create-id.js';
-
-	const uid = $props.id();
-
-	let {
-		children,
-		child,
-		id = createId(uid),
-		ref = $bindable(null),
-		type = 'button',
-		disabled = false,
-		openOnHover = false,
-		openDelay = 700,
-		closeDelay = 300,
-		...restProps
-	}: PopoverTriggerProps = $props();
-
-	const triggerState = PopoverTriggerState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
-		openOnHover: boxWith(() => openOnHover),
-		openDelay: boxWith(() => openDelay),
-		closeDelay: boxWith(() => closeDelay),
-	});
-
-	const mergedProps = $derived(mergeProps({ 'data-slot': 'popover-trigger' }, restProps, triggerState.props, { type }));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<button {...mergedProps}>
-		{@render children?.()}
-	</button>
-{/if}

package/src/lib/components/popover/components/popover.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { PopoverRootProps } from '../types.js';
-	import { PopoverRootState } from '../popover.svelte.js';
-	import { OpenCell } from '../../../internal/open-cell.svelte.js';
-	import { boxWith } from '../../../internal/tools/index.js';
-
-	let { open = false, onOpenChangeComplete = () => {}, state, children }: PopoverRootProps = $props();
-
-	// Root owns both the machinery and the cell; `open` (the prop) is the cell's
-	// derivation source, and the children snippet is the only way the cell leaves.
-	// A caller-built `state` cell (with its own source/writer) takes over both roles.
-	// The cell's identity is fixed at mount — swapping `state` later is not supported.
-	// The engine keeps its boxed-open interface (vendored, ADR 0006); the box is a
-	// bridge over the cell, so the cell stays the one owner of `open`.
-	// svelte-ignore state_referenced_locally
-	const popover = state ?? new OpenCell(() => open);
-	PopoverRootState.create({
-		open: boxWith(
-			() => popover.open,
-			(value) => (popover.open = value),
-		),
-		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
-	});
-</script>
-
-{@render children?.(popover)}

package/src/lib/components/popover/exports.ts

@@ -1,13 +0,0 @@
-export { default as Root } from "./components/popover.svelte";
-export { default as Content } from "./components/popover-content.svelte";
-export { default as Trigger } from "./components/popover-trigger.svelte";
-export { default as Close } from "./components/popover-close.svelte";
-export { default as Portal } from "../../internal/portal/portal.svelte";
-
-export type {
-	PopoverRootProps as RootProps,
-	PopoverContentProps as ContentProps,
-	PopoverTriggerProps as TriggerProps,
-	PopoverCloseProps as CloseProps,
-	PopoverPortalProps as PortalProps,
-} from "./types.js";

package/src/lib/components/popover/popover.svelte.ts

@@ -1,392 +0,0 @@
-import { createContext, untrack } from 'svelte';
-import {
-	type ReadableBox,
-	type ReadableBoxedValues,
-	type WritableBoxedValues,
-	attachRef,
-	boxWith,
-} from '../../internal/tools/index.js';
-import { kbd } from '../../internal/kbd.js';
-import { createBitsAttrs, boolToStr, getDataOpenClosed } from '../../internal/attrs.js';
-import type {
-	BitsFocusEvent,
-	BitsKeyboardEvent,
-	BitsMouseEvent,
-	BitsPointerEvent,
-	OnChangeFn,
-	RefAttachment,
-	WithRefOpts,
-} from '../../internal/types.js';
-import { isElement } from '../../internal/tools/utils/dom.js';
-import type { Measurable } from '../../internal/floating-layer/index.js';
-import { SafePolygon } from '../../internal/safe-polygon.svelte.js';
-import { isTabbable } from '../../internal/tabbable.js';
-import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
-
-const popoverAttrs = createBitsAttrs({
-	component: 'popover',
-	parts: ['root', 'trigger', 'content', 'close'],
-});
-
-const [getPopoverRoot, setPopoverRoot] = createContext<PopoverRootState>();
-
-interface PopoverRootStateOpts
-	extends
-		WritableBoxedValues<{
-			open: boolean;
-		}>,
-		ReadableBoxedValues<{
-			onOpenChangeComplete: OnChangeFn<boolean>;
-		}> {}
-
-export class PopoverRootState {
-	static create(opts: PopoverRootStateOpts) {
-		return setPopoverRoot(new PopoverRootState(opts));
-	}
-
-	readonly opts: PopoverRootStateOpts;
-	contentNode = $state<HTMLElement | null>(null);
-	triggerNode = $state<HTMLElement | null>(null);
-
-	// hover tracking state
-	openedViaHover = $state(false);
-	hasInteractedWithContent = $state(false);
-	hoverCooldown = $state(false);
-	#closeDelaySource = $state<ReadableBox<number>>(boxWith(() => 0));
-	closeDelay = $derived.by(() => this.#closeDelaySource.current);
-	#closeTimer = createEffectTimeout(() => {
-		if (this.openedViaHover && !this.hasInteractedWithContent) {
-			this.opts.open.current = false;
-		}
-	}, () => this.closeDelay);
-
-	constructor(opts: PopoverRootStateOpts) {
-		this.opts = opts;
-
-		$effect(() => {
-			const isOpen = this.opts.open.current;
-			untrack(() => {
-				if (!isOpen) {
-					this.openedViaHover = false;
-					this.hasInteractedWithContent = false;
-					this.#closeTimer.stop();
-				}
-			});
-		});
-	}
-
-	setCloseDelaySource(source: ReadableBox<number>) {
-		this.#closeDelaySource = source;
-	}
-
-	toggleOpen() {
-		this.#closeTimer.stop();
-		this.opts.open.current = !this.opts.open.current;
-	}
-
-	handleClose() {
-		this.#closeTimer.stop();
-		if (!this.opts.open.current) return;
-		this.opts.open.current = false;
-	}
-
-	handleHoverOpen() {
-		this.#closeTimer.stop();
-		if (this.opts.open.current) return;
-		this.openedViaHover = true;
-		this.opts.open.current = true;
-	}
-
-	handleHoverClose() {
-		if (!this.opts.open.current) return;
-		// only close if opened via hover and user hasn't interacted with content
-		if (this.openedViaHover && !this.hasInteractedWithContent) {
-			this.opts.open.current = false;
-		}
-	}
-
-	handleDelayedHoverClose() {
-		if (!this.opts.open.current) return;
-		if (!this.openedViaHover || this.hasInteractedWithContent) return;
-
-		if (this.closeDelay <= 0) {
-			this.#closeTimer.stop();
-			this.opts.open.current = false;
-			return;
-		}
-
-		this.#closeTimer.start();
-	}
-
-	cancelDelayedClose() {
-		this.#closeTimer.stop();
-	}
-
-	markInteraction() {
-		this.hasInteractedWithContent = true;
-		this.#closeTimer.stop();
-	}
-}
-
-interface PopoverTriggerStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			openOnHover: boolean;
-			openDelay: number;
-			closeDelay: number;
-		}> {}
-
-export class PopoverTriggerState {
-	static create(opts: PopoverTriggerStateOpts) {
-		return new PopoverTriggerState(opts, getPopoverRoot());
-	}
-
-	readonly opts: PopoverTriggerStateOpts;
-	readonly root: PopoverRootState;
-	readonly attachment: RefAttachment;
-
-	#openTimer = createEffectTimeout(() => this.root.handleHoverOpen(), () => this.opts.openDelay.current);
-	#isHovering = $state(false);
-	#wasOpenOnPointerDown = false;
-
-	constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
-
-		this.onclick = this.onclick.bind(this);
-		this.onkeydown = this.onkeydown.bind(this);
-		this.onpointerdown = this.onpointerdown.bind(this);
-		this.onpointerenter = this.onpointerenter.bind(this);
-		this.onpointerleave = this.onpointerleave.bind(this);
-
-		this.root.setCloseDelaySource(this.opts.closeDelay);
-	}
-
-	onpointerenter(e: BitsPointerEvent) {
-		if (this.opts.disabled.current) return;
-		if (!this.opts.openOnHover.current) return;
-		if (e.pointerType === 'touch') return;
-
-		this.#isHovering = true;
-		this.root.cancelDelayedClose();
-
-		if (this.root.opts.open.current || this.root.hoverCooldown) return;
-
-		if (this.opts.openDelay.current <= 0) {
-			this.root.handleHoverOpen();
-			return;
-		}
-
-		this.#openTimer.start();
-	}
-
-	onpointerleave(e: BitsPointerEvent) {
-		if (this.opts.disabled.current) return;
-		if (!this.opts.openOnHover.current) return;
-		if (e.pointerType === 'touch') return;
-
-		this.#isHovering = false;
-		this.#openTimer.stop();
-		this.root.hoverCooldown = false;
-
-		// let GraceArea handle the close - it will call handleHoverClose via onPointerExit
-		// we just need to stop any pending open timer
-	}
-
-	onpointerdown(_: BitsPointerEvent) {
-		this.#wasOpenOnPointerDown = this.root.opts.open.current;
-	}
-
-	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
-		if (e.button !== 0) return;
-
-		this.#openTimer.stop();
-
-		// On engines without showPopover({source})'s invoker exemption, the UA light-dismisses the auto
-		// popover at pointerdown — before this click — and the toggle below would instantly reopen it.
-		if (this.#wasOpenOnPointerDown && !this.root.opts.open.current) {
-			this.#wasOpenOnPointerDown = false;
-			return;
-		}
-
-		// if clicked while hovering and popover is open, convert to click-based open
-		if (this.#isHovering && this.root.opts.open.current && this.root.openedViaHover) {
-			this.root.openedViaHover = false;
-			this.root.hasInteractedWithContent = true;
-			return;
-		}
-
-		// if closing while hovering with openOnHover enabled, set cooldown to prevent
-		// immediate re-open via hover
-		if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {
-			this.root.hoverCooldown = true;
-		}
-
-		// if clicking to open while in cooldown, reset cooldown (explicit open)
-		if (this.root.hoverCooldown && !this.root.opts.open.current) {
-			this.root.hoverCooldown = false;
-		}
-
-		this.root.toggleOpen();
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (this.opts.disabled.current) return;
-		if (!(e.key === kbd.ENTER || e.key === kbd.SPACE)) return;
-		e.preventDefault();
-		this.#openTimer.stop();
-		this.root.toggleOpen();
-	}
-
-	#getAriaControls(): string | undefined {
-		if (this.root.opts.open.current && this.root.contentNode?.id) {
-			return this.root.contentNode?.id;
-		}
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'aria-haspopup': 'dialog',
-				'aria-expanded': boolToStr(this.root.opts.open.current),
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
-				'aria-controls': this.#getAriaControls(),
-				[popoverAttrs.trigger]: '',
-				disabled: this.opts.disabled.current,
-				//
-				onkeydown: this.onkeydown,
-				onclick: this.onclick,
-				onpointerdown: this.onpointerdown,
-				onpointerenter: this.onpointerenter,
-				onpointerleave: this.onpointerleave,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface PopoverContentStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			customAnchor: string | HTMLElement | null | Measurable;
-		}> {}
-
-export class PopoverContentState {
-	static create(opts: PopoverContentStateOpts) {
-		return new PopoverContentState(opts, getPopoverRoot());
-	}
-
-	readonly opts: PopoverContentStateOpts;
-	readonly root: PopoverRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: PopoverContentStateOpts, root: PopoverRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
-
-		this.onpointerdown = this.onpointerdown.bind(this);
-		this.onfocusin = this.onfocusin.bind(this);
-		this.onpointerenter = this.onpointerenter.bind(this);
-		this.onpointerleave = this.onpointerleave.bind(this);
-
-		new SafePolygon({
-			triggerNode: () => this.root.triggerNode,
-			contentNode: () => this.root.contentNode,
-			enabled: () => this.root.opts.open.current && this.root.openedViaHover && !this.root.hasInteractedWithContent,
-			onPointerExit: () => {
-				this.root.handleDelayedHoverClose();
-			},
-		});
-	}
-
-	onpointerdown(_: BitsPointerEvent) {
-		this.root.markInteraction();
-	}
-
-	onfocusin(e: BitsFocusEvent) {
-		const target = e.target;
-		if (isElement(target) && isTabbable(target)) {
-			this.root.markInteraction();
-		}
-	}
-
-	onpointerenter(e: BitsPointerEvent) {
-		if (e.pointerType === 'touch') return;
-		this.root.cancelDelayedClose();
-	}
-
-	onpointerleave(e: BitsPointerEvent) {
-		if (e.pointerType === 'touch') return;
-		// handled by grace area
-	}
-
-	// The UA owns dismissal (`popover="auto"` light dismiss + Escape); this is how state follows.
-	dismiss = () => {
-		this.root.handleClose();
-	};
-
-	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				tabindex: -1,
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
-				[popoverAttrs.content]: '',
-				onpointerdown: this.onpointerdown,
-				onfocusin: this.onfocusin,
-				onpointerenter: this.onpointerenter,
-				onpointerleave: this.onpointerleave,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface PopoverCloseStateOpts extends WithRefOpts {}
-
-export class PopoverCloseState {
-	static create(opts: PopoverCloseStateOpts) {
-		return new PopoverCloseState(opts, getPopoverRoot());
-	}
-
-	readonly opts: PopoverCloseStateOpts;
-	readonly root: PopoverRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: PopoverCloseStateOpts, root: PopoverRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
-		this.onclick = this.onclick.bind(this);
-		this.onkeydown = this.onkeydown.bind(this);
-	}
-
-	onclick(_: BitsPointerEvent) {
-		this.root.handleClose();
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (!(e.key === kbd.ENTER || e.key === kbd.SPACE)) return;
-		e.preventDefault();
-		this.root.handleClose();
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				onclick: this.onclick,
-				onkeydown: this.onkeydown,
-				type: 'button',
-				[popoverAttrs.close]: '',
-				...this.attachment,
-			}) as const,
-	);
-}