@primitiv-ui/web 0.1.56 → 0.1.57

package/dist/dropdown/elements.js

@@ -0,0 +1,501 @@
+import { defineElements, ElementBase, reportOnce, write } from "../internal/element.js";
+import { PrimitivRootElement } from "../internal/RootElement.js";
+import { DropdownController } from "./DropdownController.js";
+import { DropdownSubController } from "./DropdownSubController.js";
+// Stryker disable StringLiteral: static — evaluated once at import, so runtime mutant switching never reaches them; the names are pinned by the defineDropdown registry test instead.
+const ROOT = "primitiv-dropdown";
+const TRIGGER = "primitiv-dropdown-trigger";
+const CONTENT = "primitiv-dropdown-content";
+const ITEM = "primitiv-dropdown-item";
+const CHECKBOX_ITEM = "primitiv-dropdown-checkbox-item";
+const RADIO_GROUP = "primitiv-dropdown-radio-group";
+const RADIO_ITEM = "primitiv-dropdown-radio-item";
+const INDICATOR = "primitiv-dropdown-item-indicator";
+const GROUP = "primitiv-dropdown-group";
+const LABEL = "primitiv-dropdown-label";
+const SEPARATOR = "primitiv-dropdown-separator";
+const SUB = "primitiv-dropdown-sub";
+const SUB_TRIGGER = "primitiv-dropdown-sub-trigger";
+const SUB_CONTENT = "primitiv-dropdown-sub-content";
+/** Every part that is a chosen item: the plain, checkbox and radio items. */
+const ITEMS = `${ITEM},${CHECKBOX_ITEM},${RADIO_ITEM}`;
+// Stryker restore StringLiteral
+/** The one element child an interactive part decorates, or `null`, reported once, without exactly one. */
+function decoratable(part, what) {
+    if (part.childElementCount === 1)
+        return part.firstElementChild;
+    reportOnce(part, `<${part.localName}> needs exactly one element child (${what}) to decorate.`);
+    return null;
+}
+/** Fire a bubbling, cancelable event on `target`; whether no listener vetoed it. */
+function announceOn(target, type, detail) {
+    return target.dispatchEvent(new CustomEvent(type, { bubbles: true, cancelable: true, detail }));
+}
+/** A checkbox item's state, from its `checked` attribute: absent, present, or `"indeterminate"`. */
+function checkedState(part) {
+    const value = part.getAttribute("checked");
+    return value === "indeterminate" ? value : value !== null;
+}
+/** A radio item's state: whether its value is its group's. */
+function radioChecked(part) {
+    return part.closest(RADIO_GROUP)?.getAttribute("value") === part.getAttribute("value");
+}
+/**
+ * `<primitiv-dropdown>` — the state owner of a dropdown menu (WAI-ARIA APG
+ * Menu Button): a trigger that opens a menu of items. The menu is a
+ * `popover="auto"` in the top layer, shown with the trigger as its source,
+ * which makes the trigger its implicit anchor for CSS anchor positioning.
+ * Choosing an item — any item, a submenu's too — closes the menu and hands
+ * focus back to the trigger.
+ *
+ * The root finds its own parts and reconciles their ARIA from its reflected
+ * state whenever a part arrives, leaves, or changes an attribute the root
+ * reads (the lifecycle is `PrimitivRootElement`'s).
+ *
+ * @customElement primitiv-dropdown
+ * @summary The state owner of a dropdown menu.
+ * @attr {boolean} open - Whether the menu is open. Reflected: it changes as the user opens and dismisses it. Set it (or the `open` property) to open or close it from script.
+ * @fires {CustomEvent<{ open: boolean }>} primitiv-dropdown-change - Bubbles, cancelable, fired before a user-driven change is applied — the trigger, Escape, a press outside or a chosen item — with the open state afterwards. Call `preventDefault()` to veto it.
+ * @fires {CustomEvent<null>} primitiv-dropdown-select - Bubbles, cancelable, fired on the item part when an item is chosen, after a checkbox or radio item has changed. Call `preventDefault()` to keep the menu open.
+ * @fires {CustomEvent<{ checked: boolean }>} primitiv-dropdown-checked-change - Bubbles, cancelable, fired on a checkbox item before it changes, with its state afterwards. Call `preventDefault()` to veto it.
+ * @fires {CustomEvent<{ value: string }>} primitiv-dropdown-value-change - Bubbles, cancelable, fired on a radio group before its value changes, with the value afterwards. Call `preventDefault()` to veto it.
+ */
+export class PrimitivDropdownElement extends PrimitivRootElement {
+    /** The menu the root currently decorates, and the controller over it. */
+    #content = null;
+    #menu = null;
+    /** The decorated trigger, as of the last reconcile. */
+    #trigger = null;
+    /** The root's own listeners, while connected. */
+    #listening = null;
+    controller = {
+        connect: () => this.#connect(),
+        disconnect: () => this.#disconnect(),
+    };
+    reconcileOn = ["open", "disabled", "checked", "value"];
+    /** Whether the menu is open, reflected as the boolean `open` attribute. */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(next) {
+        this.toggleAttribute("open", next);
+    }
+    /** The controller's view of this element: state lives in the reflected attribute. */
+    #host() {
+        return {
+            state: () => ({ open: this.open }),
+            change: (open) => this.#change(open),
+            trigger: () => this.#trigger,
+            source: () => this.#trigger,
+        };
+    }
+    /** A change the user asked for: announced first, so a listener can veto it. */
+    #change(open) {
+        if (open === this.open)
+            return;
+        if (this.announce("primitiv-dropdown-change", { open }))
+            this.open = open;
+        // A veto can leave the menu out of step — the browser is light-dismissing
+        // it — so put it back where the state says, once that dismissal is done.
+        else
+            queueMicrotask(() => this.#menu?.sync());
+    }
+    #connect() {
+        this.#listening = new AbortController();
+        const options = { signal: this.#listening.signal };
+        this.addEventListener("click", (event) => this.#click(event), options);
+        this.addEventListener("pointerover", (event) => this.#highlight(event, true), options);
+        this.addEventListener("pointerout", (event) => this.#highlight(event, false), options);
+        this.#menu?.connect();
+    }
+    #disconnect() {
+        // A root disconnects only after it connected, so it is listening.
+        this.#listening.abort();
+        this.#listening = null;
+        this.#menu?.disconnect();
+    }
+    /** The item part (of this root) an event landed in, or `null`. */
+    #itemOf(target) {
+        const part = target?.closest(ITEMS) ?? null;
+        return part?.closest(ROOT) === this ? part : null;
+    }
+    /** Mark the item the pointer is over, as React's `data-highlighted`. */
+    #highlight(event, over) {
+        const part = this.#itemOf(event.target);
+        // The relatedTarget test keeps the highlight steady as the pointer crosses
+        // the row's own children. user-event sets no relatedTarget, so only a real
+        // browser can tell: the interop lab's dropdown spec counts the flips.
+        // Stryker disable next-line ConditionalExpression,LogicalOperator: see above — unobservable in jsdom, proven in Chromium.
+        if (!part || part === this.#itemOf(event.relatedTarget))
+            return;
+        const child = part.firstElementChild;
+        write(child, "data-highlighted", over ? "" : null);
+    }
+    #click(event) {
+        const target = event.target;
+        if (this.#trigger?.contains(target)) {
+            this.#change(!this.open);
+            return;
+        }
+        const part = this.#itemOf(target);
+        if (!part || part.hasAttribute("disabled"))
+            return;
+        if (part.localName === CHECKBOX_ITEM) {
+            const checked = checkedState(part) !== true;
+            // `write`, not `toggleAttribute`: a mixed item's "indeterminate" must become plain checked.
+            if (announceOn(part, "primitiv-dropdown-checked-change", { checked }))
+                write(part, "checked", checked ? "" : null);
+        }
+        else if (part.localName === RADIO_ITEM && !radioChecked(part)) {
+            const group = part.closest(RADIO_GROUP);
+            const value = part.getAttribute("value");
+            if (announceOn(group, "primitiv-dropdown-value-change", { value }))
+                group.setAttribute("value", value);
+        }
+        if (!announceOn(part, "primitiv-dropdown-select", null))
+            return;
+        this.#change(false);
+        this.#trigger?.focus();
+    }
+    /**
+     * Decorate `content` from now on: the controller follows it. Only a
+     * reconcile calls this, and a root reconciles only while connected, so the
+     * new controller listens at once.
+     */
+    #use(content) {
+        // Stryker disable next-line ConditionalExpression: equivalent — rebuilding the controller over the same menu swaps one listener set for an identical one.
+        if (content === this.#content)
+            return;
+        this.#menu?.disconnect();
+        this.#content = content;
+        this.#menu = content ? new DropdownController(content, this.#host()) : null;
+        this.#menu?.connect();
+    }
+    reconcile() {
+        const open = this.open;
+        const rootId = this.rootId();
+        const [content = null] = this.parts(CONTENT);
+        const [triggerPart] = this.parts(TRIGGER);
+        this.#trigger = triggerPart ? decoratable(triggerPart, "a <button>") : null;
+        if (content) {
+            if (!content.id)
+                content.id = `${rootId}-content`;
+            write(content, "role", "menu");
+            if (!content.hasAttribute("popover"))
+                content.setAttribute("popover", "auto");
+        }
+        if (this.#trigger) {
+            write(this.#trigger, "aria-haspopup", "menu");
+            write(this.#trigger, "aria-expanded", String(open));
+            write(this.#trigger, "aria-controls", content ? content.id : null);
+        }
+        for (const part of this.parts(ITEMS)) {
+            const child = decoratable(part, "an <li>");
+            if (!child)
+                continue;
+            const checkbox = part.localName === CHECKBOX_ITEM;
+            const radio = part.localName === RADIO_ITEM;
+            const checked = checkbox ? checkedState(part) : radio && radioChecked(part);
+            write(child, "role", checkbox ? "menuitemcheckbox" : radio ? "menuitemradio" : "menuitem");
+            write(child, "tabindex", "-1");
+            write(child, "aria-disabled", part.hasAttribute("disabled") ? "true" : null);
+            write(child, "aria-checked", checkbox || radio ? (checked === "indeterminate" ? "mixed" : String(checked)) : null);
+        }
+        for (const indicator of this.parts(INDICATOR)) {
+            const item = indicator.closest(`${CHECKBOX_ITEM},${RADIO_ITEM}`);
+            const checked = item?.localName === CHECKBOX_ITEM ? checkedState(item) : item ? radioChecked(item) : false;
+            write(indicator, "data-state", checked === "indeterminate" ? checked : checked ? "checked" : "unchecked");
+            write(indicator, "hidden", checked || indicator.hasAttribute("force-mount") ? null : "");
+        }
+        let labels = 0;
+        for (const label of this.parts(LABEL)) {
+            if (!label.id)
+                label.id = `${rootId}-label-${++labels}`;
+        }
+        for (const group of this.parts(GROUP)) {
+            const label = [...group.querySelectorAll(LABEL)].find((candidate) => candidate.closest(GROUP) === group);
+            write(group, "role", "group");
+            write(group, "aria-labelledby", label ? label.id : null);
+        }
+        for (const group of this.parts(RADIO_GROUP))
+            write(group, "role", "group");
+        for (const separator of this.parts(SEPARATOR))
+            write(separator, "role", "separator");
+        this.#use(content);
+        this.#menu?.sync();
+    }
+}
+/**
+ * `<primitiv-dropdown-sub>` — the state owner of a submenu, inside a dropdown's
+ * menu: a sub-trigger row that opens a nested menu on a click, a hover, or the
+ * arrow pointing away from its parent (ArrowRight, or ArrowLeft right to
+ * left), and closes it on the arrow back, or when the pointer moves to another
+ * row of the parent menu.
+ *
+ * @customElement primitiv-dropdown-sub
+ * @summary The state owner of a submenu.
+ * @attr {boolean} open - Whether the submenu is open. Reflected.
+ * @fires {CustomEvent<{ open: boolean }>} primitiv-dropdown-sub-change - Bubbles, cancelable, fired before a user-driven change is applied, with the open state afterwards. Call `preventDefault()` to veto it.
+ */
+export class PrimitivDropdownSubElement extends PrimitivRootElement {
+    #content = null;
+    #menu = null;
+    #trigger = null;
+    /** The sub-trigger part (whose `disabled` the sub reads), as of the last reconcile. */
+    #triggerPart = null;
+    /** Whether the pointer is over the sub-trigger. */
+    #hovered = false;
+    #listening = null;
+    controller = {
+        connect: () => this.#connect(),
+        disconnect: () => this.#disconnect(),
+    };
+    reconcileOn = ["open", "disabled"];
+    /** Whether the submenu is open, reflected as the boolean `open` attribute. */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(next) {
+        this.toggleAttribute("open", next);
+    }
+    #host() {
+        return {
+            state: () => ({ open: this.open }),
+            change: (open) => this.#change(open),
+            trigger: () => this.#trigger,
+            source: () => this.#trigger,
+            closeKey: () => (this.direction() === "rtl" ? "ArrowRight" : "ArrowLeft"),
+        };
+    }
+    #change(open) {
+        if (open === this.open)
+            return;
+        if (this.announce("primitiv-dropdown-sub-change", { open }))
+            this.open = open;
+        else
+            queueMicrotask(() => this.#menu?.sync());
+    }
+    /** Whether the sub-trigger is disabled. Only asked once a decorated sub-trigger exists. */
+    #disabled() {
+        return this.#triggerPart.hasAttribute("disabled");
+    }
+    #connect() {
+        this.#listening = new AbortController();
+        const options = { signal: this.#listening.signal };
+        this.addEventListener("click", (event) => this.#onTrigger(event) && this.#openIfEnabled(), options);
+        this.addEventListener("keydown", (event) => this.#keydown(event), options);
+        this.addEventListener("pointerover", (event) => this.#pointer(event, true), options);
+        this.addEventListener("pointerout", (event) => this.#pointer(event, false), options);
+        document.addEventListener("pointerover", (event) => this.#sibling(event), options);
+        this.#menu?.connect();
+    }
+    #disconnect() {
+        this.#listening.abort();
+        this.#listening = null;
+        this.#menu?.disconnect();
+    }
+    /** Whether an event landed on the decorated sub-trigger. */
+    #onTrigger(event) {
+        return this.#trigger?.contains(event.target) ?? false;
+    }
+    #openIfEnabled() {
+        if (!this.#disabled())
+            this.#change(true);
+    }
+    #keydown(event) {
+        if (!this.#onTrigger(event) || this.#disabled())
+            return;
+        if (event.key !== (this.direction() === "rtl" ? "ArrowLeft" : "ArrowRight"))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.#change(true);
+    }
+    #pointer(event, over) {
+        // Past the first test there is a decorated trigger. The relatedTarget test
+        // keeps the hover steady across the row's own children, which only a real
+        // browser can show (see #highlight).
+        // Stryker disable next-line ConditionalExpression,LogicalOperator: unobservable in jsdom, proven in Chromium by the interop lab.
+        if (!this.#onTrigger(event) || this.#trigger.contains(event.relatedTarget))
+            return;
+        this.#hovered = over;
+        this.reconcile();
+        if (over)
+            this.#openIfEnabled();
+    }
+    /** The pointer reached another row of the parent menu: close, as moving the keyboard there would. */
+    #sibling(event) {
+        if (!this.open || this.contains(event.target))
+            return;
+        const row = event.target.closest('[role^="menuitem"]');
+        // A connected sub always has a parent; only a row of its parent's menu closes it.
+        if (row && row.closest('[role="menu"]') === this.parentElement.closest('[role="menu"]'))
+            this.#change(false);
+    }
+    #use(content) {
+        // Stryker disable next-line ConditionalExpression: equivalent — rebuilding the controller over the same menu swaps one listener set for an identical one.
+        if (content === this.#content)
+            return;
+        this.#menu?.disconnect();
+        this.#content = content;
+        this.#menu = content ? new DropdownSubController(content, this.#host()) : null;
+        this.#menu?.connect();
+    }
+    reconcile() {
+        const open = this.open;
+        const [content = null] = this.parts(SUB_CONTENT);
+        const [triggerPart = null] = this.parts(SUB_TRIGGER);
+        this.#triggerPart = triggerPart;
+        this.#trigger = triggerPart ? decoratable(triggerPart, "an <li>") : null;
+        if (content) {
+            if (!content.id)
+                content.id = `${this.rootId()}-content`;
+            write(content, "role", "menu");
+            if (!content.hasAttribute("popover"))
+                content.setAttribute("popover", "auto");
+        }
+        if (this.#trigger) {
+            write(this.#trigger, "role", "menuitem");
+            write(this.#trigger, "tabindex", "-1");
+            write(this.#trigger, "aria-haspopup", "menu");
+            write(this.#trigger, "aria-expanded", String(open));
+            write(this.#trigger, "aria-controls", content ? content.id : null);
+            write(this.#trigger, "aria-disabled", this.#disabled() ? "true" : null);
+            write(this.#trigger, "data-highlighted", this.#hovered || open ? "" : null);
+        }
+        this.#use(content);
+        this.#menu?.sync();
+    }
+}
+/**
+ * `<primitiv-dropdown-trigger>` — an interactive part. It decorates exactly
+ * one child the consumer writes, a `<button>`, which toggles the menu and is
+ * its menu button (`aria-haspopup`, `aria-expanded`, `aria-controls`).
+ *
+ * @customElement primitiv-dropdown-trigger
+ */
+export class PrimitivDropdownTriggerElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-content>` — the menu itself. Structural: the root gives
+ * it an id, `role="menu"` and `popover="auto"` (write it in your markup too, so
+ * it is hidden before the script loads).
+ *
+ * @customElement primitiv-dropdown-content
+ */
+export class PrimitivDropdownContentElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-item>` — an interactive part: one item. It decorates
+ * exactly one child the consumer writes, an `<li>` (or a link), which gets
+ * `role="menuitem"`, `tabindex="-1"` and `data-highlighted` while the pointer
+ * is over it.
+ *
+ * @customElement primitiv-dropdown-item
+ * @attr {boolean} disabled - Skipped by the keyboard, and does nothing when clicked (`aria-disabled` on the child).
+ */
+export class PrimitivDropdownItemElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-checkbox-item>` — an item that toggles. Its child gets
+ * `role="menuitemcheckbox"` and `aria-checked`.
+ *
+ * @customElement primitiv-dropdown-checkbox-item
+ * @attr {boolean} checked - Whether it is checked; `checked="indeterminate"` for mixed. Reflected.
+ * @attr {boolean} disabled - As on an item.
+ */
+export class PrimitivDropdownCheckboxItemElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-radio-group>` — a group of radio items, one of which is
+ * checked. Structural: `role="group"`.
+ *
+ * @customElement primitiv-dropdown-radio-group
+ * @attr {string} value - The checked item's value. Reflected.
+ */
+export class PrimitivDropdownRadioGroupElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-radio-item>` — an item checked when its value is its
+ * group's. Its child gets `role="menuitemradio"` and `aria-checked`.
+ *
+ * @customElement primitiv-dropdown-radio-item
+ * @attr {string} value - The value it sets on its group.
+ * @attr {boolean} disabled - As on an item.
+ */
+export class PrimitivDropdownRadioItemElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-item-indicator>` — the check or dot inside a checkbox or
+ * radio item, `hidden` while unchecked. Structural: it gets `data-state`.
+ *
+ * @customElement primitiv-dropdown-item-indicator
+ * @attr {boolean} force-mount - Keep it shown while unchecked, to animate it.
+ */
+export class PrimitivDropdownItemIndicatorElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-group>` — a labelled group of items. Structural:
+ * `role="group"`, named by the label inside it.
+ *
+ * @customElement primitiv-dropdown-group
+ */
+export class PrimitivDropdownGroupElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-label>` — a group's label, not an item. Structural: the
+ * root gives it an id.
+ *
+ * @customElement primitiv-dropdown-label
+ */
+export class PrimitivDropdownLabelElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-separator>` — a rule between items. Structural:
+ * `role="separator"`.
+ *
+ * @customElement primitiv-dropdown-separator
+ */
+export class PrimitivDropdownSeparatorElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-sub-trigger>` — the row that opens a submenu. It
+ * decorates exactly one child, an `<li>`, which gets `role="menuitem"` and the
+ * submenu's `aria-haspopup`, `aria-expanded` and `aria-controls`.
+ *
+ * @customElement primitiv-dropdown-sub-trigger
+ * @attr {boolean} disabled - It does not open the submenu.
+ */
+export class PrimitivDropdownSubTriggerElement extends ElementBase {
+}
+/**
+ * `<primitiv-dropdown-sub-content>` — the submenu itself, inside the parent
+ * menu. Structural, as the content: an id, `role="menu"`, `popover="auto"`.
+ *
+ * @customElement primitiv-dropdown-sub-content
+ */
+export class PrimitivDropdownSubContentElement extends ElementBase {
+}
+/**
+ * Define the fourteen Dropdown elements on `registry` (the global
+ * `customElements` by default). Safe to call more than once, and a no-op where
+ * there is no registry (a server render).
+ */
+export function defineDropdown(registry = globalThis.customElements) {
+    defineElements(registry, [
+        [ROOT, PrimitivDropdownElement],
+        [TRIGGER, PrimitivDropdownTriggerElement],
+        [CONTENT, PrimitivDropdownContentElement],
+        [ITEM, PrimitivDropdownItemElement],
+        [CHECKBOX_ITEM, PrimitivDropdownCheckboxItemElement],
+        [RADIO_GROUP, PrimitivDropdownRadioGroupElement],
+        [RADIO_ITEM, PrimitivDropdownRadioItemElement],
+        [INDICATOR, PrimitivDropdownItemIndicatorElement],
+        [GROUP, PrimitivDropdownGroupElement],
+        [LABEL, PrimitivDropdownLabelElement],
+        [SEPARATOR, PrimitivDropdownSeparatorElement],
+        [SUB, PrimitivDropdownSubElement],
+        [SUB_TRIGGER, PrimitivDropdownSubTriggerElement],
+        [SUB_CONTENT, PrimitivDropdownSubContentElement],
+    ]);
+}

package/dist/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { DropdownController, type DropdownControllerHost } from "./DropdownController.js";
+export { DropdownSubController, type DropdownSubControllerHost } from "./DropdownSubController.js";
+export { defineDropdown, PrimitivDropdownCheckboxItemElement, PrimitivDropdownContentElement, PrimitivDropdownElement, PrimitivDropdownGroupElement, PrimitivDropdownItemElement, PrimitivDropdownItemIndicatorElement, PrimitivDropdownLabelElement, PrimitivDropdownRadioGroupElement, PrimitivDropdownRadioItemElement, PrimitivDropdownSeparatorElement, PrimitivDropdownSubContentElement, PrimitivDropdownSubElement, PrimitivDropdownSubTriggerElement, PrimitivDropdownTriggerElement, } from "./elements.js";

package/dist/dropdown/index.js

@@ -0,0 +1,3 @@
+export { DropdownController } from "./DropdownController.js";
+export { DropdownSubController } from "./DropdownSubController.js";
+export { defineDropdown, PrimitivDropdownCheckboxItemElement, PrimitivDropdownContentElement, PrimitivDropdownElement, PrimitivDropdownGroupElement, PrimitivDropdownItemElement, PrimitivDropdownItemIndicatorElement, PrimitivDropdownLabelElement, PrimitivDropdownRadioGroupElement, PrimitivDropdownRadioItemElement, PrimitivDropdownSeparatorElement, PrimitivDropdownSubContentElement, PrimitivDropdownSubElement, PrimitivDropdownSubTriggerElement, PrimitivDropdownTriggerElement, } from "./elements.js";

package/dist/frameworks/events.d.ts

@@ -27,3 +27,21 @@ export type PrimitivPopoverChangeEvent = CustomEvent<{
 export type PrimitivTooltipChangeEvent = CustomEvent<{
     open: boolean;
 }>;
+/** The `primitiv-dropdown-change` event: bubbles, cancelable, fired before the change applies, with the open state afterwards. */
+export type PrimitivDropdownChangeEvent = CustomEvent<{
+    open: boolean;
+}>;
+/** The `primitiv-dropdown-sub-change` event: bubbles, cancelable, fired before a submenu's change applies, with its open state afterwards. */
+export type PrimitivDropdownSubChangeEvent = CustomEvent<{
+    open: boolean;
+}>;
+/** The `primitiv-dropdown-select` event: bubbles, cancelable, fired on an item as it is chosen; cancel it to keep the menu open. */
+export type PrimitivDropdownSelectEvent = CustomEvent<null>;
+/** The `primitiv-dropdown-checked-change` event: bubbles, cancelable, fired on a checkbox item before it changes, with its state afterwards. */
+export type PrimitivDropdownCheckedChangeEvent = CustomEvent<{
+    checked: boolean;
+}>;
+/** The `primitiv-dropdown-value-change` event: bubbles, cancelable, fired on a radio group before its value changes, with the value afterwards. */
+export type PrimitivDropdownValueChangeEvent = CustomEvent<{
+    value: string;
+}>;

package/dist/frameworks/react.d.ts

@@ -20,16 +20,17 @@
 import type { DetailedHTMLProps, HTMLAttributes } from "react";
 import type { PrimitivAccordionContentElement, PrimitivAccordionElement, PrimitivAccordionItemElement, PrimitivAccordionTriggerElement, PrimitivAccordionTriggerIconElement } from "../accordion/elements.js";
 import type { PrimitivCollapsibleContentElement, PrimitivCollapsibleElement, PrimitivCollapsibleTriggerElement, PrimitivCollapsibleTriggerIconElement } from "../collapsible/elements.js";
+import type { PrimitivDropdownCheckboxItemElement, PrimitivDropdownContentElement, PrimitivDropdownElement, PrimitivDropdownGroupElement, PrimitivDropdownItemElement, PrimitivDropdownItemIndicatorElement, PrimitivDropdownLabelElement, PrimitivDropdownRadioGroupElement, PrimitivDropdownRadioItemElement, PrimitivDropdownSeparatorElement, PrimitivDropdownSubContentElement, PrimitivDropdownSubElement, PrimitivDropdownSubTriggerElement, PrimitivDropdownTriggerElement } from "../dropdown/elements.js";
 import type { PrimitivModalCloseElement, PrimitivModalContentElement, PrimitivModalDescriptionElement, PrimitivModalElement, PrimitivModalTitleElement, PrimitivModalTriggerElement } from "../modal/elements.js";
 import type { PrimitivPopoverAnchorElement, PrimitivPopoverCloseElement, PrimitivPopoverContentElement, PrimitivPopoverDescriptionElement, PrimitivPopoverElement, PrimitivPopoverTitleElement, PrimitivPopoverTriggerElement } from "../popover/elements.js";
 import type { PrimitivTabsContentElement, PrimitivTabsElement, PrimitivTabsListElement, PrimitivTabsTriggerElement } from "../tabs/elements.js";
 import type { PrimitivTooltipArrowElement, PrimitivTooltipContentElement, PrimitivTooltipElement, PrimitivTooltipProviderElement, PrimitivTooltipTriggerElement } from "../tooltip/elements.js";
-import type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } from "./events.js";
+import type { PrimitivAccordionChangeEvent, PrimitivDropdownChangeEvent, PrimitivDropdownCheckedChangeEvent, PrimitivDropdownSelectEvent, PrimitivDropdownSubChangeEvent, PrimitivDropdownValueChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent } from "./events.js";
 /** React's own props for an element, plus `class`, which React 19 passes to custom elements. */
 type ElementProps<E extends HTMLElement> = DetailedHTMLProps<HTMLAttributes<E>, E> & {
     class?: string;
 };
-export type { PrimitivAccordionChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent, };
+export type { PrimitivAccordionChangeEvent, PrimitivDropdownChangeEvent, PrimitivDropdownCheckedChangeEvent, PrimitivDropdownSelectEvent, PrimitivDropdownSubChangeEvent, PrimitivDropdownValueChangeEvent, PrimitivCollapsibleChangeEvent, PrimitivModalChangeEvent, PrimitivPopoverChangeEvent, PrimitivTabsChangeEvent, PrimitivTooltipChangeEvent, };
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
@@ -62,6 +63,49 @@ declare module "react" {
                 "onprimitiv-collapsible-show"?: (event: CustomEvent) => void;
             };
             "primitiv-collapsible-trigger-icon": ElementProps<PrimitivCollapsibleTriggerIconElement>;
+            "primitiv-dropdown": ElementProps<PrimitivDropdownElement> & {
+                open?: boolean;
+                "onprimitiv-dropdown-change"?: (event: PrimitivDropdownChangeEvent) => void;
+            };
+            "primitiv-dropdown-trigger": ElementProps<PrimitivDropdownTriggerElement>;
+            "primitiv-dropdown-content": ElementProps<PrimitivDropdownContentElement> & {
+                popover?: "auto" | "manual" | "";
+            };
+            "primitiv-dropdown-item": ElementProps<PrimitivDropdownItemElement> & {
+                disabled?: boolean;
+                "onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
+            };
+            "primitiv-dropdown-checkbox-item": ElementProps<PrimitivDropdownCheckboxItemElement> & {
+                checked?: boolean | "indeterminate";
+                disabled?: boolean;
+                "onprimitiv-dropdown-checked-change"?: (event: PrimitivDropdownCheckedChangeEvent) => void;
+                "onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
+            };
+            "primitiv-dropdown-radio-group": ElementProps<PrimitivDropdownRadioGroupElement> & {
+                value?: string;
+                "onprimitiv-dropdown-value-change"?: (event: PrimitivDropdownValueChangeEvent) => void;
+            };
+            "primitiv-dropdown-radio-item": ElementProps<PrimitivDropdownRadioItemElement> & {
+                value: string;
+                disabled?: boolean;
+                "onprimitiv-dropdown-select"?: (event: PrimitivDropdownSelectEvent) => void;
+            };
+            "primitiv-dropdown-item-indicator": ElementProps<PrimitivDropdownItemIndicatorElement> & {
+                "force-mount"?: boolean;
+            };
+            "primitiv-dropdown-group": ElementProps<PrimitivDropdownGroupElement>;
+            "primitiv-dropdown-label": ElementProps<PrimitivDropdownLabelElement>;
+            "primitiv-dropdown-separator": ElementProps<PrimitivDropdownSeparatorElement>;
+            "primitiv-dropdown-sub": ElementProps<PrimitivDropdownSubElement> & {
+                open?: boolean;
+                "onprimitiv-dropdown-sub-change"?: (event: PrimitivDropdownSubChangeEvent) => void;
+            };
+            "primitiv-dropdown-sub-trigger": ElementProps<PrimitivDropdownSubTriggerElement> & {
+                disabled?: boolean;
+            };
+            "primitiv-dropdown-sub-content": ElementProps<PrimitivDropdownSubContentElement> & {
+                popover?: "auto" | "manual" | "";
+            };
             "primitiv-modal": ElementProps<PrimitivModalElement> & {
                 open?: boolean;
                 "onprimitiv-modal-change"?: (event: PrimitivModalChangeEvent) => void;