@stratakit/structures 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,70 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.2.3
4
+
5
+ - [#788](https://github.com/iTwin/design-system/pull/788): Updated `Tabs.Tab` component to support optional start and end icons.
6
+
7
+ ```tsx
8
+ // Add end icon to a tab.
9
+ <Tabs.Tab id="tab-1">
10
+ Tab 1
11
+ <Icon href={…} />
12
+ </Tabs.Tab>
13
+ ```
14
+
15
+ - [#773](https://github.com/iTwin/design-system/pull/773): Added [subpath exports](https://nodejs.org/api/packages.html#subpath-exports) for individual components. These new exports allow StrataKit to expose both convenience and compositional APIs of the same component.
16
+
17
+ ```tsx
18
+ // Convenience import
19
+ import Chip from "@stratakit/structures/Chip";
20
+ // Alternative
21
+ import { default as Chip } from "@stratakit/structures/Chip";
22
+
23
+ <Chip />;
24
+ ```
25
+
26
+ ```tsx
27
+ // Compositional import
28
+ import * as Chip from "@stratakit/structures/Chip";
29
+
30
+ <Chip.Root>
31
+ <Chip.Label>Label</Chip.Label>
32
+ <Chip.DismissButton />
33
+ </Chip.Root>;
34
+ ```
35
+
36
+ Compositional components are useful for building custom components that require more control over the structure and behavior, while convenience components provide a ready-to-use solution for common use cases. See [#405](https://github.com/iTwin/design-system/discussions/405) for more details.
37
+
38
+ APIs exported from the barrel file are not changed in this release. Some exported components are compositional, while others are convenience components.
39
+
40
+ ```tsx
41
+ // Chip is exported as a convenience API in the barrel file:
42
+ import { Chip } from "@stratakit/structures";
43
+
44
+ <Chip />;
45
+ ```
46
+
47
+ - [#763](https://github.com/iTwin/design-system/pull/763): Added compositional `Chip.Root`, `Chip.Label` and `Chip.DismissButton` components. These new components can be used when you need fine grained configuration.
48
+
49
+ To use the compositional components, import them from the `/Chip` subpath:
50
+
51
+ ```tsx
52
+ import * as Chip from "@stratakit/structures/Chip";
53
+
54
+ <Chip.Root>
55
+ <Chip.Label>Label</Chip.Label>
56
+ <Chip.DismissButton onClick={onDismiss} />
57
+ </Chip.Root>;
58
+ ```
59
+
60
+ - [#815](https://github.com/iTwin/design-system/pull/815): Fixed an issue where Toolbar was using Context as a component which doesn't work in React 18.
61
+ - [#781](https://github.com/iTwin/design-system/pull/781): Updated `Chip.Label` component styling when rendered as a button.
62
+ - [#793](https://github.com/iTwin/design-system/pull/793): Added `zustand` as a dependency.
63
+
64
+ - Updated dependencies:
65
+ - @stratakit/foundations@0.2.0
66
+ - @stratakit/bricks@0.3.1
67
+
3
68
  ## 0.2.2
4
69
 
5
70
  - [#756](https://github.com/iTwin/design-system/pull/756): `DropdownMenu.Button` will now ignore `render={undefined}`.
@@ -24,7 +89,6 @@
24
89
  - [#720](https://github.com/iTwin/design-system/pull/720): Renamed `onExpandedChange` prop for `unstable_ErrorRegion.Root` to `setOpen`.
25
90
  Renamed `expanded` prop for `unstable_ErrorRegion.Root` to `open`.
26
91
  - [#709](https://github.com/iTwin/design-system/pull/709): `unstable_AccordionItem` breaking changes:
27
-
28
92
  - `AccordionItem.Trigger` renamed to `AccordionItem.Header` and no longer represents the underlying `<button>` element (see `AccordionItem.Label`).
29
93
  - `AccordionItem.Label` must be wrapped with the new `AccordionItem.Button`.
30
94
 
@@ -53,7 +117,6 @@
53
117
  ## 0.1.1
54
118
 
55
119
  - [#704](https://github.com/iTwin/design-system/pull/704): The following components have been moved from `@stratakit/bricks` into `@stratakit/structures`.
56
-
57
120
  - `unstable_AccordionItem`
58
121
  - `unstable_Banner`
59
122
  - `Chip`
package/dist/Banner.d.ts CHANGED
@@ -9,7 +9,7 @@ import type { BaseProps } from "@stratakit/foundations/secret-internals";
9
9
  * <Banner label="Title" message="Message" icon={placeholderIcon} onDismiss={() => {}} />
10
10
  * ```
11
11
  */
12
- export declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"> & {
12
+ declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"> & {
13
13
  /**
14
14
  * Icon to be displayed inside the banner.
15
15
  *
@@ -79,3 +79,4 @@ export declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "ch
79
79
  */
80
80
  variant?: "outline";
81
81
  } & React.RefAttributes<HTMLDivElement | HTMLElement>>;
82
+ export default Banner;
package/dist/Banner.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Role } from "@ariakit/react/role";
3
4
  import { IconButton, Text } from "@stratakit/bricks";
4
5
  import { GhostAligner } from "@stratakit/bricks/secret-internals";
5
6
  import { Icon } from "@stratakit/foundations";
6
7
  import { forwardRef } from "@stratakit/foundations/secret-internals";
7
8
  import cx from "classnames";
8
- import * as React from "react";
9
9
  import { Dismiss, StatusIcon } from "./~utils.icons.js";
10
10
  const Banner = forwardRef((props, forwardedRef) => {
11
11
  const {
@@ -66,6 +66,7 @@ const Banner = forwardRef((props, forwardedRef) => {
66
66
  }
67
67
  );
68
68
  });
69
+ var Banner_default = Banner;
69
70
  export {
70
- Banner
71
+ Banner_default as default
71
72
  };
package/dist/Chip.d.ts CHANGED
@@ -1,10 +1,6 @@
1
1
  import * as React from "react";
2
2
  import type { BaseProps } from "@stratakit/foundations/secret-internals";
3
- interface ChipProps extends Omit<BaseProps<"div">, "children"> {
4
- /**
5
- * The label displayed inside the chip.
6
- */
7
- label: React.ReactNode;
3
+ interface ChipRootProps extends BaseProps<"div"> {
8
4
  /**
9
5
  * The variant style of the Chip.
10
6
  * Use "solid" for primary states and "outline" for less prominent states.
@@ -12,6 +8,44 @@ interface ChipProps extends Omit<BaseProps<"div">, "children"> {
12
8
  * @default "solid"
13
9
  */
14
10
  variant?: "solid" | "outline";
11
+ }
12
+ /**
13
+ * Root component of the compositional Chip component.
14
+ *
15
+ * Example:
16
+ * ```tsx
17
+ * <Chip.Root>
18
+ * <Chip.Label>Label</Chip.Label>
19
+ * <Chip.DismissButton onClick={onClick} />
20
+ * </Chip.Root>
21
+ * ```
22
+ */
23
+ declare const ChipRoot: React.ForwardRefExoticComponent<ChipRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
24
+ interface ChipLabelProps extends BaseProps<"span"> {
25
+ }
26
+ /**
27
+ * Label component that should be used with the compositional Chip component.
28
+ */
29
+ declare const ChipLabel: React.ForwardRefExoticComponent<ChipLabelProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
30
+ interface ChipDismissButtonProps extends Omit<BaseProps<"button">, "children"> {
31
+ /**
32
+ * Label for the dismiss button.
33
+ *
34
+ * The final accessible name of the dismiss button is a combination of this `label` and the text content of `Chip.Label`.
35
+ *
36
+ * @default "Dismiss"
37
+ */
38
+ label?: string;
39
+ }
40
+ /**
41
+ * Dismiss button component that should be used with the compositional Chip component.
42
+ */
43
+ declare const ChipDismissButton: React.ForwardRefExoticComponent<ChipDismissButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
44
+ interface ChipProps extends Omit<BaseProps<"div">, "children">, Pick<ChipRootProps, "variant"> {
45
+ /**
46
+ * The label displayed inside the chip.
47
+ */
48
+ label: React.ReactNode;
15
49
  /**
16
50
  * Callback invoked when the dismiss ("❌") button is clicked.
17
51
  *
@@ -31,5 +65,6 @@ interface ChipProps extends Omit<BaseProps<"div">, "children"> {
31
65
  * <Chip label="Value" variant="outline" />
32
66
  * ```
33
67
  */
34
- export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
35
- export {};
68
+ declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
69
+ export default Chip;
70
+ export { ChipRoot as Root, ChipLabel as Label, ChipDismissButton as DismissButton, };
package/dist/Chip.js CHANGED
@@ -1,41 +1,97 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Role } from "@ariakit/react/role";
3
4
  import { IconButton } from "@stratakit/bricks";
4
- import { forwardRef } from "@stratakit/foundations/secret-internals";
5
+ import {
6
+ forwardRef,
7
+ useSafeContext
8
+ } from "@stratakit/foundations/secret-internals";
5
9
  import cx from "classnames";
6
- import * as React from "react";
10
+ import { createStore, useStore } from "zustand";
11
+ import { combine } from "zustand/middleware";
7
12
  import { Dismiss } from "./~utils.icons.js";
8
- const Chip = forwardRef((props, forwardedRef) => {
9
- const { variant = "solid", onDismiss, label, ...rest } = props;
10
- const baseId = React.useId();
11
- const labelId = `${baseId}-label`;
12
- const dismissIconId = `${baseId}-dismiss`;
13
- return /* @__PURE__ */ jsxs(
13
+ function createChipStore(initialState) {
14
+ return createStore(
15
+ combine(initialState, (set, _, store) => ({
16
+ setLabelId: (labelId) => {
17
+ set({ labelId: labelId || store.getInitialState().labelId });
18
+ }
19
+ }))
20
+ );
21
+ }
22
+ const ChipContext = React.createContext(void 0);
23
+ function ChipProvider(props) {
24
+ const defaultLabelId = React.useId();
25
+ const [store] = React.useState(
26
+ () => createChipStore({ labelId: defaultLabelId })
27
+ );
28
+ return /* @__PURE__ */ jsx(ChipContext.Provider, { value: store, children: props.children });
29
+ }
30
+ function useChipState(selectorFn) {
31
+ const store = useSafeContext(ChipContext);
32
+ return useStore(store, selectorFn);
33
+ }
34
+ const ChipRoot = forwardRef((props, forwardedRef) => {
35
+ const { variant = "solid", ...rest } = props;
36
+ return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
14
37
  Role.div,
15
38
  {
16
39
  "data-kiwi-variant": variant,
17
40
  ...rest,
18
41
  className: cx("\u{1F95D}-chip", props.className),
19
- ref: forwardedRef,
20
- children: [
21
- /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
22
- onDismiss && /* @__PURE__ */ jsx(
23
- IconButton,
24
- {
25
- id: dismissIconId,
26
- className: "\u{1F95D}-chip-dismiss-button",
27
- variant: "ghost",
28
- "aria-labelledby": `${dismissIconId} ${labelId}`,
29
- label: "Dismiss",
30
- labelVariant: "visually-hidden",
31
- icon: /* @__PURE__ */ jsx(Dismiss, {}),
32
- onClick: onDismiss
33
- }
34
- )
35
- ]
42
+ ref: forwardedRef
43
+ }
44
+ ) });
45
+ });
46
+ const ChipLabel = forwardRef((props, forwardedRef) => {
47
+ const labelId = useChipState((state) => state.labelId);
48
+ const setLabelId = useChipState((state) => state.setLabelId);
49
+ React.useEffect(() => {
50
+ setLabelId(props.id);
51
+ }, [setLabelId, props.id]);
52
+ return /* @__PURE__ */ jsx(
53
+ Role.span,
54
+ {
55
+ id: labelId,
56
+ ...props,
57
+ className: cx("\u{1F95D}-chip-label", props.className),
58
+ ref: forwardedRef
36
59
  }
37
60
  );
38
61
  });
62
+ const ChipDismissButton = forwardRef(
63
+ (props, forwardedRef) => {
64
+ const { label = "Dismiss", ...rest } = props;
65
+ const labelId = useChipState((state) => state.labelId);
66
+ const defaultId = React.useId();
67
+ const id = props.id ?? defaultId;
68
+ return /* @__PURE__ */ jsx(
69
+ IconButton,
70
+ {
71
+ id,
72
+ "aria-labelledby": `${id} ${labelId}`,
73
+ ...rest,
74
+ label,
75
+ className: cx("\u{1F95D}-chip-dismiss-button", props.className),
76
+ variant: "ghost",
77
+ labelVariant: "visually-hidden",
78
+ icon: /* @__PURE__ */ jsx(Dismiss, {}),
79
+ ref: forwardedRef
80
+ }
81
+ );
82
+ }
83
+ );
84
+ const Chip = forwardRef((props, forwardedRef) => {
85
+ const { onDismiss, label, ...rest } = props;
86
+ return /* @__PURE__ */ jsxs(ChipRoot, { ...rest, ref: forwardedRef, children: [
87
+ /* @__PURE__ */ jsx(ChipLabel, { children: label }),
88
+ onDismiss && /* @__PURE__ */ jsx(ChipDismissButton, { onClick: onDismiss })
89
+ ] });
90
+ });
91
+ var Chip_default = Chip;
39
92
  export {
40
- Chip
93
+ ChipDismissButton as DismissButton,
94
+ ChipLabel as Label,
95
+ ChipRoot as Root,
96
+ Chip_default as default
41
97
  };
@@ -1,11 +1,11 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Role } from "@ariakit/react/role";
3
4
  import { IconButton, Text } from "@stratakit/bricks";
4
5
  import { GhostAligner } from "@stratakit/bricks/secret-internals";
5
6
  import { Icon } from "@stratakit/foundations";
6
7
  import { forwardRef } from "@stratakit/foundations/secret-internals";
7
8
  import cx from "classnames";
8
- import * as React from "react";
9
9
  import { Dismiss, StatusIcon } from "./~utils.icons.js";
10
10
  const Banner = forwardRef((props, forwardedRef) => {
11
11
  const {
@@ -67,6 +67,7 @@ const Banner = forwardRef((props, forwardedRef) => {
67
67
  );
68
68
  });
69
69
  DEV: Banner.displayName = "Banner";
70
+ var Banner_default = Banner;
70
71
  export {
71
- Banner
72
+ Banner_default as default
72
73
  };
package/dist/DEV/Chip.js CHANGED
@@ -1,42 +1,101 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Role } from "@ariakit/react/role";
3
4
  import { IconButton } from "@stratakit/bricks";
4
- import { forwardRef } from "@stratakit/foundations/secret-internals";
5
+ import {
6
+ forwardRef,
7
+ useSafeContext
8
+ } from "@stratakit/foundations/secret-internals";
5
9
  import cx from "classnames";
6
- import * as React from "react";
10
+ import { createStore, useStore } from "zustand";
11
+ import { combine } from "zustand/middleware";
7
12
  import { Dismiss } from "./~utils.icons.js";
8
- const Chip = forwardRef((props, forwardedRef) => {
9
- const { variant = "solid", onDismiss, label, ...rest } = props;
10
- const baseId = React.useId();
11
- const labelId = `${baseId}-label`;
12
- const dismissIconId = `${baseId}-dismiss`;
13
- return /* @__PURE__ */ jsxs(
13
+ function createChipStore(initialState) {
14
+ return createStore(
15
+ combine(initialState, (set, _, store) => ({
16
+ setLabelId: (labelId) => {
17
+ set({ labelId: labelId || store.getInitialState().labelId });
18
+ }
19
+ }))
20
+ );
21
+ }
22
+ const ChipContext = React.createContext(void 0);
23
+ function ChipProvider(props) {
24
+ const defaultLabelId = React.useId();
25
+ const [store] = React.useState(
26
+ () => createChipStore({ labelId: defaultLabelId })
27
+ );
28
+ return /* @__PURE__ */ jsx(ChipContext.Provider, { value: store, children: props.children });
29
+ }
30
+ function useChipState(selectorFn) {
31
+ const store = useSafeContext(ChipContext);
32
+ return useStore(store, selectorFn);
33
+ }
34
+ const ChipRoot = forwardRef((props, forwardedRef) => {
35
+ const { variant = "solid", ...rest } = props;
36
+ return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
14
37
  Role.div,
15
38
  {
16
39
  "data-kiwi-variant": variant,
17
40
  ...rest,
18
41
  className: cx("\u{1F95D}-chip", props.className),
19
- ref: forwardedRef,
20
- children: [
21
- /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
22
- onDismiss && /* @__PURE__ */ jsx(
23
- IconButton,
24
- {
25
- id: dismissIconId,
26
- className: "\u{1F95D}-chip-dismiss-button",
27
- variant: "ghost",
28
- "aria-labelledby": `${dismissIconId} ${labelId}`,
29
- label: "Dismiss",
30
- labelVariant: "visually-hidden",
31
- icon: /* @__PURE__ */ jsx(Dismiss, {}),
32
- onClick: onDismiss
33
- }
34
- )
35
- ]
42
+ ref: forwardedRef
43
+ }
44
+ ) });
45
+ });
46
+ DEV: ChipRoot.displayName = "Chip.Root";
47
+ const ChipLabel = forwardRef((props, forwardedRef) => {
48
+ const labelId = useChipState((state) => state.labelId);
49
+ const setLabelId = useChipState((state) => state.setLabelId);
50
+ React.useEffect(() => {
51
+ setLabelId(props.id);
52
+ }, [setLabelId, props.id]);
53
+ return /* @__PURE__ */ jsx(
54
+ Role.span,
55
+ {
56
+ id: labelId,
57
+ ...props,
58
+ className: cx("\u{1F95D}-chip-label", props.className),
59
+ ref: forwardedRef
36
60
  }
37
61
  );
38
62
  });
63
+ DEV: ChipLabel.displayName = "Chip.Label";
64
+ const ChipDismissButton = forwardRef(
65
+ (props, forwardedRef) => {
66
+ const { label = "Dismiss", ...rest } = props;
67
+ const labelId = useChipState((state) => state.labelId);
68
+ const defaultId = React.useId();
69
+ const id = props.id ?? defaultId;
70
+ return /* @__PURE__ */ jsx(
71
+ IconButton,
72
+ {
73
+ id,
74
+ "aria-labelledby": `${id} ${labelId}`,
75
+ ...rest,
76
+ label,
77
+ className: cx("\u{1F95D}-chip-dismiss-button", props.className),
78
+ variant: "ghost",
79
+ labelVariant: "visually-hidden",
80
+ icon: /* @__PURE__ */ jsx(Dismiss, {}),
81
+ ref: forwardedRef
82
+ }
83
+ );
84
+ }
85
+ );
86
+ DEV: ChipDismissButton.displayName = "Chip.DismissButton";
87
+ const Chip = forwardRef((props, forwardedRef) => {
88
+ const { onDismiss, label, ...rest } = props;
89
+ return /* @__PURE__ */ jsxs(ChipRoot, { ...rest, ref: forwardedRef, children: [
90
+ /* @__PURE__ */ jsx(ChipLabel, { children: label }),
91
+ onDismiss && /* @__PURE__ */ jsx(ChipDismissButton, { onClick: onDismiss })
92
+ ] });
93
+ });
39
94
  DEV: Chip.displayName = "Chip";
95
+ var Chip_default = Chip;
40
96
  export {
41
- Chip
97
+ ChipDismissButton as DismissButton,
98
+ ChipLabel as Label,
99
+ ChipRoot as Root,
100
+ Chip_default as default
42
101
  };
@@ -1,4 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Button as ButtonAk } from "@ariakit/react/button";
3
4
  import {
4
5
  Menu,
@@ -22,9 +23,8 @@ import {
22
23
  usePopoverApi
23
24
  } from "@stratakit/foundations/secret-internals";
24
25
  import cx from "classnames";
25
- import * as React from "react";
26
- import * as ListItem from "./~utils.ListItem.js";
27
26
  import { Checkmark } from "./~utils.icons.js";
27
+ import * as ListItem from "./~utils.ListItem.js";
28
28
  function DropdownMenuRoot(props) {
29
29
  const {
30
30
  children,
@@ -1,4 +1,5 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import {
3
4
  Collection,
4
5
  CollectionItem,
@@ -18,7 +19,6 @@ import {
18
19
  useControlledState
19
20
  } from "@stratakit/foundations/secret-internals";
20
21
  import cx from "classnames";
21
- import * as React from "react";
22
22
  import { ChevronDown, StatusIcon } from "./~utils.icons.js";
23
23
  const ErrorRegionRoot = forwardRef(
24
24
  (props, forwardedRef) => {
@@ -46,16 +46,16 @@ const ErrorRegionRoot = forwardRef(
46
46
  el.animate(
47
47
  [
48
48
  {
49
- boxShadow: "0 0 0 0 var(--ids-color-border-attention-base)",
49
+ boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
50
50
  opacity: 1
51
51
  },
52
52
  {
53
- boxShadow: "0 0 15px 2px var(--ids-color-border-attention-base)",
53
+ boxShadow: "0 0 15px 2px var(--stratakit-color-border-attention-base)",
54
54
  opacity: 0.7,
55
55
  offset: 0.5
56
56
  },
57
57
  {
58
- boxShadow: "0 0 0 0 var(--ids-color-border-attention-base)",
58
+ boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
59
59
  opacity: 1
60
60
  }
61
61
  ],
package/dist/DEV/Table.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Role } from "@ariakit/react/role";
3
- import { forwardRef } from "@stratakit/foundations/secret-internals";
4
4
  import {
5
+ forwardRef,
5
6
  useMergedRefs,
6
7
  useSafeContext
7
8
  } from "@stratakit/foundations/secret-internals";
8
9
  import cx from "classnames";
9
- import * as React from "react";
10
10
  const TableContext = React.createContext(void 0);
11
11
  const TableHeaderContext = React.createContext(false);
12
12
  const HtmlTable = forwardRef((props, forwardedRef) => {
@@ -1,18 +1,24 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import * as Toolbar from "@ariakit/react/toolbar";
3
4
  import { IconButtonContext } from "@stratakit/bricks/secret-internals";
4
5
  import { forwardRef } from "@stratakit/foundations/secret-internals";
5
6
  import cx from "classnames";
6
- import * as React from "react";
7
7
  const ToolbarGroup = forwardRef((props, forwardedRef) => {
8
- return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__PURE__ */ jsx(
9
- Toolbar.Toolbar,
8
+ return /* @__PURE__ */ jsx(
9
+ IconButtonContext.Provider,
10
10
  {
11
- ...props,
12
- className: cx("\u{1F95D}-toolbar", props.className),
13
- ref: forwardedRef
11
+ value: React.useMemo(() => ({ iconSize: "large" }), []),
12
+ children: /* @__PURE__ */ jsx(
13
+ Toolbar.Toolbar,
14
+ {
15
+ ...props,
16
+ className: cx("\u{1F95D}-toolbar", props.className),
17
+ ref: forwardedRef
18
+ }
19
+ )
14
20
  }
15
- ) });
21
+ );
16
22
  });
17
23
  DEV: ToolbarGroup.displayName = "Toolbar.Group";
18
24
  const ToolbarItem = forwardRef(
@@ -1,4 +1,5 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { CompositeItem } from "@ariakit/react/composite";
3
4
  import { PopoverProvider } from "@ariakit/react/popover";
4
5
  import { Role } from "@ariakit/react/role";
@@ -14,10 +15,9 @@ import {
14
15
  useEventHandlers
15
16
  } from "@stratakit/foundations/secret-internals";
16
17
  import cx from "classnames";
17
- import * as React from "react";
18
- import * as DropdownMenu from "./DropdownMenu.js";
19
- import * as ListItem from "./~utils.ListItem.js";
20
18
  import { ChevronDown, MoreHorizontal, StatusIcon } from "./~utils.icons.js";
19
+ import * as ListItem from "./~utils.ListItem.js";
20
+ import * as DropdownMenu from "./DropdownMenu.js";
21
21
  const TreeItemErrorContext = React.createContext(void 0);
22
22
  const TreeItemActionsContext = React.createContext(void 0);
23
23
  const TreeItemDecorationsContext = React.createContext(void 0);
package/dist/DEV/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import * as unstable_AccordionItem from "./AccordionItem.js";
3
- import { Banner } from "./Banner.js";
4
- import { Chip } from "./Chip.js";
3
+ import { default as default2 } from "./Banner.js";
4
+ import { default as default3 } from "./Chip.js";
5
5
  import * as DropdownMenu from "./DropdownMenu.js";
6
6
  import * as unstable_ErrorRegion from "./ErrorRegion.js";
7
7
  import * as Table from "./Table.js";
@@ -9,13 +9,13 @@ import * as Tabs from "./Tabs.js";
9
9
  import * as unstable_Toolbar from "./Toolbar.js";
10
10
  import * as Tree from "./Tree.js";
11
11
  export {
12
- Chip,
12
+ default3 as Chip,
13
13
  DropdownMenu,
14
14
  Table,
15
15
  Tabs,
16
16
  Tree,
17
17
  unstable_AccordionItem,
18
- Banner as unstable_Banner,
18
+ default2 as unstable_Banner,
19
19
  unstable_ErrorRegion,
20
20
  unstable_Toolbar
21
21
  };
@@ -1,5 +1,5 @@
1
1
  // inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
2
- var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--ids-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(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--active,var(--ids-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--ids-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--ids-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(--ids-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(--ids-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(--ids-color-bg-elevation-base)}.🥝-banner:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝banner-color-border:var(--ids-color-border-neutral-base)}.🥝-banner:where([data-kiwi-tone=info]){--🥝banner-color-border:var(--ids-color-border-info-base);--🥝icon-color:var(--ids-color-icon-info-base)}.🥝-banner:where([data-kiwi-tone=positive]){--🥝banner-color-border:var(--ids-color-border-positive-base);--🥝icon-color:var(--ids-color-icon-positive-base)}.🥝-banner:where([data-kiwi-tone=attention]){--🥝banner-color-border:var(--ids-color-border-attention-base);--🥝icon-color:var(--ids-color-icon-attention-base)}.🥝-banner:where([data-kiwi-tone=critical]){--🥝banner-color-border:var(--ids-color-border-critical-base);--🥝icon-color:var(--ids-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(--ids-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--ids-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--ids-color-bg-page-base)}}@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(--ids-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--ids-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(--ids-color-border-attention-base);background-color:var(--ids-color-bg-elevation-base);box-shadow:var(--ids-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(--ids-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(--ids-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(--ids-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(--ids-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(--ids-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)));border-block-end:1px solid var(--ids-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(--ids-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-tone=accent]){--🥝tab-active-stripe-color:var(--ids-color-border-accent-strong)}}@layer base{.🥝-tab{font-size:var(--ids-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;transition:background-color .15s ease-out,color .15s ease-out;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(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-neutral-primary))var(--🌀tab-state--selected,var(--ids-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-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(--ids-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-accent-strong))var(--🌀tab-state--selected,var(--ids-color-text-accent-strong))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-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(--ids-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(--ids-color-bg-page-base);box-shadow:var(--ids-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(--ids-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(--ids-color-icon-attention-base);--🥝tree-item-color:var(--ids-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-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(--ids-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--ids-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}}}`;
2
+ 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,var(--stratakit-color-bg-glow-on-surface-accent-pressed))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)}.🥝-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}}}`;
3
3
 
4
4
  // src/styles.css.ts
5
5
  var styles_css_default = styles_default;
@@ -1,4 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Button as ButtonAk } from "@ariakit/react/button";
3
4
  import {
4
5
  Menu,
@@ -22,9 +23,8 @@ import {
22
23
  usePopoverApi
23
24
  } from "@stratakit/foundations/secret-internals";
24
25
  import cx from "classnames";
25
- import * as React from "react";
26
- import * as ListItem from "./~utils.ListItem.js";
27
26
  import { Checkmark } from "./~utils.icons.js";
27
+ import * as ListItem from "./~utils.ListItem.js";
28
28
  function DropdownMenuRoot(props) {
29
29
  const {
30
30
  children,
@@ -1,4 +1,5 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import {
3
4
  Collection,
4
5
  CollectionItem,
@@ -18,7 +19,6 @@ import {
18
19
  useControlledState
19
20
  } from "@stratakit/foundations/secret-internals";
20
21
  import cx from "classnames";
21
- import * as React from "react";
22
22
  import { ChevronDown, StatusIcon } from "./~utils.icons.js";
23
23
  const ErrorRegionRoot = forwardRef(
24
24
  (props, forwardedRef) => {
@@ -46,16 +46,16 @@ const ErrorRegionRoot = forwardRef(
46
46
  el.animate(
47
47
  [
48
48
  {
49
- boxShadow: "0 0 0 0 var(--ids-color-border-attention-base)",
49
+ boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
50
50
  opacity: 1
51
51
  },
52
52
  {
53
- boxShadow: "0 0 15px 2px var(--ids-color-border-attention-base)",
53
+ boxShadow: "0 0 15px 2px var(--stratakit-color-border-attention-base)",
54
54
  opacity: 0.7,
55
55
  offset: 0.5
56
56
  },
57
57
  {
58
- boxShadow: "0 0 0 0 var(--ids-color-border-attention-base)",
58
+ boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
59
59
  opacity: 1
60
60
  }
61
61
  ],
package/dist/Table.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { Role } from "@ariakit/react/role";
3
- import { forwardRef } from "@stratakit/foundations/secret-internals";
4
4
  import {
5
+ forwardRef,
5
6
  useMergedRefs,
6
7
  useSafeContext
7
8
  } from "@stratakit/foundations/secret-internals";
8
9
  import cx from "classnames";
9
- import * as React from "react";
10
10
  const TableContext = React.createContext(void 0);
11
11
  const TableHeaderContext = React.createContext(false);
12
12
  const HtmlTable = forwardRef((props, forwardedRef) => {
package/dist/Tabs.d.ts CHANGED
@@ -64,6 +64,16 @@ interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id">
64
64
  * ```tsx
65
65
  * <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
66
66
  * ```
67
+ *
68
+ * Start and end icons can be added by passing `Icon` as children.
69
+ *
70
+ * ```tsx
71
+ * <Tabs.Tab id="tab-1">
72
+ * <Icon href={…} />
73
+ * Tab 1
74
+ * <Icon href={…} />
75
+ * </Tabs.Tab>
76
+ * ```
67
77
  */
68
78
  declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
69
79
  interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
package/dist/Toolbar.js CHANGED
@@ -1,18 +1,24 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import * as Toolbar from "@ariakit/react/toolbar";
3
4
  import { IconButtonContext } from "@stratakit/bricks/secret-internals";
4
5
  import { forwardRef } from "@stratakit/foundations/secret-internals";
5
6
  import cx from "classnames";
6
- import * as React from "react";
7
7
  const ToolbarGroup = forwardRef((props, forwardedRef) => {
8
- return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__PURE__ */ jsx(
9
- Toolbar.Toolbar,
8
+ return /* @__PURE__ */ jsx(
9
+ IconButtonContext.Provider,
10
10
  {
11
- ...props,
12
- className: cx("\u{1F95D}-toolbar", props.className),
13
- ref: forwardedRef
11
+ value: React.useMemo(() => ({ iconSize: "large" }), []),
12
+ children: /* @__PURE__ */ jsx(
13
+ Toolbar.Toolbar,
14
+ {
15
+ ...props,
16
+ className: cx("\u{1F95D}-toolbar", props.className),
17
+ ref: forwardedRef
18
+ }
19
+ )
14
20
  }
15
- ) });
21
+ );
16
22
  });
17
23
  const ToolbarItem = forwardRef(
18
24
  (props, forwardedRef) => {
package/dist/TreeItem.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
2
3
  import { CompositeItem } from "@ariakit/react/composite";
3
4
  import { PopoverProvider } from "@ariakit/react/popover";
4
5
  import { Role } from "@ariakit/react/role";
@@ -14,10 +15,9 @@ import {
14
15
  useEventHandlers
15
16
  } from "@stratakit/foundations/secret-internals";
16
17
  import cx from "classnames";
17
- import * as React from "react";
18
- import * as DropdownMenu from "./DropdownMenu.js";
19
- import * as ListItem from "./~utils.ListItem.js";
20
18
  import { ChevronDown, MoreHorizontal, StatusIcon } from "./~utils.icons.js";
19
+ import * as ListItem from "./~utils.ListItem.js";
20
+ import * as DropdownMenu from "./DropdownMenu.js";
21
21
  const TreeItemErrorContext = React.createContext(void 0);
22
22
  const TreeItemActionsContext = React.createContext(void 0);
23
23
  const TreeItemDecorationsContext = React.createContext(void 0);
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export * as unstable_AccordionItem from "./AccordionItem.js";
2
- export { Banner as unstable_Banner } from "./Banner.js";
3
- export { Chip } from "./Chip.js";
2
+ export { default as unstable_Banner } from "./Banner.js";
3
+ export { default as Chip } from "./Chip.js";
4
4
  export * as DropdownMenu from "./DropdownMenu.js";
5
5
  export * as unstable_ErrorRegion from "./ErrorRegion.js";
6
6
  export * as Table from "./Table.js";
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import * as unstable_AccordionItem from "./AccordionItem.js";
3
- import { Banner } from "./Banner.js";
4
- import { Chip } from "./Chip.js";
3
+ import { default as default2 } from "./Banner.js";
4
+ import { default as default3 } from "./Chip.js";
5
5
  import * as DropdownMenu from "./DropdownMenu.js";
6
6
  import * as unstable_ErrorRegion from "./ErrorRegion.js";
7
7
  import * as Table from "./Table.js";
@@ -9,13 +9,13 @@ import * as Tabs from "./Tabs.js";
9
9
  import * as unstable_Toolbar from "./Toolbar.js";
10
10
  import * as Tree from "./Tree.js";
11
11
  export {
12
- Chip,
12
+ default3 as Chip,
13
13
  DropdownMenu,
14
14
  Table,
15
15
  Tabs,
16
16
  Tree,
17
17
  unstable_AccordionItem,
18
- Banner as unstable_Banner,
18
+ default2 as unstable_Banner,
19
19
  unstable_ErrorRegion,
20
20
  unstable_Toolbar
21
21
  };
@@ -1,5 +1,5 @@
1
1
  // inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
2
- var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--ids-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(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--active,var(--ids-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--ids-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--ids-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(--ids-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(--ids-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(--ids-color-bg-elevation-base)}.🥝-banner:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝banner-color-border:var(--ids-color-border-neutral-base)}.🥝-banner:where([data-kiwi-tone=info]){--🥝banner-color-border:var(--ids-color-border-info-base);--🥝icon-color:var(--ids-color-icon-info-base)}.🥝-banner:where([data-kiwi-tone=positive]){--🥝banner-color-border:var(--ids-color-border-positive-base);--🥝icon-color:var(--ids-color-icon-positive-base)}.🥝-banner:where([data-kiwi-tone=attention]){--🥝banner-color-border:var(--ids-color-border-attention-base);--🥝icon-color:var(--ids-color-icon-attention-base)}.🥝-banner:where([data-kiwi-tone=critical]){--🥝banner-color-border:var(--ids-color-border-critical-base);--🥝icon-color:var(--ids-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(--ids-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--ids-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--ids-color-bg-page-base)}}@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(--ids-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--ids-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(--ids-color-border-attention-base);background-color:var(--ids-color-bg-elevation-base);box-shadow:var(--ids-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(--ids-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(--ids-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(--ids-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(--ids-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(--ids-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)));border-block-end:1px solid var(--ids-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(--ids-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-tone=accent]){--🥝tab-active-stripe-color:var(--ids-color-border-accent-strong)}}@layer base{.🥝-tab{font-size:var(--ids-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;transition:background-color .15s ease-out,color .15s ease-out;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(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-neutral-primary))var(--🌀tab-state--selected,var(--ids-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-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(--ids-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-accent-strong))var(--🌀tab-state--selected,var(--ids-color-text-accent-strong))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-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(--ids-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(--ids-color-bg-page-base);box-shadow:var(--ids-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(--ids-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(--ids-color-icon-attention-base);--🥝tree-item-color:var(--ids-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-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(--ids-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--ids-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}}}`;
2
+ 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,var(--stratakit-color-bg-glow-on-surface-accent-pressed))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)}.🥝-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}}}`;
3
3
 
4
4
  // src/styles.css.ts
5
5
  var styles_css_default = styles_default;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stratakit/structures",
3
3
  "type": "module",
4
- "version": "0.2.2",
4
+ "version": "0.2.3",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
7
7
  "types": "./dist/index.d.ts",
@@ -12,7 +12,67 @@
12
12
  "development": "./dist/DEV/index.js",
13
13
  "default": "./dist/index.js"
14
14
  },
15
- "./package.json": "./package.json"
15
+ "./package.json": "./package.json",
16
+ "./unstable_AccordionItem": {
17
+ "@stratakit/source": "./src/AccordionItem.tsx",
18
+ "types": "./dist/AccordionItem.d.ts",
19
+ "development": "./dist/DEV/AccordionItem.js",
20
+ "default": "./dist/AccordionItem.js"
21
+ },
22
+ "./unstable_Banner": {
23
+ "@stratakit/source": "./src/Banner.tsx",
24
+ "types": "./dist/Banner.d.ts",
25
+ "development": "./dist/DEV/Banner.js",
26
+ "default": "./dist/Banner.js"
27
+ },
28
+ "./Chip": {
29
+ "@stratakit/source": "./src/Chip.tsx",
30
+ "types": "./dist/Chip.d.ts",
31
+ "development": "./dist/DEV/Chip.js",
32
+ "default": "./dist/Chip.js"
33
+ },
34
+ "./DropdownMenu": {
35
+ "@stratakit/source": "./src/DropdownMenu.tsx",
36
+ "types": "./dist/DropdownMenu.d.ts",
37
+ "development": "./dist/DEV/DropdownMenu.js",
38
+ "default": "./dist/DropdownMenu.js"
39
+ },
40
+ "./unstable_ErrorRegion": {
41
+ "@stratakit/source": "./src/ErrorRegion.tsx",
42
+ "types": "./dist/ErrorRegion.d.ts",
43
+ "development": "./dist/DEV/ErrorRegion.js",
44
+ "default": "./dist/ErrorRegion.js"
45
+ },
46
+ "./Table": {
47
+ "@stratakit/source": "./src/Table.tsx",
48
+ "types": "./dist/Table.d.ts",
49
+ "development": "./dist/DEV/Table.js",
50
+ "default": "./dist/Table.js"
51
+ },
52
+ "./Tabs": {
53
+ "@stratakit/source": "./src/Tabs.tsx",
54
+ "types": "./dist/Tabs.d.ts",
55
+ "development": "./dist/DEV/Tabs.js",
56
+ "default": "./dist/Tabs.js"
57
+ },
58
+ "./unstable_Toolbar": {
59
+ "@stratakit/source": "./src/Toolbar.tsx",
60
+ "types": "./dist/Toolbar.d.ts",
61
+ "development": "./dist/DEV/Toolbar.js",
62
+ "default": "./dist/Toolbar.js"
63
+ },
64
+ "./Tree": {
65
+ "@stratakit/source": "./src/Tree.tsx",
66
+ "types": "./dist/Tree.d.ts",
67
+ "development": "./dist/DEV/Tree.js",
68
+ "default": "./dist/Tree.js"
69
+ },
70
+ "./TreeItem": {
71
+ "@stratakit/source": "./src/TreeItem.tsx",
72
+ "types": "./dist/TreeItem.d.ts",
73
+ "development": "./dist/DEV/TreeItem.js",
74
+ "default": "./dist/TreeItem.js"
75
+ }
16
76
  },
17
77
  "files": [
18
78
  "dist",
@@ -42,21 +102,22 @@
42
102
  ],
43
103
  "dependencies": {
44
104
  "@ariakit/react": "^0.4.17",
45
- "@stratakit/bricks": "^0.3.0",
46
- "classnames": "^2.5.1"
105
+ "@stratakit/bricks": "^0.3.1",
106
+ "classnames": "^2.5.1",
107
+ "zustand": "^5.0.5"
47
108
  },
48
109
  "devDependencies": {
49
- "@types/node": "^22.15.30",
50
- "@types/react": "^19.1.5",
110
+ "@types/node": "^22.15.34",
111
+ "@types/react": "^19.1.8",
51
112
  "@types/react-dom": "^19.1.6",
52
113
  "esbuild": "^0.25.5",
53
114
  "react": "^19.1.0",
54
115
  "react-dom": "^19.1.0",
55
116
  "typescript": "~5.8.3",
56
- "@stratakit/foundations": "0.1.6"
117
+ "@stratakit/foundations": "0.2.0"
57
118
  },
58
119
  "peerDependencies": {
59
- "@stratakit/foundations": "^0.1.6",
120
+ "@stratakit/foundations": "^0.2.0",
60
121
  "react": ">=18.0.0",
61
122
  "react-dom": ">=18.0.0"
62
123
  },