@stratakit/structures 0.2.4 → 0.3.1
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 +113 -0
- package/dist/AccordionItem.d.ts +64 -15
- package/dist/Banner.d.ts +156 -21
- package/dist/Banner.js +150 -49
- package/dist/DEV/Banner.js +156 -49
- package/dist/DEV/DropdownMenu.js +6 -3
- package/dist/DEV/Tabs.js +39 -3
- package/dist/DEV/TreeItem.js +129 -104
- package/dist/DEV/styles.css.js +1 -1
- package/dist/DEV/~utils.icons.js +2 -2
- package/dist/DropdownMenu.js +6 -3
- package/dist/Table.d.ts +12 -0
- package/dist/Tabs.d.ts +9 -2
- package/dist/Tabs.js +39 -3
- package/dist/TreeItem.d.ts +21 -12
- package/dist/TreeItem.js +123 -95
- package/dist/styles.css.js +1 -1
- package/dist/~utils.icons.js +2 -2
- package/package.json +6 -6
package/dist/TreeItem.d.ts
CHANGED
|
@@ -61,28 +61,37 @@ interface TreeItemProps extends Omit<BaseProps, "content" | "children"> {
|
|
|
61
61
|
/** Secondary line of text to display additional information about the tree item. */
|
|
62
62
|
description?: React.ReactNode;
|
|
63
63
|
/**
|
|
64
|
-
* The secondary actions available for the tree item. Must be a list of `Tree.ItemAction` components.
|
|
64
|
+
* The secondary actions available for the tree item displayed as icon buttons in a toolbar. Must be a list of `Tree.ItemAction` components.
|
|
65
65
|
*
|
|
66
66
|
* Example:
|
|
67
67
|
* ```tsx
|
|
68
|
-
*
|
|
69
|
-
* error
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
68
|
+
* inlineActions={
|
|
69
|
+
* error
|
|
70
|
+
* ? [
|
|
71
|
+
* <Tree.ItemAction key={…} icon={…} label={…} />
|
|
72
|
+
* ]
|
|
73
|
+
* : [
|
|
74
|
+
* <Tree.ItemAction key={…} icon={…} label={…} />,
|
|
75
|
+
* <Tree.ItemAction key={…} icon={…} label={…} />,
|
|
76
|
+
* ]
|
|
77
|
+
* }
|
|
73
78
|
* ```
|
|
74
79
|
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
* - When the `error` prop is set, the _second_ action and onwards will overflow.
|
|
80
|
+
* Inline actions should only be used for frequently used and quickly accessible actions.
|
|
81
|
+
* At most two inline actions are displayed. A single action should be specified when tree item has an error.
|
|
78
82
|
*
|
|
79
|
-
* The actions are normally hidden until the treeitem is hovered or focused.
|
|
83
|
+
* The inline actions are normally hidden until the treeitem is hovered or focused.
|
|
80
84
|
* When the `error` prop is set, the actions will be made visible by default. The first
|
|
81
|
-
* action slot
|
|
85
|
+
* action slot should usually be used to display an error-related action.
|
|
86
|
+
*
|
|
87
|
+
* @experimental
|
|
88
|
+
*/
|
|
89
|
+
inlineActions?: React.ReactNode[];
|
|
90
|
+
/**
|
|
91
|
+
* The secondary actions available for the tree item displayed in a dropdown menu. Must be a list of `Tree.ItemAction` components.
|
|
82
92
|
*
|
|
83
93
|
* ```tsx
|
|
84
94
|
* actions={[
|
|
85
|
-
* error && <Tree.ItemAction key={…} icon={…} label={…} />,
|
|
86
95
|
* <Tree.ItemAction key={…} icon={…} label={…} />,
|
|
87
96
|
* <Tree.ItemAction key={…} icon={…} label={…} />,
|
|
88
97
|
* ]}
|
package/dist/TreeItem.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { CompositeItem } from "@ariakit/react/composite";
|
|
4
4
|
import { PopoverProvider } from "@ariakit/react/popover";
|
|
@@ -19,6 +19,7 @@ import { ChevronDown, MoreHorizontal, StatusIcon } from "./~utils.icons.js";
|
|
|
19
19
|
import * as ListItem from "./~utils.ListItem.js";
|
|
20
20
|
import * as DropdownMenu from "./DropdownMenu.js";
|
|
21
21
|
const TreeItemErrorContext = React.createContext(void 0);
|
|
22
|
+
const TreeItemInlineActionsContext = React.createContext(void 0);
|
|
22
23
|
const TreeItemActionsContext = React.createContext(void 0);
|
|
23
24
|
const TreeItemDecorationsContext = React.createContext(void 0);
|
|
24
25
|
const TreeItemIconContext = React.createContext(void 0);
|
|
@@ -33,9 +34,6 @@ const TreeItemDescriptionContext = React.createContext(void 0);
|
|
|
33
34
|
const TreeItemDescriptionIdContext = React.createContext(
|
|
34
35
|
void 0
|
|
35
36
|
);
|
|
36
|
-
const TreeItemInlineActionsContext = React.createContext(void 0);
|
|
37
|
-
const TreeItemOverflowActionsContext = React.createContext(void 0);
|
|
38
|
-
const TreeItemHasOverflowActionsContext = React.createContext(false);
|
|
39
37
|
const TreeItem = React.memo(
|
|
40
38
|
forwardRef((props, forwardedRef) => {
|
|
41
39
|
const {
|
|
@@ -47,6 +45,7 @@ const TreeItem = React.memo(
|
|
|
47
45
|
unstable_decorations: _unstable_decorations,
|
|
48
46
|
label: _label,
|
|
49
47
|
description: _description,
|
|
48
|
+
inlineActions: _inlineActions,
|
|
50
49
|
actions: _actions,
|
|
51
50
|
error: _error,
|
|
52
51
|
onClick: onClickProp,
|
|
@@ -98,6 +97,7 @@ const TreeItem = React.memo(
|
|
|
98
97
|
);
|
|
99
98
|
function TreeItemRootProvider(props) {
|
|
100
99
|
const {
|
|
100
|
+
inlineActions,
|
|
101
101
|
actions,
|
|
102
102
|
label,
|
|
103
103
|
description,
|
|
@@ -110,19 +110,25 @@ function TreeItemRootProvider(props) {
|
|
|
110
110
|
const decorationId = React.useId();
|
|
111
111
|
const icon = error ? /* @__PURE__ */ jsx(StatusIcon, { tone: "attention" }) : iconProp;
|
|
112
112
|
const hasDecoration = icon || decorations;
|
|
113
|
-
return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
|
|
114
|
-
|
|
113
|
+
return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inlineActions, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
|
|
114
|
+
TreeItemDisplayActionsMenuContext.Provider,
|
|
115
115
|
{
|
|
116
|
-
value:
|
|
117
|
-
children: /* @__PURE__ */ jsx(
|
|
118
|
-
|
|
116
|
+
value: actions ? actions.length > 0 : false,
|
|
117
|
+
children: /* @__PURE__ */ jsx(
|
|
118
|
+
TreeItemDecorationIdContext.Provider,
|
|
119
119
|
{
|
|
120
|
-
value:
|
|
121
|
-
children:
|
|
120
|
+
value: hasDecoration ? decorationId : void 0,
|
|
121
|
+
children: /* @__PURE__ */ jsx(TreeItemDecorationsContext.Provider, { value: decorations, children: /* @__PURE__ */ jsx(TreeItemIconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx(TreeItemLabelIdContext.Provider, { value: labelId, children: /* @__PURE__ */ jsx(TreeItemLabelContext.Provider, { value: label, children: /* @__PURE__ */ jsx(TreeItemDescriptionContext.Provider, { value: description, children: /* @__PURE__ */ jsx(
|
|
122
|
+
TreeItemDescriptionIdContext.Provider,
|
|
123
|
+
{
|
|
124
|
+
value: description ? descriptionId : void 0,
|
|
125
|
+
children: props.children
|
|
126
|
+
}
|
|
127
|
+
) }) }) }) }) })
|
|
122
128
|
}
|
|
123
|
-
)
|
|
129
|
+
)
|
|
124
130
|
}
|
|
125
|
-
) }) });
|
|
131
|
+
) }) }) });
|
|
126
132
|
}
|
|
127
133
|
const TreeItemRoot = React.memo(
|
|
128
134
|
forwardRef((props, forwardedRef) => {
|
|
@@ -175,9 +181,29 @@ const TreeItemRoot = React.memo(
|
|
|
175
181
|
);
|
|
176
182
|
})
|
|
177
183
|
);
|
|
184
|
+
function useRenderActions() {
|
|
185
|
+
const ref = React.useRef(null);
|
|
186
|
+
const [renderActions, setRenderActions] = React.useState(false);
|
|
187
|
+
React.useEffect(() => {
|
|
188
|
+
const el = ref.current;
|
|
189
|
+
if (!el || renderActions) return;
|
|
190
|
+
const observer = new IntersectionObserver(([entry]) => {
|
|
191
|
+
if (!entry.isIntersecting) return;
|
|
192
|
+
React.startTransition(() => {
|
|
193
|
+
setRenderActions(true);
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
observer.observe(el);
|
|
197
|
+
return () => {
|
|
198
|
+
observer.disconnect();
|
|
199
|
+
};
|
|
200
|
+
}, [renderActions]);
|
|
201
|
+
return [ref, renderActions];
|
|
202
|
+
}
|
|
178
203
|
const TreeItemNode = React.memo((props) => {
|
|
179
204
|
const { expanded, selected, onExpanderClick } = props;
|
|
180
205
|
const error = React.useContext(TreeItemErrorContext);
|
|
206
|
+
const [ref, renderActions] = useRenderActions();
|
|
181
207
|
return /* @__PURE__ */ jsxs(
|
|
182
208
|
ListItem.Root,
|
|
183
209
|
{
|
|
@@ -186,11 +212,12 @@ const TreeItemNode = React.memo((props) => {
|
|
|
186
212
|
"data-kiwi-error": error ? true : void 0,
|
|
187
213
|
className: "\u{1F95D}-tree-item-node",
|
|
188
214
|
role: void 0,
|
|
215
|
+
ref,
|
|
189
216
|
children: [
|
|
190
217
|
/* @__PURE__ */ jsx(TreeItemDecorations, { onExpanderClick }),
|
|
191
218
|
/* @__PURE__ */ jsx(TreeItemContent, {}),
|
|
192
219
|
/* @__PURE__ */ jsx(TreeItemDescription, {}),
|
|
193
|
-
/* @__PURE__ */ jsx(TreeItemActions, {})
|
|
220
|
+
renderActions && /* @__PURE__ */ jsx(TreeItemActions, {})
|
|
194
221
|
]
|
|
195
222
|
}
|
|
196
223
|
);
|
|
@@ -227,7 +254,7 @@ const TreeItemDescription = React.memo(() => {
|
|
|
227
254
|
});
|
|
228
255
|
const TreeItemActions = React.memo(
|
|
229
256
|
forwardRef((props, forwardedRef) => {
|
|
230
|
-
return /* @__PURE__ */
|
|
257
|
+
return /* @__PURE__ */ jsxs(
|
|
231
258
|
ListItem.Decoration,
|
|
232
259
|
{
|
|
233
260
|
...props,
|
|
@@ -238,81 +265,69 @@ const TreeItemActions = React.memo(
|
|
|
238
265
|
),
|
|
239
266
|
className: cx("\u{1F95D}-tree-item-actions-container", props.className),
|
|
240
267
|
ref: forwardedRef,
|
|
241
|
-
render: /* @__PURE__ */
|
|
242
|
-
|
|
243
|
-
/* @__PURE__ */ jsx(
|
|
244
|
-
|
|
268
|
+
render: /* @__PURE__ */ jsx(Toolbar, { focusLoop: false }),
|
|
269
|
+
children: [
|
|
270
|
+
/* @__PURE__ */ jsx(TreeItemInlineActionsRenderer, {}),
|
|
271
|
+
/* @__PURE__ */ jsx(TreeItemActionMenu, {})
|
|
272
|
+
]
|
|
245
273
|
}
|
|
246
|
-
)
|
|
274
|
+
);
|
|
247
275
|
})
|
|
248
276
|
);
|
|
249
|
-
function
|
|
250
|
-
const
|
|
251
|
-
const
|
|
252
|
-
|
|
253
|
-
const { inline, overflow } = React.useMemo(() => {
|
|
254
|
-
const actions = React.Children.toArray(actionsProp).filter(Boolean);
|
|
255
|
-
const inline2 = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
256
|
-
actions.slice(0, actionsLimit - 1),
|
|
257
|
-
actions.length === actionsLimit ? actions[actionsLimit - 1] : null
|
|
258
|
-
] });
|
|
259
|
-
const overflow2 = actions.length > actionsLimit ? actions.slice(actionsLimit - 1) : void 0;
|
|
260
|
-
return { inline: inline2, overflow: overflow2 };
|
|
261
|
-
}, [actionsProp, actionsLimit]);
|
|
262
|
-
return /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inline, children: /* @__PURE__ */ jsx(TreeItemOverflowActionsContext.Provider, { value: overflow, children: /* @__PURE__ */ jsx(TreeItemHasOverflowActionsContext.Provider, { value: !!overflow, children: props.children }) }) });
|
|
263
|
-
}
|
|
264
|
-
function TreeItemInlineActions() {
|
|
265
|
-
const actions = React.useContext(TreeItemInlineActionsContext);
|
|
266
|
-
return actions;
|
|
277
|
+
function TreeItemInlineActionsRenderer() {
|
|
278
|
+
const actions = React.useContext(TreeItemInlineActionsContext) ?? [];
|
|
279
|
+
const actionsToDisplay = actions.slice(0, 2);
|
|
280
|
+
return actionsToDisplay;
|
|
267
281
|
}
|
|
268
282
|
const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
|
|
269
|
-
const
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
if (!overflow) return null;
|
|
282
|
-
return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, setOpen, children: [
|
|
283
|
-
/* @__PURE__ */ jsx(
|
|
284
|
-
DropdownMenu.Button,
|
|
285
|
-
{
|
|
286
|
-
onKeyDown: (e) => {
|
|
287
|
-
if (arrowKeys.includes(e.key)) {
|
|
288
|
-
isArrowKeyPressed.current = true;
|
|
289
|
-
}
|
|
290
|
-
queueMicrotask(() => {
|
|
291
|
-
isArrowKeyPressed.current = false;
|
|
292
|
-
});
|
|
293
|
-
},
|
|
294
|
-
render: /* @__PURE__ */ jsx(TreeItemAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
|
|
283
|
+
const TreeItemActionsMenuContext = React.createContext(false);
|
|
284
|
+
const TreeItemDisplayActionsMenuContext = React.createContext(false);
|
|
285
|
+
const TreeItemActionMenu = React.memo(
|
|
286
|
+
forwardRef((props, forwardedRef) => {
|
|
287
|
+
const [open, _setOpen] = React.useState(false);
|
|
288
|
+
const isArrowKeyPressed = React.useRef(false);
|
|
289
|
+
const displayMenu = React.useContext(TreeItemDisplayActionsMenuContext);
|
|
290
|
+
const setOpen = React.useCallback((value) => {
|
|
291
|
+
if (value && !isArrowKeyPressed.current) {
|
|
292
|
+
_setOpen(true);
|
|
293
|
+
} else {
|
|
294
|
+
_setOpen(false);
|
|
295
295
|
}
|
|
296
|
-
)
|
|
297
|
-
|
|
298
|
-
|
|
296
|
+
}, []);
|
|
297
|
+
if (!displayMenu) return null;
|
|
298
|
+
return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, setOpen, children: [
|
|
299
|
+
/* @__PURE__ */ jsx(
|
|
300
|
+
DropdownMenu.Button,
|
|
301
|
+
{
|
|
302
|
+
...props,
|
|
303
|
+
onKeyDown: (e) => {
|
|
304
|
+
if (arrowKeys.includes(e.key)) {
|
|
305
|
+
isArrowKeyPressed.current = true;
|
|
306
|
+
}
|
|
307
|
+
queueMicrotask(() => {
|
|
308
|
+
isArrowKeyPressed.current = false;
|
|
309
|
+
});
|
|
310
|
+
},
|
|
311
|
+
render: /* @__PURE__ */ jsx(TreeItemInlineAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) }),
|
|
312
|
+
ref: forwardedRef
|
|
313
|
+
}
|
|
314
|
+
),
|
|
315
|
+
/* @__PURE__ */ jsx(TreeItemMenuActionsContent, {})
|
|
316
|
+
] }) });
|
|
317
|
+
})
|
|
318
|
+
);
|
|
319
|
+
function TreeItemMenuActionsContent() {
|
|
320
|
+
return /* @__PURE__ */ jsx(TreeItemActionsMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { children: /* @__PURE__ */ jsx(TreeItemActionsRenderer, {}) }) });
|
|
299
321
|
}
|
|
300
|
-
function
|
|
301
|
-
const actions = React.useContext(
|
|
302
|
-
return
|
|
322
|
+
function TreeItemActionsRenderer() {
|
|
323
|
+
const actions = React.useContext(TreeItemActionsContext) ?? [];
|
|
324
|
+
return actions;
|
|
303
325
|
}
|
|
304
326
|
const TreeItemAction = React.memo(
|
|
305
327
|
forwardRef((props, forwardedRef) => {
|
|
306
|
-
const
|
|
307
|
-
const
|
|
308
|
-
|
|
309
|
-
// visible by default during error state
|
|
310
|
-
label,
|
|
311
|
-
icon,
|
|
312
|
-
dot,
|
|
313
|
-
...rest
|
|
314
|
-
} = props;
|
|
315
|
-
if (React.useContext(TreeItemActionsOverflowMenuContext)) {
|
|
328
|
+
const { label, icon, dot, ...rest } = props;
|
|
329
|
+
const actionsMenuContext = React.useContext(TreeItemActionsMenuContext);
|
|
330
|
+
if (actionsMenuContext) {
|
|
316
331
|
return /* @__PURE__ */ jsx(
|
|
317
332
|
DropdownMenu.Item,
|
|
318
333
|
{
|
|
@@ -324,23 +339,36 @@ const TreeItemAction = React.memo(
|
|
|
324
339
|
}
|
|
325
340
|
);
|
|
326
341
|
}
|
|
342
|
+
return /* @__PURE__ */ jsx(TreeItemInlineAction, { ...props, ref: forwardedRef });
|
|
343
|
+
})
|
|
344
|
+
);
|
|
345
|
+
const TreeItemInlineAction = React.memo(
|
|
346
|
+
forwardRef((props, forwardedRef) => {
|
|
347
|
+
const error = React.useContext(TreeItemErrorContext);
|
|
348
|
+
const generatedId = React.useId();
|
|
349
|
+
const {
|
|
350
|
+
id = generatedId,
|
|
351
|
+
visible = error ? true : void 0,
|
|
352
|
+
// visible by default during error state
|
|
353
|
+
label,
|
|
354
|
+
icon,
|
|
355
|
+
dot,
|
|
356
|
+
...rest
|
|
357
|
+
} = props;
|
|
327
358
|
return /* @__PURE__ */ jsx(
|
|
328
|
-
|
|
359
|
+
IconButton,
|
|
329
360
|
{
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
ref: forwardedRef
|
|
342
|
-
}
|
|
343
|
-
)
|
|
361
|
+
id,
|
|
362
|
+
label,
|
|
363
|
+
icon,
|
|
364
|
+
inert: visible === false ? "true" : void 0,
|
|
365
|
+
...rest,
|
|
366
|
+
render: /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }),
|
|
367
|
+
dot,
|
|
368
|
+
variant: "ghost",
|
|
369
|
+
className: cx("\u{1F95D}-tree-item-action", props.className),
|
|
370
|
+
"data-kiwi-visible": visible,
|
|
371
|
+
ref: forwardedRef
|
|
344
372
|
}
|
|
345
373
|
);
|
|
346
374
|
})
|
package/dist/styles.css.js
CHANGED
|
@@ -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(--stratakit-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--active,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where(:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@media (forced-colors:active){.🥝-list-item:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝-accordion-item{--🥝accordion-item-gap:12px;--🥝accordion-item-padding:12px}@layer base{.🥝-accordion-item{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];display:grid}}@layer states{.🥝-accordion-item:where([data-kiwi-open=true]){--🥝chevron-down-rotate:-.5turn}}@layer base{.🥝-accordion-item-header{padding:var(--🥝accordion-item-padding);grid-area:header/decoration-before-start/header/decoration-after-end;grid-template-columns:inherit;align-items:center;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝-accordion-item-header{grid-template-columns:subgrid}}}@layer base{.🥝-accordion-item-marker{pointer-events:none;grid-area:1/decoration-after;margin-inline-start:var(--🥝accordion-item-gap);margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}}@layer states{@media (any-hover:hover){:where(.🥝-accordion-item-header:hover) .🥝-accordion-item-marker{--🌀button-state:var(--🌀button-state--hover)}}}@layer base{.🥝-accordion-item-label.🥝-text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝-accordion-item-button{cursor:pointer;--🥝focus-outline-offset:-4px;border-radius:12px;grid-column:content}.🥝-accordion-item-button:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝-accordion-item-button:focus-visible{outline:0}.🥝-accordion-item-button:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝-accordion-item-content{text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content;padding-block-end:var(--🥝accordion-item-padding)}}@layer base{.🥝-accordion-item-decoration{grid-column:decoration-before;margin-inline-end:var(--🥝accordion-item-gap)}}@layer base{.🥝-accordion-item-heading{text-box:cap alphabetic;grid-column:content;margin-block:0}}@layer base{.🥝-banner{background-color:var(--🥝banner-color-background);border:1px solid var(--🥝banner-color-border);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;padding:12px;display:grid}}@layer modifiers{.🥝-banner:where([data-kiwi-variant=outline]){--🥝banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝-banner:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝-banner:where([data-kiwi-tone=info]){--🥝banner-color-border:var(--stratakit-color-border-info-base);--🥝icon-color:var(--stratakit-color-icon-info-base)}.🥝-banner:where([data-kiwi-tone=positive]){--🥝banner-color-border:var(--stratakit-color-border-positive-base);--🥝icon-color:var(--stratakit-color-icon-positive-base)}.🥝-banner:where([data-kiwi-tone=attention]){--🥝banner-color-border:var(--stratakit-color-border-attention-base);--🥝icon-color:var(--stratakit-color-icon-attention-base)}.🥝-banner:where([data-kiwi-tone=critical]){--🥝banner-color-border:var(--stratakit-color-border-critical-base);--🥝icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝-banner-icon{grid-area:1/start;align-self:start;margin-inline-end:8px}}@layer base{.🥝-banner-label{grid-column:content;align-self:start;margin-block-end:4px;font-weight:500}}@layer base{.🥝-banner-message{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝-banner-actions{flex-wrap:wrap;grid-column:content;justify-self:start;align-items:baseline;gap:8px;margin-block-start:12px;display:flex}}@layer base{.🥝-banner-dismiss-button{grid-area:1/end;align-self:start;margin-inline-start:12px}}@media (forced-colors:active){.🥝-banner{--🥝icon-color:CanvasText}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;padding-inline:var(--🥝chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝-chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝-chip-label:where(button){border-radius:inherit}.🥝-chip-label:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer base{.🥝-dropdown-menu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--stratakit-shadow-surface-xl);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-item-dot.🥝-dot{align-self:center}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-error-region{z-index:1;position:relative}}@layer states{.🥝-error-region:where([data-kiwi-expanded=true]){--🥝chevron-down-rotate:-.5turn;--🥝error-region-header-border-end-radius:0}.🥝-error-region:where([data-kiwi-visible=true]){block-size:2.625rem;padding-block:4px;padding-inline:4px}.🥝-error-region:where([data-kiwi-visible=false]){--🥝error-region-container-display:none}}@layer base{.🥝-error-region-container{isolation:isolate;display:var(--🥝error-region-container-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝-error-region-container:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝-error-region-header{border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));flex-wrap:wrap;min-block-size:2rem;padding-inline:8px 4px;font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝-error-region-icon{--🥝icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝-error-region-label{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝-error-region-dialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝-error-region-dialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where(:not([data-enter])){max-block-size:0}}.🥝-error-region-dialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝-error-region-dialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝-error-region-items{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝-error-region-item{flex-direction:column;padding-block:12px;padding-inline:calc(12px + 1rem) 4px;display:flex}.🥝-error-region-item:where(:not(:nth-child(1 of .🥝-error-region-item))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝-error-region-item-actions{margin-block-start:8px}}@layer base{.🥝-table:where(table){table-layout:fixed;inline-size:100%}}@layer base{.🥝-table-header{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝-table-row:where([role=row]){display:flex}}@layer base{.🥝-table-caption,.🥝-table-cell{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem .75rem}:is(.🥝-table-caption,.🥝-table-cell):where(th,td){block-size:3rem}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--stratakit-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)));border-block-end:1px solid var(--stratakit-color-border-neutral-muted);min-inline-size:4rem}.🥝-table-cell:where(:not(th,td)){flex-grow:1;flex-basis:4rem;column-gap:.5rem}.🥝-table-cell:where(th){font-weight:inherit}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:8px;--🥝tab-active-stripe-size:2px;--🥝tab-padding-inline:4px;gap:8px;display:flex;position:relative}@supports (position-anchor:--foo){.🥝-tab-list:after{content:"";position-anchor:--🥝active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝tab-padding-inline));block-size:var(--🥝tab-active-stripe-size);background-color:var(--🥝tab-active-stripe-color);position:absolute;inset-block-end:calc(anchor(end) - var(--🥝tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝tab-padding-inline))}@media (prefers-reduced-motion:no-preference){.🥝-tab-list:after{transition:inset-inline-start .15s ease-in-out,inline-size .15s ease-in-out}}}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}.🥝-tab-list:where([data-kiwi-tone=neutral]){--🥝tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-tone=accent]){--🥝tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝-tab{font-size:var(--stratakit-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-bg);block-size:1.25rem;padding-inline:var(--🥝tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;align-items:center;gap:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected);anchor-name:--🥝active-tab}@supports not (anchor-name:--foo){.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:var(--🥝tab-active-stripe-size);inset-inline:var(--🥝tab-padding-inline);inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where(:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{--🥝focus-outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝-tab-list,.🥝-tab{--🥝tab-active-stripe-color:CanvasText}.🥝-tab{--🥝tab-color:CanvasText}.🥝-tab:where([aria-selected=true]){forced-color-adjust:none;--🥝tab-bg:SelectedItem;--🥝tab-color:SelectedItemText}.🥝-tab:where(:disabled,[aria-disabled=true]){--🥝tab-color:GrayText}}@layer base{.🥝-toolbar{background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);border-radius:8px;gap:4px;padding:4px;display:inline-flex}}@media (forced-colors:active){.🥝-toolbar{border:1px solid}}@layer base{.🥝-tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-action-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;--🥝list-item-color:var(--🥝tree-item-color);padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]){--🥝icon-color:var(--stratakit-color-icon-attention-base);--🥝tree-item-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}@media (any-hover:hover){.🥝-tree-item-node.🥝-list-item:where(:hover[data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active-hover)}}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝chevron-down-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🥝tree-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝tree-item-actions-container-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions-container.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions-container.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-actions-container-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@media (forced-colors:active){.🥝-tree-item-node.🥝-list-item{--🥝list-item-background-color:Canvas;--🥝tree-item-color:CanvasText}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true],[data-kiwi-selected=true]){forced-color-adjust:none}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-content,.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-decoration{color:marktext;background-color:mark}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🥝list-item-background-color:SelectedItem;--🥝tree-item-color:SelectedItemText}}}`;
|
|
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,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀list-item-state--active,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where(:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@media (forced-colors:active){.🥝-list-item:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝-accordion-item{--🥝accordion-item-gap:12px;--🥝accordion-item-padding:12px}@layer base{.🥝-accordion-item{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝-accordion-item:where([data-kiwi-open=true]){--🥝chevron-down-rotate:-.5turn}}@layer base{.🥝-accordion-item-header{background-color:var(--🥝accordion-item-header-background-color);padding:var(--🥝accordion-item-padding);--🥝accordion-item-header-background-color:var(--🌀accordion-item-header-state--default,transparent)var(--🌀accordion-item-header-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀accordion-item-header-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝-accordion-item-header{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝-accordion-item-header:where(:hover){--🌀accordion-item-header-state:var(--🌀accordion-item-header-state--hover)}}.🥝-accordion-item-header:where(:active){--🌀accordion-item-header-state:var(--🌀accordion-item-header-state--pressed)}}@layer base.🌀{.🥝-accordion-item-header{--🌀accordion-item-header-state:var(--🌀accordion-item-header-state--default);--🌀accordion-item-header-state--default:var(--🌀accordion-item-header-state, );--🌀accordion-item-header-state--hover:var(--🌀accordion-item-header-state, );--🌀accordion-item-header-state--pressed:var(--🌀accordion-item-header-state, )}}@layer base{.🥝-accordion-item-marker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝ghost-inline-offset));margin-inline-end:var(--🥝accordion-item-gap)}:where(.🥝-accordion-item-heading,.🥝-accordion-item-button)~.🥝-accordion-item-marker{grid-column:marker-after;margin-inline-start:var(--🥝accordion-item-gap);margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}}@layer base{.🥝-accordion-item-label.🥝-text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝-accordion-item-button{cursor:pointer;--🥝focus-outline-offset:-4px;border-radius:12px;grid-column:header-content}.🥝-accordion-item-button:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝-accordion-item-button:focus-visible{outline:0}.🥝-accordion-item-button:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝-accordion-item-content{padding-block:var(--🥝accordion-item-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝-accordion-item-decoration{grid-column:decoration-before;align-items:center;gap:.25rem;margin-inline-end:var(--🥝accordion-item-gap);display:flex}:where(.🥝-accordion-item-heading,.🥝-accordion-item-button)~.🥝-accordion-item-decoration{grid-column:decoration-after;margin-inline-start:var(--🥝accordion-item-gap);margin-inline-end:0}}@layer base{.🥝-accordion-item-heading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝-banner{background-color:var(--🥝banner-color-background);border:1px solid var(--🥝banner-color-border);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;padding:12px;display:grid}}@layer modifiers{.🥝-banner:where([data-kiwi-variant=outline]){--🥝banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝-banner:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝-banner:where([data-kiwi-tone=info]){--🥝banner-color-border:var(--stratakit-color-border-info-base);--🥝icon-color:var(--stratakit-color-icon-info-base)}.🥝-banner:where([data-kiwi-tone=positive]){--🥝banner-color-border:var(--stratakit-color-border-positive-base);--🥝icon-color:var(--stratakit-color-icon-positive-base)}.🥝-banner:where([data-kiwi-tone=attention]){--🥝banner-color-border:var(--stratakit-color-border-attention-base);--🥝icon-color:var(--stratakit-color-icon-attention-base)}.🥝-banner:where([data-kiwi-tone=critical]){--🥝banner-color-border:var(--stratakit-color-border-critical-base);--🥝icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝-banner-icon{grid-area:1/start;align-self:start;margin-inline-end:8px}}@layer base{.🥝-banner-label{grid-column:content;align-self:start;margin-block-end:4px;font-weight:500}}@layer base{.🥝-banner-message{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝-banner-actions{flex-wrap:wrap;grid-column:content;justify-self:start;align-items:baseline;gap:8px;margin-block-start:12px;display:flex}}@layer base{.🥝-banner-dismiss-button{grid-area:1/end;align-self:start;margin-inline-start:12px}}@media (forced-colors:active){.🥝-banner{--🥝icon-color:CanvasText}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;padding-inline:var(--🥝chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝-chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝-chip-label:where(button){border-radius:inherit}.🥝-chip-label:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer base{.🥝-dropdown-menu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-item-dot.🥝-dot{align-self:center}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-error-region{z-index:1;position:relative}}@layer states{.🥝-error-region:where([data-kiwi-expanded=true]){--🥝chevron-down-rotate:-.5turn;--🥝error-region-header-border-end-radius:0}.🥝-error-region:where([data-kiwi-visible=true]){block-size:2.625rem;padding-block:4px;padding-inline:4px}.🥝-error-region:where([data-kiwi-visible=false]){--🥝error-region-container-display:none}}@layer base{.🥝-error-region-container{isolation:isolate;display:var(--🥝error-region-container-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝-error-region-container:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝-error-region-header{border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));flex-wrap:wrap;min-block-size:2rem;padding-inline:8px 4px;font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝-error-region-icon{--🥝icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝-error-region-label{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝-error-region-dialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝-error-region-dialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where(:not([data-enter])){max-block-size:0}}.🥝-error-region-dialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝-error-region-dialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝-error-region-items{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝-error-region-item{flex-direction:column;padding-block:12px;padding-inline:calc(12px + 1rem) 4px;display:flex}.🥝-error-region-item:where(:not(:nth-child(1 of .🥝-error-region-item))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝-error-region-item-actions{margin-block-start:8px}}@layer base{.🥝-table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝-table-header{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝-table-row:where([role=row]){display:flex}}@layer base{.🥝-table-caption,.🥝-table-cell{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem .75rem}:is(.🥝-table-caption,.🥝-table-cell):where(th,td){block-size:3rem}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--stratakit-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀table-cell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀table-cell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝table-cell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀table-cell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀table-cell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀table-cell-state--active,var(--🥝table-cell-border-color--active))var(--🌀table-cell-state--active-hover,var(--🥝table-cell-border-color--active));min-inline-size:4rem;position:relative}.🥝-table-cell:where(:not(th,td)){flex-grow:1;flex-basis:4rem;column-gap:.5rem}.🥝-table-cell:where(th){font-weight:inherit}.🥝-table-cell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀table-cell-state--default,transparent)var(--🌀table-cell-state--hover,transparent)var(--🌀table-cell-state--active,var(--🥝table-cell-border-color--active))var(--🌀table-cell-state--active-hover,var(--🥝table-cell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}:where(.🥝-table-row:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--active)}@media (any-hover:hover){:where(.🥝-table-row:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--active-hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, );--🌀table-cell-state--active:var(--🌀table-cell-state, );--🌀table-cell-state--active-hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:8px;--🥝tab-active-stripe-size:2px;--🥝tab-padding-inline:4px;gap:8px;display:flex;position:relative}@supports (position-anchor:--foo){.🥝-tab-list:after{content:"";position-anchor:--🥝active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝tab-padding-inline));block-size:var(--🥝tab-active-stripe-size);background-color:var(--🥝tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝tab-padding-inline))}}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}.🥝-tab-list:where([data-kiwi-tone=neutral]){--🥝tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-tone=accent]){--🥝tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝-tab{font-size:var(--stratakit-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-background-color);block-size:1.25rem;padding-inline:var(--🥝tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;align-items:center;gap:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-background-color:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-background-color:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected);anchor-name:--🥝active-tab}@supports not (anchor-name:--foo){.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:var(--🥝tab-active-stripe-size);inset-inline:var(--🥝tab-padding-inline);inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where(:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{--🥝focus-outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝-tab-list,.🥝-tab{--🥝tab-active-stripe-color:CanvasText}.🥝-tab{--🥝tab-color:CanvasText}.🥝-tab:where([aria-selected=true]){forced-color-adjust:none;--🥝tab-background-color:SelectedItem;--🥝tab-color:SelectedItemText}.🥝-tab:where(:disabled,[aria-disabled=true]){--🥝tab-color:GrayText}}@layer base{.🥝-toolbar{background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);border-radius:8px;gap:4px;padding:4px;display:inline-flex}}@media (forced-colors:active){.🥝-toolbar{border:1px solid}}@layer base{.🥝-tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-action-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;--🥝list-item-color:var(--🥝tree-item-color);padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]){--🥝icon-color:var(--stratakit-color-icon-attention-base);--🥝tree-item-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}@media (any-hover:hover){.🥝-tree-item-node.🥝-list-item:where(:hover[data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active-hover)}}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝chevron-down-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🥝tree-item-color,var(--🌀list-item-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝tree-item-actions-container-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions-container.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions-container.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-actions-container-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@media (forced-colors:active){.🥝-tree-item-node.🥝-list-item{--🥝list-item-background-color:Canvas;--🥝tree-item-color:CanvasText}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true],[data-kiwi-selected=true]){forced-color-adjust:none}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-content,.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-decoration{color:marktext;background-color:mark}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🥝list-item-background-color:SelectedItem;--🥝tree-item-color:SelectedItemText}}}`;
|
|
3
3
|
|
|
4
4
|
// src/styles.css.ts
|
|
5
5
|
var styles_css_default = styles_default;
|
package/dist/~utils.icons.js
CHANGED
|
@@ -15,10 +15,10 @@ const statusIcons = {
|
|
|
15
15
|
"M7.25 1.855a1.5 1.5 0 0 1 1.5 0l4.196 2.423a1.5 1.5 0 0 1 .75 1.299v4.846a1.5 1.5 0 0 1-.75 1.298L8.75 14.144a1.5 1.5 0 0 1-1.5 0l-4.196-2.423a1.5 1.5 0 0 1-.75-1.298V5.577a1.5 1.5 0 0 1 .75-1.299L7.25 1.855Zm1 .866a.5.5 0 0 0-.5 0L3.554 5.144a.5.5 0 0 0-.25.433v4.846a.5.5 0 0 0 .25.432l4.196 2.423a.5.5 0 0 0 .5 0l4.196-2.423a.5.5 0 0 0 .25-.432V5.577a.5.5 0 0 0-.25-.433L8.25 2.721ZM9.85 5.7a.501.501 0 0 1 .8.6l-3 4a.502.502 0 0 1-.754.053l-1.5-1.5-.064-.078a.5.5 0 0 1 .693-.693l.079.064 1.091 1.092L9.85 5.7Z"
|
|
16
16
|
),
|
|
17
17
|
attention: createIconFromPath(
|
|
18
|
-
"
|
|
18
|
+
"M8 12.75a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5ZM6.68 2.885c.568-1.047 2.072-1.047 2.64 0l4.82 8.9A1.5 1.5 0 0 1 12.82 14H10.5v-1h2.321a.5.5 0 0 0 .44-.738l-4.822-8.9a.5.5 0 0 0-.879 0l-4.821 8.9a.5.5 0 0 0 .44.738h2.32v1H3.18a1.5 1.5 0 0 1-1.319-2.215l4.82-8.9ZM8 6.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5Z"
|
|
19
19
|
),
|
|
20
20
|
critical: createIconFromPath(
|
|
21
|
-
"
|
|
21
|
+
"M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM8 10a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-5.5a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"
|
|
22
22
|
),
|
|
23
23
|
info: createIconFromPath(
|
|
24
24
|
"M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm0 4a.5.5 0 0 1 .5.5v3.5h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-3h-1a.5.5 0 0 1 0-1H8Zm-.125-2.25a.625.625 0 1 1 0 1.25.625.625 0 0 1 0-1.25Z"
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stratakit/structures",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.1",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -102,22 +102,22 @@
|
|
|
102
102
|
],
|
|
103
103
|
"dependencies": {
|
|
104
104
|
"@ariakit/react": "^0.4.17",
|
|
105
|
-
"@stratakit/bricks": "^0.3.
|
|
105
|
+
"@stratakit/bricks": "^0.3.3",
|
|
106
106
|
"classnames": "^2.5.1",
|
|
107
107
|
"zustand": "^5.0.6"
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
|
-
"@types/node": "^22.16.
|
|
110
|
+
"@types/node": "^22.16.5",
|
|
111
111
|
"@types/react": "^19.1.8",
|
|
112
112
|
"@types/react-dom": "^19.1.6",
|
|
113
|
-
"esbuild": "^0.25.
|
|
113
|
+
"esbuild": "^0.25.8",
|
|
114
114
|
"react": "^19.1.0",
|
|
115
115
|
"react-dom": "^19.1.0",
|
|
116
116
|
"typescript": "~5.8.3",
|
|
117
|
-
"@stratakit/foundations": "0.2.
|
|
117
|
+
"@stratakit/foundations": "0.2.2"
|
|
118
118
|
},
|
|
119
119
|
"peerDependencies": {
|
|
120
|
-
"@stratakit/foundations": "^0.2.
|
|
120
|
+
"@stratakit/foundations": "^0.2.2",
|
|
121
121
|
"react": ">=18.0.0",
|
|
122
122
|
"react-dom": ">=18.0.0"
|
|
123
123
|
},
|