@stratakit/structures 0.4.5 → 0.5.1

package/dist/Chip.js

@@ -1,92 +1,120 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Role } from "@ariakit/react/role";
 import { IconButton } from "@stratakit/bricks";
-import {
-  forwardRef,
-  useSafeContext
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, useSafeContext } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
 import { Dismiss } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 function createChipStore(initialState) {
-  return createStore(
-    combine(initialState, (set, _, store) => ({
-      setLabelId: (labelId) => {
-        set({ labelId: labelId || store.getInitialState().labelId });
-      }
-    }))
-  );
+  return createStore(combine(initialState, (set, _, store) => ({
+    setLabelId: (labelId) => {
+      set({
+        labelId: labelId || store.getInitialState().labelId
+      });
+    }
+  })));
 }
 const ChipContext = React.createContext(void 0);
 function ChipProvider(props) {
+  const $ = _c(5);
   const defaultLabelId = React.useId();
-  const [store] = React.useState(
-    () => createChipStore({ labelId: defaultLabelId })
-  );
-  return /* @__PURE__ */ jsx(ChipContext.Provider, { value: store, children: props.children });
+  let t0;
+  if ($[0] !== defaultLabelId) {
+    t0 = () => createChipStore({
+      labelId: defaultLabelId
+    });
+    $[0] = defaultLabelId;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const [store] = React.useState(t0);
+  let t1;
+  if ($[2] !== props.children || $[3] !== store) {
+    t1 = jsx(ChipContext.Provider, {
+      value: store,
+      children: props.children
+    });
+    $[2] = props.children;
+    $[3] = store;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
 }
 function useChipState(selectorFn) {
   const store = useSafeContext(ChipContext);
   return useStore(store, selectorFn);
 }
 const ChipRoot = forwardRef((props, forwardedRef) => {
-  const { variant = "solid", ...rest } = props;
-  return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
-    Role.div,
-    {
+  useInit();
+  const {
+    variant = "solid",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(ChipProvider, {
+    children: /* @__PURE__ */ jsx(Role.div, {
       "data-_sk-variant": variant,
       ...rest,
       className: cx("\u{1F95D}Chip", props.className),
       ref: forwardedRef
-    }
-  ) });
+    })
+  });
 });
 const ChipLabel = forwardRef((props, forwardedRef) => {
   const labelId = useChipState((state) => state.labelId);
-  const setLabelId = useChipState((state) => state.setLabelId);
+  const setLabelId = useChipState((state_0) => state_0.setLabelId);
   React.useEffect(() => {
     setLabelId(props.id);
   }, [setLabelId, props.id]);
-  return /* @__PURE__ */ jsx(
-    Role.span,
-    {
-      id: labelId,
-      ...props,
-      className: cx("\u{1F95D}ChipLabel", props.className),
-      ref: forwardedRef
-    }
-  );
+  return /* @__PURE__ */ jsx(Role.span, {
+    id: labelId,
+    ...props,
+    className: cx("\u{1F95D}ChipLabel", props.className),
+    ref: forwardedRef
+  });
+});
+const ChipDismissButton = forwardRef((props, forwardedRef) => {
+  const {
+    label = "Dismiss",
+    ...rest
+  } = props;
+  const labelId = useChipState((state) => state.labelId);
+  const defaultId = React.useId();
+  const id = props.id ?? defaultId;
+  return /* @__PURE__ */ jsx(IconButton, {
+    id,
+    "aria-labelledby": `${id} ${labelId}`,
+    ...rest,
+    label,
+    className: cx("\u{1F95D}ChipDismissButton", props.className),
+    variant: "ghost",
+    labelVariant: "visually-hidden",
+    icon: /* @__PURE__ */ jsx(Dismiss, {}),
+    ref: forwardedRef
+  });
 });
-const ChipDismissButton = forwardRef(
-  (props, forwardedRef) => {
-    const { label = "Dismiss", ...rest } = props;
-    const labelId = useChipState((state) => state.labelId);
-    const defaultId = React.useId();
-    const id = props.id ?? defaultId;
-    return /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        id,
-        "aria-labelledby": `${id} ${labelId}`,
-        ...rest,
-        label,
-        className: cx("\u{1F95D}ChipDismissButton", props.className),
-        variant: "ghost",
-        labelVariant: "visually-hidden",
-        icon: /* @__PURE__ */ jsx(Dismiss, {}),
-        ref: forwardedRef
-      }
-    );
-  }
-);
 const Chip = forwardRef((props, forwardedRef) => {
-  const { onDismiss, label, ...rest } = props;
-  return /* @__PURE__ */ jsxs(ChipRoot, { ...rest, ref: forwardedRef, children: [
-    /* @__PURE__ */ jsx(ChipLabel, { children: label }),
-    onDismiss && /* @__PURE__ */ jsx(ChipDismissButton, { onClick: onDismiss })
-  ] });
+  useInit();
+  const {
+    onDismiss,
+    label,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(ChipRoot, {
+    ...rest,
+    ref: forwardedRef,
+    children: [/* @__PURE__ */ jsx(ChipLabel, {
+      children: label
+    }), onDismiss && /* @__PURE__ */ jsx(ChipDismissButton, {
+      onClick: onDismiss
+    })]
+  });
 });
 var Chip_default = Chip;
 export {

package/dist/DEV/AccordionItem.js

@@ -16,8 +16,10 @@ import {
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 const AccordionItemRoot = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const {
       defaultOpen,
       open: openProp,

package/dist/DEV/Banner.js

@@ -12,6 +12,7 @@ import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
 import { Dismiss, StatusIcon } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 function createBannerStore(initialState) {
   return createStore(
     combine(initialState, (set, _, store) => ({
@@ -38,6 +39,7 @@ function useBannerState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const BannerRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const { tone = "neutral", variant = "outline", ...rest } = props;
   return /* @__PURE__ */ jsx(BannerProvider, { tone, children: /* @__PURE__ */ jsx(
     Role,
@@ -143,6 +145,7 @@ const BannerDismissButton = forwardRef(
 );
 DEV: BannerDismissButton.displayName = "Banner.DismissButton";
 const Banner = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     message,
     label,

package/dist/DEV/Chip.js

@@ -10,6 +10,7 @@ import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
 import { Dismiss } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 function createChipStore(initialState) {
   return createStore(
     combine(initialState, (set, _, store) => ({
@@ -32,6 +33,7 @@ function useChipState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const ChipRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const { variant = "solid", ...rest } = props;
   return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
     Role.div,
@@ -85,6 +87,7 @@ const ChipDismissButton = forwardRef(
 );
 DEV: ChipDismissButton.displayName = "Chip.DismissButton";
 const Chip = forwardRef((props, forwardedRef) => {
+  useInit();
   const { onDismiss, label, ...rest } = props;
   return /* @__PURE__ */ jsxs(ChipRoot, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(ChipLabel, { children: label }),

package/dist/DEV/Dialog.js

@@ -12,7 +12,9 @@ import {
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { Dismiss } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 const DialogRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const { backdrop = true, unmountOnHide = true, ...rest } = props;
   const store = AkDialog.useDialogStore();
   const contentElement = useStoreState(store, "contentElement");

package/dist/DEV/DropdownMenu.js

@@ -26,7 +26,9 @@ import {
 import cx from "classnames";
 import { Checkmark, ChevronRight } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
+import { useInit } from "./~utils.useInit.js";
 function DropdownMenuProvider(props) {
+  useInit();
   const { children, placement, open, setOpen, defaultOpen } = props;
   return /* @__PURE__ */ jsx(
     MenuProvider,

package/dist/DEV/ErrorRegion.js

@@ -20,26 +20,20 @@ import {
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown, StatusIcon } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 const ErrorRegionRoot = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const {
       label,
-      items: itemsProp = [],
+      items = [],
       open: openProp,
       setOpen: setOpenProp,
       ...rest
     } = props;
     const labelId = React.useId();
     const sectionLabelledBy = props["aria-label"] ? void 0 : label ? labelId : void 0;
-    DEV: if (!Array.isArray(itemsProp))
-      console.warn(
-        "`items` prop of `ErrorRegion.Root` expects an array of React nodes. `ReactNode` support is deprecated and will be removed in a future release."
-      );
-    DEV: if (!props["aria-label"] && !props["aria-labelledby"])
-      console.warn(
-        "`aria-label` or `aria-labelledby` prop is required for `ErrorRegion.Root` to set an accessible name of a region."
-      );
-    const visible = Array.isArray(itemsProp) ? itemsProp.length > 0 : !!label;
+    const visible = items.length > 0;
     const [open, setOpen] = useControlledState(
       false,
       openProp,
@@ -136,7 +130,7 @@ const ErrorRegionRoot = forwardRef(
                     store,
                     className: "\u{1F95D}ErrorRegionItems",
                     role: "list",
-                    children: itemsProp
+                    children: items
                   }
                 )
               }

package/dist/DEV/NavigationList.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button as AriaButton } from "@ariakit/react/button";
+import * as AriaDisclosure from "@ariakit/react/disclosure";
+import { Focusable } from "@ariakit/react/focusable";
+import { Role } from "@ariakit/react/role";
+import { Text } from "@stratakit/bricks";
+import { Icon } from "@stratakit/foundations";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { ChevronDown } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
+const NavigationListRoot = forwardRef(
+  (props, forwardedRef) => {
+    useInit();
+    const { items, role = "list", ...rest } = props;
+    const itemRole = role === "list" ? "listitem" : void 0;
+    const { indented } = React.useContext(NavigationListRootContext);
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...rest,
+        role,
+        className: cx("\u{1F95D}NavigationListRoot", props.className),
+        "data-_sk-indented": indented ? "true" : void 0,
+        ref: forwardedRef,
+        children: React.Children.map(items, (item) => /* @__PURE__ */ jsx(
+          Role,
+          {
+            role: itemRole,
+            className: "\u{1F95D}NavigationListItem",
+            "data-_sk-indented": indented ? "true" : void 0,
+            children: item
+          }
+        ))
+      }
+    );
+  }
+);
+DEV: NavigationListRoot.displayName = "NavigationList.Root";
+const NavigationListRootContext = React.createContext({
+  indented: false
+});
+const NavigationListItemAction = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Focusable,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}NavigationListItemAction", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: NavigationListItemAction.displayName = "NavigationListItemAction";
+const NavigationListAnchor = forwardRef(
+  (props, forwardedRef) => {
+    const { active, label, icon, ...rest } = props;
+    return /* @__PURE__ */ jsxs(
+      NavigationListItemAction,
+      {
+        ...rest,
+        render: /* @__PURE__ */ jsx(
+          Role.a,
+          {
+            "aria-current": active ? "true" : void 0,
+            render: props.render
+          }
+        ),
+        ref: forwardedRef,
+        children: [
+          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+          /* @__PURE__ */ jsx(Text, { variant: "body-sm", render: /* @__PURE__ */ jsx("span", {}), children: label })
+        ]
+      }
+    );
+  }
+);
+DEV: NavigationListAnchor.displayName = "NavigationList.Anchor";
+const NavigationListSubgroup = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, items, defaultOpen, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...rest,
+        className: cx("\u{1F95D}NavigationListSubgroup", props.className),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsxs(AriaDisclosure.DisclosureProvider, { defaultOpen, children: [
+          /* @__PURE__ */ jsx(
+            AriaDisclosure.Disclosure,
+            {
+              render: /* @__PURE__ */ jsx(NavigationListSubgroupButton, { label, icon })
+            }
+          ),
+          /* @__PURE__ */ jsx(NavigationListRootContext.Provider, { value: { indented: true }, children: /* @__PURE__ */ jsx(
+            AriaDisclosure.DisclosureContent,
+            {
+              render: /* @__PURE__ */ jsx(NavigationListRoot, { items })
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+DEV: NavigationListSubgroup.displayName = "NavigationList.Subgroup";
+const NavigationListSubgroupButton = forwardRef((props, forwardedRef) => {
+  const { label, icon, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    NavigationListItemAction,
+    {
+      render: /* @__PURE__ */ jsx(AriaButton, {}),
+      ...rest,
+      className: cx("\u{1F95D}NavigationListSubgroupButton", props.className),
+      ref: forwardedRef,
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+        /* @__PURE__ */ jsx(Text, { variant: "body-sm", render: /* @__PURE__ */ jsx("span", {}), children: label }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "\u{1F95D}NavigationListSubgroupChevron" })
+      ]
+    }
+  );
+});
+DEV: NavigationListSubgroupButton.displayName = "NavigationListSubgroupButton";
+export {
+  NavigationListAnchor as Anchor,
+  NavigationListRoot as Root,
+  NavigationListSubgroup as Subgroup
+};

package/dist/DEV/NavigationRail.js

@@ -13,6 +13,7 @@ import {
 import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
+import { useInit } from "./~utils.useInit.js";
 function createNavigationRailStore(initialState) {
   return createStore(
     combine(initialState, (set) => ({
@@ -50,6 +51,7 @@ function useNavigationRailState(selectorFn) {
 }
 const NavigationRailRoot = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const { defaultExpanded = false, expanded, setExpanded, ...rest } = props;
     return /* @__PURE__ */ jsx(
       NavigationRailProvider,
@@ -77,7 +79,7 @@ const NavigationRailRootInner = forwardRef(
     );
   }
 );
-DEV: NavigationRailRootInner.displayName = "NavigationRail.RootInner";
+DEV: NavigationRailRootInner.displayName = "NavigationRailRootInner";
 const NavigationRailHeader = forwardRef(
   (props, forwardedRef) => {
     const expanded = useNavigationRailState((state) => state.expanded);
@@ -159,7 +161,7 @@ const NavigationRailListItem = forwardRef(
     );
   }
 );
-DEV: NavigationRailListItem.displayName = "NavigationRail.Item";
+DEV: NavigationRailListItem.displayName = "NavigationRail.ListItem";
 const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
   const expanded = useNavigationRailState((state) => state.expanded);
   const { label, icon, ...rest } = props;
@@ -188,7 +190,7 @@ const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
   }
   return action;
 });
-DEV: NavigationRailItemAction.displayName = "NavigationRail.ItemAction";
+DEV: NavigationRailItemAction.displayName = "NavigationRailItemAction";
 const NavigationRailAnchor = forwardRef(
   (props, forwardedRef) => {
     const { label, icon, active, ...rest } = props;
@@ -197,7 +199,7 @@ const NavigationRailAnchor = forwardRef(
       {
         label,
         icon,
-        "aria-current": active ? "page" : void 0,
+        "aria-current": active ? "true" : void 0,
         render: /* @__PURE__ */ jsx(Role.a, { ...rest, ref: forwardedRef })
       }
     );

package/dist/DEV/Popover.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AkPopover from "@ariakit/react/popover";
+import { PortalContext } from "@ariakit/react/portal";
+import { useStoreState } from "@ariakit/react/store";
+import { Button } from "@stratakit/bricks";
+import {
+  forwardRef,
+  usePopoverApi
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
+function PopoverProvider(props) {
+  const { children, open, setOpen, placement = "bottom-start" } = props;
+  return /* @__PURE__ */ jsx(
+    AkPopover.PopoverProvider,
+    {
+      open,
+      setOpen,
+      placement,
+      children
+    }
+  );
+}
+DEV: PopoverProvider.displayName = "PopoverProvider";
+const PopoverDisclosure = forwardRef(
+  (props, forwardedRef) => {
+    const store = AkPopover.usePopoverContext();
+    const open = useStoreState(store, "open");
+    const defaultId = React.useId();
+    return /* @__PURE__ */ jsx(
+      AkPopover.PopoverDisclosure,
+      {
+        id: defaultId,
+        render: /* @__PURE__ */ jsx(Button, {}),
+        ...props,
+        "data-has-popover-open": open || void 0,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: PopoverDisclosure.displayName = "PopoverDisclosure";
+const PopoverRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { children, unmountOnHide, ...rest } = props;
+    const store = AkPopover.usePopoverContext();
+    const popoverElement = useStoreState(store, "popoverElement");
+    const open = useStoreState(store, "open");
+    const popoverProps = usePopoverApi({
+      element: popoverElement,
+      open
+    });
+    const contentElement = useStoreState(store, "contentElement");
+    const triggerId = useStoreState(
+      store,
+      (state) => state?.disclosureElement?.id
+    );
+    const labelledBy = props["aria-label"] ? void 0 : triggerId;
+    return /* @__PURE__ */ jsx(
+      AkPopover.Popover,
+      {
+        "aria-labelledby": labelledBy,
+        portal: true,
+        unmountOnHide,
+        ...rest,
+        gutter: 8,
+        style: { ...popoverProps.style, ...props.style },
+        wrapperProps: { popover: popoverProps.popover },
+        className: cx("\u{1F95D}Popover", props.className),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(PortalContext.Provider, { value: contentElement ?? null, children })
+      }
+    );
+  }
+);
+DEV: PopoverRoot.displayName = "PopoverRoot";
+const Popover = forwardRef((props, forwardedRef) => {
+  useInit();
+  const { children, content, open, setOpen, placement, ...rest } = props;
+  return /* @__PURE__ */ jsxs(PopoverProvider, { open, setOpen, placement, children: [
+    /* @__PURE__ */ jsx(PopoverDisclosure, { render: children }),
+    /* @__PURE__ */ jsx(PopoverRoot, { ...rest, ref: forwardedRef, children: content })
+  ] });
+});
+DEV: Popover.displayName = "Popover";
+var Popover_default = Popover;
+export {
+  Popover_default as default
+};

package/dist/DEV/Table.js

@@ -7,9 +7,11 @@ import {
   useSafeContext
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 const TableContext = React.createContext(void 0);
 const TableHeaderContext = React.createContext(false);
 const HtmlTable = forwardRef((props, forwardedRef) => {
+  useInit();
   const tableContextValue = React.useMemo(
     () => ({ mode: "html" }),
     []
@@ -27,6 +29,7 @@ const HtmlTable = forwardRef((props, forwardedRef) => {
 DEV: HtmlTable.displayName = "Table.HtmlTable";
 const CustomTable = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const [captionId, setCaptionId] = React.useState();
     const tableContextValue = React.useMemo(
       () => ({ captionId, setCaptionId, mode: "aria" }),

package/dist/DEV/Tabs.js

@@ -7,9 +7,11 @@ import {
   useUnreactiveCallback
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
+import { useInit } from "./~utils.useInit.js";
+const supportsAnchorPositioning = isBrowser && CSS?.supports?.("anchor-name: --foo");
 const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
 function TabsProvider(props) {
+  useInit();
   const {
     defaultSelectedId,
     selectedId,

package/dist/DEV/Toolbar.js

@@ -7,8 +7,10 @@ import {
 } from "@stratakit/bricks/secret-internals";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 const ToolbarGroup = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     return /* @__PURE__ */ jsx(
       IconButtonContext.Provider,
       {

package/dist/DEV/Tree.js

@@ -3,8 +3,10 @@ import { Composite, useCompositeStore } from "@ariakit/react/composite";
 import { Role } from "@ariakit/react/role";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
+  useInit();
   const composite = useCompositeStore({ orientation: "vertical" });
   return /* @__PURE__ */ jsx(
     Role.div,

package/dist/DEV/TreeItem.js

@@ -56,9 +56,14 @@ const TreeItem = React.memo(
       onExpandedChange?.(!expanded);
     });
     const handleClick = (event) => {
-      if (selected === void 0) return;
+      if (selected !== void 0) {
+        event.stopPropagation();
+        onSelectedChange?.(!selected);
+        return;
+      }
+      if (expanded === void 0) return;
       event.stopPropagation();
-      onSelectedChange?.(!selected);
+      onExpandedChange?.(!expanded);
     };
     const handleKeyDown = (event) => {
       if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {

package/dist/DEV/index.js

@@ -5,7 +5,9 @@ import { default as default3 } from "./Chip.js";
 import * as unstable_Dialog from "./Dialog.js";
 import * as DropdownMenu from "./DropdownMenu.js";
 import * as unstable_ErrorRegion from "./ErrorRegion.js";
+import * as unstable_NavigationList from "./NavigationList.js";
 import * as unstable_NavigationRail from "./NavigationRail.js";
+import { default as default4 } from "./Popover.js";
 import * as Table from "./Table.js";
 import * as Tabs from "./Tabs.js";
 import * as unstable_Toolbar from "./Toolbar.js";
@@ -20,6 +22,8 @@ export {
   default2 as unstable_Banner,
   unstable_Dialog,
   unstable_ErrorRegion,
+  unstable_NavigationList,
   unstable_NavigationRail,
+  default4 as unstable_Popover,
   unstable_Toolbar
 };