@itwin/itwinui-react 5.0.0-alpha.10 → 5.0.0-alpha.11

package/CHANGELOG.md

@@ -0,0 +1,116 @@
+# Changelog
+
+## 5.0.0-alpha.11
+
+- Added `error` prop to `<Tree.Item>`.
+- Implemented fallback strategy for `<Icon>`, so that non-HTTP URLs are fetched at runtime.
+- Added `unstable_htmlSanitizer` prop to `<Root>`.
+- Added `tone="accent"` support to `<Badge>`.
+- Adjusted `DropdownMenu` and `Tooltip` to be portaled by default.
+- Styling changes:
+  - Added shimmer animation to `<Skeleton>`.
+  - Updated `<Spinner>` visuals and animation to match `<ProgressBar>`.
+- Bug fixes:
+  - Fixed styles not unloading when `<Root>` is unmounted.
+  - Fixed `<Anchor>` underline not showing when rendered as a `<button>`.
+  - Fixed `<Tree.ItemAction visible>` affecting the visibility of all actions.
+  - Fixed vertical centering in `<Tab.TabList>`.
+  - Fixed `Tab` active stripe positioning and animation.
+  - Fixed `<Button variant="solid" tone="accent">` icon fill in pressed state.
+
+## 5.0.0-alpha.10
+
+- Added initial `<Skeleton>` component.
+- Added initial `<ProgressBar>` component.
+- Fixed various UX and accessibility issues related to `<Tree.Item>` actions visibility.
+  - Actions no longer get stuck.
+  - Tooltips can now be hovered.
+  - Focus correctly returns to actions after menu closes.
+  - Keyboard events no longer affect the main treeitem.
+- Reduced `<Field>` spacing.
+- Experimental changes in `<Icon>` component's `href` handling.
+
+## 5.0.0-alpha.9
+
+- Added `dot` prop to `<IconButton>` for showing a small "dot" next to the icon.
+- Added `unstable_decorations` prop to `<Tree.Item>` for showing multiple decorations (e.g. icons).
+- **breaking**: Replaced `<DropdownMenu.Item>` children with new `label` prop (see [#423](https://github.com/iTwin/design-system/pull/423)).
+- Added `icon` prop to `<DropdownMenu.Item>` and `<DropdownMenu.CheckboxItem>`.
+- Updated the `shortcuts` prop of `<DropdownMenu.Item>` to recognize predefined "symbols" (e.g. modifier keys).
+- Updated `<Anchor>` and `<Badge>` visuals to match the latest design.
+- Fixed forced-colors mode styling for `DropdownMenu`.
+
+## 5.0.0-alpha.8
+
+- Added `description` prop to `<Tree.Item>` component for showing "sublabels".
+- **breaking**: Updated `<Text>` component to require `variant` prop.
+- (soft breaking) Removed `children` from `<Tree.Item>` prop types.
+- Updated `DropdownMenu` padding.
+
+## 5.0.0-alpha.7
+
+- Added new `<Avatar>` component.
+- Added new `<Badge>` component.
+- Added `alt` prop to `<Icon>` component.
+- Fixed all color tokens to use the correct `oklch` values.
+- Fixed an issue where `<Tree.Item>` was not respecting its `style` prop.
+
+## 5.0.0-alpha.6
+
+- **breaking**: All CSS variables have been renamed to use the `--ids` prefix. See [#369](https://github.com/iTwin/kiwi/pull/369).
+- **breaking**: Some CSS variables were renamed further. See [#368](https://github.com/iTwin/kiwi/pull/368).
+  - Notably, the "surface" backgrounds have been split into two different "page" and "elevation" scales.
+- Background colors have been updated to match the latest design.
+- All styles are now loaded into `@layer itwinui`. The one exception is the CSS reset which remains in `@layer reset`.
+- `<Field>` now respects the order of `<Description>`s when creating associations.
+
+## 5.0.0-alpha.5
+
+- **breaking**: `Tree` API has changed to require flat structure, with explicit ARIA props (see [#300](https://github.com/iTwin/kiwi/pull/300)). `<Tree.Item>` no longer allows passing `children`.
+- **breaking**: `Tree.Item`s `action` prop now requires a list of `<Tree.ItemAction>` components (see [#355](https://github.com/iTwin/kiwi/pull/355) and [#362](https://github.com/iTwin/kiwi/pull/362)).
+- **breaking**: Replaced `<Chip>` children with new `label` prop (see [#349](https://github.com/iTwin/kiwi/pull/349)).
+- Added `<Tree.ItemAction>` component with `visible` prop for more granular control over action visibility.
+- Updated the layout of `<Field>` so that `<Description>` is placed in the best spot according on the label position and control type.
+- `<Field>` now considers the presence of explicit control `id`s when creating associations.
+
+## 5.0.0-alpha.4
+
+- Added `onDismiss` prop and dismiss button to `<Chip>`.
+- Fixed a rare issue where `TextBox` was still editable when `disabled`.
+- Fixed "forced colors" mode styling for `<Button>` and `<IconButton>`.
+- Explicitly set typography styles on `<Root>` to improve compatibility with iTwinUI theme bridge.
+- Updated `DropdownMenu` visuals.
+
+## 5.0.0-alpha.3
+
+- Added `<DropdownMenu.CheckboxItem>` component for rendering menu items with a checkable state.
+- Added `variant` prop to `<Select.HtmlSelect>` component for displaying different visual variants of the component.
+- Updated event handling of `Tree` components to avoid firing `onClick` event of the `<Tree.Item>` component when the expander or one of the actions is clicked.
+- Updated `Tree` components to implement a tree view pattern instead of the previously used nested list approach.
+- Updated size and spacing of `<Tree.Item>`, `<DropdownMenu.Item>` and `<Select>` components.
+- Fixed `<Label>` component alignment with `TextBox` components.
+- Fixed action rendering of `<Tree.Item>` component.
+- Fixed `<Checkbox>` component styling, which caused the mixed checkbox to be displayed as unchecked in the light theme.
+
+## 5.0.0-alpha.2
+
+- Added initial `Tree` component, exposed as `<Tree.Root>` and `<Tree.Item>` subcomponents.
+- Added initial `<Spinner>` component for indicating quick, indeterminate progress.
+- Added `<Description>` component to be used within a `<Field>`.
+- Added initial `<Chip>` component.
+- Added `symbol` prop to `<Kbd>` for displaying predefined symbols.
+- Added `focusable` prop to `<Tabs.TabPanel>` component.
+- Fixed a visual issue where light color-scheme was using dark shadows.
+
+## 5.0.0-alpha.1
+
+- Added `<Text>` component with a `variant` prop to support all text styles from Figma.
+- Added `Select` component built on top of the HTML `<select>` element. Exposed as `<Select.Root>` and `<Select.HtmlSelect>`.
+- Added `shortcuts` prop to `<DropdownMenu.Item>`.
+- Added JSDoc comments to all components for inline IDE hints.
+- Fixed `<Kbd>` component using the wrong font.
+- Fixed some visual issues.
+
+## 5.0.0-alpha.0
+
+Initial release 🥳

package/dist/DEV/bricks/DropdownMenu.js

@@ -45,7 +45,7 @@ const DropdownMenuContent = forwardRef(
     return /* @__PURE__ */ jsx(
       Menu,
       {
-        portal: popover.portal,
+        portal: true,
         unmountOnHide: true,
         ...props,
         gutter: 4,

package/dist/DEV/bricks/Icon.js

@@ -2,10 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
-import { forwardRef } from "./~utils.js";
+import {
+  forwardRef,
+  getOwnerDocument,
+  parseDOM
+} from "./~utils.js";
+import {
+  HtmlSanitizerContext,
+  spriteSheetId,
+  useRootNode
+} from "./Root.internal.js";
+import { useLatestRef, useSafeContext } from "./~hooks.js";
 const Icon = forwardRef((props, forwardedRef) => {
-  const { href, size, alt, ...rest } = props;
+  const { href: hrefProp, size, alt, ...rest } = props;
   const isDecorative = !alt;
+  const hrefBase = useNormalizedHrefBase(hrefProp);
   return /* @__PURE__ */ jsx(
     Role.svg,
     {
@@ -16,20 +27,82 @@ const Icon = forwardRef((props, forwardedRef) => {
       "data-kiwi-size": size,
       className: cx("\u{1F95D}-icon", props.className),
       ref: forwardedRef,
-      children: href ? /* @__PURE__ */ jsx("use", { href: toIconHref(href, size) }) : null
+      children: hrefBase ? /* @__PURE__ */ jsx("use", { href: toIconHref(hrefBase, size) }) : null
     }
   );
 });
 DEV: Icon.displayName = "Icon";
-function toIconHref(href, size) {
-  const separator = href.includes("#") ? "--" : "#";
+function toIconHref(hrefBase, size) {
+  const separator = hrefBase.includes("#") ? "--" : "#";
   const suffix = toIconId(size);
-  return `${href}${separator}${suffix}`;
+  return `${hrefBase}${separator}${suffix}`;
 }
 function toIconId(size) {
   if (size === "large") return "icon-large";
   return "icon";
 }
+function useNormalizedHrefBase(rawHref) {
+  const generatedId = React.useId();
+  const sanitizeHtml = useLatestRef(useSafeContext(HtmlSanitizerContext));
+  const rootNode = useRootNode();
+  const inlineHref = React.useRef(void 0);
+  const getClientSnapshot = () => {
+    const ownerDocument = getOwnerDocument(rootNode);
+    if (!rawHref || !ownerDocument) return void 0;
+    if (isHttpProtocol(rawHref, ownerDocument)) return rawHref;
+    return inlineHref.current;
+  };
+  const subscribe = React.useCallback(
+    (notify) => {
+      const ownerDocument = getOwnerDocument(rootNode);
+      const spriteSheet = ownerDocument?.getElementById(spriteSheetId);
+      if (!rawHref || !ownerDocument || !spriteSheet) return () => {
+      };
+      if (isHttpProtocol(rawHref, ownerDocument)) return () => {
+      };
+      const cache = spriteSheet[Symbol.for("\u{1F95D}")]?.icons;
+      if (!cache) return () => {
+      };
+      const prefix = `\u{1F95D}${generatedId}`;
+      if (cache.has(rawHref)) {
+        inlineHref.current = cache.get(rawHref);
+        notify();
+        return () => {
+        };
+      }
+      const abortController = new AbortController();
+      const { signal } = abortController;
+      (async () => {
+        const response = await fetch(rawHref, { signal });
+        if (!response.ok) throw new Error(`Failed to fetch ${rawHref}`);
+        const fetchedSvgString = sanitizeHtml.current(await response.text());
+        const parsedSvgContent = parseDOM(fetchedSvgString, {
+          ownerDocument
+        });
+        const symbols = parsedSvgContent.querySelectorAll("symbol");
+        for (const symbol of symbols) {
+          symbol.id = `${prefix}--${symbol.id}`;
+          if (ownerDocument.getElementById(symbol.id)) continue;
+          spriteSheet.appendChild(symbol.cloneNode(true));
+        }
+        inlineHref.current = `#${prefix}`;
+        cache.set(rawHref, inlineHref.current);
+        if (!signal.aborted) notify();
+      })();
+      return () => abortController.abort();
+    },
+    [rawHref, rootNode, sanitizeHtml, generatedId]
+  );
+  return React.useSyncExternalStore(
+    subscribe,
+    getClientSnapshot,
+    () => rawHref
+  );
+}
+function isHttpProtocol(url, ownerDocument) {
+  const { protocol } = new URL(url, ownerDocument.baseURI);
+  return ["http:", "https:"].includes(protocol);
+}
 const DisclosureArrow = forwardRef(
   (props, forwardedRef) => {
     const { direction = "down", ...rest } = props;
@@ -116,9 +189,41 @@ const Dismiss = forwardRef(
   }
 );
 DEV: Dismiss.displayName = "Dismiss";
+const StatusWarning = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M8.354 2.06a.5.5 0 0 0-.708 0L2.061 7.647a.5.5 0 0 0 0 .707l5.585 5.586a.5.5 0 0 0 .708 0l5.585-5.586a.5.5 0 0 0 0-.707L8.354 2.061Zm-1.415-.707a1.5 1.5 0 0 1 2.122 0l5.585 5.586a1.5 1.5 0 0 1 0 2.122l-5.585 5.585a1.5 1.5 0 0 1-2.122 0L1.354 9.061a1.5 1.5 0 0 1 0-2.122l5.585-5.586ZM8.75 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8.5 8.5v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: StatusWarning.displayName = "StatusWarning";
 export {
   Checkmark,
   DisclosureArrow,
   Dismiss,
-  Icon
+  Icon,
+  StatusWarning
 };

package/dist/DEV/bricks/Root.internal.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useIsClient } from "./~hooks.js";
+const RootNodeContext = React.createContext(null);
+function useRootNode() {
+  const maybeRootNode = React.useContext(RootNodeContext);
+  const isClient = useIsClient();
+  if (!isClient) return void 0;
+  return maybeRootNode;
+}
+const spriteSheetId = "\u{1F95D}-inline-sprites";
+const HtmlSanitizerContext = React.createContext(void 0);
+export {
+  HtmlSanitizerContext,
+  RootNodeContext,
+  spriteSheetId,
+  useRootNode
+};

package/dist/DEV/bricks/Root.js

@@ -6,15 +6,33 @@ import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
-import { forwardRef, isBrowser } from "./~utils.js";
-import { useIsClient, useMergedRefs } from "./~hooks.js";
+import {
+  forwardRef,
+  getOwnerDocument,
+  identity,
+  isBrowser,
+  isDocument
+} from "./~utils.js";
+import { useLayoutEffect, useMergedRefs } from "./~hooks.js";
+import {
+  HtmlSanitizerContext,
+  RootNodeContext,
+  spriteSheetId,
+  useRootNode
+} from "./Root.internal.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
-  const { children, synchronizeColorScheme = false, ...rest } = props;
+  const {
+    children,
+    synchronizeColorScheme = false,
+    unstable_htmlSanitizer = identity,
+    ...rest
+  } = props;
   const [portalContainer, setPortalContainer] = React.useState(null);
   return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(Styles, {}),
     /* @__PURE__ */ jsx(Fonts, {}),
+    /* @__PURE__ */ jsx(InlineSpriteSheet, {}),
     synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
     /* @__PURE__ */ jsx(
       PortalContainer,
@@ -24,14 +42,10 @@ const Root = forwardRef((props, forwardedRef) => {
         ref: setPortalContainer
       }
     ),
-    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children })
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsx(HtmlSanitizerContext.Provider, { value: unstable_htmlSanitizer, children }) })
   ] });
 });
 DEV: Root.displayName = "Root";
-const RootNodeContext = React.createContext(null);
-function useRootNode() {
-  return React.useContext(RootNodeContext);
-}
 const RootInternal = forwardRef(
   (props, forwardedRef) => {
     const { children, colorScheme, density, ...rest } = props;
@@ -72,10 +86,9 @@ function SynchronizeColorScheme({
   return null;
 }
 const PortalContainer = forwardRef((props, forwardedRef) => {
-  const isClient = useIsClient();
   const rootNode = useRootNode();
-  if (!isClient) return null;
-  const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!rootNode) return null;
+  const destination = isDocument(rootNode) ? rootNode.body : rootNode;
   if (!destination) return null;
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(
@@ -95,35 +108,46 @@ function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {
     if (!rootNode) return;
-    loadStyles(rootNode, { css });
+    const { cleanup } = loadStyles(rootNode, { css });
+    return cleanup;
   }, [rootNode]);
   return null;
 }
-const styleSheets = /* @__PURE__ */ new WeakMap();
-function loadStyles(rootNode, { css: css2 }) {
+const styleSheets = new Map(
+  Object.entries({ default: /* @__PURE__ */ new WeakMap() })
+);
+function loadStyles(rootNode, { css: css2, key = "default" }) {
+  let cleanup = () => {
+  };
   const loaded = (() => {
     if (!isBrowser) return false;
     const ownerDocument = getOwnerDocument(rootNode);
     const _window = getWindow(rootNode);
     if (!ownerDocument || !_window) return false;
-    if (!supportsAdoptedStylesheets && !rootNode.querySelector("style[data-kiwi]")) {
+    if (!supportsAdoptedStylesheets && !rootNode.querySelector(`style[data-kiwi="${key}"]`)) {
       const styleElement = ownerDocument.createElement("style");
-      styleElement.dataset.kiwi = "true";
+      styleElement.dataset.kiwi = key;
       styleElement.textContent = css2;
       (rootNode.head || rootNode).appendChild(styleElement);
+      cleanup = () => styleElement.remove();
       return true;
     }
-    const styleSheet = styleSheets.get(_window) || new _window.CSSStyleSheet();
-    if (!styleSheets.has(_window)) {
-      styleSheets.set(_window, styleSheet);
+    const styleSheet = styleSheets.get(key)?.get(_window) || new _window.CSSStyleSheet();
+    if (!styleSheets.get(key)?.has(_window)) {
+      styleSheets.get(key)?.set(_window, styleSheet);
     }
     styleSheet.replaceSync(css2);
     if (!rootNode.adoptedStyleSheets.includes(styleSheet)) {
       rootNode.adoptedStyleSheets.push(styleSheet);
+      cleanup = () => {
+        rootNode.adoptedStyleSheets = rootNode.adoptedStyleSheets.filter(
+          (sheet) => sheet !== styleSheet
+        );
+      };
     }
     return true;
   })();
-  return { loaded };
+  return { loaded, cleanup };
 }
 function Fonts() {
   const rootNode = useRootNode();
@@ -133,6 +157,35 @@ function Fonts() {
   }, [rootNode]);
   return null;
 }
+function InlineSpriteSheet() {
+  const rootNode = useRootNode();
+  React.useEffect(
+    function maybeCreateSpriteSheet() {
+      const ownerDocument = getOwnerDocument(rootNode);
+      if (!ownerDocument) return;
+      const spriteSheet = ownerDocument?.getElementById(spriteSheetId);
+      if (spriteSheet) return;
+      const svg = ownerDocument.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      svg.id = spriteSheetId;
+      svg.style.display = "none";
+      Object.defineProperty(svg, Symbol.for("\u{1F95D}"), {
+        value: { icons: /* @__PURE__ */ new Map() }
+        // Map of icon URLs that have already been inlined.
+      });
+      ownerDocument.body.appendChild(svg);
+      return () => {
+        if (svg.isConnected) {
+          ownerDocument.body.removeChild(svg);
+        }
+      };
+    },
+    [rootNode]
+  );
+  return null;
+}
 function loadFonts(rootNode) {
   const ownerWindow = getWindow(rootNode);
   if (!ownerWindow || Array.from(ownerWindow.document.fonts).some(
@@ -161,17 +214,10 @@ const supportsAdoptedStylesheets = isBrowser && "adoptedStyleSheets" in Document
 function isShadow(node) {
   return node instanceof ShadowRoot || node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !!node?.host;
 }
-function isDocument(node) {
-  return node?.nodeType === Node.DOCUMENT_NODE;
-}
-function getOwnerDocument(node) {
-  return (isDocument(node) ? node : node.ownerDocument) || null;
-}
 function getWindow(node) {
   const ownerDocument = getOwnerDocument(node);
   return ownerDocument?.defaultView || null;
 }
-const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 export {
   Root
 };

package/dist/DEV/bricks/Spinner.js

@@ -17,17 +17,32 @@ const Spinner = forwardRef(
         ...rest,
         "data-kiwi-size": size,
         "data-kiwi-tone": tone,
+        "data-kiwi-variant": "indeterminate",
         className: cx("\u{1F95D}-spinner", props.className),
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              stroke: "currentColor",
-              strokeLinecap: "round",
-              d: "M9.5 1.674a6.503 6.503 0 0 1 0 12.652m-3-12.652a6.503 6.503 0 0 0 0 12.652"
-            }
-          ) }),
+          /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                pathLength: "100",
+                className: "\u{1F95D}-spinner-svg-track",
+                cx: "8",
+                cy: "8",
+                r: "6.5"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                pathLength: "100",
+                className: "\u{1F95D}-spinner-svg-fill",
+                cx: "8",
+                cy: "8",
+                r: "6.5"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(VisuallyHidden, { children: alt })
         ]
       }

package/dist/DEV/bricks/Tooltip.js

@@ -43,6 +43,7 @@ const Tooltip = forwardRef(
             AkTooltip.Tooltip,
             {
               "aria-hidden": "true",
+              portal: true,
               ...rest,
               unmountOnHide,
               className: cx("\u{1F95D}-tooltip", props.className),
@@ -53,7 +54,6 @@ const Tooltip = forwardRef(
                 ...props.style
               },
               wrapperProps: popover.wrapperProps,
-              portal: popover.portal,
               children: content
             }
           )

package/dist/DEV/bricks/TreeItem.js

@@ -8,7 +8,7 @@ import {
 import { Toolbar } from "@ariakit/react/toolbar";
 import * as ListItem from "./~utils.ListItem.js";
 import { IconButton } from "./IconButton.js";
-import { Icon } from "./Icon.js";
+import { Icon, StatusWarning } from "./Icon.js";
 import { forwardRef } from "./~utils.js";
 import { useEventHandlers } from "./~hooks.js";
 import { GhostAligner, useGhostAlignment } from "./~utils.GhostAligner.js";
@@ -19,11 +19,12 @@ const TreeItemRoot = forwardRef(
       "aria-level": level,
       selected,
       expanded,
-      icon,
+      icon: iconProp,
       unstable_decorations,
       label,
       description,
       actions,
+      error,
       onSelectedChange,
       onExpandedChange,
       onClick: onClickProp,
@@ -48,6 +49,7 @@ const TreeItemRoot = forwardRef(
     const labelId = React.useId();
     const descriptionId = React.useId();
     const decorationId = React.useId();
+    const icon = error ? /* @__PURE__ */ jsx(StatusWarning, {}) : iconProp;
     const describedBy = React.useMemo(() => {
       const idRefs = [];
       if (description) idRefs.push(descriptionId);
@@ -90,6 +92,7 @@ const TreeItemRoot = forwardRef(
               {
                 "data-kiwi-expanded": expanded,
                 "data-kiwi-selected": selected,
+                "data-kiwi-error": error ? true : void 0,
                 className: "\u{1F95D}-tree-item-node",
                 style: { "--\u{1F95D}tree-item-level": level },
                 role: void 0,
@@ -146,7 +149,7 @@ const TreeItemActions = forwardRef((props, forwardedRef) => {
       ...props,
       onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
       onKeyDown: useEventHandlers(props.onKeyDown, (e) => e.stopPropagation()),
-      className: cx("\u{1F95D}-tree-item-actions", props.className),
+      className: cx("\u{1F95D}-tree-item-actions-container", props.className),
       ref: forwardedRef,
       children: props.children
     }