@stratakit/structures 0.2.4 → 0.3.1

package/dist/DEV/TreeItem.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CompositeItem } from "@ariakit/react/composite";
 import { PopoverProvider } from "@ariakit/react/popover";
@@ -19,6 +19,7 @@ import { ChevronDown, MoreHorizontal, StatusIcon } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
 import * as DropdownMenu from "./DropdownMenu.js";
 const TreeItemErrorContext = React.createContext(void 0);
+const TreeItemInlineActionsContext = React.createContext(void 0);
 const TreeItemActionsContext = React.createContext(void 0);
 const TreeItemDecorationsContext = React.createContext(void 0);
 const TreeItemIconContext = React.createContext(void 0);
@@ -33,9 +34,6 @@ const TreeItemDescriptionContext = React.createContext(void 0);
 const TreeItemDescriptionIdContext = React.createContext(
   void 0
 );
-const TreeItemInlineActionsContext = React.createContext(void 0);
-const TreeItemOverflowActionsContext = React.createContext(void 0);
-const TreeItemHasOverflowActionsContext = React.createContext(false);
 const TreeItem = React.memo(
   forwardRef((props, forwardedRef) => {
     const {
@@ -47,6 +45,7 @@ const TreeItem = React.memo(
       unstable_decorations: _unstable_decorations,
       label: _label,
       description: _description,
+      inlineActions: _inlineActions,
       actions: _actions,
       error: _error,
       onClick: onClickProp,
@@ -99,6 +98,7 @@ const TreeItem = React.memo(
 DEV: TreeItem.displayName = "Tree.Item";
 function TreeItemRootProvider(props) {
   const {
+    inlineActions,
     actions,
     label,
     description,
@@ -111,19 +111,25 @@ function TreeItemRootProvider(props) {
   const decorationId = React.useId();
   const icon = error ? /* @__PURE__ */ jsx(StatusIcon, { tone: "attention" }) : iconProp;
   const hasDecoration = icon || decorations;
-  return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
-    TreeItemDecorationIdContext.Provider,
+  return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inlineActions, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
+    TreeItemDisplayActionsMenuContext.Provider,
     {
-      value: hasDecoration ? decorationId : void 0,
-      children: /* @__PURE__ */ jsx(TreeItemDecorationsContext.Provider, { value: decorations, children: /* @__PURE__ */ jsx(TreeItemIconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx(TreeItemLabelIdContext.Provider, { value: labelId, children: /* @__PURE__ */ jsx(TreeItemLabelContext.Provider, { value: label, children: /* @__PURE__ */ jsx(TreeItemDescriptionContext.Provider, { value: description, children: /* @__PURE__ */ jsx(
-        TreeItemDescriptionIdContext.Provider,
+      value: actions ? actions.length > 0 : false,
+      children: /* @__PURE__ */ jsx(
+        TreeItemDecorationIdContext.Provider,
         {
-          value: description ? descriptionId : void 0,
-          children: props.children
+          value: hasDecoration ? decorationId : void 0,
+          children: /* @__PURE__ */ jsx(TreeItemDecorationsContext.Provider, { value: decorations, children: /* @__PURE__ */ jsx(TreeItemIconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx(TreeItemLabelIdContext.Provider, { value: labelId, children: /* @__PURE__ */ jsx(TreeItemLabelContext.Provider, { value: label, children: /* @__PURE__ */ jsx(TreeItemDescriptionContext.Provider, { value: description, children: /* @__PURE__ */ jsx(
+            TreeItemDescriptionIdContext.Provider,
+            {
+              value: description ? descriptionId : void 0,
+              children: props.children
+            }
+          ) }) }) }) }) })
         }
-      ) }) }) }) }) })
+      )
     }
-  ) }) });
+  ) }) }) });
 }
 DEV: TreeItemRootProvider.displayName = "TreeItemRootProvider";
 const TreeItemRoot = React.memo(
@@ -178,9 +184,29 @@ const TreeItemRoot = React.memo(
   })
 );
 DEV: TreeItemRoot.displayName = "TreeItemRoot";
+function useRenderActions() {
+  const ref = React.useRef(null);
+  const [renderActions, setRenderActions] = React.useState(false);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el || renderActions) return;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+      React.startTransition(() => {
+        setRenderActions(true);
+      });
+    });
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, [renderActions]);
+  return [ref, renderActions];
+}
 const TreeItemNode = React.memo((props) => {
   const { expanded, selected, onExpanderClick } = props;
   const error = React.useContext(TreeItemErrorContext);
+  const [ref, renderActions] = useRenderActions();
   return /* @__PURE__ */ jsxs(
     ListItem.Root,
     {
@@ -189,11 +215,12 @@ const TreeItemNode = React.memo((props) => {
       "data-kiwi-error": error ? true : void 0,
       className: "\u{1F95D}-tree-item-node",
       role: void 0,
+      ref,
       children: [
         /* @__PURE__ */ jsx(TreeItemDecorations, { onExpanderClick }),
         /* @__PURE__ */ jsx(TreeItemContent, {}),
         /* @__PURE__ */ jsx(TreeItemDescription, {}),
-        /* @__PURE__ */ jsx(TreeItemActions, {})
+        renderActions && /* @__PURE__ */ jsx(TreeItemActions, {})
       ]
     }
   );
@@ -235,7 +262,7 @@ const TreeItemDescription = React.memo(() => {
 DEV: TreeItemDescription.displayName = "TreeItemDescription";
 const TreeItemActions = React.memo(
   forwardRef((props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(TreeItemActionsProvider, { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       ListItem.Decoration,
       {
         ...props,
@@ -246,90 +273,74 @@ const TreeItemActions = React.memo(
         ),
         className: cx("\u{1F95D}-tree-item-actions-container", props.className),
         ref: forwardedRef,
-        render: /* @__PURE__ */ jsxs(Toolbar, { focusLoop: false, children: [
-          /* @__PURE__ */ jsx(TreeItemInlineActions, {}),
-          /* @__PURE__ */ jsx(TreeItemActionsOverflowMenu, {})
-        ] })
+        render: /* @__PURE__ */ jsx(Toolbar, { focusLoop: false }),
+        children: [
+          /* @__PURE__ */ jsx(TreeItemInlineActionsRenderer, {}),
+          /* @__PURE__ */ jsx(TreeItemActionMenu, {})
+        ]
       }
-    ) });
+    );
   })
 );
 DEV: TreeItemActions.displayName = "TreeItemActions";
-function TreeItemActionsProvider(props) {
-  const actionsProp = React.useContext(TreeItemActionsContext);
-  const error = React.useContext(TreeItemErrorContext);
-  const actionsLimit = error ? 2 : 3;
-  const { inline, overflow } = React.useMemo(() => {
-    const actions = React.Children.toArray(actionsProp).filter(Boolean);
-    const inline2 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      actions.slice(0, actionsLimit - 1),
-      actions.length === actionsLimit ? actions[actionsLimit - 1] : null
-    ] });
-    const overflow2 = actions.length > actionsLimit ? actions.slice(actionsLimit - 1) : void 0;
-    return { inline: inline2, overflow: overflow2 };
-  }, [actionsProp, actionsLimit]);
-  return /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inline, children: /* @__PURE__ */ jsx(TreeItemOverflowActionsContext.Provider, { value: overflow, children: /* @__PURE__ */ jsx(TreeItemHasOverflowActionsContext.Provider, { value: !!overflow, children: props.children }) }) });
+function TreeItemInlineActionsRenderer() {
+  const actions = React.useContext(TreeItemInlineActionsContext) ?? [];
+  const actionsToDisplay = actions.slice(0, 2);
+  return actionsToDisplay;
 }
-DEV: TreeItemActionsProvider.displayName = "TreeItemActionsProvider";
-function TreeItemInlineActions() {
-  const actions = React.useContext(TreeItemInlineActionsContext);
-  return actions;
-}
-DEV: TreeItemInlineActions.displayName = "TreeItemInlineActions";
+DEV: TreeItemInlineActionsRenderer.displayName = "TreeItemInlineActionsRenderer";
 const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
-const TreeItemActionsOverflowMenuContext = React.createContext(false);
-function TreeItemActionsOverflowMenu() {
-  const overflow = React.useContext(TreeItemHasOverflowActionsContext);
-  const [open, _setOpen] = React.useState(false);
-  const isArrowKeyPressed = React.useRef(false);
-  const setOpen = React.useCallback((value) => {
-    if (value && !isArrowKeyPressed.current) {
-      _setOpen(true);
-    } else {
-      _setOpen(false);
-    }
-  }, []);
-  if (!overflow) return null;
-  return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, setOpen, children: [
-    /* @__PURE__ */ jsx(
-      DropdownMenu.Button,
-      {
-        onKeyDown: (e) => {
-          if (arrowKeys.includes(e.key)) {
-            isArrowKeyPressed.current = true;
-          }
-          queueMicrotask(() => {
-            isArrowKeyPressed.current = false;
-          });
-        },
-        render: /* @__PURE__ */ jsx(TreeItemAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+const TreeItemActionsMenuContext = React.createContext(false);
+const TreeItemDisplayActionsMenuContext = React.createContext(false);
+const TreeItemActionMenu = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const [open, _setOpen] = React.useState(false);
+    const isArrowKeyPressed = React.useRef(false);
+    const displayMenu = React.useContext(TreeItemDisplayActionsMenuContext);
+    const setOpen = React.useCallback((value) => {
+      if (value && !isArrowKeyPressed.current) {
+        _setOpen(true);
+      } else {
+        _setOpen(false);
       }
-    ),
-    /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContent, {}) })
-  ] }) });
+    }, []);
+    if (!displayMenu) return null;
+    return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, setOpen, 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
+        }
+      ),
+      /* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})
+    ] }) });
+  })
+);
+DEV: TreeItemActionMenu.displayName = "TreeItemActionMenu";
+function TreeItemMenuActionsContent() {
+  return /* @__PURE__ */ jsx(TreeItemActionsMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { children: /* @__PURE__ */ jsx(TreeItemActionsRenderer, {}) }) });
 }
-DEV: TreeItemActionsOverflowMenu.displayName = "TreeItemActionsOverflowMenu";
-function TreeItemActionsOverflowMenuContent() {
-  const actions = React.useContext(TreeItemOverflowActionsContext);
-  return /* @__PURE__ */ jsx(DropdownMenu.Content, { children: actions });
+DEV: TreeItemMenuActionsContent.displayName = "TreeItemMenuActionsContent";
+function TreeItemActionsRenderer() {
+  const actions = React.useContext(TreeItemActionsContext) ?? [];
+  return actions;
 }
-DEV: TreeItemActionsOverflowMenu.displayName = "TreeItemActionsOverflowMenu";
+DEV: TreeItemActionsRenderer.displayName = "TreeItemActionsRenderer";
 const TreeItemAction = React.memo(
   forwardRef((props, forwardedRef) => {
-    const error = React.useContext(TreeItemErrorContext);
-    const {
-      visible = error ? true : void 0,
-      // visible by default during error state
-      label,
-      icon,
-      dot,
-      ...rest
-    } = props;
-    if (React.useContext(TreeItemActionsOverflowMenuContext)) {
-      DEV: {
-        if (visible !== void 0)
-          console.warn("overflowing actions should not use `visible` prop");
-      }
+    const { label, icon, dot, ...rest } = props;
+    const actionsMenuContext = React.useContext(TreeItemActionsMenuContext);
+    if (actionsMenuContext) {
       return /* @__PURE__ */ jsx(
         DropdownMenu.Item,
         {
@@ -341,6 +352,23 @@ const TreeItemAction = React.memo(
         }
       );
     }
+    return /* @__PURE__ */ jsx(TreeItemInlineAction, { ...props, ref: forwardedRef });
+  })
+);
+DEV: TreeItemAction.displayName = "Tree.ItemAction";
+const TreeItemInlineAction = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const error = React.useContext(TreeItemErrorContext);
+    const generatedId = React.useId();
+    const {
+      id = generatedId,
+      visible = error ? true : void 0,
+      // visible by default during error state
+      label,
+      icon,
+      dot,
+      ...rest
+    } = props;
     DEV: {
       if (!icon)
         throw new Error(
@@ -348,27 +376,24 @@ const TreeItemAction = React.memo(
         );
     }
     return /* @__PURE__ */ jsx(
-      ToolbarItem,
+      IconButton,
       {
-        render: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            label,
-            icon,
-            inert: visible === false ? "true" : void 0,
-            ...rest,
-            dot,
-            variant: "ghost",
-            className: cx("\u{1F95D}-tree-item-action", props.className),
-            "data-kiwi-visible": visible,
-            ref: forwardedRef
-          }
-        )
+        id,
+        label,
+        icon,
+        inert: visible === false ? "true" : void 0,
+        ...rest,
+        render: /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }),
+        dot,
+        variant: "ghost",
+        className: cx("\u{1F95D}-tree-item-action", props.className),
+        "data-kiwi-visible": visible,
+        ref: forwardedRef
       }
     );
   })
 );
-DEV: TreeItemAction.displayName = "TreeItem.Action";
+DEV: TreeItemInlineAction.displayName = "TreeItemInlineAction";
 const TreeItemExpander = forwardRef(
   (props, forwardedRef) => {
     const descriptionId = React.useContext(TreeItemDescriptionIdContext);

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{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-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(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--active,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-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;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where(:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@media (forced-colors:active){.🥝-list-item:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝-accordion-item{--🥝accordion-item-gap:12px;--🥝accordion-item-padding:12px}@layer base{.🥝-accordion-item{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:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];display:grid}}@layer states{.🥝-accordion-item:where([data-kiwi-open=true]){--🥝chevron-down-rotate:-.5turn}}@layer base{.🥝-accordion-item-header{padding:var(--🥝accordion-item-padding);grid-area:header/decoration-before-start/header/decoration-after-end;grid-template-columns:inherit;align-items:center;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝-accordion-item-header{grid-template-columns:subgrid}}}@layer base{.🥝-accordion-item-marker{pointer-events:none;grid-area:1/decoration-after;margin-inline-start:var(--🥝accordion-item-gap);margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}}@layer states{@media (any-hover:hover){:where(.🥝-accordion-item-header:hover) .🥝-accordion-item-marker{--🌀button-state:var(--🌀button-state--hover)}}}@layer base{.🥝-accordion-item-label.🥝-text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝-accordion-item-button{cursor:pointer;--🥝focus-outline-offset:-4px;border-radius:12px;grid-column:content}.🥝-accordion-item-button:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝-accordion-item-button:focus-visible{outline:0}.🥝-accordion-item-button:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝-accordion-item-content{text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content;padding-block-end:var(--🥝accordion-item-padding)}}@layer base{.🥝-accordion-item-decoration{grid-column:decoration-before;margin-inline-end:var(--🥝accordion-item-gap)}}@layer base{.🥝-accordion-item-heading{text-box:cap alphabetic;grid-column:content;margin-block:0}}@layer base{.🥝-banner{background-color:var(--🥝banner-color-background);border:1px solid var(--🥝banner-color-border);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;padding:12px;display:grid}}@layer modifiers{.🥝-banner:where([data-kiwi-variant=outline]){--🥝banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝-banner:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝-banner:where([data-kiwi-tone=info]){--🥝banner-color-border:var(--stratakit-color-border-info-base);--🥝icon-color:var(--stratakit-color-icon-info-base)}.🥝-banner:where([data-kiwi-tone=positive]){--🥝banner-color-border:var(--stratakit-color-border-positive-base);--🥝icon-color:var(--stratakit-color-icon-positive-base)}.🥝-banner:where([data-kiwi-tone=attention]){--🥝banner-color-border:var(--stratakit-color-border-attention-base);--🥝icon-color:var(--stratakit-color-icon-attention-base)}.🥝-banner:where([data-kiwi-tone=critical]){--🥝banner-color-border:var(--stratakit-color-border-critical-base);--🥝icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝-banner-icon{grid-area:1/start;align-self:start;margin-inline-end:8px}}@layer base{.🥝-banner-label{grid-column:content;align-self:start;margin-block-end:4px;font-weight:500}}@layer base{.🥝-banner-message{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝-banner-actions{flex-wrap:wrap;grid-column:content;justify-self:start;align-items:baseline;gap:8px;margin-block-start:12px;display:flex}}@layer base{.🥝-banner-dismiss-button{grid-area:1/end;align-self:start;margin-inline-start:12px}}@media (forced-colors:active){.🥝-banner{--🥝icon-color:CanvasText}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;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-kiwi-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝-chip-label:where(button){border-radius:inherit}.🥝-chip-label:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer base{.🥝-dropdown-menu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--stratakit-shadow-surface-xl);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-item-dot.🥝-dot{align-self:center}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-error-region{z-index:1;position:relative}}@layer states{.🥝-error-region:where([data-kiwi-expanded=true]){--🥝chevron-down-rotate:-.5turn;--🥝error-region-header-border-end-radius:0}.🥝-error-region:where([data-kiwi-visible=true]){block-size:2.625rem;padding-block:4px;padding-inline:4px}.🥝-error-region:where([data-kiwi-visible=false]){--🥝error-region-container-display:none}}@layer base{.🥝-error-region-container{isolation:isolate;display:var(--🥝error-region-container-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){.🥝-error-region-container:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝-error-region-header{border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));flex-wrap:wrap;min-block-size:2rem;padding-inline:8px 4px;font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝-error-region-icon{--🥝icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝-error-region-label{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝-error-region-dialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝-error-region-dialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where(:not([data-enter])){max-block-size:0}}.🥝-error-region-dialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝-error-region-dialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝-error-region-items{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝-error-region-item{flex-direction:column;padding-block:12px;padding-inline:calc(12px + 1rem) 4px;display:flex}.🥝-error-region-item:where(:not(:nth-child(1 of .🥝-error-region-item))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝-error-region-item-actions{margin-block-start:8px}}@layer base{.🥝-table:where(table){table-layout:fixed;inline-size:100%}}@layer base{.🥝-table-header{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝-table-row:where([role=row]){display:flex}}@layer base{.🥝-table-caption,.🥝-table-cell{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem .75rem}:is(.🥝-table-caption,.🥝-table-cell):where(th,td){block-size:3rem}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--stratakit-color-bg-page-base))var(--🌀table-cell-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-\%)));border-block-end:1px solid var(--stratakit-color-border-neutral-muted);min-inline-size:4rem}.🥝-table-cell:where(:not(th,td)){flex-grow:1;flex-basis:4rem;column-gap:.5rem}.🥝-table-cell:where(th){font-weight:inherit}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:8px;--🥝tab-active-stripe-size:2px;--🥝tab-padding-inline:4px;gap:8px;display:flex;position:relative}@supports (position-anchor:--foo){.🥝-tab-list:after{content:"";position-anchor:--🥝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);position:absolute;inset-block-end:calc(anchor(end) - var(--🥝tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝tab-padding-inline))}@media (prefers-reduced-motion:no-preference){.🥝-tab-list:after{transition:inset-inline-start .15s ease-in-out,inline-size .15s ease-in-out}}}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}.🥝-tab-list:where([data-kiwi-tone=neutral]){--🥝tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-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-bg);block-size:1.25rem;padding-inline:var(--🥝tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;align-items:center;gap: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(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-bg: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(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-bg: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:--🥝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{.🥝-tab-panel{--🥝focus-outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝-tab-list,.🥝-tab{--🥝tab-active-stripe-color:CanvasText}.🥝-tab{--🥝tab-color:CanvasText}.🥝-tab:where([aria-selected=true]){forced-color-adjust:none;--🥝tab-bg:SelectedItem;--🥝tab-color:SelectedItemText}.🥝-tab:where(:disabled,[aria-disabled=true]){--🥝tab-color:GrayText}}@layer base{.🥝-toolbar{background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);border-radius:8px;gap:4px;padding:4px;display:inline-flex}}@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{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item: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){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-action-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;--🥝list-item-color:var(--🥝tree-item-color);padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]){--🥝icon-color:var(--stratakit-color-icon-attention-base);--🥝tree-item-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}@media (any-hover:hover){.🥝-tree-item-node.🥝-list-item:where(:hover[data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active-hover)}}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝chevron-down-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🥝tree-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝tree-item-actions-container-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions-container.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions-container.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-actions-container-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@media (forced-colors:active){.🥝-tree-item-node.🥝-list-item{--🥝list-item-background-color:Canvas;--🥝tree-item-color:CanvasText}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true],[data-kiwi-selected=true]){forced-color-adjust:none}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-content,.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-decoration{color:marktext;background-color:mark}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🥝list-item-background-color:SelectedItem;--🥝tree-item-color:SelectedItemText}}}`;
+var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-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(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--active,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-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;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where(:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@media (forced-colors:active){.🥝-list-item:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝-accordion-item{--🥝accordion-item-gap:12px;--🥝accordion-item-padding:12px}@layer base{.🥝-accordion-item{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{.🥝-accordion-item:where([data-kiwi-open=true]){--🥝chevron-down-rotate:-.5turn}}@layer base{.🥝-accordion-item-header{background-color:var(--🥝accordion-item-header-background-color);padding:var(--🥝accordion-item-padding);--🥝accordion-item-header-background-color:var(--🌀accordion-item-header-state--default,transparent)var(--🌀accordion-item-header-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀accordion-item-header-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){.🥝-accordion-item-header{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝-accordion-item-header:where(:hover){--🌀accordion-item-header-state:var(--🌀accordion-item-header-state--hover)}}.🥝-accordion-item-header:where(:active){--🌀accordion-item-header-state:var(--🌀accordion-item-header-state--pressed)}}@layer base.🌀{.🥝-accordion-item-header{--🌀accordion-item-header-state:var(--🌀accordion-item-header-state--default);--🌀accordion-item-header-state--default:var(--🌀accordion-item-header-state, );--🌀accordion-item-header-state--hover:var(--🌀accordion-item-header-state, );--🌀accordion-item-header-state--pressed:var(--🌀accordion-item-header-state, )}}@layer base{.🥝-accordion-item-marker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝ghost-inline-offset));margin-inline-end:var(--🥝accordion-item-gap)}:where(.🥝-accordion-item-heading,.🥝-accordion-item-button)~.🥝-accordion-item-marker{grid-column:marker-after;margin-inline-start:var(--🥝accordion-item-gap);margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}}@layer base{.🥝-accordion-item-label.🥝-text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝-accordion-item-button{cursor:pointer;--🥝focus-outline-offset:-4px;border-radius:12px;grid-column:header-content}.🥝-accordion-item-button:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝-accordion-item-button:focus-visible{outline:0}.🥝-accordion-item-button:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝-accordion-item-content{padding-block:var(--🥝accordion-item-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝-accordion-item-decoration{grid-column:decoration-before;align-items:center;gap:.25rem;margin-inline-end:var(--🥝accordion-item-gap);display:flex}:where(.🥝-accordion-item-heading,.🥝-accordion-item-button)~.🥝-accordion-item-decoration{grid-column:decoration-after;margin-inline-start:var(--🥝accordion-item-gap);margin-inline-end:0}}@layer base{.🥝-accordion-item-heading{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);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;padding:12px;display:grid}}@layer modifiers{.🥝-banner:where([data-kiwi-variant=outline]){--🥝banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝-banner:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝-banner:where([data-kiwi-tone=info]){--🥝banner-color-border:var(--stratakit-color-border-info-base);--🥝icon-color:var(--stratakit-color-icon-info-base)}.🥝-banner:where([data-kiwi-tone=positive]){--🥝banner-color-border:var(--stratakit-color-border-positive-base);--🥝icon-color:var(--stratakit-color-icon-positive-base)}.🥝-banner:where([data-kiwi-tone=attention]){--🥝banner-color-border:var(--stratakit-color-border-attention-base);--🥝icon-color:var(--stratakit-color-icon-attention-base)}.🥝-banner:where([data-kiwi-tone=critical]){--🥝banner-color-border:var(--stratakit-color-border-critical-base);--🥝icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝-banner-icon{grid-area:1/start;align-self:start;margin-inline-end:8px}}@layer base{.🥝-banner-label{grid-column:content;align-self:start;margin-block-end:4px;font-weight:500}}@layer base{.🥝-banner-message{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝-banner-actions{flex-wrap:wrap;grid-column:content;justify-self:start;align-items:baseline;gap:8px;margin-block-start:12px;display:flex}}@layer base{.🥝-banner-dismiss-button{grid-area:1/end;align-self:start;margin-inline-start:12px}}@media (forced-colors:active){.🥝-banner{--🥝icon-color:CanvasText}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;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-kiwi-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝-chip-label:where(button){border-radius:inherit}.🥝-chip-label:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer base{.🥝-dropdown-menu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-item-dot.🥝-dot{align-self:center}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-error-region{z-index:1;position:relative}}@layer states{.🥝-error-region:where([data-kiwi-expanded=true]){--🥝chevron-down-rotate:-.5turn;--🥝error-region-header-border-end-radius:0}.🥝-error-region:where([data-kiwi-visible=true]){block-size:2.625rem;padding-block:4px;padding-inline:4px}.🥝-error-region:where([data-kiwi-visible=false]){--🥝error-region-container-display:none}}@layer base{.🥝-error-region-container{isolation:isolate;display:var(--🥝error-region-container-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){.🥝-error-region-container:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝-error-region-header{border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));flex-wrap:wrap;min-block-size:2rem;padding-inline:8px 4px;font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝-error-region-icon{--🥝icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝-error-region-label{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝-error-region-dialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝-error-region-dialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where(:not([data-enter])){max-block-size:0}}.🥝-error-region-dialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝-error-region-dialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝-error-region-items{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝-error-region-item{flex-direction:column;padding-block:12px;padding-inline:calc(12px + 1rem) 4px;display:flex}.🥝-error-region-item:where(:not(:nth-child(1 of .🥝-error-region-item))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝-error-region-item-actions{margin-block-start:8px}}@layer base{.🥝-table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝-table-header{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝-table-row:where([role=row]){display:flex}}@layer base{.🥝-table-caption,.🥝-table-cell{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem .75rem}:is(.🥝-table-caption,.🥝-table-cell):where(th,td){block-size:3rem}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--stratakit-color-bg-page-base))var(--🌀table-cell-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(--🌀table-cell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀table-cell-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-\%)));--🥝table-cell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀table-cell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀table-cell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀table-cell-state--active,var(--🥝table-cell-border-color--active))var(--🌀table-cell-state--active-hover,var(--🥝table-cell-border-color--active));min-inline-size:4rem;position:relative}.🥝-table-cell:where(:not(th,td)){flex-grow:1;flex-basis:4rem;column-gap:.5rem}.🥝-table-cell:where(th){font-weight:inherit}.🥝-table-cell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀table-cell-state--default,transparent)var(--🌀table-cell-state--hover,transparent)var(--🌀table-cell-state--active,var(--🥝table-cell-border-color--active))var(--🌀table-cell-state--active-hover,var(--🥝table-cell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}:where(.🥝-table-row:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--active)}@media (any-hover:hover){:where(.🥝-table-row:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--active-hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, );--🌀table-cell-state--active:var(--🌀table-cell-state, );--🌀table-cell-state--active-hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:8px;--🥝tab-active-stripe-size:2px;--🥝tab-padding-inline:4px;gap:8px;display:flex;position:relative}@supports (position-anchor:--foo){.🥝-tab-list:after{content:"";position-anchor:--🥝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{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}.🥝-tab-list:where([data-kiwi-tone=neutral]){--🥝tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-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;border:none;border-radius:4px;align-items:center;gap: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(.🥝-tab-list[data-kiwi-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(.🥝-tab-list[data-kiwi-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:--🥝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{.🥝-tab-panel{--🥝focus-outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝-tab-list,.🥝-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{background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);border-radius:8px;gap:4px;padding:4px;display:inline-flex}}@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{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item: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){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-action-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;--🥝list-item-color:var(--🥝tree-item-color);padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]){--🥝icon-color:var(--stratakit-color-icon-attention-base);--🥝tree-item-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}@media (any-hover:hover){.🥝-tree-item-node.🥝-list-item:where(:hover[data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active-hover)}}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝chevron-down-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🥝tree-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝tree-item-actions-container-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions-container.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions-container.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-actions-container-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@media (forced-colors:active){.🥝-tree-item-node.🥝-list-item{--🥝list-item-background-color:Canvas;--🥝tree-item-color:CanvasText}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true],[data-kiwi-selected=true]){forced-color-adjust:none}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-content,.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-decoration{color:marktext;background-color:mark}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🥝list-item-background-color:SelectedItem;--🥝tree-item-color:SelectedItemText}}}`;
 
 // src/styles.css.ts
 var styles_css_default = styles_default;

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

@@ -17,10 +17,10 @@ const statusIcons = {
     "M7.25 1.855a1.5 1.5 0 0 1 1.5 0l4.196 2.423a1.5 1.5 0 0 1 .75 1.299v4.846a1.5 1.5 0 0 1-.75 1.298L8.75 14.144a1.5 1.5 0 0 1-1.5 0l-4.196-2.423a1.5 1.5 0 0 1-.75-1.298V5.577a1.5 1.5 0 0 1 .75-1.299L7.25 1.855Zm1 .866a.5.5 0 0 0-.5 0L3.554 5.144a.5.5 0 0 0-.25.433v4.846a.5.5 0 0 0 .25.432l4.196 2.423a.5.5 0 0 0 .5 0l4.196-2.423a.5.5 0 0 0 .25-.432V5.577a.5.5 0 0 0-.25-.433L8.25 2.721ZM9.85 5.7a.501.501 0 0 1 .8.6l-3 4a.502.502 0 0 1-.754.053l-1.5-1.5-.064-.078a.5.5 0 0 1 .693-.693l.079.064 1.091 1.092L9.85 5.7Z"
   ),
   attention: createIconFromPath(
-    "M6.94 2.354a1.5 1.5 0 0 1 2.121 0l4.586 4.586a1.5 1.5 0 0 1 0 2.12l-4.586 4.587a1.5 1.5 0 0 1-2.121 0L2.354 9.06a1.5 1.5 0 0 1 0-2.121L6.94 2.354Zm1.414.707a.5.5 0 0 0-.707 0L3.061 7.647a.5.5 0 0 0 0 .707l4.586 4.586a.5.5 0 0 0 .707 0l4.586-4.586a.5.5 0 0 0 0-.707L8.354 3.06ZM8 9.5A.75.75 0 1 1 8 11a.75.75 0 0 1 0-1.5ZM8 5a.5.5 0 0 1 .5.5V8a.5.5 0 0 1-1 0V5.5A.5.5 0 0 1 8 5Z"
+    "M8 12.75a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5ZM6.68 2.885c.568-1.047 2.072-1.047 2.64 0l4.82 8.9A1.5 1.5 0 0 1 12.82 14H10.5v-1h2.321a.5.5 0 0 0 .44-.738l-4.822-8.9a.5.5 0 0 0-.879 0l-4.821 8.9a.5.5 0 0 0 .44.738h2.32v1H3.18a1.5 1.5 0 0 1-1.319-2.215l4.82-8.9ZM8 6.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5Z"
   ),
   critical: createIconFromPath(
-    "M7.25 1.855a1.5 1.5 0 0 1 1.5 0l4.196 2.423a1.5 1.5 0 0 1 .75 1.299v4.846a1.5 1.5 0 0 1-.75 1.298L8.75 14.144a1.5 1.5 0 0 1-1.5 0l-4.196-2.423a1.5 1.5 0 0 1-.75-1.298V5.577a1.5 1.5 0 0 1 .75-1.299L7.25 1.855Zm1 .866a.5.5 0 0 0-.5 0L3.554 5.144a.5.5 0 0 0-.25.433v4.846a.5.5 0 0 0 .25.432l4.196 2.423a.5.5 0 0 0 .5 0l4.196-2.423a.5.5 0 0 0 .25-.432V5.577a.5.5 0 0 0-.25-.433L8.25 2.721ZM8 9.5A.75.75 0 1 1 8 11a.75.75 0 0 1 0-1.5ZM8 5a.5.5 0 0 1 .5.5V8a.5.5 0 0 1-1 0V5.5A.5.5 0 0 1 8 5Z"
+    "M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM8 10a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-5.5a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"
   ),
   info: createIconFromPath(
     "M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm0 4a.5.5 0 0 1 .5.5v3.5h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-3h-1a.5.5 0 0 1 0-1H8Zm-.125-2.25a.625.625 0 1 1 0 1.25.625.625 0 0 1 0-1.25Z"

package/dist/DropdownMenu.js

@@ -47,7 +47,10 @@ function DropdownMenuRoot(props) {
 }
 const DropdownMenuContent = forwardRef(
   (props, forwardedRef) => {
-    const popover = usePopoverApi(useMenuContext());
+    const context = useMenuContext();
+    const open = useStoreState(context, "open");
+    const popoverElement = useStoreState(context, "popoverElement");
+    const popoverProps = usePopoverApi({ element: popoverElement, open });
     return /* @__PURE__ */ jsx(
       Menu,
       {
@@ -55,8 +58,8 @@ const DropdownMenuContent = forwardRef(
         unmountOnHide: true,
         ...props,
         gutter: 4,
-        style: { ...popover.style, ...props.style },
-        wrapperProps: popover.wrapperProps,
+        style: { ...popoverProps.style, ...props.style },
+        wrapperProps: { popover: popoverProps.popover },
         className: cx("\u{1F95D}-dropdown-menu", props.className),
         ref: forwardedRef
       }

package/dist/Table.d.ts

@@ -134,6 +134,18 @@ interface TableRowProps extends BaseProps<"div"> {
  *		<Table.Cell>Cell 1.2</Table.Cell>
  *	</Table.Row>
  * ```
+ *
+ * Rows that contain checked checkboxes are considered selected.
+ * The `Checkbox` component can be rendered to add selection functionality for the table rows.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Row>
+ *   <Table.Cell><Checkbox /><Table.Cell>
+ *   <Table.Cell>Cell 1.1</Table.Cell>
+ *   <Table.Cell>Cell 1.2</Table.Cell>
+ * </Table.Row
+ * ```
  */
 declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
 interface TableCaptionProps extends BaseProps<"div"> {

package/dist/Tabs.d.ts

@@ -52,7 +52,14 @@ interface TabListProps extends BaseProps {
  * ```
  */
 declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
-interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id"> {
+interface TabProps extends Omit<FocusableProps<"button">, "id"> {
+    /**
+     * The globally unique id of the tab. This will be used to identify the tab
+     * and connect it to the corresponding `Tabs.TabPanel` via the `tabId`.
+     *
+     * The `selectedId` state of `Tabs.Root` will also be based on this id.
+     */
+    id: string;
 }
 /**
  * An individual tab button that switches the selected tab panel when clicked.
@@ -76,7 +83,7 @@ interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id">
  * ```
  */
 declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
-interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
+interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "unmountOnHide" | "focusable">, Required<Pick<AkTab.TabPanelProps, "tabId">> {
 }
 /**
  * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Root`.

package/dist/Tabs.js

@@ -1,7 +1,14 @@
 import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react/store";
 import * as AkTab from "@ariakit/react/tab";
-import { forwardRef } from "@stratakit/foundations/secret-internals";
+import {
+  forwardRef,
+  isBrowser,
+  useUnreactiveCallback
+} from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
+const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
 function Tabs(props) {
   const {
     defaultSelectedId,
@@ -10,12 +17,41 @@ function Tabs(props) {
     selectOnMove,
     children
   } = props;
+  const store = AkTab.useTabStore({ defaultSelectedId });
+  const tablist = useStoreState(store, "baseElement");
+  const selectedIdFromStore = useStoreState(store, "selectedId");
+  const flipAnimateStripe = (newSelectedId) => {
+    if (!supportsAnchorPositioning) return;
+    const rootNode = tablist?.getRootNode();
+    if (!rootNode || !selectedIdFromStore || !newSelectedId) return;
+    const previousTabRect = rootNode.getElementById?.(selectedIdFromStore)?.getBoundingClientRect();
+    const nextTabRect = rootNode.getElementById?.(newSelectedId)?.getBoundingClientRect();
+    if (!previousTabRect || !nextTabRect) return;
+    const deltaX = previousTabRect.left - nextTabRect.left;
+    const deltaWidth = previousTabRect.width / nextTabRect.width;
+    tablist?.animate(
+      [
+        { transform: `translateX(${deltaX}px) scaleX(${deltaWidth})` },
+        { transform: "none" }
+      ],
+      {
+        pseudoElement: "::after",
+        duration: 150,
+        easing: "ease-in-out"
+      }
+    );
+  };
   return /* @__PURE__ */ jsx(
     AkTab.TabProvider,
     {
-      defaultSelectedId,
+      store,
       selectedId,
-      setSelectedId,
+      setSelectedId: useUnreactiveCallback(
+        (newSelectedId) => {
+          if (!prefersReducedMotion()) flipAnimateStripe(newSelectedId);
+          setSelectedId?.(newSelectedId);
+        }
+      ),
       selectOnMove,
       children
     }