@stratakit/structures 0.3.2 → 0.4.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/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, {})
package/dist/index.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  export * as unstable_AccordionItem from "./AccordionItem.js";
2
2
  export { default as unstable_Banner } from "./Banner.js";
3
3
  export { default as Chip } from "./Chip.js";
4
+ export * as unstable_Dialog from "./Dialog.js";
4
5
  export * as DropdownMenu from "./DropdownMenu.js";
5
6
  export * as unstable_ErrorRegion from "./ErrorRegion.js";
7
+ export * as unstable_NavigationRail from "./NavigationRail.js";
6
8
  export * as Table from "./Table.js";
7
9
  export * as Tabs from "./Tabs.js";
8
10
  export * as unstable_Toolbar from "./Toolbar.js";
package/dist/index.js CHANGED
@@ -2,8 +2,10 @@
2
2
  import * as unstable_AccordionItem from "./AccordionItem.js";
3
3
  import { default as default2 } from "./Banner.js";
4
4
  import { default as default3 } from "./Chip.js";
5
+ import * as unstable_Dialog from "./Dialog.js";
5
6
  import * as DropdownMenu from "./DropdownMenu.js";
6
7
  import * as unstable_ErrorRegion from "./ErrorRegion.js";
8
+ import * as unstable_NavigationRail from "./NavigationRail.js";
7
9
  import * as Table from "./Table.js";
8
10
  import * as Tabs from "./Tabs.js";
9
11
  import * as unstable_Toolbar from "./Toolbar.js";
@@ -16,6 +18,8 @@ export {
16
18
  Tree,
17
19
  unstable_AccordionItem,
18
20
  default2 as unstable_Banner,
21
+ unstable_Dialog,
19
22
  unstable_ErrorRegion,
23
+ unstable_NavigationRail,
20
24
  unstable_Toolbar
21
25
  };
@@ -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);padding-inline:var(--stratakit-space-x2);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;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:var(--stratakit-space-x1);display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{margin-inline:var(--stratakit-space-x1)0;grid-column:decoration-after}}@media (forced-colors:active){.🥝-list-item:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝-accordion-item{--🥝accordion-item-gap:var(--stratakit-space-x3);--🥝accordion-item-padding:var(--stratakit-space-x3)}@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;border-radius:var(--stratakit-space-x3);--🥝focus-outline-offset:calc(var(--stratakit-space-x1)*-1);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{align-items:center;gap:var(--stratakit-space-x1);grid-column:decoration-before;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);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-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:var(--stratakit-space-x2)}}@layer base{.🥝-banner-label{grid-column:content;align-self:start;margin-block-end:var(--stratakit-space-x1);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{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{.🥝-banner-dismiss-button{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-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);padding:var(--stratakit-space-x1);box-shadow:var(--stratakit-shadow-dropdown-base);border-radius:8px;flex-direction:column;display:flex}}@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:var(--stratakit-space-x2)}}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid}}@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]){padding-inline:var(--stratakit-space-x1);padding-block:var(--stratakit-space-x1);block-size:2.625rem}.🥝-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{min-block-size:2rem;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;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{.🥝-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{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}.🥝-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:var(--stratakit-space-x2)}}@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{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(.🥝-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)){column-gap:var(--stratakit-space-x2);flex-grow:1;flex-basis:4rem}.🥝-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: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){.🥝-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;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(.🥝-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:calc(var(--stratakit-space-x05)*-1)}.🥝-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{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);border-radius:8px;align-items:center;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(var(--stratakit-space-x2) + calc(var(--stratakit-space-x1) + var(--stratakit-space-x05))*(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:var(--stratakit-space-x1);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:var(--stratakit-space-x1);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{.🥝DialogWrapper{block-size:100%;inline-size:100%;display:grid;position:fixed;inset:0}}@layer base{.🥝Dialog{min-block-size:min(100%,var(--🥝Dialog-min-block-size,94px));background-color:var(--stratakit-color-bg-elevation-base);max-block-size:calc(100% - 64px);min-inline-size:min(100%,296px);max-inline-size:calc(100% - 64px);box-shadow:var(--stratakit-shadow-dialog-base);border-radius:12px;flex-direction:column;place-self:center;padding:1px;display:flex;position:relative;overflow:auto}.🥝Dialog:where(:has(.🥝DialogFooter)){--🥝Dialog-min-block-size:156px}.🥝Dialog:where(dialog:modal){inset:0}.🥝Dialog:where(dialog:modal)::backdrop{background-color:#0000}}@layer base{.🥝DialogHeader{padding-block:var(--stratakit-space-x4);padding-inline:var(--stratakit-space-x5);align-items:center;display:flex}}@layer base{.🥝DialogHeading{margin-inline-end:auto}}@layer base{.🥝DialogContent{font-size:var(--stratakit-font-size-12);line-height:1.3333}.🥝DialogContent{color:var(--stratakit-color-text-neutral-primary);overflow-block:auto;padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5);overflow-y:auto}}@layer base{.🥝DialogFooter{border-block-start:1px solid var(--stratakit-color-border-page-base);background-color:var(--stratakit-color-bg-page-base);padding-inline:var(--stratakit-space-x5);padding-block:var(--stratakit-space-x5);border-end-end-radius:12px;border-end-start-radius:12px;align-items:center;display:flex}}@layer base{.🥝DialogActionList{gap:var(--stratakit-space-x3);margin-inline-start:auto;display:flex}}@layer base{.🥝DialogBackdrop{opacity:.8;background:var(--stratakit-color-bg-elevation-overlay)}}@media (forced-colors:active){.🥝Dialog{border:1px solid}}@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{.🥝NavigationRail{gap:var(--stratakit-space-x1);block-size:100%;min-inline-size:calc(1.5rem + 4*var(--stratakit-space-x2));inline-size:var(--🥝NavigationRail-inline-size);background-color:var(--stratakit-color-bg-page-depth);border-inline-end:1px solid var(--stratakit-color-border-neutral-muted);--🥝Divider-cross-axis-margin:var(--stratakit-space-x1);flex-direction:column;display:inline-flex}}@layer modifiers{.🥝NavigationRail:where([data-_sk-expanded=true]){--🥝NavigationRail-inline-size:256px}}@layer base{.🥝NavigationRailHeader{padding-block:var(--stratakit-space-x2);padding-inline:var(--stratakit-space-x4);align-items:center;min-block-size:56px;display:flex;position:relative}}@layer base{.🥝NavigationRailToggleButton{border:1px solid var(--stratakit-color-border-neutral-muted);background-color:var(--stratakit-color-bg-page-base);block-size:1rem;inline-size:1rem;color:var(--stratakit-color-icon-neutral-base);border-radius:9999px;place-items:center;margin-inline-start:auto;transition:rotate .15s ease-out;display:grid}.🥝NavigationRailToggleButton:before{content:"";border-radius:inherit;block-size:24px;inline-size:24px;position:absolute}}@layer states{@media (any-hover:hover){.🥝NavigationRailToggleButton:where(:hover){border-color:color-mix(in oklch,var(--stratakit-color-border-neutral-muted)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-border-glow-base-hover-\%))}}:where(.🥝NavigationRailHeader[data-_sk-collapsed=true]) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-expanded=true]){rotate:180deg}}@layer base{.🥝NavigationRailContent{padding-block:var(--stratakit-space-x1);padding-inline:var(--stratakit-space-x2);flex-direction:column;flex:999;display:flex;overflow:auto}}@layer base{.🥝NavigationRailList{flex-direction:column;display:flex}}@layer base{.🥝NavigationRailListItem{flex-shrink:0}}@layer base{.🥝NavigationRailItemAction{font-size:var(--stratakit-font-size-14);line-height:1.4286}.🥝NavigationRailItemAction{align-items:center;gap:var(--stratakit-space-x3);inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;min-block-size:calc(1.5rem + 2*var(--stratakit-space-x2));padding:var(--stratakit-space-x2);--🥝Icon-size:1.5rem;background-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationRailItemAction-state--disabled,transparent);color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-text-neutral-disabled));--🥝Icon-color:var(--🌀NavigationRailItemAction-state--default,var(--stratakit-color-icon-neutral-base))var(--🌀NavigationRailItemAction-state--hover,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-hover))var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationRailItemAction-state--disabled,var(--stratakit-color-icon-neutral-disabled));border:1px solid;border-color:var(--🌀NavigationRailItemAction-state--default,transparent)var(--🌀NavigationRailItemAction-state--hover,transparent)var(--🌀NavigationRailItemAction-state--pressed,transparent)var(--🌀NavigationRailItemAction-state--active,var(--stratakit-color-border-accent-base))var(--🌀NavigationRailItemAction-state--disabled,transparent);-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;text-decoration:none;transition:background-color .15s ease-out;display:inline-flex}}@layer states{@media (any-hover:hover){.🥝NavigationRailItemAction:where(:hover){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}}.🥝NavigationRailItemAction:where([data-has-popover-open]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--hover)}.🥝NavigationRailItemAction:where(:active){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--pressed)}.🥝NavigationRailItemAction:where([aria-pressed=true],[aria-current]:not([aria-current=false])){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--active)}.🥝NavigationRailItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝NavigationRailItemAction{--🌀NavigationRailItemAction-state:var(--🌀NavigationRailItemAction-state--default);--🌀NavigationRailItemAction-state--default:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--hover:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--pressed:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--active:var(--🌀NavigationRailItemAction-state, );--🌀NavigationRailItemAction-state--disabled:var(--🌀NavigationRailItemAction-state, )}}@layer base{.🥝NavigationRailItemActionLabel{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@layer base{.🥝NavigationRailFooter{margin-block-start:auto}}@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.2",
4
+ "version": "0.4.1",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
7
7
  "types": "./dist/index.d.ts",
@@ -31,6 +31,12 @@
31
31
  "development": "./dist/DEV/Chip.js",
32
32
  "default": "./dist/Chip.js"
33
33
  },
34
+ "./unstable_Dialog": {
35
+ "@stratakit/source": "./src/Dialog.tsx",
36
+ "types": "./dist/Dialog.d.ts",
37
+ "development": "./dist/DEV/Dialog.js",
38
+ "default": "./dist/Dialog.js"
39
+ },
34
40
  "./DropdownMenu": {
35
41
  "@stratakit/source": "./src/DropdownMenu.tsx",
36
42
  "types": "./dist/DropdownMenu.d.ts",
@@ -43,6 +49,12 @@
43
49
  "development": "./dist/DEV/ErrorRegion.js",
44
50
  "default": "./dist/ErrorRegion.js"
45
51
  },
52
+ "./unstable_NavigationRail": {
53
+ "@stratakit/source": "./src/NavigationRail.tsx",
54
+ "types": "./dist/NavigationRail.d.ts",
55
+ "development": "./dist/DEV/NavigationRail.js",
56
+ "default": "./dist/NavigationRail.js"
57
+ },
46
58
  "./Table": {
47
59
  "@stratakit/source": "./src/Table.tsx",
48
60
  "types": "./dist/Table.d.ts",
@@ -101,23 +113,23 @@
101
113
  "ui"
102
114
  ],
103
115
  "dependencies": {
104
- "@ariakit/react": "^0.4.17",
105
- "@stratakit/bricks": "^0.3.4",
116
+ "@ariakit/react": "^0.4.18",
117
+ "@stratakit/bricks": "^0.4.1",
106
118
  "classnames": "^2.5.1",
107
- "zustand": "^5.0.6"
119
+ "zustand": "^5.0.8"
108
120
  },
109
121
  "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",
122
+ "@types/node": "^22.18.0",
123
+ "@types/react": "^19.1.11",
124
+ "@types/react-dom": "^19.1.7",
125
+ "esbuild": "^0.25.9",
114
126
  "react": "^19.1.1",
115
127
  "react-dom": "^19.1.1",
116
- "typescript": "~5.8.3",
117
- "@stratakit/foundations": "0.2.4"
128
+ "typescript": "~5.9.2",
129
+ "@stratakit/foundations": "0.3.1"
118
130
  },
119
131
  "peerDependencies": {
120
- "@stratakit/foundations": "^0.2.4",
132
+ "@stratakit/foundations": "^0.3.1",
121
133
  "react": ">=18.0.0",
122
134
  "react-dom": ">=18.0.0"
123
135
  },