@stratakit/structures 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.4.4
+
+- [#954](https://github.com/iTwin/design-system/pull/954): Added "popup indicator" styling to `Toolbar.Item`.
+- Updated dependencies:
+  - @stratakit/bricks@0.4.4
+  - @stratakit/foundations@0.3.4
+
+## 0.4.3
+
+- [#933](https://github.com/iTwin/design-system/pull/933): Added `submenu` prop to `DropdownMenu.Item` component and a `DropdownMenu.Submenu` component to support nested dropdown menus.
+
+  ```tsx
+  <DropdownMenu.Provider>
+  	<DropdownMenu.Button>Actions</DropdownMenu.Button>
+
+  	<DropdownMenu.Content>
+  		<DropdownMenu.Item label="Add" />
+  		<DropdownMenu.Item label="Edit" />
+  		<DropdownMenu.Item
+  			label="More"
+  			submenu={
+  				<DropdownMenu.Submenu>
+  					<DropdownMenu.Item label="Delete" />
+  					<DropdownMenu.Item label="Disable" />
+  				</DropdownMenu.Submenu>
+  			}
+  		/>
+  	</DropdownMenu.Content>
+  </DropdownMenu.Provider>
+  ```
+
+- [#939](https://github.com/iTwin/design-system/pull/939): Fixed `forced-colors` styling for `NavigationRail.Anchor` in `active` state.
+- Updated dependencies:
+  - @stratakit/bricks@0.4.3
+  - @stratakit/foundations@0.3.3
+
 ## 0.4.2
 
 - [#931](https://github.com/iTwin/design-system/pull/931): `Dialog.Content` will now only scroll past a certain viewport height. On smaller viewports, the `Dialog.Root` will be scrollable instead.

package/dist/DEV/DropdownMenu.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button as ButtonAk } from "@ariakit/react/button";
 import {
@@ -7,9 +7,9 @@ import {
   MenuItem,
   MenuItemCheckbox,
   MenuProvider,
-  useMenuContext
+  useMenuContext,
+  useMenuStore
 } from "@ariakit/react/menu";
-import { usePopoverContext } from "@ariakit/react/popover";
 import { useStoreState } from "@ariakit/react/store";
 import { Button, Kbd } from "@stratakit/bricks";
 import {
@@ -20,27 +20,21 @@ import {
 import { Icon } from "@stratakit/foundations";
 import {
   forwardRef,
-  usePopoverApi
+  usePopoverApi,
+  useSafeContext
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-import { Checkmark } from "./~utils.icons.js";
+import { Checkmark, ChevronRight } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
 function DropdownMenuProvider(props) {
-  const {
-    children,
-    placement,
-    open: openProp,
-    setOpen: setOpenProp,
-    defaultOpen: defaultOpenProp
-  } = props;
+  const { children, placement, open, setOpen, defaultOpen } = props;
   return /* @__PURE__ */ jsx(
     MenuProvider,
     {
+      defaultOpen,
+      open,
       placement,
-      defaultOpen: defaultOpenProp,
-      open: openProp,
-      setOpen: setOpenProp,
-      popover: usePopoverContext(),
+      setOpen,
       children
     }
   );
@@ -71,7 +65,7 @@ DEV: DropdownMenuContent.displayName = "DropdownMenu.Content";
 const DropdownMenuButton = forwardRef(
   (props, forwardedRef) => {
     const { accessibleWhenDisabled = true, children, ...rest } = props;
-    const open = useStoreState(useMenuContext(), (state) => state?.open);
+    const open = useStoreState(useMenuContext(), "open");
     return /* @__PURE__ */ jsx(
       MenuButton,
       {
@@ -91,40 +85,68 @@ const DropdownMenuButton = forwardRef(
 DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { label, shortcuts, icon, unstable_dot, ...rest } = props;
+    const { label, shortcuts, icon, unstable_dot, submenu, ...rest } = props;
     const dotId = React.useId();
-    return /* @__PURE__ */ jsxs(
-      MenuItem,
-      {
-        accessibleWhenDisabled: true,
-        render: /* @__PURE__ */ jsx(
-          ListItem.Root,
-          {
-            render: /* @__PURE__ */ jsx(
-              ButtonAk,
-              {
-                accessibleWhenDisabled: true,
-                "aria-describedby": dotId,
-                ...rest,
-                className: cx("\u{1F95D}DropdownMenuItem", props.className),
-                ref: forwardedRef
-              }
-            )
-          }
-        ),
-        children: [
-          icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-          /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
-          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
-          unstable_dot ? /* @__PURE__ */ jsx(
-            ListItem.Decoration,
+    const defaultSubmenuStore = useMenuStore();
+    const [submenuStore, setSubmenuStore] = React.useState();
+    const store = submenuStore ?? defaultSubmenuStore;
+    const open = useStoreState(store, "open");
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        MenuItem,
+        {
+          accessibleWhenDisabled: true,
+          render: /* @__PURE__ */ jsx(
+            ListItem.Root,
             {
-              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}DropdownMenuItemDot", children: unstable_dot })
+              render: /* @__PURE__ */ jsx(
+                ButtonAk,
+                {
+                  accessibleWhenDisabled: true,
+                  "aria-describedby": dotId,
+                  ...rest,
+                  render: submenu ? /* @__PURE__ */ jsx(
+                    MenuButton,
+                    {
+                      render: props.render ?? /* @__PURE__ */ jsx("button", {}),
+                      store
+                    }
+                  ) : props.render,
+                  className: cx("\u{1F95D}DropdownMenuItem", props.className),
+                  "data-has-popover-open": open || void 0,
+                  ref: forwardedRef
+                }
+              )
             }
-          ) : null
-        ]
-      }
-    );
+          ),
+          children: [
+            icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+            /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
+            shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
+            unstable_dot ? /* @__PURE__ */ jsx(
+              ListItem.Decoration,
+              {
+                render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}DropdownMenuItemDot", children: unstable_dot })
+              }
+            ) : null,
+            submenu ? /* @__PURE__ */ jsx(
+              ListItem.Decoration,
+              {
+                className: "\u{1F95D}DropdownMenuItemChevron",
+                render: /* @__PURE__ */ jsx(ChevronRight, {})
+              }
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuSubmenuContext.Provider,
+        {
+          value: React.useMemo(() => ({ setStore: setSubmenuStore }), []),
+          children: submenu
+        }
+      )
+    ] });
   }
 );
 DEV: DropdownMenuItem.displayName = "DropdownMenu.Item";
@@ -229,10 +251,40 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
   );
 });
 DEV: DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
+const DropdownMenuSubmenuContext = React.createContext(void 0);
+const DropdownMenuSubmenu = forwardRef(
+  (props, forwardedRef) => {
+    const { setStore } = useSafeContext(DropdownMenuSubmenuContext);
+    const store = useMenuStore();
+    React.useEffect(() => {
+      setStore(store);
+      return () => setStore(void 0);
+    }, [store, setStore]);
+    const parent = useMenuContext();
+    const popoverElement = useStoreState(parent, "popoverElement");
+    return /* @__PURE__ */ jsx(MenuProvider, { store, children: /* @__PURE__ */ jsx(
+      Menu,
+      {
+        store,
+        portal: true,
+        portalElement: popoverElement,
+        preserveTabOrder: false,
+        unmountOnHide: true,
+        ...props,
+        gutter: 2,
+        shift: -4,
+        className: cx("\u{1F95D}DropdownMenu", props.className),
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
+DEV: DropdownMenuSubmenu.displayName = "DropdownMenu.Submenu";
 export {
   DropdownMenuButton as Button,
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenuProvider as Provider
+  DropdownMenuProvider as Provider,
+  DropdownMenuSubmenu as Submenu
 };

package/dist/DEV/TreeItem.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CompositeItem } from "@ariakit/react/composite";
-import { PopoverProvider } from "@ariakit/react/popover";
 import { Role } from "@ariakit/react/role";
 import { Toolbar, ToolbarItem } from "@ariakit/react/toolbar";
 import { IconButton } from "@stratakit/bricks";
@@ -305,25 +304,33 @@ const TreeItemActionMenu = React.memo(
       }
     }, []);
     if (!displayMenu) return null;
-    return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Provider, { open, setOpen, children: [
-      /* @__PURE__ */ jsx(
-        DropdownMenu.Button,
-        {
-          ...props,
-          onKeyDown: (e) => {
-            if (arrowKeys.includes(e.key)) {
-              isArrowKeyPressed.current = true;
+    return /* @__PURE__ */ jsxs(
+      DropdownMenu.Provider,
+      {
+        open,
+        setOpen,
+        placement: "right-start",
+        children: [
+          /* @__PURE__ */ jsx(
+            DropdownMenu.Button,
+            {
+              ...props,
+              onKeyDown: (e) => {
+                if (arrowKeys.includes(e.key)) {
+                  isArrowKeyPressed.current = true;
+                }
+                queueMicrotask(() => {
+                  isArrowKeyPressed.current = false;
+                });
+              },
+              render: /* @__PURE__ */ jsx(TreeItemInlineAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) }),
+              ref: forwardedRef
             }
-            queueMicrotask(() => {
-              isArrowKeyPressed.current = false;
-            });
-          },
-          render: /* @__PURE__ */ jsx(TreeItemInlineAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) }),
-          ref: forwardedRef
-        }
-      ),
-      /* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})
-    ] }) });
+          ),
+          /* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})
+        ]
+      }
+    );
   })
 );
 DEV: TreeItemActionMenu.displayName = "TreeItemActionMenu";

package/dist/DEV/styles.css.js

@@ -1,5 +1,5 @@
 // inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
-var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝ListItem{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝ListItem-height,1.75rem);padding-inline:var(--stratakit-space-x2);background-color:var(--🥝ListItem-background-color);--🥝ListItem-background-color:var(--🌀ListItem-state--default,transparent)var(--🌀ListItem-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀ListItem-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀ListItem-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀ListItem-state--disabled,transparent);color:var(--🥝ListItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝Icon-color:var(--🌀ListItem-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀ListItem-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;display:grid}}@layer states{@media (any-hover:hover){.🥝ListItem:where(:hover){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}.🥝ListItem:where(:active){--🌀ListItem-state:var(--🌀ListItem-state--pressed)}.🥝ListItem:where(:disabled,[aria-disabled=true]){--🌀ListItem-state:var(--🌀ListItem-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝ListItem:where(:has(>:nth-child(2 of .🥝ListItemContent))){--🥝ListItem-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝ListItem{--🌀ListItem-state:var(--🌀ListItem-state--default);--🌀ListItem-state--default:var(--🌀ListItem-state, );--🌀ListItem-state--hover:var(--🌀ListItem-state, );--🌀ListItem-state--pressed:var(--🌀ListItem-state, );--🌀ListItem-state--active:var(--🌀ListItem-state, );--🌀ListItem-state--active-hover:var(--🌀ListItem-state, );--🌀ListItem-state--disabled:var(--🌀ListItem-state, )}}@layer base{.🥝ListItemContent{grid-column:content}}@layer base{.🥝ListItemDecoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:var(--stratakit-space-x1);display:flex}:where(.🥝ListItemContent)~.🥝ListItemDecoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝ListItem:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝AccordionItem{--🥝AccordionItem-gap:var(--stratakit-space-x3);--🥝AccordionItem-padding:var(--stratakit-space-x3)}@layer base{.🥝AccordionItem{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝AccordionItem:where([data-_sk-open=true]){--🥝ChevronDown-rotate:-.5turn}}@layer base{.🥝AccordionItemHeader{background-color:var(--🥝AccordionItemHeader-background-color);padding:var(--🥝AccordionItem-padding);--🥝AccordionItemHeader-background-color:var(--🌀AccordionItemHeader-state--default,transparent)var(--🌀AccordionItemHeader-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀AccordionItemHeader-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝AccordionItemHeader{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝AccordionItemHeader:where(:hover){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--hover)}}.🥝AccordionItemHeader:where(:active){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--pressed)}}@layer base.🌀{.🥝AccordionItemHeader{--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--default);--🌀AccordionItemHeader-state--default:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--hover:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--pressed:var(--🌀AccordionItemHeader-state, )}}@layer base{.🥝AccordionItemMarker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝GhostAligner-inline-offset));margin-inline-end:var(--🥝AccordionItem-gap)}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemMarker{grid-column:marker-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:calc(-1*var(--🥝GhostAligner-inline-offset))}}@layer base{.🥝AccordionItemLabel.🥝Text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝AccordionItemButton{cursor:pointer;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);grid-column:header-content}.🥝AccordionItemButton:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝AccordionItemButton:focus-visible{outline:0}.🥝AccordionItemButton:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝AccordionItemContent{padding-block:var(--🥝AccordionItem-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝AccordionItemDecoration{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;margin-inline-end:var(--🥝AccordionItem-gap);display:flex}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemDecoration{grid-column:decoration-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:0}}@layer base{.🥝AccordionItemHeading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝Banner{background-color:var(--🥝Banner-color-background);border:1px solid var(--🥝Banner-color-border);padding:var(--stratakit-space-x3);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;display:grid}}@layer modifiers{.🥝Banner:where([data-_sk-variant=outline]){--🥝Banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝Banner:where([data-_sk-variant=outline]):where([data-_sk-tone=neutral]){--🥝Banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝Banner:where([data-_sk-tone=info]){--🥝Banner-color-border:var(--stratakit-color-border-info-base);--🥝Icon-color:var(--stratakit-color-icon-info-base)}.🥝Banner:where([data-_sk-tone=positive]){--🥝Banner-color-border:var(--stratakit-color-border-positive-base);--🥝Icon-color:var(--stratakit-color-icon-positive-base)}.🥝Banner:where([data-_sk-tone=attention]){--🥝Banner-color-border:var(--stratakit-color-border-attention-base);--🥝Icon-color:var(--stratakit-color-icon-attention-base)}.🥝Banner:where([data-_sk-tone=critical]){--🥝Banner-color-border:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝BannerIcon{grid-area:1/start;align-self:start;margin-inline-end:var(--stratakit-space-x2)}}@layer base{.🥝BannerLabel{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);font-weight:500}}@layer base{.🥝BannerMessage{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝BannerActions{justify-self:start;align-items:baseline;gap:var(--stratakit-space-x2);flex-wrap:wrap;grid-column:content;margin-block-start:var(--stratakit-space-x3);display:flex}}@layer base{.🥝BannerDismissButton{grid-area:1/end;align-self:start;margin-inline-start:var(--stratakit-space-x3)}}@media (forced-colors:active){.🥝Banner{--🥝Icon-color:CanvasText}}@layer base{.🥝Chip{isolation:isolate;--🥝Chip-padding-inline:var(--stratakit-space-x2);padding-inline:var(--🥝Chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝Chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝Chip:where([data-_sk-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝Chip:where([data-_sk-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝ChipLabel:where(button){border-radius:inherit}.🥝ChipLabel:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝ChipDismissButton.🥝IconButton{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝Chip-padding-inline));position:relative}}@layer base{.🥝DialogWrapper{block-size:100%;inline-size:100%;display:grid;position:fixed;inset:0}}@layer base{.🥝Dialog{min-block-size:min(100%,var(--🥝Dialog-min-block-size,94px));background-color:var(--stratakit-color-bg-elevation-base);max-block-size:calc(100% - 64px);min-inline-size:min(100%,296px);max-inline-size:calc(100% - 64px);box-shadow:var(--stratakit-shadow-dialog-base);border-radius:12px;flex-direction:column;place-self:center;padding:1px;display:flex;position:relative;overflow:auto}.🥝Dialog:where(:has(.🥝DialogFooter)){--🥝Dialog-min-block-size:156px}.🥝Dialog:where(dialog:modal){inset:0}.🥝Dialog:where(dialog:modal)::backdrop{background-color:#0000}}@layer base{.🥝DialogHeader{padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5);align-items:center;display:flex}}@layer base{.🥝DialogHeading{margin-inline-end:auto}}@layer base{.🥝DialogContent{font-size:var(--stratakit-font-size-12);line-height:1.3333}.🥝DialogContent{color:var(--stratakit-color-text-neutral-primary);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;overflow-y:auto}}}@layer base{.🥝DialogFooter{border-block-start:1px solid var(--stratakit-color-border-page-base);background-color:var(--stratakit-color-bg-page-base);padding-inline:var(--stratakit-space-x5);padding-block:var(--stratakit-space-x5);border-end-end-radius:12px;border-end-start-radius:12px;align-items:center;display:flex}}@layer base{.🥝DialogActionList{gap:var(--stratakit-space-x3);margin-inline-start:auto;display:flex}}@layer base{.🥝DialogBackdrop{opacity:.8;background:var(--stratakit-color-bg-elevation-overlay)}}@media (forced-colors:active){.🥝Dialog{border:1px solid}}@layer base{.🥝DropdownMenu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@layer states{.🥝DropdownMenuButton:where([aria-expanded=true]){--🥝DisclosureArrow-rotate:.5turn}}@layer base{.🥝DropdownMenuItem.🥝ListItem{border-radius:4px}}@layer states{.🥝DropdownMenuItem.🥝ListItem:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝DropdownMenuCheckmark-visibility:hidden}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}}@layer base{.🥝ErrorRegion{z-index:1;position:relative}}@layer states{.🥝ErrorRegion:where([data-_sk-expanded=true]){--🥝ChevronDown-rotate:-.5turn;--🥝ErrorRegionHeader-border-end-radius:0}.🥝ErrorRegion:where([data-_sk-visible=true]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝ErrorRegion:where([data-_sk-visible=false]){--🥝ErrorRegionContainer-display:none}}@layer base{.🥝ErrorRegionContainer{isolation:isolate;display:var(--🥝ErrorRegionContainer-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionContainer:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝ErrorRegionHeader{min-block-size:2rem;border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));flex-wrap:wrap;padding-inline-start:var(--stratakit-space-x2);padding-inline-end:var(--stratakit-space-x1);font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝ErrorRegionIcon{--🥝Icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝ErrorRegionLabel{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝ErrorRegionDialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝ErrorRegionDialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where(:not([data-enter])){max-block-size:0}}.🥝ErrorRegionDialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝ErrorRegionItems{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝ErrorRegionItem{padding-block:calc(var(--stratakit-space-x1) + var(--stratakit-space-x2));flex-direction:column;padding-inline-start:calc(var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1));padding-inline-end:var(--stratakit-space-x1);display:flex}.🥝ErrorRegionItem:where(:not(:nth-child(1 of .🥝ErrorRegionItem))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝ErrorRegionItemActions{margin-block-start:var(--stratakit-space-x2)}}@layer base{.🥝NavigationRail{gap:var(--stratakit-space-x1);block-size:100%;min-inline-size:calc(1.5rem + 4*var(--stratakit-space-x2));inline-size:var(--🥝NavigationRail-inline-size);background-color:var(--stratakit-color-bg-page-depth);border-inline-end:1px solid var(--stratakit-color-border-neutral-muted);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);flex-direction:column;display:inline-flex}}@layer modifiers{.🥝NavigationRail:where([data-_sk-expanded=true]){--🥝NavigationRail-inline-size:256px}}@layer base{.🥝NavigationRailHeader{padding-block:var(--stratakit-space-x2);padding-inline:var(--stratakit-space-x4);align-items:center;min-block-size:56px;display:flex;position:relative}}@layer base{.🥝NavigationRailToggleButton{border:1px solid var(--stratakit-color-border-neutral-muted);background-color:var(--stratakit-color-bg-page-base);block-size:1rem;inline-size:1rem;color:var(--stratakit-color-icon-neutral-base);border-radius:9999px;place-items:center;margin-inline-start:auto;transition:rotate .15s ease-out;display:grid}.🥝NavigationRailToggleButton:before{content:"";border-radius:inherit;block-size:24px;inline-size:24px;position:absolute}}@layer states{@media (any-hover:hover){.🥝NavigationRailToggleButton:where(:hover){border-color:color-mix(in oklch,var(--stratakit-color-border-neutral-muted)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}:where(.🥝NavigationRailHeader[data-_sk-collapsed=true]) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-expanded=true]){rotate:180deg}}@layer base{.🥝NavigationRailContent{padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x2);flex-direction:column;flex:999;display:flex;overflow:auto}}@layer base{.🥝NavigationRailList{flex-direction:column;display:flex}}@layer base{.🥝NavigationRailListItem{flex-shrink:0}}@layer base{.🥝NavigationRailItemAction{font-size:var(--stratakit-font-size-14);line-height:1.4286}.🥝NavigationRailItemAction{align-items:center;gap:var(--stratakit-space-x3);inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;min-block-size:calc(1.5rem + 2*var(--stratakit-space-x2));padding:var(--stratakit-space-x2);--🥝Icon-size:1.5rem;background-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationRailItemAction-state--disabled,transparent);color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-text-neutral-disabled));--🥝Icon-color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-icon-neutral-disabled));border:1px solid;border-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,transparent)var(--🌀NavigationRailItemAction-state--pressed,transparent)var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-border-accent-base))var(--🌀NavigationRailItemAction-state--disabled,transparent);-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}}@layer states{@media (any-hover:hover){.🥝NavigationRailItemAction:where(:hover){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}}.🥝NavigationRailItemAction:where([data-has-popover-open]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}.🥝NavigationRailItemAction:where(:active){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--pressed)}.🥝NavigationRailItemAction:where([aria-pressed=true],[aria-current]:not([aria-current=false])){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--active)}.🥝NavigationRailItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝NavigationRailItemAction{--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--default);--🌀NavigationRailItemAction-state--default:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--hover:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--pressed:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--active:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--disabled:var(--🌀NavigationRailItemAction-state, )}}@layer base{.🥝NavigationRailItemActionLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer base{.🥝NavigationRailFooter{margin-block-start:auto}}@layer base{.🥝Table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝TableHeader{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝TableRow:where([role=row]){display:flex}}@layer base{.🥝TableCaption,.🥝TableCell{min-block-size:3rem;padding-block:var(--stratakit-space-x2);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;padding-inline-start:var(--stratakit-space-x4);padding-inline-end:var(--stratakit-space-x3)}:is(.🥝TableCaption,.🥝TableCell):where(th,td){block-size:3rem}}@layer base{.🥝TableCell{background-color:var(--🌀TableCell-state--default,var(--stratakit-color-bg-page-base))var(--🌀TableCell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝TableCell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀TableCell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));min-inline-size:4rem;position:relative}.🥝TableCell:where(:not(th,td)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝TableCell:where(th){font-weight:inherit}.🥝TableCell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,transparent)var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝TableCell:where(:hover){--🌀TableCell-state:var(--🌀TableCell-state--hover)}:where(.🥝TableRow:hover) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--hover)}}:where(.🥝TableRow:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active)}@media (any-hover:hover){:where(.🥝TableRow:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active-hover)}}}@layer base.🌀{.🥝TableCell{--🌀TableCell-state:var(--🌀TableCell-state--default);--🌀TableCell-state--default:var(--🌀TableCell-state, );--🌀TableCell-state--hover:var(--🌀TableCell-state, );--🌀TableCell-state--active:var(--🌀TableCell-state, );--🌀TableCell-state--active-hover:var(--🌀TableCell-state, )}}@layer base{.🥝TabList{--🥝Tab-active-stripe-gap:var(--stratakit-space-x2);--🥝Tab-active-stripe-size:var(--stratakit-space-x05);--🥝Tab-padding-inline:var(--stratakit-space-x1);gap:var(--stratakit-space-x2);display:flex;position:relative}@supports (position-anchor:--foo){.🥝TabList:after{content:"";position-anchor:--🥝Tab-active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝Tab-padding-inline));block-size:var(--🥝Tab-active-stripe-size);background-color:var(--🥝Tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝Tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝Tab-padding-inline))}}}@layer modifiers{.🥝TabList[aria-orientation=horizontal]{padding-block-end:var(--🥝Tab-active-stripe-gap)}.🥝TabList:where([data-_sk-tone=neutral]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝TabList:where([data-_sk-tone=accent]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝Tab{font-size:var(--stratakit-font-size-12);color:var(--🥝Tab-color);background-color:var(--🥝Tab-background-color);block-size:1.25rem;padding-inline:var(--🥝Tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:center;gap:var(--stratakit-space-x1);border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝Tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝TabList[data-_sk-tone=neutral]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝TabList[data-_sk-tone=accent]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝Tab:where([aria-selected=true]){--🌀Tab-state:var(--🌀Tab-state--selected);anchor-name:--🥝Tab-active-tab}@supports not (anchor-name:--foo){.🥝Tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝Tab-active-stripe-color);block-size:var(--🥝Tab-active-stripe-size);inset-inline:var(--🥝Tab-padding-inline);inset-block:auto calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝Tab:where(:hover){--🌀Tab-state:var(--🌀Tab-state--hover)}}.🥝Tab:where(:disabled,[aria-disabled=true]){--🌀Tab-state:var(--🌀Tab-state--disabled);--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝Tab{--🌀Tab-state:var(--🌀Tab-state--default);--🌀Tab-state--default:var(--🌀Tab-state, );--🌀Tab-state--hover:var(--🌀Tab-state, );--🌀Tab-state--selected:var(--🌀Tab-state, );--🌀Tab-state--disabled:var(--🌀Tab-state, )}}@layer base{.🥝TabPanel{--🥝focus-outline-offset:calc(var(--stratakit-space-x05)*-1)}.🥝TabPanel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝TabList,.🥝Tab{--🥝Tab-active-stripe-color:CanvasText}.🥝Tab{--🥝Tab-color:CanvasText}.🥝Tab:where([aria-selected=true]){forced-color-adjust:none;--🥝Tab-background-color:SelectedItem;--🥝Tab-color:SelectedItemText}.🥝Tab:where(:disabled,[aria-disabled=true]){--🥝Tab-color:GrayText}}@layer base{.🥝Toolbar{gap:var(--stratakit-space-x1);background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);padding:var(--stratakit-space-x1);--🥝Divider-main-axis-margin:var(--stratakit-space-x2);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);border-radius:8px;align-items:center;display:inline-flex}}@layer modifiers{.🥝Toolbar:where([aria-orientation=vertical]){flex-direction:column}}@layer modifiers{.🥝ToolbarItem.🥝IconButton:where([data-_sk-variant=ghost]){--🥝Button-background-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀Button-state--active,var(--stratakit-color-bg-accent-base))var(--🌀Button-state--disabled,var(--stratakit-color-bg-glow-on-surface-disabled));--🥝Icon-color:var(--🌀Button-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀Button-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--active,var(--stratakit-color-icon-neutral-emphasis));--🥝Button-border-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,transparent)var(--🌀Button-state--pressed,transparent)var(--🌀Button-state--active,var(--stratakit-color-border-accent-base))var(--🌀Button-state--disabled,transparent)}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}}@layer base{.🥝Tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝TreeItem{min-inline-size:max-content;position:relative}}@layer states{.🥝TreeItem:focus-visible{isolation:isolate;outline:none}.🥝TreeItem:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝TreeItem:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝TreeItem-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝TreeItem{--🥝TreeItem-action-visibility:visible}}}}@layer base{.🥝TreeItemNode.🥝ListItem{isolation:isolate;--🥝ListItem-color:var(--🥝TreeItem-color);padding-inline-start:calc(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(var(--🥝TreeItem-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]){--🥝Icon-color:var(--stratakit-color-icon-attention-base);--🥝TreeItem-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active)}@media (any-hover:hover){.🥝TreeItemNode.🥝ListItem:where(:hover[data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active-hover)}}.🥝TreeItemNode.🥝ListItem:where([data-_sk-expanded=false]){--🥝ChevronDown-rotate:-.25turn}.🥝TreeItemNode.🥝ListItem:where(:not([data-_sk-expanded])){--🥝TreeItem-expander-visibility:hidden}}@layer base{.🥝TreeItemContent.🥝ListItemContent{white-space:nowrap}}@layer base{.🥝TreeItemDescription.🥝ListItemContent{color:var(--🥝TreeItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝TreeItemActionsContainer.🥝ListItemDecoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝TreeItem-actions-container-visibility,var(--🥝TreeItem-action-visibility));align-self:stretch;padding-inline-end:var(--stratakit-space-x1);display:inline-flex;position:sticky;inset-inline-end:0}.🥝TreeItemActionsContainer.🥝ListItemDecoration:before{content:"";background-color:var(--🥝ListItem-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝TreeItemActionsContainer.🥝ListItemDecoration:where(:has(.🥝TreeItemAction[data-_sk-visible=true])){--🥝TreeItem-actions-container-visibility:visible}}@layer base{.🥝TreeItemAction.🥝IconButton{visibility:var(--🥝TreeItem-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=false]){--🥝TreeItem-action-visibility:hidden}.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=true]){--🥝TreeItem-action-visibility:visible}}@layer base{.🥝TreeItemExpander.🥝IconButton{visibility:var(--🥝TreeItem-expander-visibility);z-index:1}}@layer base{.🥝TreeItemDecoration{align-items:center;gap:var(--stratakit-space-x1);display:flex}}@media (forced-colors:active){.🥝TreeItemNode.🥝ListItem{--🥝ListItem-background-color:Canvas;--🥝TreeItem-color:CanvasText}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true],[data-_sk-selected=true]){forced-color-adjust:none}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemContent,.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemDecoration{color:marktext;background-color:mark}.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🥝ListItem-background-color:SelectedItem;--🥝TreeItem-color:SelectedItemText}}}`;
+var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝ListItem{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝ListItem-height,1.75rem);padding-inline:var(--stratakit-space-x2);background-color:var(--🥝ListItem-background-color);--🥝ListItem-background-color:var(--🌀ListItem-state--default,transparent)var(--🌀ListItem-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀ListItem-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀ListItem-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀ListItem-state--disabled,transparent);color:var(--🥝ListItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝Icon-color:var(--🌀ListItem-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀ListItem-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;display:grid}}@layer states{@media (any-hover:hover){.🥝ListItem:where(:hover){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}.🥝ListItem:where(:active){--🌀ListItem-state:var(--🌀ListItem-state--pressed)}.🥝ListItem:where(:disabled,[aria-disabled=true]){--🌀ListItem-state:var(--🌀ListItem-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝ListItem:where(:has(>:nth-child(2 of .🥝ListItemContent))){--🥝ListItem-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝ListItem{--🌀ListItem-state:var(--🌀ListItem-state--default);--🌀ListItem-state--default:var(--🌀ListItem-state, );--🌀ListItem-state--hover:var(--🌀ListItem-state, );--🌀ListItem-state--pressed:var(--🌀ListItem-state, );--🌀ListItem-state--active:var(--🌀ListItem-state, );--🌀ListItem-state--active-hover:var(--🌀ListItem-state, );--🌀ListItem-state--disabled:var(--🌀ListItem-state, )}}@layer base{.🥝ListItemContent{grid-column:content}}@layer base{.🥝ListItemDecoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:var(--stratakit-space-x1);display:flex}:where(.🥝ListItemContent)~.🥝ListItemDecoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝ListItem:where(:disabled,[aria-disabled=true]){color:graytext}}@layer base{.🥝ChevronDown{rotate:var(--🥝ChevronDown-rotate)}@media (prefers-reduced-motion:no-preference){.🥝ChevronDown{transition:rotate .15s ease-in-out}}}.🥝AccordionItem{--🥝AccordionItem-gap:var(--stratakit-space-x3);--🥝AccordionItem-padding:var(--stratakit-space-x3)}@layer base{.🥝AccordionItem{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝AccordionItem:where([data-_sk-open=true]){--🥝ChevronDown-rotate:-.5turn}}@layer base{.🥝AccordionItemHeader{background-color:var(--🥝AccordionItemHeader-background-color);padding:var(--🥝AccordionItem-padding);--🥝AccordionItemHeader-background-color:var(--🌀AccordionItemHeader-state--default,transparent)var(--🌀AccordionItemHeader-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀AccordionItemHeader-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝AccordionItemHeader{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝AccordionItemHeader:where(:hover){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--hover)}}.🥝AccordionItemHeader:where(:active){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--pressed)}}@layer base.🌀{.🥝AccordionItemHeader{--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--default);--🌀AccordionItemHeader-state--default:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--hover:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--pressed:var(--🌀AccordionItemHeader-state, )}}@layer base{.🥝AccordionItemMarker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝GhostAligner-inline-offset));margin-inline-end:var(--🥝AccordionItem-gap)}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemMarker{grid-column:marker-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:calc(-1*var(--🥝GhostAligner-inline-offset))}}@layer base{.🥝AccordionItemLabel.🥝Text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝AccordionItemButton{cursor:pointer;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);grid-column:header-content}.🥝AccordionItemButton:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝AccordionItemButton:focus-visible{outline:0!important}.🥝AccordionItemButton:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝AccordionItemContent{padding-block:var(--🥝AccordionItem-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝AccordionItemDecoration{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;margin-inline-end:var(--🥝AccordionItem-gap);display:flex}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemDecoration{grid-column:decoration-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:0}}@layer base{.🥝AccordionItemHeading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝Banner{background-color:var(--🥝Banner-color-background);border:1px solid var(--🥝Banner-color-border);padding:var(--stratakit-space-x3);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;display:grid}}@layer modifiers{.🥝Banner:where([data-_sk-variant=outline]){--🥝Banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝Banner:where([data-_sk-variant=outline]):where([data-_sk-tone=neutral]){--🥝Banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝Banner:where([data-_sk-tone=info]){--🥝Banner-color-border:var(--stratakit-color-border-info-base);--🥝Icon-color:var(--stratakit-color-icon-info-base)}.🥝Banner:where([data-_sk-tone=positive]){--🥝Banner-color-border:var(--stratakit-color-border-positive-base);--🥝Icon-color:var(--stratakit-color-icon-positive-base)}.🥝Banner:where([data-_sk-tone=attention]){--🥝Banner-color-border:var(--stratakit-color-border-attention-base);--🥝Icon-color:var(--stratakit-color-icon-attention-base)}.🥝Banner:where([data-_sk-tone=critical]){--🥝Banner-color-border:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝BannerIcon{grid-area:1/start;align-self:start;margin-inline-end:var(--stratakit-space-x2)}}@layer base{.🥝BannerLabel{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);font-weight:500}}@layer base{.🥝BannerMessage{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝BannerActions{justify-self:start;align-items:baseline;gap:var(--stratakit-space-x2);flex-wrap:wrap;grid-column:content;margin-block-start:var(--stratakit-space-x3);display:flex}}@layer base{.🥝BannerDismissButton{grid-area:1/end;align-self:start;margin-inline-start:var(--stratakit-space-x3)}}@media (forced-colors:active){.🥝Banner{--🥝Icon-color:CanvasText}}@layer base{.🥝Chip{isolation:isolate;--🥝Chip-padding-inline:var(--stratakit-space-x2);padding-inline:var(--🥝Chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝Chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝Chip:where([data-_sk-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝Chip:where([data-_sk-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝ChipLabel:where(button){border-radius:inherit}.🥝ChipLabel:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝ChipDismissButton.🥝IconButton{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝Chip-padding-inline));position:relative}}@layer base{.🥝DialogWrapper{block-size:100%;inline-size:100%;display:grid;position:fixed;inset:0}}@layer base{.🥝Dialog{min-block-size:min(100%,var(--🥝Dialog-min-block-size,94px));background-color:var(--stratakit-color-bg-elevation-base);max-block-size:calc(100% - 64px);min-inline-size:min(100%,296px);max-inline-size:calc(100% - 64px);box-shadow:var(--stratakit-shadow-dialog-base);border-radius:12px;flex-direction:column;place-self:center;padding:1px;display:flex;position:relative;overflow:auto}.🥝Dialog:where(:has(.🥝DialogFooter)){--🥝Dialog-min-block-size:156px}.🥝Dialog:where(dialog:modal){inset:0}.🥝Dialog:where(dialog:modal)::backdrop{background-color:#0000}}@layer base{.🥝DialogHeader{padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5);align-items:center;display:flex}}@layer base{.🥝DialogHeading{margin-inline-end:auto}}@layer base{.🥝DialogContent{font-size:var(--stratakit-font-size-12);line-height:1.3333}.🥝DialogContent{color:var(--stratakit-color-text-neutral-primary);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;overflow-y:auto}}}@layer base{.🥝DialogFooter{border-block-start:1px solid var(--stratakit-color-border-page-base);background-color:var(--stratakit-color-bg-page-base);padding-inline:var(--stratakit-space-x5);padding-block:var(--stratakit-space-x5);border-end-end-radius:12px;border-end-start-radius:12px;align-items:center;display:flex}}@layer base{.🥝DialogActionList{gap:var(--stratakit-space-x3);margin-inline-start:auto;display:flex}}@layer base{.🥝DialogBackdrop{opacity:.8;background:var(--stratakit-color-bg-elevation-overlay)}}@media (forced-colors:active){.🥝Dialog{border:1px solid}}@layer base{.🥝DropdownMenu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@layer states{.🥝DropdownMenuButton:where([aria-expanded=true]){--🥝DisclosureArrow-rotate:.5turn}}@layer base{.🥝DropdownMenuItem.🥝ListItem{border-radius:4px}}@layer states{.🥝DropdownMenuItem.🥝ListItem:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝DropdownMenuCheckmark-visibility:hidden}.🥝DropdownMenuItem.🥝ListItem:where([data-has-popover-open]:not(:active)){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@layer base{.🥝DropdownMenuItemChevron.🥝ListItemDecoration{min-inline-size:var(--🥝Icon-size,1rem);margin-inline-end:-4px}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}}@layer base{.🥝ErrorRegion{z-index:1;position:relative}}@layer states{.🥝ErrorRegion:where([data-_sk-expanded=true]){--🥝ChevronDown-rotate:-.5turn;--🥝ErrorRegionHeader-border-end-radius:0}.🥝ErrorRegion:where([data-_sk-visible=true]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝ErrorRegion:where([data-_sk-visible=false]){--🥝ErrorRegionContainer-display:none}}@layer base{.🥝ErrorRegionContainer{isolation:isolate;display:var(--🥝ErrorRegionContainer-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionContainer:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝ErrorRegionHeader{min-block-size:2rem;border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));flex-wrap:wrap;padding-inline-start:var(--stratakit-space-x2);padding-inline-end:var(--stratakit-space-x1);font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝ErrorRegionIcon{--🥝Icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝ErrorRegionLabel{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝ErrorRegionDialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝ErrorRegionDialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where(:not([data-enter])){max-block-size:0}}.🥝ErrorRegionDialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝ErrorRegionItems{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝ErrorRegionItem{padding-block:calc(var(--stratakit-space-x1) + var(--stratakit-space-x2));flex-direction:column;padding-inline-start:calc(var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1));padding-inline-end:var(--stratakit-space-x1);display:flex}.🥝ErrorRegionItem:where(:not(:nth-child(1 of .🥝ErrorRegionItem))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝ErrorRegionItemActions{margin-block-start:var(--stratakit-space-x2)}}@layer base{.🥝NavigationRail{gap:var(--stratakit-space-x1);block-size:100%;min-inline-size:calc(1.5rem + 4*var(--stratakit-space-x2));inline-size:var(--🥝NavigationRail-inline-size);background-color:var(--stratakit-color-bg-page-depth);border-inline-end:1px solid var(--stratakit-color-border-neutral-muted);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);flex-direction:column;display:inline-flex}}@layer modifiers{.🥝NavigationRail:where([data-_sk-expanded=true]){--🥝NavigationRail-inline-size:256px}}@layer base{.🥝NavigationRailHeader{padding-block:var(--stratakit-space-x2);padding-inline:var(--stratakit-space-x4);align-items:center;min-block-size:56px;display:flex;position:relative}}@layer base{.🥝NavigationRailToggleButton{border:1px solid var(--stratakit-color-border-neutral-muted);background-color:var(--stratakit-color-bg-page-base);block-size:1rem;inline-size:1rem;color:var(--stratakit-color-icon-neutral-base);border-radius:9999px;place-items:center;margin-inline-start:auto;transition:rotate .15s ease-out;display:grid}.🥝NavigationRailToggleButton:before{content:"";border-radius:inherit;block-size:24px;inline-size:24px;position:absolute}}@layer states{@media (any-hover:hover){.🥝NavigationRailToggleButton:where(:hover){border-color:color-mix(in oklch,var(--stratakit-color-border-neutral-muted)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}:where(.🥝NavigationRailHeader[data-_sk-collapsed=true]) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-expanded=true]){rotate:180deg}}@layer base{.🥝NavigationRailContent{padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x2);flex-direction:column;flex:999;display:flex;overflow:auto}}@layer base{.🥝NavigationRailList{flex-direction:column;display:flex}}@layer base{.🥝NavigationRailListItem{flex-shrink:0}}@layer base{.🥝NavigationRailItemAction{font-size:var(--stratakit-font-size-14);line-height:1.4286}.🥝NavigationRailItemAction{align-items:center;gap:var(--stratakit-space-x3);inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;min-block-size:calc(1.5rem + 2*var(--stratakit-space-x2));padding:var(--stratakit-space-x2);--🥝Icon-size:1.5rem;background-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationRailItemAction-state--disabled,transparent);color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-text-neutral-disabled));--🥝Icon-color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-icon-neutral-disabled));border:1px solid;border-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,transparent)var(--🌀NavigationRailItemAction-state--pressed,transparent)var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-border-accent-base))var(--🌀NavigationRailItemAction-state--disabled,transparent);-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}}@layer states{@media (any-hover:hover){.🥝NavigationRailItemAction:where(:hover){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}}.🥝NavigationRailItemAction:where([data-has-popover-open]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}.🥝NavigationRailItemAction:where(:active){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--pressed)}.🥝NavigationRailItemAction:where([aria-pressed=true],[aria-current]:not([aria-current=false])){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--active)}.🥝NavigationRailItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝NavigationRailItemAction{--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--default);--🌀NavigationRailItemAction-state--default:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--hover:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--pressed:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--active:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--disabled:var(--🌀NavigationRailItemAction-state, )}}@layer base{.🥝NavigationRailItemActionLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer base{.🥝NavigationRailFooter{margin-block-start:auto}}@media (forced-colors:active){.🥝NavigationRailItemAction:where([aria-current=page]){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem;border-color:linktext}}@layer base{.🥝Table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝TableHeader{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝TableRow:where([role=row]){display:flex}}@layer base{.🥝TableCaption,.🥝TableCell{min-block-size:3rem;padding-block:var(--stratakit-space-x2);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;padding-inline-start:var(--stratakit-space-x4);padding-inline-end:var(--stratakit-space-x3)}:is(.🥝TableCaption,.🥝TableCell):where(th,td){block-size:3rem}}@layer base{.🥝TableCell{background-color:var(--🌀TableCell-state--default,var(--stratakit-color-bg-page-base))var(--🌀TableCell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝TableCell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀TableCell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));min-inline-size:4rem;position:relative}.🥝TableCell:where(:not(th,td)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝TableCell:where(th){font-weight:inherit}.🥝TableCell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,transparent)var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝TableCell:where(:hover){--🌀TableCell-state:var(--🌀TableCell-state--hover)}:where(.🥝TableRow:hover) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--hover)}}:where(.🥝TableRow:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active)}@media (any-hover:hover){:where(.🥝TableRow:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active-hover)}}}@layer base.🌀{.🥝TableCell{--🌀TableCell-state:var(--🌀TableCell-state--default);--🌀TableCell-state--default:var(--🌀TableCell-state, );--🌀TableCell-state--hover:var(--🌀TableCell-state, );--🌀TableCell-state--active:var(--🌀TableCell-state, );--🌀TableCell-state--active-hover:var(--🌀TableCell-state, )}}@layer base{.🥝TabList{--🥝Tab-active-stripe-gap:var(--stratakit-space-x2);--🥝Tab-active-stripe-size:var(--stratakit-space-x05);--🥝Tab-padding-inline:var(--stratakit-space-x1);gap:var(--stratakit-space-x2);display:flex;position:relative}@supports (position-anchor:--foo){.🥝TabList:after{content:"";position-anchor:--🥝Tab-active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝Tab-padding-inline));block-size:var(--🥝Tab-active-stripe-size);background-color:var(--🥝Tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝Tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝Tab-padding-inline))}}}@layer modifiers{.🥝TabList[aria-orientation=horizontal]{padding-block-end:var(--🥝Tab-active-stripe-gap)}.🥝TabList:where([data-_sk-tone=neutral]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝TabList:where([data-_sk-tone=accent]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝Tab{font-size:var(--stratakit-font-size-12);color:var(--🥝Tab-color);background-color:var(--🥝Tab-background-color);block-size:1.25rem;padding-inline:var(--🥝Tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:center;gap:var(--stratakit-space-x1);border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝Tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝TabList[data-_sk-tone=neutral]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝TabList[data-_sk-tone=accent]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝Tab:where([aria-selected=true]){--🌀Tab-state:var(--🌀Tab-state--selected);anchor-name:--🥝Tab-active-tab}@supports not (anchor-name:--foo){.🥝Tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝Tab-active-stripe-color);block-size:var(--🥝Tab-active-stripe-size);inset-inline:var(--🥝Tab-padding-inline);inset-block:auto calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝Tab:where(:hover){--🌀Tab-state:var(--🌀Tab-state--hover)}}.🥝Tab:where(:disabled,[aria-disabled=true]){--🌀Tab-state:var(--🌀Tab-state--disabled);--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝Tab{--🌀Tab-state:var(--🌀Tab-state--default);--🌀Tab-state--default:var(--🌀Tab-state, );--🌀Tab-state--hover:var(--🌀Tab-state, );--🌀Tab-state--selected:var(--🌀Tab-state, );--🌀Tab-state--disabled:var(--🌀Tab-state, )}}@layer base{.🥝TabPanel{--🥝focus-outline-offset:calc(var(--stratakit-space-x05)*-1)}.🥝TabPanel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝TabList,.🥝Tab{--🥝Tab-active-stripe-color:CanvasText}.🥝Tab{--🥝Tab-color:CanvasText}.🥝Tab:where([aria-selected=true]){forced-color-adjust:none;--🥝Tab-background-color:SelectedItem;--🥝Tab-color:SelectedItemText}.🥝Tab:where(:disabled,[aria-disabled=true]){--🥝Tab-color:GrayText}}@layer base{.🥝Toolbar{gap:var(--stratakit-space-x1);background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);padding:var(--stratakit-space-x1);--🥝Divider-main-axis-margin:var(--stratakit-space-x2);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);border-radius:8px;align-items:center;display:inline-flex}}@layer modifiers{.🥝Toolbar:where([aria-orientation=vertical]){flex-direction:column}}@layer modifiers{.🥝ToolbarItem.🥝IconButton:where([data-_sk-variant=ghost]){--🥝Button-background-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀Button-state--active,var(--stratakit-color-bg-accent-base))var(--🌀Button-state--disabled,var(--stratakit-color-bg-glow-on-surface-disabled));--🥝Icon-color:var(--🌀Button-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀Button-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--active,var(--stratakit-color-icon-neutral-emphasis));--🥝Button-border-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,transparent)var(--🌀Button-state--pressed,transparent)var(--🌀Button-state--active,var(--stratakit-color-border-accent-base))var(--🌀Button-state--disabled,transparent)}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])){position:relative}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])):after{content:"";background-color:var(--🥝Icon-color);clip-path:polygon(100% 0,100% 100%,0 100%);forced-color-adjust:none;width:3px;height:3px;position:absolute;inset-block-end:4px;inset-inline-end:4px}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}.🥝ToolbarItem.🥝IconButton{--🥝Icon-color:currentColor}}@layer base{.🥝Tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝TreeItem{min-inline-size:max-content;position:relative}}@layer states{.🥝TreeItem:focus-visible{isolation:isolate;outline:none!important}.🥝TreeItem:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝TreeItem:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝TreeItem-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝TreeItem{--🥝TreeItem-action-visibility:visible}}}}@layer base{.🥝TreeItemNode.🥝ListItem{isolation:isolate;--🥝ListItem-color:var(--🥝TreeItem-color);padding-inline-start:calc(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(var(--🥝TreeItem-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]){--🥝Icon-color:var(--stratakit-color-icon-attention-base);--🥝TreeItem-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active)}@media (any-hover:hover){.🥝TreeItemNode.🥝ListItem:where(:hover[data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active-hover)}}.🥝TreeItemNode.🥝ListItem:where([data-_sk-expanded=false]){--🥝ChevronDown-rotate:-.25turn}.🥝TreeItemNode.🥝ListItem:where(:not([data-_sk-expanded])){--🥝TreeItem-expander-visibility:hidden}}@layer base{.🥝TreeItemContent.🥝ListItemContent{white-space:nowrap}}@layer base{.🥝TreeItemDescription.🥝ListItemContent{color:var(--🥝TreeItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝TreeItemActionsContainer.🥝ListItemDecoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝TreeItem-actions-container-visibility,var(--🥝TreeItem-action-visibility));align-self:stretch;padding-inline-end:var(--stratakit-space-x1);display:inline-flex;position:sticky;inset-inline-end:0}.🥝TreeItemActionsContainer.🥝ListItemDecoration:before{content:"";background-color:var(--🥝ListItem-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝TreeItemActionsContainer.🥝ListItemDecoration:where(:has(.🥝TreeItemAction[data-_sk-visible=true])){--🥝TreeItem-actions-container-visibility:visible}}@layer base{.🥝TreeItemAction.🥝IconButton{visibility:var(--🥝TreeItem-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=false]){--🥝TreeItem-action-visibility:hidden}.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=true]){--🥝TreeItem-action-visibility:visible}}@layer base{.🥝TreeItemExpander.🥝IconButton{visibility:var(--🥝TreeItem-expander-visibility);z-index:1}}@layer base{.🥝TreeItemDecoration{align-items:center;gap:var(--stratakit-space-x1);display:flex}}@media (forced-colors:active){.🥝TreeItemNode.🥝ListItem{--🥝ListItem-background-color:Canvas;--🥝TreeItem-color:CanvasText}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true],[data-_sk-selected=true]){forced-color-adjust:none}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemContent,.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemDecoration{color:marktext;background-color:mark}.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🥝ListItem-background-color:SelectedItem;--🥝TreeItem-color:SelectedItemText}}}`;
 
 // src/styles.css.ts
 var styles_css_default = styles_default;

package/dist/DEV/~utils.icons.js

@@ -52,9 +52,14 @@ const ChevronDown = forwardRef((props, forwardedRef) => {
   );
 });
 DEV: ChevronDown.displayName = "ChevronDown";
+const ChevronRight = createIconFromPath(
+  "M6.146 4.146a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 1 1-.708-.707L9.293 8 6.146 4.854a.5.5 0 0 1 0-.708Z"
+);
+DEV: ChevronRight.displayName = "ChevronRight";
 export {
   Checkmark,
   ChevronDown,
+  ChevronRight,
   Dismiss,
   MoreHorizontal,
   StatusIcon

package/dist/DropdownMenu.d.ts

@@ -34,6 +34,8 @@ interface DropdownMenuContentProps extends FocusableProps {
  * The actual "menu" portion containing the items shown within the dropdown.
  *
  * Should be used as a child of `DropdownMenu.Provider`.
+ *
+ * Should include one or more of `DropdownMenu.Item`, `DropdownMenu.CheckboxItem` as direct descendants.
  */
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
 interface DropdownMenuButtonProps extends FocusableProps<"button"> {
@@ -61,6 +63,10 @@ interface DropdownMenuItemProps extends Omit<FocusableProps<"button">, "children
     label: React.ReactNode;
     /** Dot shown on the right end of the menu-item. Value will be used as accessible description. */
     unstable_dot?: string;
+    /**
+     * The submenu to display when the item is activated. Must be a `DropdownMenu.Submenu` component.
+     */
+    submenu?: React.ReactNode;
 }
 /**
  * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
@@ -70,6 +76,21 @@ interface DropdownMenuItemProps extends Omit<FocusableProps<"button">, "children
  * <DropdownMenu.Item label="Add" />
  * <DropdownMenu.Item label="Edit" />
  * ```
+ *
+ * Use the `submenu` prop to display a submenu.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu.Item
+ *   label="More"
+ *   submenu={
+ *     <DropdownMenu.Submenu>
+ *       <DropdownMenu.Item label="Add" />
+ *       <DropdownMenu.Item label="Edit" />
+ *     </DropdownMenu.Submenu>
+ *   }
+ * />
+ * ```
  */
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 interface DropdownMenuItemShortcutsProps extends Omit<BaseProps<"span">, "children"> {
@@ -101,7 +122,7 @@ interface DropdownMenuIconProps extends BaseProps<"svg"> {
 interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps<"button">, "onChange" | "children" | "name">, Pick<MenuItemCheckboxProps, "defaultChecked" | "checked" | "onChange" | "name" | "value">, Pick<DropdownMenuItemProps, "label" | "icon"> {
 }
 /**
- * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
+ * A single checkbox menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
  *
  * Example:
  * ```tsx
@@ -110,4 +131,14 @@ interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps<"button">, "
  * ```
  */
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-export { DropdownMenuProvider as Provider, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, };
+interface DropdownMenuSubmenuProps extends FocusableProps {
+}
+/**
+ * The submenu portion containing the nested submenu items.
+ *
+ * Should be passed into the `submenu` prop of `DropdownMenu.Item`.
+ *
+ * Should include one or more of `DropdownMenu.Item`, `DropdownMenu.CheckboxItem` as direct descendants.
+ */
+declare const DropdownMenuSubmenu: React.ForwardRefExoticComponent<DropdownMenuSubmenuProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+export { DropdownMenuProvider as Provider, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, DropdownMenuSubmenu as Submenu, };

package/dist/DropdownMenu.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button as ButtonAk } from "@ariakit/react/button";
 import {
@@ -7,9 +7,9 @@ import {
   MenuItem,
   MenuItemCheckbox,
   MenuProvider,
-  useMenuContext
+  useMenuContext,
+  useMenuStore
 } from "@ariakit/react/menu";
-import { usePopoverContext } from "@ariakit/react/popover";
 import { useStoreState } from "@ariakit/react/store";
 import { Button, Kbd } from "@stratakit/bricks";
 import {
@@ -20,27 +20,21 @@ import {
 import { Icon } from "@stratakit/foundations";
 import {
   forwardRef,
-  usePopoverApi
+  usePopoverApi,
+  useSafeContext
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-import { Checkmark } from "./~utils.icons.js";
+import { Checkmark, ChevronRight } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
 function DropdownMenuProvider(props) {
-  const {
-    children,
-    placement,
-    open: openProp,
-    setOpen: setOpenProp,
-    defaultOpen: defaultOpenProp
-  } = props;
+  const { children, placement, open, setOpen, defaultOpen } = props;
   return /* @__PURE__ */ jsx(
     MenuProvider,
     {
+      defaultOpen,
+      open,
       placement,
-      defaultOpen: defaultOpenProp,
-      open: openProp,
-      setOpen: setOpenProp,
-      popover: usePopoverContext(),
+      setOpen,
       children
     }
   );
@@ -69,7 +63,7 @@ const DropdownMenuContent = forwardRef(
 const DropdownMenuButton = forwardRef(
   (props, forwardedRef) => {
     const { accessibleWhenDisabled = true, children, ...rest } = props;
-    const open = useStoreState(useMenuContext(), (state) => state?.open);
+    const open = useStoreState(useMenuContext(), "open");
     return /* @__PURE__ */ jsx(
       MenuButton,
       {
@@ -88,40 +82,68 @@ const DropdownMenuButton = forwardRef(
 );
 const DropdownMenuItem = forwardRef(
   (props, forwardedRef) => {
-    const { label, shortcuts, icon, unstable_dot, ...rest } = props;
+    const { label, shortcuts, icon, unstable_dot, submenu, ...rest } = props;
     const dotId = React.useId();
-    return /* @__PURE__ */ jsxs(
-      MenuItem,
-      {
-        accessibleWhenDisabled: true,
-        render: /* @__PURE__ */ jsx(
-          ListItem.Root,
-          {
-            render: /* @__PURE__ */ jsx(
-              ButtonAk,
-              {
-                accessibleWhenDisabled: true,
-                "aria-describedby": dotId,
-                ...rest,
-                className: cx("\u{1F95D}DropdownMenuItem", props.className),
-                ref: forwardedRef
-              }
-            )
-          }
-        ),
-        children: [
-          icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-          /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
-          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
-          unstable_dot ? /* @__PURE__ */ jsx(
-            ListItem.Decoration,
+    const defaultSubmenuStore = useMenuStore();
+    const [submenuStore, setSubmenuStore] = React.useState();
+    const store = submenuStore ?? defaultSubmenuStore;
+    const open = useStoreState(store, "open");
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        MenuItem,
+        {
+          accessibleWhenDisabled: true,
+          render: /* @__PURE__ */ jsx(
+            ListItem.Root,
             {
-              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}DropdownMenuItemDot", children: unstable_dot })
+              render: /* @__PURE__ */ jsx(
+                ButtonAk,
+                {
+                  accessibleWhenDisabled: true,
+                  "aria-describedby": dotId,
+                  ...rest,
+                  render: submenu ? /* @__PURE__ */ jsx(
+                    MenuButton,
+                    {
+                      render: props.render ?? /* @__PURE__ */ jsx("button", {}),
+                      store
+                    }
+                  ) : props.render,
+                  className: cx("\u{1F95D}DropdownMenuItem", props.className),
+                  "data-has-popover-open": open || void 0,
+                  ref: forwardedRef
+                }
+              )
             }
-          ) : null
-        ]
-      }
-    );
+          ),
+          children: [
+            icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+            /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
+            shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
+            unstable_dot ? /* @__PURE__ */ jsx(
+              ListItem.Decoration,
+              {
+                render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}DropdownMenuItemDot", children: unstable_dot })
+              }
+            ) : null,
+            submenu ? /* @__PURE__ */ jsx(
+              ListItem.Decoration,
+              {
+                className: "\u{1F95D}DropdownMenuItemChevron",
+                render: /* @__PURE__ */ jsx(ChevronRight, {})
+              }
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenuSubmenuContext.Provider,
+        {
+          value: React.useMemo(() => ({ setStore: setSubmenuStore }), []),
+          children: submenu
+        }
+      )
+    ] });
   }
 );
 const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
@@ -222,10 +244,39 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
     }
   );
 });
+const DropdownMenuSubmenuContext = React.createContext(void 0);
+const DropdownMenuSubmenu = forwardRef(
+  (props, forwardedRef) => {
+    const { setStore } = useSafeContext(DropdownMenuSubmenuContext);
+    const store = useMenuStore();
+    React.useEffect(() => {
+      setStore(store);
+      return () => setStore(void 0);
+    }, [store, setStore]);
+    const parent = useMenuContext();
+    const popoverElement = useStoreState(parent, "popoverElement");
+    return /* @__PURE__ */ jsx(MenuProvider, { store, children: /* @__PURE__ */ jsx(
+      Menu,
+      {
+        store,
+        portal: true,
+        portalElement: popoverElement,
+        preserveTabOrder: false,
+        unmountOnHide: true,
+        ...props,
+        gutter: 2,
+        shift: -4,
+        className: cx("\u{1F95D}DropdownMenu", props.className),
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
 export {
   DropdownMenuButton as Button,
   DropdownMenuCheckboxItem as CheckboxItem,
   DropdownMenuContent as Content,
   DropdownMenuItem as Item,
-  DropdownMenuProvider as Provider
+  DropdownMenuProvider as Provider,
+  DropdownMenuSubmenu as Submenu
 };

package/dist/TreeItem.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CompositeItem } from "@ariakit/react/composite";
-import { PopoverProvider } from "@ariakit/react/popover";
 import { Role } from "@ariakit/react/role";
 import { Toolbar, ToolbarItem } from "@ariakit/react/toolbar";
 import { IconButton } from "@stratakit/bricks";
@@ -295,25 +294,33 @@ const TreeItemActionMenu = React.memo(
       }
     }, []);
     if (!displayMenu) return null;
-    return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Provider, { open, setOpen, children: [
-      /* @__PURE__ */ jsx(
-        DropdownMenu.Button,
-        {
-          ...props,
-          onKeyDown: (e) => {
-            if (arrowKeys.includes(e.key)) {
-              isArrowKeyPressed.current = true;
+    return /* @__PURE__ */ jsxs(
+      DropdownMenu.Provider,
+      {
+        open,
+        setOpen,
+        placement: "right-start",
+        children: [
+          /* @__PURE__ */ jsx(
+            DropdownMenu.Button,
+            {
+              ...props,
+              onKeyDown: (e) => {
+                if (arrowKeys.includes(e.key)) {
+                  isArrowKeyPressed.current = true;
+                }
+                queueMicrotask(() => {
+                  isArrowKeyPressed.current = false;
+                });
+              },
+              render: /* @__PURE__ */ jsx(TreeItemInlineAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) }),
+              ref: forwardedRef
             }
-            queueMicrotask(() => {
-              isArrowKeyPressed.current = false;
-            });
-          },
-          render: /* @__PURE__ */ jsx(TreeItemInlineAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) }),
-          ref: forwardedRef
-        }
-      ),
-      /* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})
-    ] }) });
+          ),
+          /* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})
+        ]
+      }
+    );
   })
 );
 function TreeItemMenuActionsContent() {

package/dist/styles.css.js

@@ -1,5 +1,5 @@
 // inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
-var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝ListItem{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝ListItem-height,1.75rem);padding-inline:var(--stratakit-space-x2);background-color:var(--🥝ListItem-background-color);--🥝ListItem-background-color:var(--🌀ListItem-state--default,transparent)var(--🌀ListItem-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀ListItem-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀ListItem-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀ListItem-state--disabled,transparent);color:var(--🥝ListItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝Icon-color:var(--🌀ListItem-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀ListItem-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;display:grid}}@layer states{@media (any-hover:hover){.🥝ListItem:where(:hover){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}.🥝ListItem:where(:active){--🌀ListItem-state:var(--🌀ListItem-state--pressed)}.🥝ListItem:where(:disabled,[aria-disabled=true]){--🌀ListItem-state:var(--🌀ListItem-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝ListItem:where(:has(>:nth-child(2 of .🥝ListItemContent))){--🥝ListItem-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝ListItem{--🌀ListItem-state:var(--🌀ListItem-state--default);--🌀ListItem-state--default:var(--🌀ListItem-state, );--🌀ListItem-state--hover:var(--🌀ListItem-state, );--🌀ListItem-state--pressed:var(--🌀ListItem-state, );--🌀ListItem-state--active:var(--🌀ListItem-state, );--🌀ListItem-state--active-hover:var(--🌀ListItem-state, );--🌀ListItem-state--disabled:var(--🌀ListItem-state, )}}@layer base{.🥝ListItemContent{grid-column:content}}@layer base{.🥝ListItemDecoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:var(--stratakit-space-x1);display:flex}:where(.🥝ListItemContent)~.🥝ListItemDecoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝ListItem:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝AccordionItem{--🥝AccordionItem-gap:var(--stratakit-space-x3);--🥝AccordionItem-padding:var(--stratakit-space-x3)}@layer base{.🥝AccordionItem{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝AccordionItem:where([data-_sk-open=true]){--🥝ChevronDown-rotate:-.5turn}}@layer base{.🥝AccordionItemHeader{background-color:var(--🥝AccordionItemHeader-background-color);padding:var(--🥝AccordionItem-padding);--🥝AccordionItemHeader-background-color:var(--🌀AccordionItemHeader-state--default,transparent)var(--🌀AccordionItemHeader-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀AccordionItemHeader-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝AccordionItemHeader{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝AccordionItemHeader:where(:hover){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--hover)}}.🥝AccordionItemHeader:where(:active){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--pressed)}}@layer base.🌀{.🥝AccordionItemHeader{--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--default);--🌀AccordionItemHeader-state--default:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--hover:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--pressed:var(--🌀AccordionItemHeader-state, )}}@layer base{.🥝AccordionItemMarker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝GhostAligner-inline-offset));margin-inline-end:var(--🥝AccordionItem-gap)}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemMarker{grid-column:marker-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:calc(-1*var(--🥝GhostAligner-inline-offset))}}@layer base{.🥝AccordionItemLabel.🥝Text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝AccordionItemButton{cursor:pointer;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);grid-column:header-content}.🥝AccordionItemButton:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝AccordionItemButton:focus-visible{outline:0}.🥝AccordionItemButton:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝AccordionItemContent{padding-block:var(--🥝AccordionItem-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝AccordionItemDecoration{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;margin-inline-end:var(--🥝AccordionItem-gap);display:flex}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemDecoration{grid-column:decoration-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:0}}@layer base{.🥝AccordionItemHeading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝Banner{background-color:var(--🥝Banner-color-background);border:1px solid var(--🥝Banner-color-border);padding:var(--stratakit-space-x3);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;display:grid}}@layer modifiers{.🥝Banner:where([data-_sk-variant=outline]){--🥝Banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝Banner:where([data-_sk-variant=outline]):where([data-_sk-tone=neutral]){--🥝Banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝Banner:where([data-_sk-tone=info]){--🥝Banner-color-border:var(--stratakit-color-border-info-base);--🥝Icon-color:var(--stratakit-color-icon-info-base)}.🥝Banner:where([data-_sk-tone=positive]){--🥝Banner-color-border:var(--stratakit-color-border-positive-base);--🥝Icon-color:var(--stratakit-color-icon-positive-base)}.🥝Banner:where([data-_sk-tone=attention]){--🥝Banner-color-border:var(--stratakit-color-border-attention-base);--🥝Icon-color:var(--stratakit-color-icon-attention-base)}.🥝Banner:where([data-_sk-tone=critical]){--🥝Banner-color-border:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝BannerIcon{grid-area:1/start;align-self:start;margin-inline-end:var(--stratakit-space-x2)}}@layer base{.🥝BannerLabel{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);font-weight:500}}@layer base{.🥝BannerMessage{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝BannerActions{justify-self:start;align-items:baseline;gap:var(--stratakit-space-x2);flex-wrap:wrap;grid-column:content;margin-block-start:var(--stratakit-space-x3);display:flex}}@layer base{.🥝BannerDismissButton{grid-area:1/end;align-self:start;margin-inline-start:var(--stratakit-space-x3)}}@media (forced-colors:active){.🥝Banner{--🥝Icon-color:CanvasText}}@layer base{.🥝Chip{isolation:isolate;--🥝Chip-padding-inline:var(--stratakit-space-x2);padding-inline:var(--🥝Chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝Chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝Chip:where([data-_sk-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝Chip:where([data-_sk-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝ChipLabel:where(button){border-radius:inherit}.🥝ChipLabel:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝ChipDismissButton.🥝IconButton{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝Chip-padding-inline));position:relative}}@layer base{.🥝DialogWrapper{block-size:100%;inline-size:100%;display:grid;position:fixed;inset:0}}@layer base{.🥝Dialog{min-block-size:min(100%,var(--🥝Dialog-min-block-size,94px));background-color:var(--stratakit-color-bg-elevation-base);max-block-size:calc(100% - 64px);min-inline-size:min(100%,296px);max-inline-size:calc(100% - 64px);box-shadow:var(--stratakit-shadow-dialog-base);border-radius:12px;flex-direction:column;place-self:center;padding:1px;display:flex;position:relative;overflow:auto}.🥝Dialog:where(:has(.🥝DialogFooter)){--🥝Dialog-min-block-size:156px}.🥝Dialog:where(dialog:modal){inset:0}.🥝Dialog:where(dialog:modal)::backdrop{background-color:#0000}}@layer base{.🥝DialogHeader{padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5);align-items:center;display:flex}}@layer base{.🥝DialogHeading{margin-inline-end:auto}}@layer base{.🥝DialogContent{font-size:var(--stratakit-font-size-12);line-height:1.3333}.🥝DialogContent{color:var(--stratakit-color-text-neutral-primary);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;overflow-y:auto}}}@layer base{.🥝DialogFooter{border-block-start:1px solid var(--stratakit-color-border-page-base);background-color:var(--stratakit-color-bg-page-base);padding-inline:var(--stratakit-space-x5);padding-block:var(--stratakit-space-x5);border-end-end-radius:12px;border-end-start-radius:12px;align-items:center;display:flex}}@layer base{.🥝DialogActionList{gap:var(--stratakit-space-x3);margin-inline-start:auto;display:flex}}@layer base{.🥝DialogBackdrop{opacity:.8;background:var(--stratakit-color-bg-elevation-overlay)}}@media (forced-colors:active){.🥝Dialog{border:1px solid}}@layer base{.🥝DropdownMenu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@layer states{.🥝DropdownMenuButton:where([aria-expanded=true]){--🥝DisclosureArrow-rotate:.5turn}}@layer base{.🥝DropdownMenuItem.🥝ListItem{border-radius:4px}}@layer states{.🥝DropdownMenuItem.🥝ListItem:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝DropdownMenuCheckmark-visibility:hidden}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}}@layer base{.🥝ErrorRegion{z-index:1;position:relative}}@layer states{.🥝ErrorRegion:where([data-_sk-expanded=true]){--🥝ChevronDown-rotate:-.5turn;--🥝ErrorRegionHeader-border-end-radius:0}.🥝ErrorRegion:where([data-_sk-visible=true]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝ErrorRegion:where([data-_sk-visible=false]){--🥝ErrorRegionContainer-display:none}}@layer base{.🥝ErrorRegionContainer{isolation:isolate;display:var(--🥝ErrorRegionContainer-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionContainer:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝ErrorRegionHeader{min-block-size:2rem;border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));flex-wrap:wrap;padding-inline-start:var(--stratakit-space-x2);padding-inline-end:var(--stratakit-space-x1);font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝ErrorRegionIcon{--🥝Icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝ErrorRegionLabel{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝ErrorRegionDialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝ErrorRegionDialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where(:not([data-enter])){max-block-size:0}}.🥝ErrorRegionDialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝ErrorRegionItems{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝ErrorRegionItem{padding-block:calc(var(--stratakit-space-x1) + var(--stratakit-space-x2));flex-direction:column;padding-inline-start:calc(var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1));padding-inline-end:var(--stratakit-space-x1);display:flex}.🥝ErrorRegionItem:where(:not(:nth-child(1 of .🥝ErrorRegionItem))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝ErrorRegionItemActions{margin-block-start:var(--stratakit-space-x2)}}@layer base{.🥝NavigationRail{gap:var(--stratakit-space-x1);block-size:100%;min-inline-size:calc(1.5rem + 4*var(--stratakit-space-x2));inline-size:var(--🥝NavigationRail-inline-size);background-color:var(--stratakit-color-bg-page-depth);border-inline-end:1px solid var(--stratakit-color-border-neutral-muted);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);flex-direction:column;display:inline-flex}}@layer modifiers{.🥝NavigationRail:where([data-_sk-expanded=true]){--🥝NavigationRail-inline-size:256px}}@layer base{.🥝NavigationRailHeader{padding-block:var(--stratakit-space-x2);padding-inline:var(--stratakit-space-x4);align-items:center;min-block-size:56px;display:flex;position:relative}}@layer base{.🥝NavigationRailToggleButton{border:1px solid var(--stratakit-color-border-neutral-muted);background-color:var(--stratakit-color-bg-page-base);block-size:1rem;inline-size:1rem;color:var(--stratakit-color-icon-neutral-base);border-radius:9999px;place-items:center;margin-inline-start:auto;transition:rotate .15s ease-out;display:grid}.🥝NavigationRailToggleButton:before{content:"";border-radius:inherit;block-size:24px;inline-size:24px;position:absolute}}@layer states{@media (any-hover:hover){.🥝NavigationRailToggleButton:where(:hover){border-color:color-mix(in oklch,var(--stratakit-color-border-neutral-muted)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}:where(.🥝NavigationRailHeader[data-_sk-collapsed=true]) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-expanded=true]){rotate:180deg}}@layer base{.🥝NavigationRailContent{padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x2);flex-direction:column;flex:999;display:flex;overflow:auto}}@layer base{.🥝NavigationRailList{flex-direction:column;display:flex}}@layer base{.🥝NavigationRailListItem{flex-shrink:0}}@layer base{.🥝NavigationRailItemAction{font-size:var(--stratakit-font-size-14);line-height:1.4286}.🥝NavigationRailItemAction{align-items:center;gap:var(--stratakit-space-x3);inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;min-block-size:calc(1.5rem + 2*var(--stratakit-space-x2));padding:var(--stratakit-space-x2);--🥝Icon-size:1.5rem;background-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationRailItemAction-state--disabled,transparent);color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-text-neutral-disabled));--🥝Icon-color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-icon-neutral-disabled));border:1px solid;border-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,transparent)var(--🌀NavigationRailItemAction-state--pressed,transparent)var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-border-accent-base))var(--🌀NavigationRailItemAction-state--disabled,transparent);-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}}@layer states{@media (any-hover:hover){.🥝NavigationRailItemAction:where(:hover){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}}.🥝NavigationRailItemAction:where([data-has-popover-open]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}.🥝NavigationRailItemAction:where(:active){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--pressed)}.🥝NavigationRailItemAction:where([aria-pressed=true],[aria-current]:not([aria-current=false])){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--active)}.🥝NavigationRailItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝NavigationRailItemAction{--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--default);--🌀NavigationRailItemAction-state--default:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--hover:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--pressed:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--active:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--disabled:var(--🌀NavigationRailItemAction-state, )}}@layer base{.🥝NavigationRailItemActionLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer base{.🥝NavigationRailFooter{margin-block-start:auto}}@layer base{.🥝Table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝TableHeader{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝TableRow:where([role=row]){display:flex}}@layer base{.🥝TableCaption,.🥝TableCell{min-block-size:3rem;padding-block:var(--stratakit-space-x2);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;padding-inline-start:var(--stratakit-space-x4);padding-inline-end:var(--stratakit-space-x3)}:is(.🥝TableCaption,.🥝TableCell):where(th,td){block-size:3rem}}@layer base{.🥝TableCell{background-color:var(--🌀TableCell-state--default,var(--stratakit-color-bg-page-base))var(--🌀TableCell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝TableCell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀TableCell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));min-inline-size:4rem;position:relative}.🥝TableCell:where(:not(th,td)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝TableCell:where(th){font-weight:inherit}.🥝TableCell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,transparent)var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝TableCell:where(:hover){--🌀TableCell-state:var(--🌀TableCell-state--hover)}:where(.🥝TableRow:hover) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--hover)}}:where(.🥝TableRow:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active)}@media (any-hover:hover){:where(.🥝TableRow:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active-hover)}}}@layer base.🌀{.🥝TableCell{--🌀TableCell-state:var(--🌀TableCell-state--default);--🌀TableCell-state--default:var(--🌀TableCell-state, );--🌀TableCell-state--hover:var(--🌀TableCell-state, );--🌀TableCell-state--active:var(--🌀TableCell-state, );--🌀TableCell-state--active-hover:var(--🌀TableCell-state, )}}@layer base{.🥝TabList{--🥝Tab-active-stripe-gap:var(--stratakit-space-x2);--🥝Tab-active-stripe-size:var(--stratakit-space-x05);--🥝Tab-padding-inline:var(--stratakit-space-x1);gap:var(--stratakit-space-x2);display:flex;position:relative}@supports (position-anchor:--foo){.🥝TabList:after{content:"";position-anchor:--🥝Tab-active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝Tab-padding-inline));block-size:var(--🥝Tab-active-stripe-size);background-color:var(--🥝Tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝Tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝Tab-padding-inline))}}}@layer modifiers{.🥝TabList[aria-orientation=horizontal]{padding-block-end:var(--🥝Tab-active-stripe-gap)}.🥝TabList:where([data-_sk-tone=neutral]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝TabList:where([data-_sk-tone=accent]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝Tab{font-size:var(--stratakit-font-size-12);color:var(--🥝Tab-color);background-color:var(--🥝Tab-background-color);block-size:1.25rem;padding-inline:var(--🥝Tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:center;gap:var(--stratakit-space-x1);border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝Tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝TabList[data-_sk-tone=neutral]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝TabList[data-_sk-tone=accent]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝Tab:where([aria-selected=true]){--🌀Tab-state:var(--🌀Tab-state--selected);anchor-name:--🥝Tab-active-tab}@supports not (anchor-name:--foo){.🥝Tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝Tab-active-stripe-color);block-size:var(--🥝Tab-active-stripe-size);inset-inline:var(--🥝Tab-padding-inline);inset-block:auto calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝Tab:where(:hover){--🌀Tab-state:var(--🌀Tab-state--hover)}}.🥝Tab:where(:disabled,[aria-disabled=true]){--🌀Tab-state:var(--🌀Tab-state--disabled);--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝Tab{--🌀Tab-state:var(--🌀Tab-state--default);--🌀Tab-state--default:var(--🌀Tab-state, );--🌀Tab-state--hover:var(--🌀Tab-state, );--🌀Tab-state--selected:var(--🌀Tab-state, );--🌀Tab-state--disabled:var(--🌀Tab-state, )}}@layer base{.🥝TabPanel{--🥝focus-outline-offset:calc(var(--stratakit-space-x05)*-1)}.🥝TabPanel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝TabList,.🥝Tab{--🥝Tab-active-stripe-color:CanvasText}.🥝Tab{--🥝Tab-color:CanvasText}.🥝Tab:where([aria-selected=true]){forced-color-adjust:none;--🥝Tab-background-color:SelectedItem;--🥝Tab-color:SelectedItemText}.🥝Tab:where(:disabled,[aria-disabled=true]){--🥝Tab-color:GrayText}}@layer base{.🥝Toolbar{gap:var(--stratakit-space-x1);background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);padding:var(--stratakit-space-x1);--🥝Divider-main-axis-margin:var(--stratakit-space-x2);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);border-radius:8px;align-items:center;display:inline-flex}}@layer modifiers{.🥝Toolbar:where([aria-orientation=vertical]){flex-direction:column}}@layer modifiers{.🥝ToolbarItem.🥝IconButton:where([data-_sk-variant=ghost]){--🥝Button-background-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀Button-state--active,var(--stratakit-color-bg-accent-base))var(--🌀Button-state--disabled,var(--stratakit-color-bg-glow-on-surface-disabled));--🥝Icon-color:var(--🌀Button-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀Button-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--active,var(--stratakit-color-icon-neutral-emphasis));--🥝Button-border-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,transparent)var(--🌀Button-state--pressed,transparent)var(--🌀Button-state--active,var(--stratakit-color-border-accent-base))var(--🌀Button-state--disabled,transparent)}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}}@layer base{.🥝Tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝TreeItem{min-inline-size:max-content;position:relative}}@layer states{.🥝TreeItem:focus-visible{isolation:isolate;outline:none}.🥝TreeItem:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝TreeItem:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝TreeItem-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝TreeItem{--🥝TreeItem-action-visibility:visible}}}}@layer base{.🥝TreeItemNode.🥝ListItem{isolation:isolate;--🥝ListItem-color:var(--🥝TreeItem-color);padding-inline-start:calc(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(var(--🥝TreeItem-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]){--🥝Icon-color:var(--stratakit-color-icon-attention-base);--🥝TreeItem-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active)}@media (any-hover:hover){.🥝TreeItemNode.🥝ListItem:where(:hover[data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active-hover)}}.🥝TreeItemNode.🥝ListItem:where([data-_sk-expanded=false]){--🥝ChevronDown-rotate:-.25turn}.🥝TreeItemNode.🥝ListItem:where(:not([data-_sk-expanded])){--🥝TreeItem-expander-visibility:hidden}}@layer base{.🥝TreeItemContent.🥝ListItemContent{white-space:nowrap}}@layer base{.🥝TreeItemDescription.🥝ListItemContent{color:var(--🥝TreeItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝TreeItemActionsContainer.🥝ListItemDecoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝TreeItem-actions-container-visibility,var(--🥝TreeItem-action-visibility));align-self:stretch;padding-inline-end:var(--stratakit-space-x1);display:inline-flex;position:sticky;inset-inline-end:0}.🥝TreeItemActionsContainer.🥝ListItemDecoration:before{content:"";background-color:var(--🥝ListItem-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝TreeItemActionsContainer.🥝ListItemDecoration:where(:has(.🥝TreeItemAction[data-_sk-visible=true])){--🥝TreeItem-actions-container-visibility:visible}}@layer base{.🥝TreeItemAction.🥝IconButton{visibility:var(--🥝TreeItem-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=false]){--🥝TreeItem-action-visibility:hidden}.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=true]){--🥝TreeItem-action-visibility:visible}}@layer base{.🥝TreeItemExpander.🥝IconButton{visibility:var(--🥝TreeItem-expander-visibility);z-index:1}}@layer base{.🥝TreeItemDecoration{align-items:center;gap:var(--stratakit-space-x1);display:flex}}@media (forced-colors:active){.🥝TreeItemNode.🥝ListItem{--🥝ListItem-background-color:Canvas;--🥝TreeItem-color:CanvasText}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true],[data-_sk-selected=true]){forced-color-adjust:none}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemContent,.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemDecoration{color:marktext;background-color:mark}.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🥝ListItem-background-color:SelectedItem;--🥝TreeItem-color:SelectedItemText}}}`;
+var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝ListItem{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝ListItem-height,1.75rem);padding-inline:var(--stratakit-space-x2);background-color:var(--🥝ListItem-background-color);--🥝ListItem-background-color:var(--🌀ListItem-state--default,transparent)var(--🌀ListItem-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀ListItem-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀ListItem-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀ListItem-state--disabled,transparent);color:var(--🥝ListItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝Icon-color:var(--🌀ListItem-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀ListItem-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;display:grid}}@layer states{@media (any-hover:hover){.🥝ListItem:where(:hover){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}.🥝ListItem:where(:active){--🌀ListItem-state:var(--🌀ListItem-state--pressed)}.🥝ListItem:where(:disabled,[aria-disabled=true]){--🌀ListItem-state:var(--🌀ListItem-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝ListItem:where(:has(>:nth-child(2 of .🥝ListItemContent))){--🥝ListItem-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝ListItem{--🌀ListItem-state:var(--🌀ListItem-state--default);--🌀ListItem-state--default:var(--🌀ListItem-state, );--🌀ListItem-state--hover:var(--🌀ListItem-state, );--🌀ListItem-state--pressed:var(--🌀ListItem-state, );--🌀ListItem-state--active:var(--🌀ListItem-state, );--🌀ListItem-state--active-hover:var(--🌀ListItem-state, );--🌀ListItem-state--disabled:var(--🌀ListItem-state, )}}@layer base{.🥝ListItemContent{grid-column:content}}@layer base{.🥝ListItemDecoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:var(--stratakit-space-x1);display:flex}:where(.🥝ListItemContent)~.🥝ListItemDecoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝ListItem:where(:disabled,[aria-disabled=true]){color:graytext}}@layer base{.🥝ChevronDown{rotate:var(--🥝ChevronDown-rotate)}@media (prefers-reduced-motion:no-preference){.🥝ChevronDown{transition:rotate .15s ease-in-out}}}.🥝AccordionItem{--🥝AccordionItem-gap:var(--stratakit-space-x3);--🥝AccordionItem-padding:var(--stratakit-space-x3)}@layer base{.🥝AccordionItem{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝AccordionItem:where([data-_sk-open=true]){--🥝ChevronDown-rotate:-.5turn}}@layer base{.🥝AccordionItemHeader{background-color:var(--🥝AccordionItemHeader-background-color);padding:var(--🥝AccordionItem-padding);--🥝AccordionItemHeader-background-color:var(--🌀AccordionItemHeader-state--default,transparent)var(--🌀AccordionItemHeader-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀AccordionItemHeader-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝AccordionItemHeader{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝AccordionItemHeader:where(:hover){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--hover)}}.🥝AccordionItemHeader:where(:active){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--pressed)}}@layer base.🌀{.🥝AccordionItemHeader{--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--default);--🌀AccordionItemHeader-state--default:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--hover:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--pressed:var(--🌀AccordionItemHeader-state, )}}@layer base{.🥝AccordionItemMarker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝GhostAligner-inline-offset));margin-inline-end:var(--🥝AccordionItem-gap)}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemMarker{grid-column:marker-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:calc(-1*var(--🥝GhostAligner-inline-offset))}}@layer base{.🥝AccordionItemLabel.🥝Text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝AccordionItemButton{cursor:pointer;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);grid-column:header-content}.🥝AccordionItemButton:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝AccordionItemButton:focus-visible{outline:0!important}.🥝AccordionItemButton:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝AccordionItemContent{padding-block:var(--🥝AccordionItem-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝AccordionItemDecoration{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;margin-inline-end:var(--🥝AccordionItem-gap);display:flex}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemDecoration{grid-column:decoration-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:0}}@layer base{.🥝AccordionItemHeading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝Banner{background-color:var(--🥝Banner-color-background);border:1px solid var(--🥝Banner-color-border);padding:var(--stratakit-space-x3);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;display:grid}}@layer modifiers{.🥝Banner:where([data-_sk-variant=outline]){--🥝Banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝Banner:where([data-_sk-variant=outline]):where([data-_sk-tone=neutral]){--🥝Banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝Banner:where([data-_sk-tone=info]){--🥝Banner-color-border:var(--stratakit-color-border-info-base);--🥝Icon-color:var(--stratakit-color-icon-info-base)}.🥝Banner:where([data-_sk-tone=positive]){--🥝Banner-color-border:var(--stratakit-color-border-positive-base);--🥝Icon-color:var(--stratakit-color-icon-positive-base)}.🥝Banner:where([data-_sk-tone=attention]){--🥝Banner-color-border:var(--stratakit-color-border-attention-base);--🥝Icon-color:var(--stratakit-color-icon-attention-base)}.🥝Banner:where([data-_sk-tone=critical]){--🥝Banner-color-border:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝BannerIcon{grid-area:1/start;align-self:start;margin-inline-end:var(--stratakit-space-x2)}}@layer base{.🥝BannerLabel{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);font-weight:500}}@layer base{.🥝BannerMessage{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝BannerActions{justify-self:start;align-items:baseline;gap:var(--stratakit-space-x2);flex-wrap:wrap;grid-column:content;margin-block-start:var(--stratakit-space-x3);display:flex}}@layer base{.🥝BannerDismissButton{grid-area:1/end;align-self:start;margin-inline-start:var(--stratakit-space-x3)}}@media (forced-colors:active){.🥝Banner{--🥝Icon-color:CanvasText}}@layer base{.🥝Chip{isolation:isolate;--🥝Chip-padding-inline:var(--stratakit-space-x2);padding-inline:var(--🥝Chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝Chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝Chip:where([data-_sk-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝Chip:where([data-_sk-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝ChipLabel:where(button){border-radius:inherit}.🥝ChipLabel:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝ChipDismissButton.🥝IconButton{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝Chip-padding-inline));position:relative}}@layer base{.🥝DialogWrapper{block-size:100%;inline-size:100%;display:grid;position:fixed;inset:0}}@layer base{.🥝Dialog{min-block-size:min(100%,var(--🥝Dialog-min-block-size,94px));background-color:var(--stratakit-color-bg-elevation-base);max-block-size:calc(100% - 64px);min-inline-size:min(100%,296px);max-inline-size:calc(100% - 64px);box-shadow:var(--stratakit-shadow-dialog-base);border-radius:12px;flex-direction:column;place-self:center;padding:1px;display:flex;position:relative;overflow:auto}.🥝Dialog:where(:has(.🥝DialogFooter)){--🥝Dialog-min-block-size:156px}.🥝Dialog:where(dialog:modal){inset:0}.🥝Dialog:where(dialog:modal)::backdrop{background-color:#0000}}@layer base{.🥝DialogHeader{padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5);align-items:center;display:flex}}@layer base{.🥝DialogHeading{margin-inline-end:auto}}@layer base{.🥝DialogContent{font-size:var(--stratakit-font-size-12);line-height:1.3333}.🥝DialogContent{color:var(--stratakit-color-text-neutral-primary);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;overflow-y:auto}}}@layer base{.🥝DialogFooter{border-block-start:1px solid var(--stratakit-color-border-page-base);background-color:var(--stratakit-color-bg-page-base);padding-inline:var(--stratakit-space-x5);padding-block:var(--stratakit-space-x5);border-end-end-radius:12px;border-end-start-radius:12px;align-items:center;display:flex}}@layer base{.🥝DialogActionList{gap:var(--stratakit-space-x3);margin-inline-start:auto;display:flex}}@layer base{.🥝DialogBackdrop{opacity:.8;background:var(--stratakit-color-bg-elevation-overlay)}}@media (forced-colors:active){.🥝Dialog{border:1px solid}}@layer base{.🥝DropdownMenu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@layer states{.🥝DropdownMenuButton:where([aria-expanded=true]){--🥝DisclosureArrow-rotate:.5turn}}@layer base{.🥝DropdownMenuItem.🥝ListItem{border-radius:4px}}@layer states{.🥝DropdownMenuItem.🥝ListItem:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝DropdownMenuCheckmark-visibility:hidden}.🥝DropdownMenuItem.🥝ListItem:where([data-has-popover-open]:not(:active)){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@layer base{.🥝DropdownMenuItemChevron.🥝ListItemDecoration{min-inline-size:var(--🥝Icon-size,1rem);margin-inline-end:-4px}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}}@layer base{.🥝ErrorRegion{z-index:1;position:relative}}@layer states{.🥝ErrorRegion:where([data-_sk-expanded=true]){--🥝ChevronDown-rotate:-.5turn;--🥝ErrorRegionHeader-border-end-radius:0}.🥝ErrorRegion:where([data-_sk-visible=true]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝ErrorRegion:where([data-_sk-visible=false]){--🥝ErrorRegionContainer-display:none}}@layer base{.🥝ErrorRegionContainer{isolation:isolate;display:var(--🥝ErrorRegionContainer-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionContainer:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝ErrorRegionHeader{min-block-size:2rem;border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));flex-wrap:wrap;padding-inline-start:var(--stratakit-space-x2);padding-inline-end:var(--stratakit-space-x1);font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝ErrorRegionIcon{--🥝Icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝ErrorRegionLabel{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝ErrorRegionDialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝ErrorRegionDialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where(:not([data-enter])){max-block-size:0}}.🥝ErrorRegionDialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝ErrorRegionItems{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝ErrorRegionItem{padding-block:calc(var(--stratakit-space-x1) + var(--stratakit-space-x2));flex-direction:column;padding-inline-start:calc(var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1));padding-inline-end:var(--stratakit-space-x1);display:flex}.🥝ErrorRegionItem:where(:not(:nth-child(1 of .🥝ErrorRegionItem))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝ErrorRegionItemActions{margin-block-start:var(--stratakit-space-x2)}}@layer base{.🥝NavigationRail{gap:var(--stratakit-space-x1);block-size:100%;min-inline-size:calc(1.5rem + 4*var(--stratakit-space-x2));inline-size:var(--🥝NavigationRail-inline-size);background-color:var(--stratakit-color-bg-page-depth);border-inline-end:1px solid var(--stratakit-color-border-neutral-muted);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);flex-direction:column;display:inline-flex}}@layer modifiers{.🥝NavigationRail:where([data-_sk-expanded=true]){--🥝NavigationRail-inline-size:256px}}@layer base{.🥝NavigationRailHeader{padding-block:var(--stratakit-space-x2);padding-inline:var(--stratakit-space-x4);align-items:center;min-block-size:56px;display:flex;position:relative}}@layer base{.🥝NavigationRailToggleButton{border:1px solid var(--stratakit-color-border-neutral-muted);background-color:var(--stratakit-color-bg-page-base);block-size:1rem;inline-size:1rem;color:var(--stratakit-color-icon-neutral-base);border-radius:9999px;place-items:center;margin-inline-start:auto;transition:rotate .15s ease-out;display:grid}.🥝NavigationRailToggleButton:before{content:"";border-radius:inherit;block-size:24px;inline-size:24px;position:absolute}}@layer states{@media (any-hover:hover){.🥝NavigationRailToggleButton:where(:hover){border-color:color-mix(in oklch,var(--stratakit-color-border-neutral-muted)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}:where(.🥝NavigationRailHeader[data-_sk-collapsed=true]) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-expanded=true]){rotate:180deg}}@layer base{.🥝NavigationRailContent{padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x2);flex-direction:column;flex:999;display:flex;overflow:auto}}@layer base{.🥝NavigationRailList{flex-direction:column;display:flex}}@layer base{.🥝NavigationRailListItem{flex-shrink:0}}@layer base{.🥝NavigationRailItemAction{font-size:var(--stratakit-font-size-14);line-height:1.4286}.🥝NavigationRailItemAction{align-items:center;gap:var(--stratakit-space-x3);inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;min-block-size:calc(1.5rem + 2*var(--stratakit-space-x2));padding:var(--stratakit-space-x2);--🥝Icon-size:1.5rem;background-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationRailItemAction-state--disabled,transparent);color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-text-neutral-disabled));--🥝Icon-color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-icon-neutral-disabled));border:1px solid;border-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,transparent)var(--🌀NavigationRailItemAction-state--pressed,transparent)var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-border-accent-base))var(--🌀NavigationRailItemAction-state--disabled,transparent);-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}}@layer states{@media (any-hover:hover){.🥝NavigationRailItemAction:where(:hover){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}}.🥝NavigationRailItemAction:where([data-has-popover-open]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}.🥝NavigationRailItemAction:where(:active){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--pressed)}.🥝NavigationRailItemAction:where([aria-pressed=true],[aria-current]:not([aria-current=false])){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--active)}.🥝NavigationRailItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝NavigationRailItemAction{--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--default);--🌀NavigationRailItemAction-state--default:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--hover:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--pressed:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--active:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--disabled:var(--🌀NavigationRailItemAction-state, )}}@layer base{.🥝NavigationRailItemActionLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer base{.🥝NavigationRailFooter{margin-block-start:auto}}@media (forced-colors:active){.🥝NavigationRailItemAction:where([aria-current=page]){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem;border-color:linktext}}@layer base{.🥝Table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝TableHeader{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝TableRow:where([role=row]){display:flex}}@layer base{.🥝TableCaption,.🥝TableCell{min-block-size:3rem;padding-block:var(--stratakit-space-x2);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;padding-inline-start:var(--stratakit-space-x4);padding-inline-end:var(--stratakit-space-x3)}:is(.🥝TableCaption,.🥝TableCell):where(th,td){block-size:3rem}}@layer base{.🥝TableCell{background-color:var(--🌀TableCell-state--default,var(--stratakit-color-bg-page-base))var(--🌀TableCell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝TableCell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀TableCell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));min-inline-size:4rem;position:relative}.🥝TableCell:where(:not(th,td)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝TableCell:where(th){font-weight:inherit}.🥝TableCell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,transparent)var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝TableCell:where(:hover){--🌀TableCell-state:var(--🌀TableCell-state--hover)}:where(.🥝TableRow:hover) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--hover)}}:where(.🥝TableRow:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active)}@media (any-hover:hover){:where(.🥝TableRow:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active-hover)}}}@layer base.🌀{.🥝TableCell{--🌀TableCell-state:var(--🌀TableCell-state--default);--🌀TableCell-state--default:var(--🌀TableCell-state, );--🌀TableCell-state--hover:var(--🌀TableCell-state, );--🌀TableCell-state--active:var(--🌀TableCell-state, );--🌀TableCell-state--active-hover:var(--🌀TableCell-state, )}}@layer base{.🥝TabList{--🥝Tab-active-stripe-gap:var(--stratakit-space-x2);--🥝Tab-active-stripe-size:var(--stratakit-space-x05);--🥝Tab-padding-inline:var(--stratakit-space-x1);gap:var(--stratakit-space-x2);display:flex;position:relative}@supports (position-anchor:--foo){.🥝TabList:after{content:"";position-anchor:--🥝Tab-active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝Tab-padding-inline));block-size:var(--🥝Tab-active-stripe-size);background-color:var(--🥝Tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝Tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝Tab-padding-inline))}}}@layer modifiers{.🥝TabList[aria-orientation=horizontal]{padding-block-end:var(--🥝Tab-active-stripe-gap)}.🥝TabList:where([data-_sk-tone=neutral]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝TabList:where([data-_sk-tone=accent]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝Tab{font-size:var(--stratakit-font-size-12);color:var(--🥝Tab-color);background-color:var(--🥝Tab-background-color);block-size:1.25rem;padding-inline:var(--🥝Tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:center;gap:var(--stratakit-space-x1);border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝Tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝TabList[data-_sk-tone=neutral]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝TabList[data-_sk-tone=accent]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝Tab:where([aria-selected=true]){--🌀Tab-state:var(--🌀Tab-state--selected);anchor-name:--🥝Tab-active-tab}@supports not (anchor-name:--foo){.🥝Tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝Tab-active-stripe-color);block-size:var(--🥝Tab-active-stripe-size);inset-inline:var(--🥝Tab-padding-inline);inset-block:auto calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝Tab:where(:hover){--🌀Tab-state:var(--🌀Tab-state--hover)}}.🥝Tab:where(:disabled,[aria-disabled=true]){--🌀Tab-state:var(--🌀Tab-state--disabled);--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝Tab{--🌀Tab-state:var(--🌀Tab-state--default);--🌀Tab-state--default:var(--🌀Tab-state, );--🌀Tab-state--hover:var(--🌀Tab-state, );--🌀Tab-state--selected:var(--🌀Tab-state, );--🌀Tab-state--disabled:var(--🌀Tab-state, )}}@layer base{.🥝TabPanel{--🥝focus-outline-offset:calc(var(--stratakit-space-x05)*-1)}.🥝TabPanel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝TabList,.🥝Tab{--🥝Tab-active-stripe-color:CanvasText}.🥝Tab{--🥝Tab-color:CanvasText}.🥝Tab:where([aria-selected=true]){forced-color-adjust:none;--🥝Tab-background-color:SelectedItem;--🥝Tab-color:SelectedItemText}.🥝Tab:where(:disabled,[aria-disabled=true]){--🥝Tab-color:GrayText}}@layer base{.🥝Toolbar{gap:var(--stratakit-space-x1);background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);padding:var(--stratakit-space-x1);--🥝Divider-main-axis-margin:var(--stratakit-space-x2);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);border-radius:8px;align-items:center;display:inline-flex}}@layer modifiers{.🥝Toolbar:where([aria-orientation=vertical]){flex-direction:column}}@layer modifiers{.🥝ToolbarItem.🥝IconButton:where([data-_sk-variant=ghost]){--🥝Button-background-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀Button-state--active,var(--stratakit-color-bg-accent-base))var(--🌀Button-state--disabled,var(--stratakit-color-bg-glow-on-surface-disabled));--🥝Icon-color:var(--🌀Button-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀Button-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--active,var(--stratakit-color-icon-neutral-emphasis));--🥝Button-border-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,transparent)var(--🌀Button-state--pressed,transparent)var(--🌀Button-state--active,var(--stratakit-color-border-accent-base))var(--🌀Button-state--disabled,transparent)}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])){position:relative}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])):after{content:"";background-color:var(--🥝Icon-color);clip-path:polygon(100% 0,100% 100%,0 100%);forced-color-adjust:none;width:3px;height:3px;position:absolute;inset-block-end:4px;inset-inline-end:4px}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}.🥝ToolbarItem.🥝IconButton{--🥝Icon-color:currentColor}}@layer base{.🥝Tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝TreeItem{min-inline-size:max-content;position:relative}}@layer states{.🥝TreeItem:focus-visible{isolation:isolate;outline:none!important}.🥝TreeItem:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝TreeItem:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝TreeItem-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝TreeItem{--🥝TreeItem-action-visibility:visible}}}}@layer base{.🥝TreeItemNode.🥝ListItem{isolation:isolate;--🥝ListItem-color:var(--🥝TreeItem-color);padding-inline-start:calc(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(var(--🥝TreeItem-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]){--🥝Icon-color:var(--stratakit-color-icon-attention-base);--🥝TreeItem-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active)}@media (any-hover:hover){.🥝TreeItemNode.🥝ListItem:where(:hover[data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active-hover)}}.🥝TreeItemNode.🥝ListItem:where([data-_sk-expanded=false]){--🥝ChevronDown-rotate:-.25turn}.🥝TreeItemNode.🥝ListItem:where(:not([data-_sk-expanded])){--🥝TreeItem-expander-visibility:hidden}}@layer base{.🥝TreeItemContent.🥝ListItemContent{white-space:nowrap}}@layer base{.🥝TreeItemDescription.🥝ListItemContent{color:var(--🥝TreeItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝TreeItemActionsContainer.🥝ListItemDecoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝TreeItem-actions-container-visibility,var(--🥝TreeItem-action-visibility));align-self:stretch;padding-inline-end:var(--stratakit-space-x1);display:inline-flex;position:sticky;inset-inline-end:0}.🥝TreeItemActionsContainer.🥝ListItemDecoration:before{content:"";background-color:var(--🥝ListItem-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝TreeItemActionsContainer.🥝ListItemDecoration:where(:has(.🥝TreeItemAction[data-_sk-visible=true])){--🥝TreeItem-actions-container-visibility:visible}}@layer base{.🥝TreeItemAction.🥝IconButton{visibility:var(--🥝TreeItem-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=false]){--🥝TreeItem-action-visibility:hidden}.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=true]){--🥝TreeItem-action-visibility:visible}}@layer base{.🥝TreeItemExpander.🥝IconButton{visibility:var(--🥝TreeItem-expander-visibility);z-index:1}}@layer base{.🥝TreeItemDecoration{align-items:center;gap:var(--stratakit-space-x1);display:flex}}@media (forced-colors:active){.🥝TreeItemNode.🥝ListItem{--🥝ListItem-background-color:Canvas;--🥝TreeItem-color:CanvasText}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true],[data-_sk-selected=true]){forced-color-adjust:none}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemContent,.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemDecoration{color:marktext;background-color:mark}.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🥝ListItem-background-color:SelectedItem;--🥝TreeItem-color:SelectedItemText}}}`;
 
 // src/styles.css.ts
 var styles_css_default = styles_default;

package/dist/~utils.icons.d.ts

@@ -7,4 +7,5 @@ interface StatusIconProps extends Omit<BaseProps<"svg">, "children"> {
 export declare const StatusIcon: import("react").ForwardRefExoticComponent<StatusIconProps & import("react").RefAttributes<HTMLElement | SVGSVGElement>>;
 export declare const MoreHorizontal: import("react").ForwardRefExoticComponent<Omit<BaseProps<"svg">, "children"> & import("react").RefAttributes<HTMLElement | SVGSVGElement>>;
 export declare const ChevronDown: import("react").ForwardRefExoticComponent<Omit<BaseProps<"svg">, "children"> & import("react").RefAttributes<HTMLElement | SVGSVGElement>>;
+export declare const ChevronRight: import("react").ForwardRefExoticComponent<Omit<BaseProps<"svg">, "children"> & import("react").RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/~utils.icons.js

@@ -47,9 +47,13 @@ const ChevronDown = forwardRef((props, forwardedRef) => {
     }
   );
 });
+const ChevronRight = createIconFromPath(
+  "M6.146 4.146a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 1 1-.708-.707L9.293 8 6.146 4.854a.5.5 0 0 1 0-.708Z"
+);
 export {
   Checkmark,
   ChevronDown,
+  ChevronRight,
   Dismiss,
   MoreHorizontal,
   StatusIcon

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stratakit/structures",
   "type": "module",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "license": "MIT",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -114,22 +114,22 @@
   ],
   "dependencies": {
     "@ariakit/react": "^0.4.18",
-    "@stratakit/bricks": "^0.4.2",
+    "@stratakit/bricks": "^0.4.4",
     "classnames": "^2.5.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@types/node": "^22.18.0",
-    "@types/react": "^19.1.12",
+    "@types/node": "^22.18.3",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "esbuild": "^0.25.9",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "typescript": "~5.9.2",
-    "@stratakit/foundations": "0.3.2"
+    "@stratakit/foundations": "0.3.4"
   },
   "peerDependencies": {
-    "@stratakit/foundations": "^0.3.2",
+    "@stratakit/foundations": "^0.3.4",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },