@johly/bits-ui 2.18.1

package/dist/bits/pin-input/pin-input.svelte.js

@@ -0,0 +1,431 @@
+import { Previous, watch } from "runed";
+import { onMount } from "svelte";
+import { attachRef, DOMContext, simpleBox, } from "svelte-toolbelt";
+import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
+import { createBitsAttrs, boolToTrueOrUndef } from "../../internal/attrs.js";
+import { on } from "svelte/events";
+export const REGEXP_ONLY_DIGITS = "^\\d+$";
+export const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+const pinInputAttrs = createBitsAttrs({
+    component: "pin-input",
+    parts: ["root", "cell"],
+});
+const KEYS_TO_IGNORE = [
+    "Backspace",
+    "Delete",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "Escape",
+    "Enter",
+    "Tab",
+    "Shift",
+    "Control",
+    "Meta",
+];
+export class PinInputRootState {
+    static create(opts) {
+        return new PinInputRootState(opts);
+    }
+    opts;
+    attachment;
+    inputAttachment;
+    #isHoveringInput = $state(false);
+    #isFocused = simpleBox(false);
+    #mirrorSelectionStart = $state(null);
+    #mirrorSelectionEnd = $state(null);
+    #previousValue = new Previous(() => this.opts.value.current ?? "");
+    #regexPattern = $derived.by(() => {
+        if (typeof this.opts.pattern.current === "string") {
+            return new RegExp(this.opts.pattern.current);
+        }
+        else {
+            return this.opts.pattern.current;
+        }
+    });
+    #prevInputMetadata = $state({
+        prev: [null, null, "none"],
+        willSyntheticBlur: false,
+    });
+    #pwmb;
+    #initialLoad;
+    domContext;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.inputAttachment = attachRef(this.opts.inputRef);
+        this.domContext = new DOMContext(opts.ref);
+        this.#initialLoad = {
+            value: this.opts.value,
+            isIOS: typeof window !== "undefined" &&
+                window?.CSS?.supports("-webkit-touch-callout", "none"),
+        };
+        this.#pwmb = usePasswordManagerBadge({
+            containerRef: this.opts.ref,
+            inputRef: this.opts.inputRef,
+            isFocused: this.#isFocused,
+            pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
+            domContext: this.domContext,
+        });
+        onMount(() => {
+            const input = this.opts.inputRef.current;
+            const container = this.opts.ref.current;
+            if (!input || !container)
+                return;
+            if (this.#initialLoad.value.current !== input.value) {
+                this.opts.value.current = input.value;
+            }
+            this.#prevInputMetadata.prev = [
+                input.selectionStart,
+                input.selectionEnd,
+                input.selectionDirection ?? "none",
+            ];
+            const unsub = on(this.domContext.getDocument(), "selectionchange", this.#onDocumentSelectionChange, {
+                capture: true,
+            });
+            this.#onDocumentSelectionChange();
+            if (this.domContext.getActiveElement() === input) {
+                this.#isFocused.current = true;
+            }
+            if (!this.domContext.getElementById("pin-input-style")) {
+                this.#applyStyles();
+            }
+            const updateRootHeight = () => {
+                if (container) {
+                    container.style.setProperty("--bits-pin-input-root-height", `${input.clientHeight}px`);
+                }
+            };
+            updateRootHeight();
+            const resizeObserver = new ResizeObserver(updateRootHeight);
+            resizeObserver.observe(input);
+            return () => {
+                unsub();
+                resizeObserver.disconnect();
+            };
+        });
+        watch([() => this.opts.value.current, () => this.opts.inputRef.current], () => {
+            syncTimeouts(() => {
+                const input = this.opts.inputRef.current;
+                if (!input)
+                    return;
+                // forcefully remove :autofill state
+                input.dispatchEvent(new Event("input"));
+                // update selection state
+                const start = input.selectionStart;
+                const end = input.selectionEnd;
+                const dir = input.selectionDirection ?? "none";
+                if (start !== null && end !== null) {
+                    this.#mirrorSelectionStart = start;
+                    this.#mirrorSelectionEnd = end;
+                    this.#prevInputMetadata.prev = [start, end, dir];
+                }
+            }, this.domContext);
+        });
+        $effect(() => {
+            // invoke `onComplete` when the input is completely filled.
+            const value = this.opts.value.current;
+            const prevValue = this.#previousValue.current;
+            const maxLength = this.opts.maxLength.current;
+            const onComplete = this.opts.onComplete.current;
+            if (prevValue === undefined)
+                return;
+            if (value !== prevValue && prevValue.length < maxLength && value.length === maxLength) {
+                onComplete(value);
+            }
+        });
+    }
+    onkeydown = (e) => {
+        const key = e.key;
+        if (KEYS_TO_IGNORE.includes(key))
+            return;
+        // if ctrl or cmd is pressed, they are likely to be shortcuts and should not be tested
+        // against the regex
+        if (e.ctrlKey || e.metaKey)
+            return;
+        if (key && this.#regexPattern && !this.#regexPattern.test(key)) {
+            e.preventDefault();
+        }
+    };
+    #rootStyles = $derived.by(() => ({
+        position: "relative",
+        cursor: this.opts.disabled.current ? "default" : "text",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        pointerEvents: "none",
+    }));
+    rootProps = $derived.by(() => ({
+        id: this.opts.id.current,
+        [pinInputAttrs.root]: "",
+        style: this.#rootStyles,
+        ...this.attachment,
+    }));
+    inputWrapperProps = $derived.by(() => ({
+        style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+        },
+    }));
+    #inputStyle = $derived.by(() => ({
+        position: "absolute",
+        inset: 0,
+        width: this.#pwmb.willPushPwmBadge
+            ? `calc(100% + ${this.#pwmb.PWM_BADGE_SPACE_WIDTH})`
+            : "100%",
+        clipPath: this.#pwmb.willPushPwmBadge
+            ? `inset(0 ${this.#pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)`
+            : undefined,
+        height: "100%",
+        display: "flex",
+        textAlign: this.opts.textAlign.current,
+        opacity: "1",
+        color: "transparent",
+        pointerEvents: "all",
+        background: "transparent",
+        caretColor: "transparent",
+        border: "0 solid transparent",
+        outline: "0 solid transparent",
+        boxShadow: "none",
+        lineHeight: "1",
+        letterSpacing: "-.5em",
+        fontSize: "var(--bits-pin-input-root-height)",
+        fontFamily: "monospace",
+        fontVariantNumeric: "tabular-nums",
+    }));
+    #applyStyles() {
+        const doc = this.domContext.getDocument();
+        const styleEl = doc.createElement("style");
+        styleEl.id = "pin-input-style";
+        doc.head.appendChild(styleEl);
+        if (styleEl.sheet) {
+            const autoFillStyles = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+            safeInsertRule(styleEl.sheet, "[data-pin-input-input]::selection { background: transparent !important; color: transparent !important; }");
+            safeInsertRule(styleEl.sheet, `[data-pin-input-input]:autofill { ${autoFillStyles} }`);
+            safeInsertRule(styleEl.sheet, `[data-pin-input-input]:-webkit-autofill { ${autoFillStyles} }`);
+            // iOS
+            safeInsertRule(styleEl.sheet, `@supports (-webkit-touch-callout: none) { [data-pin-input-input] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`);
+            // PWM badges
+            safeInsertRule(styleEl.sheet, `[data-pin-input-input] + * { pointer-events: all !important; }`);
+        }
+    }
+    #onDocumentSelectionChange = () => {
+        const input = this.opts.inputRef.current;
+        const container = this.opts.ref.current;
+        if (!input || !container)
+            return;
+        if (this.domContext.getActiveElement() !== input) {
+            this.#mirrorSelectionStart = null;
+            this.#mirrorSelectionEnd = null;
+            return;
+        }
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const selDir = input.selectionDirection ?? "none";
+        const maxLength = input.maxLength;
+        const val = input.value;
+        const prev = this.#prevInputMetadata.prev;
+        let start = -1;
+        let end = -1;
+        let direction;
+        if (val.length !== 0 && selStart !== null && selEnd !== null) {
+            const isSingleCaret = selStart === selEnd;
+            const isInsertMode = selStart === val.length && val.length < maxLength;
+            if (isSingleCaret && !isInsertMode) {
+                const c = selStart;
+                if (c === 0) {
+                    start = 0;
+                    end = 1;
+                    direction = "forward";
+                }
+                else if (c === maxLength) {
+                    start = c - 1;
+                    end = c;
+                    direction = "backward";
+                }
+                else if (maxLength > 1 && val.length > 1) {
+                    let offset = 0;
+                    if (prev[0] !== null && prev[1] !== null) {
+                        direction = c < prev[1] ? "backward" : "forward";
+                        const wasPreviouslyInserting = prev[0] === prev[1] && prev[0] < maxLength;
+                        if (direction === "backward" && !wasPreviouslyInserting) {
+                            offset = -1;
+                        }
+                    }
+                    start = offset + c;
+                    end = offset + c + 1;
+                }
+            }
+            if (start !== -1 && end !== -1 && start !== end) {
+                this.opts.inputRef.current?.setSelectionRange(start, end, direction);
+            }
+        }
+        // finally update the state
+        const s = start !== -1 ? start : selStart;
+        const e = end !== -1 ? end : selEnd;
+        const dir = direction ?? selDir;
+        this.#mirrorSelectionStart = s;
+        this.#mirrorSelectionEnd = e;
+        this.#prevInputMetadata.prev = [s, e, dir];
+    };
+    oninput = (e) => {
+        const newValue = e.currentTarget.value.slice(0, this.opts.maxLength.current);
+        if (newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue)) {
+            e.preventDefault();
+            return;
+        }
+        const maybeHasDeleted = typeof this.#previousValue.current === "string" &&
+            newValue.length < this.#previousValue.current.length;
+        if (maybeHasDeleted) {
+            // Since cutting/deleting text doesn't trigger
+            // selectionchange event, we'll have to dispatch it manually.
+            // NOTE: The following line also triggers when cmd+A then pasting
+            // a value with smaller length, which is not ideal for performance.
+            this.domContext.getDocument().dispatchEvent(new Event("selectionchange"));
+        }
+        this.opts.value.current = newValue;
+    };
+    onfocus = (_) => {
+        const input = this.opts.inputRef.current;
+        if (input) {
+            const start = Math.min(input.value.length, this.opts.maxLength.current - 1);
+            const end = input.value.length;
+            input.setSelectionRange(start, end);
+            this.#mirrorSelectionStart = start;
+            this.#mirrorSelectionEnd = end;
+        }
+        this.#isFocused.current = true;
+    };
+    onpaste = (e) => {
+        const input = this.opts.inputRef.current;
+        if (!input)
+            return;
+        const getNewValue = (finalContent) => {
+            const start = input.selectionStart === null ? undefined : input.selectionStart;
+            const end = input.selectionEnd === null ? undefined : input.selectionEnd;
+            const isReplacing = start !== end;
+            const initNewVal = this.opts.value.current;
+            const newValueUncapped = isReplacing
+                ? initNewVal.slice(0, start) + finalContent + initNewVal.slice(end)
+                : initNewVal.slice(0, start) + finalContent + initNewVal.slice(start);
+            return newValueUncapped.slice(0, this.opts.maxLength.current);
+        };
+        const isValueInvalid = (newValue) => {
+            return newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue);
+        };
+        if (!this.opts.pasteTransformer?.current &&
+            (!this.#initialLoad.isIOS || !e.clipboardData || !input)) {
+            const newValue = getNewValue(e.clipboardData?.getData("text/plain"));
+            if (isValueInvalid(newValue)) {
+                e.preventDefault();
+            }
+            return;
+        }
+        const _content = e.clipboardData?.getData("text/plain") ?? "";
+        const content = this.opts.pasteTransformer?.current
+            ? this.opts.pasteTransformer.current(_content)
+            : _content;
+        e.preventDefault();
+        const newValue = getNewValue(content);
+        if (isValueInvalid(newValue))
+            return;
+        input.value = newValue;
+        this.opts.value.current = newValue;
+        const selStart = Math.min(newValue.length, this.opts.maxLength.current - 1);
+        const selEnd = newValue.length;
+        input.setSelectionRange(selStart, selEnd);
+        this.#mirrorSelectionStart = selStart;
+        this.#mirrorSelectionEnd = selEnd;
+    };
+    onmouseover = (_) => {
+        this.#isHoveringInput = true;
+    };
+    onmouseleave = (_) => {
+        this.#isHoveringInput = false;
+    };
+    onblur = (_) => {
+        if (this.#prevInputMetadata.willSyntheticBlur) {
+            this.#prevInputMetadata.willSyntheticBlur = false;
+            return;
+        }
+        this.#isFocused.current = false;
+    };
+    inputProps = $derived.by(() => ({
+        id: this.opts.inputId.current,
+        style: this.#inputStyle,
+        autocomplete: this.opts.autocomplete.current || "one-time-code",
+        "data-pin-input-input": "",
+        "data-pin-input-input-mss": this.#mirrorSelectionStart,
+        "data-pin-input-input-mse": this.#mirrorSelectionEnd,
+        inputmode: this.opts.inputmode.current,
+        pattern: this.#regexPattern?.source,
+        maxlength: this.opts.maxLength.current,
+        value: this.opts.value.current,
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
+        //
+        onpaste: this.onpaste,
+        oninput: this.oninput,
+        onkeydown: this.onkeydown,
+        onmouseover: this.onmouseover,
+        onmouseleave: this.onmouseleave,
+        onfocus: this.onfocus,
+        onblur: this.onblur,
+        ...this.inputAttachment,
+    }));
+    #cells = $derived.by(() => Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
+        const isActive = this.#isFocused.current &&
+            this.#mirrorSelectionStart !== null &&
+            this.#mirrorSelectionEnd !== null &&
+            ((this.#mirrorSelectionStart === this.#mirrorSelectionEnd &&
+                idx === this.#mirrorSelectionStart) ||
+                (idx >= this.#mirrorSelectionStart && idx < this.#mirrorSelectionEnd));
+        const char = this.opts.value.current[idx] !== undefined ? this.opts.value.current[idx] : null;
+        return {
+            char,
+            isActive,
+            hasFakeCaret: isActive && char === null,
+        };
+    }));
+    snippetProps = $derived.by(() => ({
+        cells: this.#cells,
+        isFocused: this.#isFocused.current,
+        isHovering: this.#isHoveringInput,
+    }));
+}
+export class PinInputCellState {
+    static create(opts) {
+        return new PinInputCellState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [pinInputAttrs.cell]: "",
+        "data-active": this.opts.cell.current.isActive ? "" : undefined,
+        "data-inactive": !this.opts.cell.current.isActive ? "" : undefined,
+        ...this.attachment,
+    }));
+}
+// oxlint-disable-next-line no-explicit-any
+export function syncTimeouts(cb, domContext) {
+    const t1 = domContext.setTimeout(cb, 0); // For faster machines
+    const t2 = domContext.setTimeout(cb, 1_0);
+    const t3 = domContext.setTimeout(cb, 5_0);
+    return [t1, t2, t3];
+}
+function safeInsertRule(sheet, rule) {
+    try {
+        sheet.insertRule(rule);
+    }
+    catch {
+        // oxlint-disable-next-line no-console
+        console.error("pin input could not insert CSS rule:", rule);
+    }
+}

package/dist/bits/pin-input/types.d.ts

@@ -0,0 +1,88 @@
+import type { Snippet } from "svelte";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
+export type PinInputRootSnippetProps = {
+    cells: PinInputCell[];
+    isFocused: boolean;
+    isHovering: boolean;
+};
+export type PinInputRootPropsWithoutHTML = Omit<WithChild<{
+    /**
+     * The value of the input.
+     *
+     * @bindable
+     */
+    value?: string;
+    /**
+     * A callback function that is called when the value of the input changes.
+     */
+    onValueChange?: OnChangeFn<string>;
+    /**
+     * A callback function that is called when the user pastes text into the input.
+     * It receives the pasted text as an argument, and should return the sanitized text.
+     *
+     * Use this function to clean up the pasted text, like removing hyphens or other
+     * characters that should not make it into the input.
+     */
+    pasteTransformer?: (text: string) => string;
+    /**
+     * The max length of the input.
+     */
+    maxlength: number;
+    /**
+     * Customize the alignment of the text within in the input.
+     *
+     * @default "left"
+     */
+    textalign?: "left" | "center" | "right";
+    /**
+     * A callback function that is called when the input is completely filled.
+     *
+     */
+    onComplete?: (...args: any[]) => void;
+    /**
+     * How to handle the input when a password manager is detected.
+     */
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optionally provide an ID to apply to the hidden input element.
+     */
+    inputId?: string;
+    /**
+     * The underlying hidden `<input>` element. Bind to call `focus()`, read selection, etc.
+     *
+     * @bindable
+     */
+    inputRef?: HTMLInputElement | null;
+    /**
+     * The children snippet used to render the individual cells.
+     */
+    children: Snippet<[PinInputRootSnippetProps]>;
+}, PinInputRootSnippetProps>, "child">;
+export type PinInputRootProps = PinInputRootPropsWithoutHTML & Without<BitsPrimitiveInputAttributes, PinInputRootPropsWithoutHTML>;
+export type PinInputCellPropsWithoutHTML = WithChild<{
+    /**
+     * This specific cell, which is provided by the `cells` snippet prop from
+     * the `PinInput.Root` component.
+     */
+    cell: PinInputCell;
+}>;
+export type PinInputCellProps = PinInputCellPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PinInputCellPropsWithoutHTML>;
+export type PinInputCell = {
+    /**
+     * The character displayed in the cell.
+     */
+    char: string | null | undefined;
+    /**
+     * Whether the cell is active.
+     */
+    isActive: boolean;
+    /**
+     * Whether the cell has a fake caret.
+     */
+    hasFakeCaret: boolean;
+};

package/dist/bits/pin-input/types.js

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

package/dist/bits/pin-input/usePasswordManager.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type DOMContext, type ReadableBox, type WritableBox } from "svelte-toolbelt";
+import type { PinInputRootPropsWithoutHTML } from "./types.js";
+type UsePasswordManagerBadgeProps = {
+    containerRef: WritableBox<HTMLElement | null>;
+    inputRef: WritableBox<HTMLInputElement | null>;
+    pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML["pushPasswordManagerStrategy"]>;
+    isFocused: ReadableBox<boolean>;
+    domContext: DOMContext;
+};
+export declare function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }: UsePasswordManagerBadgeProps): {
+    readonly hasPwmBadge: boolean;
+    readonly willPushPwmBadge: boolean;
+    PWM_BADGE_SPACE_WIDTH: "40px";
+};
+export {};

package/dist/bits/pin-input/usePasswordManager.svelte.js

@@ -0,0 +1,90 @@
+import { getWindow } from "svelte-toolbelt";
+const PWM_BADGE_MARGIN_RIGHT = 18;
+const PWM_BADGE_SPACE_WIDTH_PX = 40;
+const PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px`;
+const PASSWORD_MANAGER_SELECTORS = [
+    "[data-lastpass-icon-root]", // LastPass,
+    "com-1password-button", // 1Password,
+    "[data-dashlanecreated]", // Dashlane,
+    '[style$="2147483647 !important;"]', // Bitwarden
+].join(",");
+export function usePasswordManagerBadge({ containerRef, inputRef, pushPasswordManagerStrategy, isFocused, domContext, }) {
+    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.current || 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/dist/bits/popover/components/popover-arrow.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { PopoverArrowProps } from "../types.js";
+	import FloatingLayerArrow from "../../utilities/floating-layer/components/floating-layer-arrow.svelte";
+
+	let { ref = $bindable(null), ...restProps }: PopoverArrowProps = $props();
+</script>
+
+<FloatingLayerArrow bind:ref {...restProps} data-popover-arrow="" />

package/dist/bits/popover/components/popover-arrow.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PopoverArrow: import("svelte").Component<import("../../utilities/arrow/types.js").ArrowProps, {}, "ref">;
+type PopoverArrow = ReturnType<typeof PopoverArrow>;
+export default PopoverArrow;

package/dist/bits/popover/components/popover-close.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	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,
+			(v) => (ref = v)
+		),
+	});
+	const mergedProps = $derived(mergeProps(restProps, closeState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/popover/components/popover-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverCloseProps } from "../types.js";
+declare const PopoverClose: import("svelte").Component<PopoverCloseProps, {}, "ref">;
+type PopoverClose = ReturnType<typeof PopoverClose>;
+export default PopoverClose;