@stratakit/structures 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # Changelog
 
+## 0.5.2
+
+- [#1078](https://github.com/iTwin/design-system/pull/1078): Added `DropdownMenu.Group` component used to group menu items within a dropdown menu.
+
+  ```tsx
+  <DropdownMenu.Provider>
+  	<DropdownMenu.Button>Actions</DropdownMenu.Button>
+
+  	<DropdownMenu.Content>
+  		<DropdownMenu.Item label="View" />
+  		<DropdownMenu.Group
+  			label="Manage"
+  			items={[
+  				<DropdownMenu.Item key="add" label="Add" />,
+  				<DropdownMenu.Item key="edit" label="Edit" />,
+  			]}
+  		/>
+  	</DropdownMenu.Content>
+  </DropdownMenu.Provider>
+  ```
+
+- [#1089](https://github.com/iTwin/design-system/pull/1089): Updated the `NavigationRail.ToggleButton` component to use `aria-pressed` instead of `aria-expanded`, to better reflect how it affects the NavigationRail's appearance.
+- [#1092](https://github.com/iTwin/design-system/pull/1092): Increased the target size of `NavigationRail.ToggleButton` component.
+- [#1102](https://github.com/iTwin/design-system/pull/1102): "Popups" will now respect device-specific close actions (such as back gesture on Android). Affected components include: `DropdownMenu`, `Dialog` and `Popover`.
+
+- [#1074](https://github.com/iTwin/design-system/pull/1074): Visual updates to `Table` and `Tree` active + hover states.
+- [#1103](https://github.com/iTwin/design-system/pull/1103): `DropdownMenu.Submenu` will now remain mounted in the DOM as long as the parent DropdownMenu is open.
+
+- Updated dependencies:
+  - @stratakit/bricks@0.5.2
+  - @stratakit/foundations@0.4.2
+
+## 0.5.1
+
+- [#1075](https://github.com/iTwin/design-system/pull/1075): Added a new `unstable_NavigationList` component that displays a vertical list of links for secondary navigation.
+
+  Includes the following subcomponents:
+  - `<NavigationList.Root>`
+  - `<NavigationList.Anchor>`
+  - `<NavigationList.Subgroup>`
+
+  Example:
+
+  ```tsx
+  <NavigationList.Root
+  	items={[
+  		<NavigationList.Anchor key={1} href="/page1" label="Page 1" />,
+  		<NavigationList.Anchor key={2} href="/page2" label="Page 2" />,
+  		<NavigationList.Subgroup
+  			key={3}
+  			label="Group of pages"
+  			items={[
+  				<NavigationList.Anchor key={1} href="/page3-1" label="Sub-page 1" active />,
+  				<NavigationList.Anchor key={2} href="/page3-2" label="Sub-page 2" />,
+  			]}
+  		/>,
+  	]}
+  />
+  ```
+
+- [#1079](https://github.com/iTwin/design-system/pull/1079): Increased the click target area of non-selectable `Tree.Item`s.
+  - If `selected` is undefined, the `Tree.Item` will expand/collapse when clicked.
+  - If `selected` is defined, the `Tree.Item` will continue to toggle selection when clicked.
+
+- [#1064](https://github.com/iTwin/design-system/pull/1064): Added new `unstable_Popover` component that displays custom content in a non-modal window overlay that is placed relative to a trigger element.
+
+  ```tsx
+  <Popover content={<>Popover content</>}>
+  	<Button>Open popover</Button>
+  </Popover>
+  ```
+
+- Updated dependencies:
+  - @stratakit/bricks@0.5.1
+  - @stratakit/foundations@0.4.1
+
 ## 0.5.0
 
 ### Breaking changes

package/dist/AccordionItem.js

@@ -6,7 +6,9 @@ import { GhostAligner, IconButtonPresentation } from "@stratakit/bricks/secret-i
 import { forwardRef, useControlledState } 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/Banner.js

@@ -10,6 +10,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) => ({
     setLabelId: (labelId) => {
@@ -73,6 +74,7 @@ function useBannerState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const BannerRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     tone = "neutral",
     variant = "outline",
@@ -161,6 +163,7 @@ const BannerDismissButton = forwardRef((props, forwardedRef) => {
   });
 });
 const Banner = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     message,
     label,

package/dist/Chip.js

@@ -8,6 +8,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) => ({
     setLabelId: (labelId) => {
@@ -51,6 +52,7 @@ function useChipState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const ChipRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     variant = "solid",
     ...rest
@@ -98,6 +100,7 @@ const ChipDismissButton = forwardRef((props, forwardedRef) => {
   });
 });
 const Chip = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     onDismiss,
     label,

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

@@ -8,11 +8,14 @@ import { IconButton, Text } from "@stratakit/bricks";
 import { GhostAligner } from "@stratakit/bricks/secret-internals";
 import {
   forwardRef,
-  usePopoverApi
+  usePopoverApi,
+  useUnreactiveCallback
 } 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");
@@ -44,9 +47,11 @@ function DialogWrapper(props) {
   const open = useStoreState(store, (state) => {
     return props.open ?? state?.open;
   });
+  const setOpen = useUnreactiveCallback(store?.setOpen);
   const popoverProps = usePopoverApi({
     element: wrapper,
-    open
+    open,
+    setOpen
   });
   const mounted = useStoreState(store, "mounted");
   return /* @__PURE__ */ jsx(

package/dist/DEV/DropdownMenu.js

@@ -4,6 +4,8 @@ import { Button as ButtonAk } from "@ariakit/react/button";
 import {
   Menu,
   MenuButton,
+  MenuGroup,
+  MenuGroupLabel,
   MenuItem,
   MenuItemCheckbox,
   MenuProvider,
@@ -11,7 +13,7 @@ import {
   useMenuStore
 } from "@ariakit/react/menu";
 import { useStoreState } from "@ariakit/react/store";
-import { Button, Kbd } from "@stratakit/bricks";
+import { Button, Kbd, Text } from "@stratakit/bricks";
 import {
   DisclosureArrow,
   Dot,
@@ -21,12 +23,15 @@ import { Icon } from "@stratakit/foundations";
 import {
   forwardRef,
   usePopoverApi,
-  useSafeContext
+  useSafeContext,
+  useUnreactiveCallback
 } from "@stratakit/foundations/secret-internals";
 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,
@@ -45,7 +50,12 @@ const DropdownMenuContent = forwardRef(
     const context = useMenuContext();
     const open = useStoreState(context, "open");
     const popoverElement = useStoreState(context, "popoverElement");
-    const popoverProps = usePopoverApi({ element: popoverElement, open });
+    const setOpen = useUnreactiveCallback(context?.setOpen);
+    const popoverProps = usePopoverApi({
+      element: popoverElement,
+      open,
+      setOpen
+    });
     return /* @__PURE__ */ jsx(
       Menu,
       {
@@ -269,7 +279,6 @@ const DropdownMenuSubmenu = forwardRef(
         portal: true,
         portalElement: popoverElement,
         preserveTabOrder: false,
-        unmountOnHide: true,
         ...props,
         gutter: 2,
         shift: -4,
@@ -280,10 +289,36 @@ const DropdownMenuSubmenu = forwardRef(
   }
 );
 DEV: DropdownMenuSubmenu.displayName = "DropdownMenu.Submenu";
+const DropdownMenuGroup = forwardRef(
+  (props, forwardedRef) => {
+    const { label, items, ...rest } = props;
+    return /* @__PURE__ */ jsxs(
+      MenuGroup,
+      {
+        ...rest,
+        className: cx("\u{1F95D}DropdownMenuGroup", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            MenuGroupLabel,
+            {
+              className: "\u{1F95D}DropdownMenuGroupLabel",
+              render: /* @__PURE__ */ jsx(Text, { variant: "body-sm" }),
+              children: label
+            }
+          ),
+          items
+        ]
+      }
+    );
+  }
+);
+DEV: DropdownMenuGroup.displayName = "DropdownMenu.Group";
 export {
   DropdownMenuButton as Button,
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
+  DropdownMenuGroup as Group,
   DropdownMenuItem as Item,
   DropdownMenuProvider as Provider,
   DropdownMenuSubmenu as Submenu

package/dist/DEV/ErrorRegion.js

@@ -20,8 +20,10 @@ 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 = [],

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);
@@ -100,7 +102,7 @@ const NavigationRailToggleButton = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxs(
     Button,
     {
-      "aria-expanded": expanded ? "true" : "false",
+      "aria-pressed": expanded ? "true" : "false",
       ...rest,
       className: cx("\u{1F95D}NavigationRailToggleButton", props.className),
       ref: forwardedRef,
@@ -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,93 @@
+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,
+  useUnreactiveCallback
+} 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 setOpen = useUnreactiveCallback(store?.setOpen);
+    const popoverProps = usePopoverApi({
+      element: popoverElement,
+      open,
+      setOpen
+    });
+    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,