@stratakit/structures 0.3.1 → 0.4.0

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/dist/Tabs.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as AkTab from "@ariakit/react/tab";
2
2
  import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
3
- interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
3
+ interface TabsProviderProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
4
4
  }
5
5
  /**
6
6
  * A set of tabs that can be used to switch between different views.
@@ -9,7 +9,7 @@ interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "
9
9
  *
10
10
  * Example:
11
11
  * ```tsx
12
- * <Tabs.Root>
12
+ * <Tabs.Provider>
13
13
  * <Tabs.TabList>
14
14
  * <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
15
15
  * <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
@@ -19,7 +19,7 @@ interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "
19
19
  * <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
20
20
  * <Tabs.TabPanel tabId="tab-2">Tab 2 content</Tabs.TabPanel>
21
21
  * <Tabs.TabPanel tabId="tab-3">Tab 3 content</Tabs.TabPanel>
22
- * </Tabs.Root>
22
+ * </Tabs.Provider>
23
23
  * ```
24
24
  *
25
25
  * The tabs and their panels are connected by matching the `id` prop on the `Tabs.Tab` component with
@@ -30,8 +30,8 @@ interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "
30
30
  *
31
31
  * **Note**: `Tabs` should _not_ be used for navigation; it is only intended for switching smaller views within an existing page.
32
32
  */
33
- declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
34
- declare namespace Tabs {
33
+ declare function TabsProvider(props: TabsProviderProps): import("react/jsx-runtime").JSX.Element;
34
+ declare namespace TabsProvider {
35
35
  var displayName: string;
36
36
  }
37
37
  interface TabListProps extends BaseProps {
@@ -40,7 +40,7 @@ interface TabListProps extends BaseProps {
40
40
  }
41
41
  /**
42
42
  * A simple container for the tab buttons.
43
- * Should be used as a child of `Tabs.Root` and consist of the individual `Tabs.Tab` components.
43
+ * Should be used as a child of `Tabs.Provider` and consist of the individual `Tabs.Tab` components.
44
44
  *
45
45
  * Example:
46
46
  * ```tsx
@@ -57,7 +57,7 @@ interface TabProps extends Omit<FocusableProps<"button">, "id"> {
57
57
  * The globally unique id of the tab. This will be used to identify the tab
58
58
  * and connect it to the corresponding `Tabs.TabPanel` via the `tabId`.
59
59
  *
60
- * The `selectedId` state of `Tabs.Root` will also be based on this id.
60
+ * The `selectedId` state of `Tabs.Provider` will also be based on this id.
61
61
  */
62
62
  id: string;
63
63
  }
@@ -86,7 +86,7 @@ declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("
86
86
  interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "unmountOnHide" | "focusable">, Required<Pick<AkTab.TabPanelProps, "tabId">> {
87
87
  }
88
88
  /**
89
- * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Root`.
89
+ * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Provider`.
90
90
  * The `tabId` prop should match the `id` prop of the corresponding `Tabs.Tab` component.
91
91
  *
92
92
  * Example:
@@ -95,4 +95,4 @@ interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps,
95
95
  * ```
96
96
  */
97
97
  declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
98
- export { Tabs as Root, TabList, Tab, TabPanel };
98
+ export { TabsProvider as Provider, TabList, Tab, TabPanel };
package/dist/Tabs.js CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  import cx from "classnames";
10
10
  const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
11
11
  const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
12
- function Tabs(props) {
12
+ function TabsProvider(props) {
13
13
  const {
14
14
  defaultSelectedId,
15
15
  selectedId,
@@ -63,8 +63,8 @@ const TabList = forwardRef((props, forwardedRef) => {
63
63
  AkTab.TabList,
64
64
  {
65
65
  ...rest,
66
- "data-kiwi-tone": tone,
67
- className: cx("\u{1F95D}-tab-list", props.className),
66
+ "data-_sk-tone": tone,
67
+ className: cx("\u{1F95D}TabList", props.className),
68
68
  ref: forwardedRef
69
69
  }
70
70
  );
@@ -75,7 +75,7 @@ const Tab = forwardRef((props, forwardedRef) => {
75
75
  {
76
76
  accessibleWhenDisabled: true,
77
77
  ...props,
78
- className: cx("\u{1F95D}-tab", props.className),
78
+ className: cx("\u{1F95D}Tab", props.className),
79
79
  ref: forwardedRef
80
80
  }
81
81
  );
@@ -85,13 +85,13 @@ const TabPanel = forwardRef((props, forwardedRef) => {
85
85
  AkTab.TabPanel,
86
86
  {
87
87
  ...props,
88
- className: cx("\u{1F95D}-tab-panel", props.className),
88
+ className: cx("\u{1F95D}TabPanel", props.className),
89
89
  ref: forwardedRef
90
90
  }
91
91
  );
92
92
  });
93
93
  export {
94
- Tabs as Root,
94
+ TabsProvider as Provider,
95
95
  Tab,
96
96
  TabList,
97
97
  TabPanel
package/dist/Toolbar.d.ts CHANGED
@@ -1,8 +1,13 @@
1
1
  import * as React from "react";
2
2
  import type { BaseProps } from "@stratakit/foundations/secret-internals";
3
- interface ToolbarProps extends BaseProps {
3
+ interface ToolbarGroupProps extends BaseProps {
4
4
  /** Must be set to `"solid"` for now. */
5
5
  variant: "solid";
6
+ /**
7
+ * The orientation of the toolbar.
8
+ * @default "horizontal"
9
+ */
10
+ orientation?: "horizontal" | "vertical";
6
11
  }
7
12
  /**
8
13
  * A toolbar for grouping related interactive elements.
@@ -17,18 +22,31 @@ interface ToolbarProps extends BaseProps {
17
22
  * <Toolbar.Item render={…} />
18
23
  * </Toolbar.Group>
19
24
  * ```
25
+ *
26
+ * A divider can be displayed between items by rendering the `Divider` component.
27
+ *
28
+ * ```jsx
29
+ * <Toolbar.Group variant="solid">
30
+ * <Toolbar.Item render={…} />
31
+ * <Divider orientation="vertical" />
32
+ * <Toolbar.Item render={…} />
33
+ * <Toolbar.Item render={…} />
34
+ * </Toolbar.Group>
35
+ * ```
20
36
  */
21
- declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
37
+ declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
22
38
  interface ToolbarItemProps extends Omit<BaseProps<"button">, "render">, Required<Pick<BaseProps, "render">> {
23
39
  }
24
40
  /**
25
41
  * An item within the toolbar.
26
42
  * Should be used with the `render` prop.
27
43
  *
44
+ * If rendering an `IconButton`, be sure to append `#icon-large` to the icon URL.
45
+ *
28
46
  * Example:
29
47
  * ```jsx
30
48
  * <Toolbar.Item
31
- * render={<IconButton variant="ghost" />}
49
+ * render={<IconButton variant="ghost" icon={`${placeholderIcon}#icon-large`} />}
32
50
  * />
33
51
  * ```
34
52
  */
package/dist/Toolbar.js CHANGED
@@ -1,28 +1,51 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import * as Toolbar from "@ariakit/react/toolbar";
4
- import { IconButtonContext } from "@stratakit/bricks/secret-internals";
4
+ import {
5
+ IconButtonContext,
6
+ TooltipContext
7
+ } from "@stratakit/bricks/secret-internals";
5
8
  import { forwardRef } from "@stratakit/foundations/secret-internals";
6
9
  import cx from "classnames";
7
- const ToolbarGroup = forwardRef((props, forwardedRef) => {
8
- return /* @__PURE__ */ jsx(
9
- IconButtonContext.Provider,
10
- {
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
- )
20
- }
21
- );
22
- });
10
+ const ToolbarGroup = forwardRef(
11
+ (props, forwardedRef) => {
12
+ return /* @__PURE__ */ jsx(
13
+ IconButtonContext.Provider,
14
+ {
15
+ value: React.useMemo(() => ({ iconSize: "large" }), []),
16
+ children: /* @__PURE__ */ jsx(
17
+ TooltipContext.Provider,
18
+ {
19
+ value: React.useMemo(
20
+ () => ({
21
+ placement: props.orientation === "vertical" ? "right" : "top"
22
+ }),
23
+ [props.orientation]
24
+ ),
25
+ children: /* @__PURE__ */ jsx(
26
+ Toolbar.Toolbar,
27
+ {
28
+ ...props,
29
+ className: cx("\u{1F95D}Toolbar", props.className),
30
+ ref: forwardedRef
31
+ }
32
+ )
33
+ }
34
+ )
35
+ }
36
+ );
37
+ }
38
+ );
23
39
  const ToolbarItem = forwardRef(
24
40
  (props, forwardedRef) => {
25
- return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, { ...props, ref: forwardedRef });
41
+ return /* @__PURE__ */ jsx(
42
+ Toolbar.ToolbarItem,
43
+ {
44
+ ...props,
45
+ className: cx("\u{1F95D}ToolbarItem", props.className),
46
+ ref: forwardedRef
47
+ }
48
+ );
26
49
  }
27
50
  );
28
51
  export {
package/dist/Tree.js CHANGED
@@ -12,7 +12,7 @@ const Tree = forwardRef((props, forwardedRef) => {
12
12
  role: "tree",
13
13
  ...props,
14
14
  render: /* @__PURE__ */ jsx(Composite, { store: composite }),
15
- className: cx("\u{1F95D}-tree", props.className),
15
+ className: cx("\u{1F95D}Tree", props.className),
16
16
  ref: forwardedRef,
17
17
  children: props.children
18
18
  }
package/dist/TreeItem.js CHANGED
@@ -154,7 +154,7 @@ const TreeItemRoot = React.memo(
154
154
  const style = React.useMemo(
155
155
  () => ({
156
156
  ...styleProp,
157
- "--\u{1F95D}tree-item-level": level
157
+ "--\u{1F95D}TreeItem-level": level
158
158
  }),
159
159
  [styleProp, level]
160
160
  );
@@ -171,7 +171,7 @@ const TreeItemRoot = React.memo(
171
171
  "aria-labelledby": labelId,
172
172
  "aria-describedby": describedBy,
173
173
  "aria-level": level,
174
- className: cx("\u{1F95D}-tree-item", props.className),
174
+ className: cx("\u{1F95D}TreeItem", props.className),
175
175
  style,
176
176
  ref: forwardedRef
177
177
  }
@@ -207,10 +207,10 @@ const TreeItemNode = React.memo((props) => {
207
207
  return /* @__PURE__ */ jsxs(
208
208
  ListItem.Root,
209
209
  {
210
- "data-kiwi-expanded": expanded,
211
- "data-kiwi-selected": selected,
212
- "data-kiwi-error": error ? true : void 0,
213
- className: "\u{1F95D}-tree-item-node",
210
+ "data-_sk-expanded": expanded,
211
+ "data-_sk-selected": selected,
212
+ "data-_sk-error": error ? true : void 0,
213
+ className: "\u{1F95D}TreeItemNode",
214
214
  role: void 0,
215
215
  ref,
216
216
  children: [
@@ -235,7 +235,7 @@ function TreeItemDecoration() {
235
235
  return icon || decorations ? /* @__PURE__ */ jsx(
236
236
  Role,
237
237
  {
238
- className: "\u{1F95D}-tree-item-decoration",
238
+ className: "\u{1F95D}TreeItemDecoration",
239
239
  id: decorationId,
240
240
  render: React.isValidElement(icon) ? icon : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
241
241
  children: !icon ? decorations : null
@@ -245,12 +245,12 @@ function TreeItemDecoration() {
245
245
  const TreeItemContent = React.memo(() => {
246
246
  const labelId = React.useContext(TreeItemLabelIdContext);
247
247
  const label = React.useContext(TreeItemLabelContext);
248
- return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label });
248
+ return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}TreeItemContent", children: label });
249
249
  });
250
250
  const TreeItemDescription = React.memo(() => {
251
251
  const description = React.useContext(TreeItemDescriptionContext);
252
252
  const descriptionId = React.useContext(TreeItemDescriptionIdContext);
253
- return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}-tree-item-description", children: description }) : void 0;
253
+ return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}TreeItemDescription", children: description }) : void 0;
254
254
  });
255
255
  const TreeItemActions = React.memo(
256
256
  forwardRef((props, forwardedRef) => {
@@ -263,7 +263,7 @@ const TreeItemActions = React.memo(
263
263
  props.onKeyDown,
264
264
  (e) => e.stopPropagation()
265
265
  ),
266
- className: cx("\u{1F95D}-tree-item-actions-container", props.className),
266
+ className: cx("\u{1F95D}TreeItemActionsContainer", props.className),
267
267
  ref: forwardedRef,
268
268
  render: /* @__PURE__ */ jsx(Toolbar, { focusLoop: false }),
269
269
  children: [
@@ -295,7 +295,7 @@ const TreeItemActionMenu = React.memo(
295
295
  }
296
296
  }, []);
297
297
  if (!displayMenu) return null;
298
- return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Root, { open, setOpen, children: [
298
+ return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(DropdownMenu.Provider, { open, setOpen, children: [
299
299
  /* @__PURE__ */ jsx(
300
300
  DropdownMenu.Button,
301
301
  {
@@ -366,8 +366,8 @@ const TreeItemInlineAction = React.memo(
366
366
  render: /* @__PURE__ */ jsx(ToolbarItem, { render: props.render }),
367
367
  dot,
368
368
  variant: "ghost",
369
- className: cx("\u{1F95D}-tree-item-action", props.className),
370
- "data-kiwi-visible": visible,
369
+ className: cx("\u{1F95D}TreeItemAction", props.className),
370
+ "data-_sk-visible": visible,
371
371
  ref: forwardedRef
372
372
  }
373
373
  );
@@ -382,7 +382,7 @@ const TreeItemExpander = forwardRef(
382
382
  "aria-hidden": "true",
383
383
  ...props,
384
384
  onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
385
- className: cx("\u{1F95D}-tree-item-expander", props.className),
385
+ className: cx("\u{1F95D}TreeItemExpander", props.className),
386
386
  variant: "ghost",
387
387
  ref: forwardedRef,
388
388
  children: /* @__PURE__ */ jsx(ChevronDown, {})
@@ -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:[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}}}`;
2
+ var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝ListItem{cursor:pointer;line-height:1.2;font-size:var(--stratakit-font-size-12);min-block-size:var(--🥝ListItem-height,1.75rem);padding-inline:var(--stratakit-space-x2);background-color:var(--🥝ListItem-background-color);--🥝ListItem-background-color:var(--🌀ListItem-state--default,transparent)var(--🌀ListItem-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀ListItem-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀ListItem-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)))var(--🌀ListItem-state--disabled,transparent);color:var(--🥝ListItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀ListItem-state--active,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-text-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-text-neutral-disabled)));--🥝Icon-color:var(--🌀ListItem-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀ListItem-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀ListItem-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--active-hover,var(--stratakit-color-icon-accent-strong))var(--🌀ListItem-state--disabled,var(--stratakit-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;display:grid}}@layer states{@media (any-hover:hover){.🥝ListItem:where(:hover){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}.🥝ListItem:where(:active){--🌀ListItem-state:var(--🌀ListItem-state--pressed)}.🥝ListItem:where(:disabled,[aria-disabled=true]){--🌀ListItem-state:var(--🌀ListItem-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝ListItem:where(:has(>:nth-child(2 of .🥝ListItemContent))){--🥝ListItem-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝ListItem{--🌀ListItem-state:var(--🌀ListItem-state--default);--🌀ListItem-state--default:var(--🌀ListItem-state, );--🌀ListItem-state--hover:var(--🌀ListItem-state, );--🌀ListItem-state--pressed:var(--🌀ListItem-state, );--🌀ListItem-state--active:var(--🌀ListItem-state, );--🌀ListItem-state--active-hover:var(--🌀ListItem-state, );--🌀ListItem-state--disabled:var(--🌀ListItem-state, )}}@layer base{.🥝ListItemContent{grid-column:content}}@layer base{.🥝ListItemDecoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:var(--stratakit-space-x1);display:flex}:where(.🥝ListItemContent)~.🥝ListItemDecoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝ListItem:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝AccordionItem{--🥝AccordionItem-gap:var(--stratakit-space-x3);--🥝AccordionItem-padding:var(--stratakit-space-x3)}@layer base{.🥝AccordionItem{contain:paint;border-block-end:1px solid var(--stratakit-color-border-neutral-muted);grid-template-rows:[header-start]auto[header-end content-start]auto[content-end];grid-template-columns:[marker-before-start]auto[marker-before-end decoration-before-start]auto[decoration-before-end header-content-start body-content-start]minmax(0,1fr)[header-content-end decoration-after-start]auto[decoration-after-end marker-after-start]auto[marker-after-end body-content-end];display:grid}}@layer states{.🥝AccordionItem:where([data-_sk-open=true]){--🥝ChevronDown-rotate:-.5turn}}@layer base{.🥝AccordionItemHeader{background-color:var(--🥝AccordionItemHeader-background-color);padding:var(--🥝AccordionItem-padding);--🥝AccordionItemHeader-background-color:var(--🌀AccordionItemHeader-state--default,transparent)var(--🌀AccordionItemHeader-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀AccordionItemHeader-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed));grid-area:header/marker-before-start/header/marker-after-end;grid-template-columns:inherit;align-items:center;transition:background-color .15s ease-out;display:grid;position:relative}@supports (grid-template-columns:subgrid){.🥝AccordionItemHeader{grid-template-columns:subgrid}}}@layer states{@media (any-hover:hover){.🥝AccordionItemHeader:where(:hover){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--hover)}}.🥝AccordionItemHeader:where(:active){--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--pressed)}}@layer base.🌀{.🥝AccordionItemHeader{--🌀AccordionItemHeader-state:var(--🌀AccordionItemHeader-state--default);--🌀AccordionItemHeader-state--default:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--hover:var(--🌀AccordionItemHeader-state, );--🌀AccordionItemHeader-state--pressed:var(--🌀AccordionItemHeader-state, )}}@layer base{.🥝AccordionItemMarker{pointer-events:none;grid-area:1/marker-before;margin-inline-start:calc(-1*var(--🥝GhostAligner-inline-offset));margin-inline-end:var(--🥝AccordionItem-gap)}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemMarker{grid-column:marker-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:calc(-1*var(--🥝GhostAligner-inline-offset))}}@layer base{.🥝AccordionItemLabel.🥝Text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;font-weight:500;display:inline-block}}@layer base{.🥝AccordionItemButton{cursor:pointer;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);grid-column:header-content}.🥝AccordionItemButton:after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer states{.🥝AccordionItemButton:focus-visible{outline:0}.🥝AccordionItemButton:focus-visible:after{outline:var(--🥝focus-outline);outline-offset:var(--🥝focus-outline-offset)}}@layer base{.🥝AccordionItemContent{padding-block:var(--🥝AccordionItem-padding);text-box:cap alphabetic;color:var(--stratakit-color-text-neutral-secondary);grid-area:content/body-content}}@layer base{.🥝AccordionItemDecoration{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;margin-inline-end:var(--🥝AccordionItem-gap);display:flex}:where(.🥝AccordionItemHeading,.🥝AccordionItemButton)~.🥝AccordionItemDecoration{grid-column:decoration-after;margin-inline-start:var(--🥝AccordionItem-gap);margin-inline-end:0}}@layer base{.🥝AccordionItemHeading{text-box:cap alphabetic;grid-column:header-content;margin-block:0}}@layer base{.🥝Banner{background-color:var(--🥝Banner-color-background);border:1px solid var(--🥝Banner-color-border);padding:var(--stratakit-space-x3);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;display:grid}}@layer modifiers{.🥝Banner:where([data-_sk-variant=outline]){--🥝Banner-color-background:var(--stratakit-color-bg-elevation-base)}.🥝Banner:where([data-_sk-variant=outline]):where([data-_sk-tone=neutral]){--🥝Banner-color-border:var(--stratakit-color-border-neutral-base)}.🥝Banner:where([data-_sk-tone=info]){--🥝Banner-color-border:var(--stratakit-color-border-info-base);--🥝Icon-color:var(--stratakit-color-icon-info-base)}.🥝Banner:where([data-_sk-tone=positive]){--🥝Banner-color-border:var(--stratakit-color-border-positive-base);--🥝Icon-color:var(--stratakit-color-icon-positive-base)}.🥝Banner:where([data-_sk-tone=attention]){--🥝Banner-color-border:var(--stratakit-color-border-attention-base);--🥝Icon-color:var(--stratakit-color-icon-attention-base)}.🥝Banner:where([data-_sk-tone=critical]){--🥝Banner-color-border:var(--stratakit-color-border-critical-base);--🥝Icon-color:var(--stratakit-color-icon-critical-base)}}@layer base{.🥝BannerIcon{grid-area:1/start;align-self:start;margin-inline-end:var(--stratakit-space-x2)}}@layer base{.🥝BannerLabel{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);font-weight:500}}@layer base{.🥝BannerMessage{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝BannerActions{justify-self:start;align-items:baseline;gap:var(--stratakit-space-x2);flex-wrap:wrap;grid-column:content;margin-block-start:var(--stratakit-space-x3);display:flex}}@layer base{.🥝BannerDismissButton{grid-area:1/end;align-self:start;margin-inline-start:var(--stratakit-space-x3)}}@media (forced-colors:active){.🥝Banner{--🥝Icon-color:CanvasText}}@layer base{.🥝Chip{isolation:isolate;--🥝Chip-padding-inline:var(--stratakit-space-x2);padding-inline:var(--🥝Chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝Chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--stratakit-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝Chip:where([data-_sk-variant=solid]){background-color:var(--stratakit-color-bg-neutral-base)}.🥝Chip:where([data-_sk-variant=outline]){background-color:var(--stratakit-color-bg-page-base)}}@layer base{.🥝ChipLabel:where(button){border-radius:inherit}.🥝ChipLabel:where(button):after{content:"";border-radius:inherit;position:absolute;inset:0}}@layer base{.🥝ChipDismissButton.🥝IconButton{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝Chip-padding-inline));position:relative}}@layer base{.🥝DropdownMenu{background-color:var(--stratakit-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@layer states{.🥝DropdownMenuButton:where([aria-expanded=true]){--🥝DisclosureArrow-rotate:.5turn}}@layer base{.🥝DropdownMenuItem.🥝ListItem{border-radius:4px}}@layer states{.🥝DropdownMenuItem.🥝ListItem:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝DropdownMenuCheckmark-visibility:hidden}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}}@layer base{.🥝ErrorRegion{z-index:1;position:relative}}@layer states{.🥝ErrorRegion:where([data-_sk-expanded=true]){--🥝ChevronDown-rotate:-.5turn;--🥝ErrorRegionHeader-border-end-radius:0}.🥝ErrorRegion:where([data-_sk-visible=true]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝ErrorRegion:where([data-_sk-visible=false]){--🥝ErrorRegionContainer-display:none}}@layer base{.🥝ErrorRegionContainer{isolation:isolate;display:var(--🥝ErrorRegionContainer-display,flex);border:1px solid var(--stratakit-color-border-attention-base);background-color:var(--stratakit-color-bg-elevation-base);box-shadow:var(--stratakit-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionContainer:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝ErrorRegionHeader{min-block-size:2rem;border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝ErrorRegionHeader-border-end-radius,calc(8px - 1px));flex-wrap:wrap;padding-inline-start:var(--stratakit-space-x2);padding-inline-end:var(--stratakit-space-x1);font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝ErrorRegionIcon{--🥝Icon-color:var(--stratakit-color-icon-attention-base)}}@layer base{.🥝ErrorRegionLabel{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝ErrorRegionDialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝ErrorRegionDialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where(:not([data-enter])){max-block-size:0}}.🥝ErrorRegionDialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝ErrorRegionDialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝ErrorRegionItems{border-block-start:1px solid var(--stratakit-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝ErrorRegionItem{padding-block:calc(var(--stratakit-space-x1) + var(--stratakit-space-x2));flex-direction:column;padding-inline-start:calc(var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1));padding-inline-end:var(--stratakit-space-x1);display:flex}.🥝ErrorRegionItem:where(:not(:nth-child(1 of .🥝ErrorRegionItem))){border-block-start:1px solid var(--stratakit-color-border-page-base)}}@layer base{.🥝ErrorRegionItemActions{margin-block-start:var(--stratakit-space-x2)}}@layer base{.🥝Table:where(table){table-layout:fixed;border-collapse:separate;border-spacing:0;inline-size:100%}}@layer base{.🥝TableHeader{color:var(--stratakit-color-text-neutral-secondary)}}@layer base{.🥝TableRow:where([role=row]){display:flex}}@layer base{.🥝TableCaption,.🥝TableCell{min-block-size:3rem;padding-block:var(--stratakit-space-x2);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;padding-inline-start:var(--stratakit-space-x4);padding-inline-end:var(--stratakit-space-x3)}:is(.🥝TableCaption,.🥝TableCell):where(th,td){block-size:3rem}}@layer base{.🥝TableCell{background-color:var(--🌀TableCell-state--default,var(--stratakit-color-bg-page-base))var(--🌀TableCell-state--hover,color-mix(in oklch,var(--stratakit-color-bg-page-base)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%)))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,color-mix(in oklch,var(--stratakit-color-bg-glow-on-surface-accent-pressed)100.0%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-strong-hover-\%)));--🥝TableCell-border-color--active:var(--stratakit-color-border-accent-strong);border-block-end:1px solid var(--🌀TableCell-state--default,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--hover,var(--stratakit-color-border-neutral-muted))var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));min-inline-size:4rem;position:relative}.🥝TableCell:where(:not(th,td)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝TableCell:where(th){font-weight:inherit}.🥝TableCell:before{content:"";pointer-events:none;border-block-start:1px solid var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,transparent)var(--🌀TableCell-state--active,var(--🥝TableCell-border-color--active))var(--🌀TableCell-state--active-hover,var(--🥝TableCell-border-color--active));position:absolute;inset:-1px 0 0}}@layer states{@media (any-hover:hover){.🥝TableCell:where(:hover){--🌀TableCell-state:var(--🌀TableCell-state--hover)}:where(.🥝TableRow:hover) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--hover)}}:where(.🥝TableRow:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active)}@media (any-hover:hover){:where(.🥝TableRow:hover:has(input[type=checkbox]:checked,[role=checkbox][aria-checked=true])) .🥝TableCell:where([role=cell],td){--🌀TableCell-state:var(--🌀TableCell-state--active-hover)}}}@layer base.🌀{.🥝TableCell{--🌀TableCell-state:var(--🌀TableCell-state--default);--🌀TableCell-state--default:var(--🌀TableCell-state, );--🌀TableCell-state--hover:var(--🌀TableCell-state, );--🌀TableCell-state--active:var(--🌀TableCell-state, );--🌀TableCell-state--active-hover:var(--🌀TableCell-state, )}}@layer base{.🥝TabList{--🥝Tab-active-stripe-gap:var(--stratakit-space-x2);--🥝Tab-active-stripe-size:var(--stratakit-space-x05);--🥝Tab-padding-inline:var(--stratakit-space-x1);gap:var(--stratakit-space-x2);display:flex;position:relative}@supports (position-anchor:--foo){.🥝TabList:after{content:"";position-anchor:--🥝Tab-active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝Tab-padding-inline));block-size:var(--🥝Tab-active-stripe-size);background-color:var(--🥝Tab-active-stripe-color);will-change:transform;position:absolute;inset-block-end:calc(anchor(end) - var(--🥝Tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝Tab-padding-inline))}}}@layer modifiers{.🥝TabList[aria-orientation=horizontal]{padding-block-end:var(--🥝Tab-active-stripe-gap)}.🥝TabList:where([data-_sk-tone=neutral]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-inverse)}.🥝TabList:where([data-_sk-tone=accent]){--🥝Tab-active-stripe-color:var(--stratakit-color-border-accent-strong)}}@layer base{.🥝Tab{font-size:var(--stratakit-font-size-12);color:var(--🥝Tab-color);background-color:var(--🥝Tab-background-color);block-size:1.25rem;padding-inline:var(--🥝Tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;align-items:center;gap:var(--stratakit-space-x1);border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex;position:relative}.🥝Tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝TabList[data-_sk-tone=neutral]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--selected,var(--stratakit-color-text-neutral-primary))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝TabList[data-_sk-tone=accent]) .🥝Tab{--🥝Tab-background-color:var(--🌀Tab-state--default,transparent)var(--🌀Tab-state--hover,var(--stratakit-color-bg-glow-on-surface-accent-hover))var(--🌀Tab-state--selected,transparent)var(--🌀Tab-state--disabled,transparent);--🥝Tab-color:var(--🌀Tab-state--default,var(--stratakit-color-text-neutral-tertiary))var(--🌀Tab-state--hover,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--selected,var(--stratakit-color-text-accent-strong))var(--🌀Tab-state--disabled,var(--stratakit-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝Tab:where([aria-selected=true]){--🌀Tab-state:var(--🌀Tab-state--selected);anchor-name:--🥝Tab-active-tab}@supports not (anchor-name:--foo){.🥝Tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝Tab-active-stripe-color);block-size:var(--🥝Tab-active-stripe-size);inset-inline:var(--🥝Tab-padding-inline);inset-block:auto calc(var(--🥝Tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝Tab:where(:hover){--🌀Tab-state:var(--🌀Tab-state--hover)}}.🥝Tab:where(:disabled,[aria-disabled=true]){--🌀Tab-state:var(--🌀Tab-state--disabled);--🥝Tab-active-stripe-color:var(--stratakit-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝Tab{--🌀Tab-state:var(--🌀Tab-state--default);--🌀Tab-state--default:var(--🌀Tab-state, );--🌀Tab-state--hover:var(--🌀Tab-state, );--🌀Tab-state--selected:var(--🌀Tab-state, );--🌀Tab-state--disabled:var(--🌀Tab-state, )}}@layer base{.🥝TabPanel{--🥝focus-outline-offset:calc(var(--stratakit-space-x05)*-1)}.🥝TabPanel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝TabList,.🥝Tab{--🥝Tab-active-stripe-color:CanvasText}.🥝Tab{--🥝Tab-color:CanvasText}.🥝Tab:where([aria-selected=true]){forced-color-adjust:none;--🥝Tab-background-color:SelectedItem;--🥝Tab-color:SelectedItemText}.🥝Tab:where(:disabled,[aria-disabled=true]){--🥝Tab-color:GrayText}}@layer base{.🥝Toolbar{gap:var(--stratakit-space-x1);background-color:var(--stratakit-color-bg-page-base);box-shadow:var(--stratakit-shadow-toolbar-base);padding:var(--stratakit-space-x1);--🥝Divider-main-axis-margin:var(--stratakit-space-x2);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);border-radius:8px;align-items:center;display:inline-flex}}@layer modifiers{.🥝Toolbar:where([aria-orientation=vertical]){flex-direction:column}}@layer modifiers{.🥝ToolbarItem.🥝IconButton:where([data-_sk-variant=ghost]){--🥝Button-background-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀Button-state--active,var(--stratakit-color-bg-accent-base))var(--🌀Button-state--disabled,var(--stratakit-color-bg-glow-on-surface-disabled));--🥝Icon-color:var(--🌀Button-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀Button-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀Button-state--active,var(--stratakit-color-icon-neutral-emphasis));--🥝Button-border-color:var(--🌀Button-state--default,transparent)var(--🌀Button-state--hover,transparent)var(--🌀Button-state--pressed,transparent)var(--🌀Button-state--active,var(--stratakit-color-border-accent-base))var(--🌀Button-state--disabled,transparent)}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}}@layer base{.🥝Tree{background-color:var(--stratakit-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝TreeItem{min-inline-size:max-content;position:relative}}@layer states{.🥝TreeItem:focus-visible{isolation:isolate;outline:none}.🥝TreeItem:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝TreeItem:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝TreeItem-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝TreeItem{--🥝TreeItem-action-visibility:visible}}}}@layer base{.🥝TreeItemNode.🥝ListItem{isolation:isolate;--🥝ListItem-color:var(--🥝TreeItem-color);padding-inline-start:calc(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(var(--🥝TreeItem-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]){--🥝Icon-color:var(--stratakit-color-icon-attention-base);--🥝TreeItem-color:var(--stratakit-color-text-attention-base)}}@layer states{.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active)}@media (any-hover:hover){.🥝TreeItemNode.🥝ListItem:where(:hover[data-_sk-selected=true]){--🌀ListItem-state:var(--🌀ListItem-state--active-hover)}}.🥝TreeItemNode.🥝ListItem:where([data-_sk-expanded=false]){--🥝ChevronDown-rotate:-.25turn}.🥝TreeItemNode.🥝ListItem:where(:not([data-_sk-expanded])){--🥝TreeItem-expander-visibility:hidden}}@layer base{.🥝TreeItemContent.🥝ListItemContent{white-space:nowrap}}@layer base{.🥝TreeItemDescription.🥝ListItemContent{color:var(--🥝TreeItem-color,var(--🌀ListItem-state--default,var(--stratakit-color-text-neutral-secondary)))}}@layer base{.🥝TreeItemActionsContainer.🥝ListItemDecoration{background-color:var(--stratakit-color-bg-page-base);visibility:var(--🥝TreeItem-actions-container-visibility,var(--🥝TreeItem-action-visibility));align-self:stretch;padding-inline-end:var(--stratakit-space-x1);display:inline-flex;position:sticky;inset-inline-end:0}.🥝TreeItemActionsContainer.🥝ListItemDecoration:before{content:"";background-color:var(--🥝ListItem-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝TreeItemActionsContainer.🥝ListItemDecoration:where(:has(.🥝TreeItemAction[data-_sk-visible=true])){--🥝TreeItem-actions-container-visibility:visible}}@layer base{.🥝TreeItemAction.🥝IconButton{visibility:var(--🥝TreeItem-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=false]){--🥝TreeItem-action-visibility:hidden}.🥝TreeItemAction.🥝IconButton:where([data-_sk-visible=true]){--🥝TreeItem-action-visibility:visible}}@layer base{.🥝TreeItemExpander.🥝IconButton{visibility:var(--🥝TreeItem-expander-visibility);z-index:1}}@layer base{.🥝TreeItemDecoration{align-items:center;gap:var(--stratakit-space-x1);display:flex}}@media (forced-colors:active){.🥝TreeItemNode.🥝ListItem{--🥝ListItem-background-color:Canvas;--🥝TreeItem-color:CanvasText}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true],[data-_sk-selected=true]){forced-color-adjust:none}.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemContent,.🥝TreeItemNode.🥝ListItem:where([data-_sk-error=true]) .🥝TreeItemDecoration{color:marktext;background-color:mark}.🥝TreeItemNode.🥝ListItem:where([data-_sk-selected=true]){--🥝ListItem-background-color:SelectedItem;--🥝TreeItem-color:SelectedItemText}}}`;
3
3
 
4
4
  // src/styles.css.ts
5
5
  var styles_css_default = styles_default;
@@ -9,7 +9,7 @@ const ListItem = forwardRef((props, forwardedRef) => {
9
9
  {
10
10
  role: "listitem",
11
11
  ...props,
12
- className: cx("\u{1F95D}-list-item", props.className),
12
+ className: cx("\u{1F95D}ListItem", props.className),
13
13
  ref: forwardedRef
14
14
  }
15
15
  );
@@ -21,7 +21,7 @@ const ListItemContent = forwardRef(
21
21
  {
22
22
  ...props,
23
23
  variant: "body-sm",
24
- className: cx("\u{1F95D}-list-item-content", props.className),
24
+ className: cx("\u{1F95D}ListItemContent", props.className),
25
25
  ref: forwardedRef
26
26
  }
27
27
  );
@@ -33,7 +33,7 @@ const ListItemDecoration = forwardRef(
33
33
  Role.div,
34
34
  {
35
35
  ...props,
36
- className: cx("\u{1F95D}-list-item-decoration", props.className),
36
+ className: cx("\u{1F95D}ListItemDecoration", props.className),
37
37
  ref: forwardedRef
38
38
  }
39
39
  );
@@ -42,7 +42,7 @@ const ChevronDown = forwardRef((props, forwardedRef) => {
42
42
  ChevronDownBase,
43
43
  {
44
44
  ...props,
45
- className: cx("\u{1F95D}-chevron-down", props.className),
45
+ className: cx("\u{1F95D}ChevronDown", props.className),
46
46
  ref: forwardedRef
47
47
  }
48
48
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stratakit/structures",
3
3
  "type": "module",
4
- "version": "0.3.1",
4
+ "version": "0.4.0",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
7
7
  "types": "./dist/index.d.ts",
@@ -101,23 +101,23 @@
101
101
  "ui"
102
102
  ],
103
103
  "dependencies": {
104
- "@ariakit/react": "^0.4.17",
105
- "@stratakit/bricks": "^0.3.3",
104
+ "@ariakit/react": "^0.4.18",
105
+ "@stratakit/bricks": "^0.4.0",
106
106
  "classnames": "^2.5.1",
107
- "zustand": "^5.0.6"
107
+ "zustand": "^5.0.7"
108
108
  },
109
109
  "devDependencies": {
110
- "@types/node": "^22.16.5",
111
- "@types/react": "^19.1.8",
112
- "@types/react-dom": "^19.1.6",
113
- "esbuild": "^0.25.8",
114
- "react": "^19.1.0",
115
- "react-dom": "^19.1.0",
116
- "typescript": "~5.8.3",
117
- "@stratakit/foundations": "0.2.2"
110
+ "@types/node": "^22.17.2",
111
+ "@types/react": "^19.1.10",
112
+ "@types/react-dom": "^19.1.7",
113
+ "esbuild": "^0.25.9",
114
+ "react": "^19.1.1",
115
+ "react-dom": "^19.1.1",
116
+ "typescript": "~5.9.2",
117
+ "@stratakit/foundations": "0.3.0"
118
118
  },
119
119
  "peerDependencies": {
120
- "@stratakit/foundations": "^0.2.2",
120
+ "@stratakit/foundations": "^0.3.0",
121
121
  "react": ">=18.0.0",
122
122
  "react-dom": ">=18.0.0"
123
123
  },