@stratakit/structures 0.5.4 → 0.5.6

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +82 -74
  2. package/LICENSE.md +1 -1
  3. package/dist/AccordionItem.d.ts +6 -6
  4. package/dist/Banner.d.ts +2 -2
  5. package/dist/DEV/DropdownMenu.js +5 -1
  6. package/dist/DEV/TreeItem.js +7 -5
  7. package/dist/DEV/styles.css.js +1 -1
  8. package/dist/DEV/~utils.useInit.js +2 -2
  9. package/dist/DropdownMenu.js +5 -1
  10. package/dist/TreeItem.js +8 -7
  11. package/dist/styles.css.js +1 -1
  12. package/dist/~utils.useInit.js +2 -2
  13. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,23 +1,31 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.5.6
4
+
5
+ - [#1375](https://github.com/iTwin/stratakit/pull/1375): Fixed the `Tree.Item` component to correctly render actions when virtualized.
6
+
7
+ ## 0.5.5
8
+
9
+ - [#1174](https://github.com/iTwin/stratakit/pull/1174): Fixed `DropdownMenu.Submenu` component to avoid removal of parent portal popover when unmounting.
10
+
3
11
  ## 0.5.4
4
12
 
5
- - [#1122](https://github.com/iTwin/design-system/pull/1122): Moved `@stratakit/foundations` from `peerDependencies` to direct `dependencies`.
6
- - [#1123](https://github.com/iTwin/design-system/pull/1123): Renamed `@layer itwinui` to `@layer stratakit`.
13
+ - [#1122](https://github.com/iTwin/stratakit/pull/1122): Moved `@stratakit/foundations` from `peerDependencies` to direct `dependencies`.
14
+ - [#1123](https://github.com/iTwin/stratakit/pull/1123): Renamed `@layer itwinui` to `@layer stratakit`.
7
15
  - Updated dependencies:
8
16
  - @stratakit/foundations@0.4.4
9
17
  - @stratakit/bricks@0.5.4
10
18
 
11
19
  ## 0.5.3
12
20
 
13
- - [#1108](https://github.com/iTwin/design-system/pull/1108): Decoupled the styles for `@stratakit/bricks` and `@stratakit/structures` from `@stratakit/foundations` so that the latter does not indirectly depend on the former two. This change also reduces the need for these packages to remain in lockstep.
21
+ - [#1108](https://github.com/iTwin/stratakit/pull/1108): Decoupled the styles for `@stratakit/bricks` and `@stratakit/structures` from `@stratakit/foundations` so that the latter does not indirectly depend on the former two. This change also reduces the need for these packages to remain in lockstep.
14
22
  - Updated dependencies:
15
23
  - @stratakit/foundations@0.4.3
16
24
  - @stratakit/bricks@0.5.3
17
25
 
18
26
  ## 0.5.2
19
27
 
20
- - [#1078](https://github.com/iTwin/design-system/pull/1078): Added `DropdownMenu.Group` component used to group menu items within a dropdown menu.
28
+ - [#1078](https://github.com/iTwin/stratakit/pull/1078): Added `DropdownMenu.Group` component used to group menu items within a dropdown menu.
21
29
 
22
30
  ```tsx
23
31
  <DropdownMenu.Provider>
@@ -36,12 +44,12 @@
36
44
  </DropdownMenu.Provider>
37
45
  ```
38
46
 
39
- - [#1089](https://github.com/iTwin/design-system/pull/1089): Updated the `NavigationRail.ToggleButton` component to use `aria-pressed` instead of `aria-expanded`, to better reflect how it affects the NavigationRail's appearance.
40
- - [#1092](https://github.com/iTwin/design-system/pull/1092): Increased the target size of `NavigationRail.ToggleButton` component.
41
- - [#1102](https://github.com/iTwin/design-system/pull/1102): "Popups" will now respect device-specific close actions (such as back gesture on Android). Affected components include: `DropdownMenu`, `Dialog` and `Popover`.
47
+ - [#1089](https://github.com/iTwin/stratakit/pull/1089): Updated the `NavigationRail.ToggleButton` component to use `aria-pressed` instead of `aria-expanded`, to better reflect how it affects the NavigationRail's appearance.
48
+ - [#1092](https://github.com/iTwin/stratakit/pull/1092): Increased the target size of `NavigationRail.ToggleButton` component.
49
+ - [#1102](https://github.com/iTwin/stratakit/pull/1102): "Popups" will now respect device-specific close actions (such as back gesture on Android). Affected components include: `DropdownMenu`, `Dialog` and `Popover`.
42
50
 
43
- - [#1074](https://github.com/iTwin/design-system/pull/1074): Visual updates to `Table` and `Tree` active + hover states.
44
- - [#1103](https://github.com/iTwin/design-system/pull/1103): `DropdownMenu.Submenu` will now remain mounted in the DOM as long as the parent DropdownMenu is open.
51
+ - [#1074](https://github.com/iTwin/stratakit/pull/1074): Visual updates to `Table` and `Tree` active + hover states.
52
+ - [#1103](https://github.com/iTwin/stratakit/pull/1103): `DropdownMenu.Submenu` will now remain mounted in the DOM as long as the parent DropdownMenu is open.
45
53
 
46
54
  - Updated dependencies:
47
55
  - @stratakit/bricks@0.5.2
@@ -49,7 +57,7 @@
49
57
 
50
58
  ## 0.5.1
51
59
 
52
- - [#1075](https://github.com/iTwin/design-system/pull/1075): Added a new `unstable_NavigationList` component that displays a vertical list of links for secondary navigation.
60
+ - [#1075](https://github.com/iTwin/stratakit/pull/1075): Added a new `unstable_NavigationList` component that displays a vertical list of links for secondary navigation.
53
61
 
54
62
  Includes the following subcomponents:
55
63
  - `<NavigationList.Root>`
@@ -75,11 +83,11 @@
75
83
  />
76
84
  ```
77
85
 
78
- - [#1079](https://github.com/iTwin/design-system/pull/1079): Increased the click target area of non-selectable `Tree.Item`s.
86
+ - [#1079](https://github.com/iTwin/stratakit/pull/1079): Increased the click target area of non-selectable `Tree.Item`s.
79
87
  - If `selected` is undefined, the `Tree.Item` will expand/collapse when clicked.
80
88
  - If `selected` is defined, the `Tree.Item` will continue to toggle selection when clicked.
81
89
 
82
- - [#1064](https://github.com/iTwin/design-system/pull/1064): Added new `unstable_Popover` component that displays custom content in a non-modal window overlay that is placed relative to a trigger element.
90
+ - [#1064](https://github.com/iTwin/stratakit/pull/1064): Added new `unstable_Popover` component that displays custom content in a non-modal window overlay that is placed relative to a trigger element.
83
91
 
84
92
  ```tsx
85
93
  <Popover content={<>Popover content</>}>
@@ -95,11 +103,11 @@
95
103
 
96
104
  ### Breaking changes
97
105
 
98
- - [#1036](https://github.com/iTwin/design-system/pull/1036): Changed `items` prop type of `ErrorRegion.Root` component from `ReactNode` to `ReactNode[]`.
106
+ - [#1036](https://github.com/iTwin/stratakit/pull/1036): Changed `items` prop type of `ErrorRegion.Root` component from `ReactNode` to `ReactNode[]`.
99
107
 
100
108
  `items` prop is used to determine error region visibility.
101
109
 
102
- - [#1038](https://github.com/iTwin/design-system/pull/1038): Removed unintentionally exposed `TreeItem` [subpath export](https://nodejs.org/api/packages.html#subpath-exports). Tree item components are available under the `Tree` subpath or the main entry point of the package.
110
+ - [#1038](https://github.com/iTwin/stratakit/pull/1038): Removed unintentionally exposed `TreeItem` [subpath export](https://nodejs.org/api/packages.html#subpath-exports). Tree item components are available under the `Tree` subpath or the main entry point of the package.
103
111
 
104
112
  ```diff
105
113
  - import * as TreeItem from "@stratakit/structures/TreeItem";
@@ -112,11 +120,11 @@
112
120
  + <Tree.ItemAction />
113
121
  ```
114
122
 
115
- - [#1037](https://github.com/iTwin/design-system/pull/1037): Require `aria-label` or `aria-labelledby` prop in `ErrorRegion.Root` component.
123
+ - [#1037](https://github.com/iTwin/stratakit/pull/1037): Require `aria-label` or `aria-labelledby` prop in `ErrorRegion.Root` component.
116
124
 
117
125
  ### Non-breaking changes
118
126
 
119
- - [#1003](https://github.com/iTwin/design-system/pull/1003): Enabled React Compiler for production build. In React 18 apps, `react-compiler-runtime` dependency will be used.
127
+ - [#1003](https://github.com/iTwin/stratakit/pull/1003): Enabled React Compiler for production build. In React 18 apps, `react-compiler-runtime` dependency will be used.
120
128
  - Updated dependencies:
121
129
  - @stratakit/bricks@0.5.0
122
130
  - @stratakit/foundations@0.4.0
@@ -124,29 +132,29 @@
124
132
  ## 0.4.5
125
133
 
126
134
  - `unstable_NavigationRail` changes:
127
- - [#962](https://github.com/iTwin/design-system/pull/962): Added `expanded` and `setExpanded` props for controlling the expanded/collapsed state.
128
- - [#962](https://github.com/iTwin/design-system/pull/962): Added `defaultExpanded` prop for specifying the _initial_ expanded/collapsed state.
135
+ - [#962](https://github.com/iTwin/stratakit/pull/962): Added `expanded` and `setExpanded` props for controlling the expanded/collapsed state.
136
+ - [#962](https://github.com/iTwin/stratakit/pull/962): Added `defaultExpanded` prop for specifying the _initial_ expanded/collapsed state.
129
137
  - `unstable_ErrorRegion` changes:
130
- - [#963](https://github.com/iTwin/design-system/pull/963): Avoid attempting to set the default accessible name of the [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section) when `label={undefined}`.
131
- - [#979](https://github.com/iTwin/design-system/pull/979): Updated the visibility logic to be based on the `items` array. Previously recommended `label={undefined}` pattern is now deprecated.
132
- - [#978](https://github.com/iTwin/design-system/pull/978): Log a console warning if `aria-label` or `aria-labelledby` is not provided to `ErrorRegion.Root`.
133
- - [#979](https://github.com/iTwin/design-system/pull/979): Log a console warning if `items` prop is not an array. Previously supported `ReactNode` type is now deprecated.
134
- - [#953](https://github.com/iTwin/design-system/pull/953): Changed the default value of `Tabs.Provider`'s `selectOnMove` prop to `false`.
135
- - [#969](https://github.com/iTwin/design-system/pull/969): Fixed an issue where `unstable_Banner` would not track changes to the `tone` prop.
138
+ - [#963](https://github.com/iTwin/stratakit/pull/963): Avoid attempting to set the default accessible name of the [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section) when `label={undefined}`.
139
+ - [#979](https://github.com/iTwin/stratakit/pull/979): Updated the visibility logic to be based on the `items` array. Previously recommended `label={undefined}` pattern is now deprecated.
140
+ - [#978](https://github.com/iTwin/stratakit/pull/978): Log a console warning if `aria-label` or `aria-labelledby` is not provided to `ErrorRegion.Root`.
141
+ - [#979](https://github.com/iTwin/stratakit/pull/979): Log a console warning if `items` prop is not an array. Previously supported `ReactNode` type is now deprecated.
142
+ - [#953](https://github.com/iTwin/stratakit/pull/953): Changed the default value of `Tabs.Provider`'s `selectOnMove` prop to `false`.
143
+ - [#969](https://github.com/iTwin/stratakit/pull/969): Fixed an issue where `unstable_Banner` would not track changes to the `tone` prop.
136
144
  - Updated dependencies:
137
145
  - @stratakit/bricks@0.4.5
138
146
  - @stratakit/foundations@0.3.5
139
147
 
140
148
  ## 0.4.4
141
149
 
142
- - [#954](https://github.com/iTwin/design-system/pull/954): Added "popup indicator" styling to `Toolbar.Item`.
150
+ - [#954](https://github.com/iTwin/stratakit/pull/954): Added "popup indicator" styling to `Toolbar.Item`.
143
151
  - Updated dependencies:
144
152
  - @stratakit/bricks@0.4.4
145
153
  - @stratakit/foundations@0.3.4
146
154
 
147
155
  ## 0.4.3
148
156
 
149
- - [#933](https://github.com/iTwin/design-system/pull/933): Added `submenu` prop to `DropdownMenu.Item` component and a `DropdownMenu.Submenu` component to support nested dropdown menus.
157
+ - [#933](https://github.com/iTwin/stratakit/pull/933): Added `submenu` prop to `DropdownMenu.Item` component and a `DropdownMenu.Submenu` component to support nested dropdown menus.
150
158
 
151
159
  ```tsx
152
160
  <DropdownMenu.Provider>
@@ -168,21 +176,21 @@
168
176
  </DropdownMenu.Provider>
169
177
  ```
170
178
 
171
- - [#939](https://github.com/iTwin/design-system/pull/939): Fixed `forced-colors` styling for `NavigationRail.Anchor` in `active` state.
179
+ - [#939](https://github.com/iTwin/stratakit/pull/939): Fixed `forced-colors` styling for `NavigationRail.Anchor` in `active` state.
172
180
  - Updated dependencies:
173
181
  - @stratakit/bricks@0.4.3
174
182
  - @stratakit/foundations@0.3.3
175
183
 
176
184
  ## 0.4.2
177
185
 
178
- - [#931](https://github.com/iTwin/design-system/pull/931): `Dialog.Content` will now only scroll past a certain viewport height. On smaller viewports, the `Dialog.Root` will be scrollable instead.
186
+ - [#931](https://github.com/iTwin/stratakit/pull/931): `Dialog.Content` will now only scroll past a certain viewport height. On smaller viewports, the `Dialog.Root` will be scrollable instead.
179
187
  - Updated dependencies:
180
188
  - @stratakit/bricks@0.4.2
181
189
  - @stratakit/foundations@0.3.2
182
190
 
183
191
  ## 0.4.1
184
192
 
185
- - [#851](https://github.com/iTwin/design-system/pull/851): Added `Dialog` component that displays custom content in a window overlay over the primary window or another dialog window. Currently only modal dialog type is supported.
193
+ - [#851](https://github.com/iTwin/stratakit/pull/851): Added `Dialog` component that displays custom content in a window overlay over the primary window or another dialog window. Currently only modal dialog type is supported.
186
194
 
187
195
  ```tsx
188
196
  const [open, setOpen] = useState(false);
@@ -207,7 +215,7 @@
207
215
  </Dialog.Root>
208
216
  ```
209
217
 
210
- - [#884](https://github.com/iTwin/design-system/pull/884): Added new `unstable_NavigationRail` component intended to serve as the application's top-level navigation (e.g. for switching between pages).
218
+ - [#884](https://github.com/iTwin/stratakit/pull/884): Added new `unstable_NavigationRail` component intended to serve as the application's top-level navigation (e.g. for switching between pages).
211
219
 
212
220
  ```jsx
213
221
  <NavigationRail.Root>
@@ -251,18 +259,18 @@
251
259
 
252
260
  ### Breaking changes
253
261
 
254
- - [#888](https://github.com/iTwin/design-system/pull/888): `Toolbar.Item` component no longer automatically uses the large version of the icon.
262
+ - [#888](https://github.com/iTwin/stratakit/pull/888): `Toolbar.Item` component no longer automatically uses the large version of the icon.
255
263
 
256
264
  `#icon-large` must now be explicitly added to the URL to select the large icons from `@stratakit/icons`. For example:
257
265
 
258
266
  ```diff
259
267
  <Toolbar.Item
260
- - render={<IconButton icon={placeholderIcon} />}
261
- + render={<IconButton icon={`${placeholderIcon}#icon-large`} />}
268
+ - render={<IconButton icon={svgPlaceholder} />}
269
+ + render={<IconButton icon={`${svgPlaceholder}#icon-large`} />}
262
270
  />
263
271
  ```
264
272
 
265
- - [#900](https://github.com/iTwin/design-system/pull/900): Renamed `Tabs.Root` component to `Tabs.Provider`.
273
+ - [#900](https://github.com/iTwin/stratakit/pull/900): Renamed `Tabs.Root` component to `Tabs.Provider`.
266
274
 
267
275
  ```diff
268
276
  - <Tabs.Root>
@@ -275,7 +283,7 @@
275
283
 
276
284
  This change makes StrataKit's naming convention more consistent. `Root` components always render a DOM element whereas `Provider` components have no underlying DOM element.
277
285
 
278
- - [#900](https://github.com/iTwin/design-system/pull/900): Renamed `DropdownMenu.Root` component to `DropdownMenu.Provider`.
286
+ - [#900](https://github.com/iTwin/stratakit/pull/900): Renamed `DropdownMenu.Root` component to `DropdownMenu.Provider`.
279
287
 
280
288
  ```diff
281
289
  - <DropdownMenu.Root>
@@ -290,7 +298,7 @@
290
298
 
291
299
  ### Non-breaking changes
292
300
 
293
- - [#903](https://github.com/iTwin/design-system/pull/903): Added proper styling for `Divider` rendered inside a `Toolbar.Group`.
301
+ - [#903](https://github.com/iTwin/stratakit/pull/903): Added proper styling for `Divider` rendered inside a `Toolbar.Group`.
294
302
 
295
303
  ```tsx
296
304
  <Toolbar.Group variant="solid">
@@ -301,34 +309,34 @@
301
309
  </Toolbar.Group>
302
310
  ```
303
311
 
304
- - [#913](https://github.com/iTwin/design-system/pull/913): Updated internal CSS selectors in every component.
305
- - [#901](https://github.com/iTwin/design-system/pull/901): Added `orientation` prop to `Toolbar.Group` component. Set the `orientation` prop to `"vertical"` to display the toolbar vertically.
306
- - [#902](https://github.com/iTwin/design-system/pull/902): Updated active style of a ghost `IconButton` when used in a `Toolbar` component.
312
+ - [#913](https://github.com/iTwin/stratakit/pull/913): Updated internal CSS selectors in every component.
313
+ - [#901](https://github.com/iTwin/stratakit/pull/901): Added `orientation` prop to `Toolbar.Group` component. Set the `orientation` prop to `"vertical"` to display the toolbar vertically.
314
+ - [#902](https://github.com/iTwin/stratakit/pull/902): Updated active style of a ghost `IconButton` when used in a `Toolbar` component.
307
315
  - Updated dependencies:
308
316
  - @stratakit/foundations@0.3.0
309
317
  - @stratakit/bricks@0.4.0
310
318
 
311
319
  ## 0.3.2
312
320
 
313
- - [#881](https://github.com/iTwin/design-system/pull/881): Updated CSS to use `--stratakit-space-` variables instead of hardcoded values in all components.
321
+ - [#881](https://github.com/iTwin/stratakit/pull/881): Updated CSS to use `--stratakit-space-` variables instead of hardcoded values in all components.
314
322
  - Replaced hardcoded `rem` spacing values with new `px`-based variables in many components.
315
- - [#889](https://github.com/iTwin/design-system/pull/889): Fixed vertical centering of `Toolbar.Item`.
323
+ - [#889](https://github.com/iTwin/stratakit/pull/889): Fixed vertical centering of `Toolbar.Item`.
316
324
  - Updated dependencies:
317
325
  - @stratakit/bricks@0.3.4
318
326
  - @stratakit/foundations@0.2.3
319
327
 
320
328
  ## 0.3.1
321
329
 
322
- - [#870](https://github.com/iTwin/design-system/pull/870): Fixed an issue where `AccordionItem.Content` was being offset by decorations placed at the end of `AccordionItem.Header`. The content will now only include start indentation, and correctly stretch all the way up to the right edge.
323
- - [#869](https://github.com/iTwin/design-system/pull/869): Fixed an issue where `Tree` was using Context as a component which doesn't work in React 18.
324
- - [#872](https://github.com/iTwin/design-system/pull/872): Improved the `Tabs` active stripe animation to make it smoother and more performant.
330
+ - [#870](https://github.com/iTwin/stratakit/pull/870): Fixed an issue where `AccordionItem.Content` was being offset by decorations placed at the end of `AccordionItem.Header`. The content will now only include start indentation, and correctly stretch all the way up to the right edge.
331
+ - [#869](https://github.com/iTwin/stratakit/pull/869): Fixed an issue where `Tree` was using Context as a component which doesn't work in React 18.
332
+ - [#872](https://github.com/iTwin/stratakit/pull/872): Improved the `Tabs` active stripe animation to make it smoother and more performant.
325
333
 
326
334
  ## 0.3.0
327
335
 
328
336
  ### Breaking changes
329
337
 
330
- - [#847](https://github.com/iTwin/design-system/pull/847): The `id` prop in `Tabs.Tab` and `tabId` prop in `Tabs.TabPanel` have been made required.
331
- - [#805](https://github.com/iTwin/design-system/pull/805): Changed `actions` prop of the `Tree.Item` component to no longer automatically inline some of the actions. Instead, newly added `inlineActions` prop can be used to display up to two inline actions. All actions specified in a `actions` prop will be rendered in the action menu.
338
+ - [#847](https://github.com/iTwin/stratakit/pull/847): The `id` prop in `Tabs.Tab` and `tabId` prop in `Tabs.TabPanel` have been made required.
339
+ - [#805](https://github.com/iTwin/stratakit/pull/805): Changed `actions` prop of the `Tree.Item` component to no longer automatically inline some of the actions. Instead, newly added `inlineActions` prop can be used to display up to two inline actions. All actions specified in a `actions` prop will be rendered in the action menu.
332
340
 
333
341
  ```tsx
334
342
  <Tree.Item
@@ -363,7 +371,7 @@
363
371
 
364
372
  ### Non-breaking changes
365
373
 
366
- - [#821](https://github.com/iTwin/design-system/pull/821): Added compositional `Banner.Root`, `Banner.Icon`, `Banner.Label`, `Banner.Message`, `Banner.Actions`, and `Banner.DismissButton` components. These new components can be used when you need fine grained configuration.
374
+ - [#821](https://github.com/iTwin/stratakit/pull/821): Added compositional `Banner.Root`, `Banner.Icon`, `Banner.Label`, `Banner.Message`, `Banner.Actions`, and `Banner.DismissButton` components. These new components can be used when you need fine grained configuration.
367
375
 
368
376
  To use the compositional components, import them from the `/unstable_Banner` subpath:
369
377
 
@@ -371,7 +379,7 @@
371
379
  import * as Banner from "@stratakit/structures/unstable_Banner";
372
380
 
373
381
  <Banner.Root>
374
- <Banner.Icon href={placeholderIcon} />
382
+ <Banner.Icon href={svgPlaceholder} />
375
383
  <Banner.Label>Label</Banner.Label>
376
384
  <Banner.Message>Message</Banner.Message>
377
385
  <Banner.Actions>
@@ -381,7 +389,7 @@
381
389
  </Banner.Root>;
382
390
  ```
383
391
 
384
- - [#716](https://github.com/iTwin/design-system/pull/716): Added support for placing `<AccordionItem.Marker>` before and `<AccordionItem.Decoration>` after the rest of the content in `<AccordionItem.Header>`.
392
+ - [#716](https://github.com/iTwin/stratakit/pull/716): Added support for placing `<AccordionItem.Marker>` before and `<AccordionItem.Decoration>` after the rest of the content in `<AccordionItem.Header>`.
385
393
 
386
394
  The `<AccordionItem.Marker>` is now recommended to be placed _before_ the rest of the header content.
387
395
 
@@ -394,14 +402,14 @@
394
402
  </AccordionItem.Header>
395
403
  ```
396
404
 
397
- - [#716](https://github.com/iTwin/design-system/pull/716): Added support for multiple decorations for `AccordionItem` when passed as children in `<AccordionItem.Decoration>`.
405
+ - [#716](https://github.com/iTwin/stratakit/pull/716): Added support for multiple decorations for `AccordionItem` when passed as children in `<AccordionItem.Decoration>`.
398
406
 
399
407
  ```tsx
400
408
  <AccordionItem.Header>
401
409
  <AccordionItem.Marker />
402
410
  <AccordionItem.Decoration>
403
- <Icon href={placeholder} />
404
- <Icon href={placeholder} />
411
+ <Icon href={svgPlaceholder} />
412
+ <Icon href={svgPlaceholder} />
405
413
  </AccordionItem.Decoration>
406
414
  <AccordionItem.Button>
407
415
  <AccordionItem.Label>Label</AccordionItem.Label>
@@ -409,11 +417,11 @@
409
417
  </AccordionItem.Header>
410
418
  ```
411
419
 
412
- - [#849](https://github.com/iTwin/design-system/pull/849): Add `background-color` change for the `<AccordionItem.Header>` instead of just the `<AccordionItem.Marker>` for the "hover" and "pressed" states of `<AccordionItem.Header>`.
420
+ - [#849](https://github.com/iTwin/stratakit/pull/849): Add `background-color` change for the `<AccordionItem.Header>` instead of just the `<AccordionItem.Marker>` for the "hover" and "pressed" states of `<AccordionItem.Header>`.
413
421
 
414
- - [#829](https://github.com/iTwin/design-system/pull/829): Improved the performance of the `Tree.Item` component by deferring the rendering of actions until the tree item becomes visible on the screen.
422
+ - [#829](https://github.com/iTwin/stratakit/pull/829): Improved the performance of the `Tree.Item` component by deferring the rendering of actions until the tree item becomes visible on the screen.
415
423
 
416
- - [#809](https://github.com/iTwin/design-system/pull/809): Added active and active-hover states to the `Table.Row` component for styling selected rows. To enable selection, render a `Checkbox` component within the row. A row is considered selected when its checkbox is checked.
424
+ - [#809](https://github.com/iTwin/stratakit/pull/809): Added active and active-hover states to the `Table.Row` component for styling selected rows. To enable selection, render a `Checkbox` component within the row. A row is considered selected when its checkbox is checked.
417
425
 
418
426
  ```tsx
419
427
  <Table.Row>
@@ -424,7 +432,7 @@
424
432
  </Table.Row>
425
433
  ```
426
434
 
427
- - [#854](https://github.com/iTwin/design-system/pull/854): Updated the status icons used internally by various components: `unstable_Banner`, and `unstable_ErrorRegion` and `Tree.Item`.
435
+ - [#854](https://github.com/iTwin/stratakit/pull/854): Updated the status icons used internally by various components: `unstable_Banner`, and `unstable_ErrorRegion` and `Tree.Item`.
428
436
 
429
437
  - Updated dependencies:
430
438
  - @stratakit/bricks@0.3.3
@@ -432,14 +440,14 @@
432
440
 
433
441
  ## 0.2.4
434
442
 
435
- - [#835](https://github.com/iTwin/design-system/pull/835): Added active-hover state styles to the `Tree.Item` component.
443
+ - [#835](https://github.com/iTwin/stratakit/pull/835): Added active-hover state styles to the `Tree.Item` component.
436
444
  - Updated dependencies:
437
445
  - @stratakit/bricks@0.3.2
438
446
  - @stratakit/foundations@0.2.1
439
447
 
440
448
  ## 0.2.3
441
449
 
442
- - [#788](https://github.com/iTwin/design-system/pull/788): Updated `Tabs.Tab` component to support optional start and end icons.
450
+ - [#788](https://github.com/iTwin/stratakit/pull/788): Updated `Tabs.Tab` component to support optional start and end icons.
443
451
 
444
452
  ```tsx
445
453
  // Add end icon to a tab.
@@ -449,7 +457,7 @@
449
457
  </Tabs.Tab>
450
458
  ```
451
459
 
452
- - [#773](https://github.com/iTwin/design-system/pull/773): Added [subpath exports](https://nodejs.org/api/packages.html#subpath-exports) for individual components. These new exports allow StrataKit to expose both convenience and compositional APIs of the same component.
460
+ - [#773](https://github.com/iTwin/stratakit/pull/773): Added [subpath exports](https://nodejs.org/api/packages.html#subpath-exports) for individual components. These new exports allow StrataKit to expose both convenience and compositional APIs of the same component.
453
461
 
454
462
  ```tsx
455
463
  // Convenience import
@@ -470,7 +478,7 @@
470
478
  </Chip.Root>;
471
479
  ```
472
480
 
473
- Compositional components are useful for building custom components that require more control over the structure and behavior, while convenience components provide a ready-to-use solution for common use cases. See [#405](https://github.com/iTwin/design-system/discussions/405) for more details.
481
+ Compositional components are useful for building custom components that require more control over the structure and behavior, while convenience components provide a ready-to-use solution for common use cases. See [#405](https://github.com/iTwin/stratakit/discussions/405) for more details.
474
482
 
475
483
  APIs exported from the barrel file are not changed in this release. Some exported components are compositional, while others are convenience components.
476
484
 
@@ -481,7 +489,7 @@
481
489
  <Chip />;
482
490
  ```
483
491
 
484
- - [#763](https://github.com/iTwin/design-system/pull/763): Added compositional `Chip.Root`, `Chip.Label` and `Chip.DismissButton` components. These new components can be used when you need fine grained configuration.
492
+ - [#763](https://github.com/iTwin/stratakit/pull/763): Added compositional `Chip.Root`, `Chip.Label` and `Chip.DismissButton` components. These new components can be used when you need fine grained configuration.
485
493
 
486
494
  To use the compositional components, import them from the `/Chip` subpath:
487
495
 
@@ -494,9 +502,9 @@
494
502
  </Chip.Root>;
495
503
  ```
496
504
 
497
- - [#815](https://github.com/iTwin/design-system/pull/815): Fixed an issue where Toolbar was using Context as a component which doesn't work in React 18.
498
- - [#781](https://github.com/iTwin/design-system/pull/781): Updated `Chip.Label` component styling when rendered as a button.
499
- - [#793](https://github.com/iTwin/design-system/pull/793): Added `zustand` as a dependency.
505
+ - [#815](https://github.com/iTwin/stratakit/pull/815): Fixed an issue where Toolbar was using Context as a component which doesn't work in React 18.
506
+ - [#781](https://github.com/iTwin/stratakit/pull/781): Updated `Chip.Label` component styling when rendered as a button.
507
+ - [#793](https://github.com/iTwin/stratakit/pull/793): Added `zustand` as a dependency.
500
508
 
501
509
  - Updated dependencies:
502
510
  - @stratakit/foundations@0.2.0
@@ -504,17 +512,17 @@
504
512
 
505
513
  ## 0.2.2
506
514
 
507
- - [#756](https://github.com/iTwin/design-system/pull/756): `DropdownMenu.Button` will now ignore `render={undefined}`.
508
- - [#755](https://github.com/iTwin/design-system/pull/755): Updated the code for icons used internally by components.
515
+ - [#756](https://github.com/iTwin/stratakit/pull/756): `DropdownMenu.Button` will now ignore `render={undefined}`.
516
+ - [#755](https://github.com/iTwin/stratakit/pull/755): Updated the code for icons used internally by components.
509
517
  - Updated dependencies:
510
518
  - @stratakit/bricks@0.3.0
511
519
  - @stratakit/foundations@0.1.6
512
520
 
513
521
  ## 0.2.1
514
522
 
515
- - [#736](https://github.com/iTwin/design-system/pull/736): Updated the `label` prop type in the `<Chip />` component from `string` to `ReactNode`.
516
- - [#740](https://github.com/iTwin/design-system/pull/740): Added `types` field to `package.json` file for better TypeScript support and TS icon on `npm`.
517
- - [#737](https://github.com/iTwin/design-system/pull/737): Fixed console warnings raised from `<Tree.Item>` component.
523
+ - [#736](https://github.com/iTwin/stratakit/pull/736): Updated the `label` prop type in the `<Chip />` component from `string` to `ReactNode`.
524
+ - [#740](https://github.com/iTwin/stratakit/pull/740): Added `types` field to `package.json` file for better TypeScript support and TS icon on `npm`.
525
+ - [#737](https://github.com/iTwin/stratakit/pull/737): Fixed console warnings raised from `<Tree.Item>` component.
518
526
  - Updated dependencies:
519
527
  - @stratakit/foundations@0.1.5
520
528
  - @stratakit/bricks@0.2.1
@@ -523,9 +531,9 @@
523
531
 
524
532
  ### Breaking changes
525
533
 
526
- - [#720](https://github.com/iTwin/design-system/pull/720): Renamed `onExpandedChange` prop for `unstable_ErrorRegion.Root` to `setOpen`.
534
+ - [#720](https://github.com/iTwin/stratakit/pull/720): Renamed `onExpandedChange` prop for `unstable_ErrorRegion.Root` to `setOpen`.
527
535
  Renamed `expanded` prop for `unstable_ErrorRegion.Root` to `open`.
528
- - [#709](https://github.com/iTwin/design-system/pull/709): `unstable_AccordionItem` breaking changes:
536
+ - [#709](https://github.com/iTwin/stratakit/pull/709): `unstable_AccordionItem` breaking changes:
529
537
  - `AccordionItem.Trigger` renamed to `AccordionItem.Header` and no longer represents the underlying `<button>` element (see `AccordionItem.Label`).
530
538
  - `AccordionItem.Label` must be wrapped with the new `AccordionItem.Button`.
531
539
 
@@ -543,17 +551,17 @@
543
551
  </AccordionItem.Root>
544
552
  ```
545
553
 
546
- - [#720](https://github.com/iTwin/design-system/pull/720): Renamed `onOpenChange` prop for `unstable_AccordionItem.Root` to `setOpen`.
554
+ - [#720](https://github.com/iTwin/stratakit/pull/720): Renamed `onOpenChange` prop for `unstable_AccordionItem.Root` to `setOpen`.
547
555
 
548
556
  ### Non-breaking changes
549
557
 
550
- - [#709](https://github.com/iTwin/design-system/pull/709): Introduce `unstable_AccordionItem.Heading` component for wrapping `unstable_AccordionItem.Button` and `unstable_AccordionItem.Button` which represents the underlying `<button>` element.
558
+ - [#709](https://github.com/iTwin/stratakit/pull/709): Introduce `unstable_AccordionItem.Heading` component for wrapping `unstable_AccordionItem.Button` and `unstable_AccordionItem.Button` which represents the underlying `<button>` element.
551
559
  - Updated dependencies:
552
560
  - @stratakit/foundations@0.1.4
553
561
 
554
562
  ## 0.1.1
555
563
 
556
- - [#704](https://github.com/iTwin/design-system/pull/704): The following components have been moved from `@stratakit/bricks` into `@stratakit/structures`.
564
+ - [#704](https://github.com/iTwin/stratakit/pull/704): The following components have been moved from `@stratakit/bricks` into `@stratakit/structures`.
557
565
  - `unstable_AccordionItem`
558
566
  - `unstable_Banner`
559
567
  - `Chip`
package/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # MIT License
2
2
 
3
- Copyright © 2025 Bentley Systems, Incorporated. All rights reserved.
3
+ Copyright © 2024-2026 Bentley Systems, Incorporated. All rights reserved.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
6
 
package/dist/AccordionItem.d.ts CHANGED
@@ -59,7 +59,7 @@ interface AccordionItemProps extends BaseProps {
59
59
  * <AccordionItem.Root>
60
60
  * <AccordionItem.Header>
61
61
  * <AccordionItem.Marker />
62
- * <AccordionItem.Decoration render={<Icon href={placeholder} />} />
62
+ * <AccordionItem.Decoration render={<Icon href={svgPlaceholder} />} />
63
63
  * <AccordionItem.Button>
64
64
  * <AccordionItem.Label>Label</AccordionItem.Label>
65
65
  * </AccordionItem.Button>
@@ -131,7 +131,7 @@ declare const AccordionItemLabel: import("react").ForwardRefExoticComponent<Pick
131
131
  * ```tsx
132
132
  * <AccordionItem.Header>
133
133
  * <AccordionItem.Marker />
134
- * <AccordionItem.Decoration render={<Icon href={placeholder} />} />
134
+ * <AccordionItem.Decoration render={<Icon href={svgPlaceholder} />} />
135
135
  * <AccordionItem.Button>
136
136
  * <AccordionItem.Label>Label</AccordionItem.Label>
137
137
  * </AccordionItem.Button>
@@ -148,7 +148,7 @@ declare const AccordionItemLabel: import("react").ForwardRefExoticComponent<Pick
148
148
  * <AccordionItem.Button>
149
149
  * <AccordionItem.Label>Label</AccordionItem.Label>
150
150
  * </AccordionItem.Button>
151
- * <AccordionItem.Decoration render={<Icon href={placeholder} />} />
151
+ * <AccordionItem.Decoration render={<Icon href={svgPlaceholder} />} />
152
152
  * </AccordionItem.Header>
153
153
  * ```
154
154
  *
@@ -160,8 +160,8 @@ declare const AccordionItemLabel: import("react").ForwardRefExoticComponent<Pick
160
160
  * <AccordionItem.Header>
161
161
  * <AccordionItem.Marker />
162
162
  * <AccordionItem.Decoration>
163
- * <Icon href={placeholder} />
164
- * <Icon href={placeholder} />
163
+ * <Icon href={svgPlaceholder} />
164
+ * <Icon href={svgPlaceholder} />
165
165
  * </AccordionItem.Decoration>
166
166
  * <AccordionItem.Button>
167
167
  * <AccordionItem.Label>Label</AccordionItem.Label>
@@ -202,7 +202,7 @@ declare const AccordionItemDecoration: import("react").ForwardRefExoticComponent
202
202
  * ```tsx
203
203
  * <AccordionItem.Header>
204
204
  * <AccordionItem.Marker>
205
- * <Icon href={placeholder} />
205
+ * <Icon href={svgPlaceholder} />
206
206
  * </AccordionItem.Marker>
207
207
  * <AccordionItem.Button>
208
208
  * <AccordionItem.Label>Label</AccordionItem.Label>
package/dist/Banner.d.ts CHANGED
@@ -46,10 +46,10 @@ interface BannerIconProps extends React.ComponentProps<typeof Icon> {
46
46
  *
47
47
  * Example with custom icon:
48
48
  * ```tsx
49
- * import placeholderIcon from "@stratakit/icons/placeholder.svg";
49
+ * import svgPlaceholder from "@stratakit/icons/placeholder.svg";
50
50
  *
51
51
  * <Banner.Root>
52
- * <Banner.Icon href={placeholderIcon} />
52
+ * <Banner.Icon href={svgPlaceholder} />
53
53
  * </Banner.Root>
54
54
  * ```
55
55
  */
package/dist/DEV/DropdownMenu.js CHANGED
@@ -272,12 +272,16 @@ const DropdownMenuSubmenu = forwardRef(
272
272
  }, [store, setStore]);
273
273
  const parent = useMenuContext();
274
274
  const popoverElement = useStoreState(parent, "popoverElement");
275
+ const portalElement = React.useCallback(() => {
276
+ if (!popoverElement?.isConnected) return null;
277
+ return popoverElement;
278
+ }, [popoverElement]);
275
279
  return /* @__PURE__ */ jsx(MenuProvider, { store, children: /* @__PURE__ */ jsx(
276
280
  Menu,
277
281
  {
278
282
  store,
279
283
  portal: true,
280
- portalElement: popoverElement,
284
+ portalElement,
281
285
  preserveTabOrder: false,
282
286
  ...props,
283
287
  gutter: 2,
package/dist/DEV/TreeItem.js CHANGED
@@ -194,11 +194,13 @@ function useRenderActions() {
194
194
  React.useEffect(() => {
195
195
  const el = ref.current;
196
196
  if (!el || renderActions) return;
197
- const observer = new IntersectionObserver(([entry]) => {
198
- if (!entry.isIntersecting) return;
199
- React.startTransition(() => {
200
- setRenderActions(true);
201
- });
197
+ const observer = new IntersectionObserver((entries) => {
198
+ for (const entry of entries) {
199
+ if (!entry.isIntersecting) continue;
200
+ React.startTransition(() => {
201
+ setRenderActions(true);
202
+ });
203
+ }
202
204
  });
203
205
  observer.observe(el);
204
206
  return () => {
package/dist/DEV/styles.css.js CHANGED
@@ -1,4 +1,4 @@
1
- // inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
1
+ // inline-css:/home/runner/work/stratakit/stratakit/packages/structures/src/styles.css
2
2
  var styles_default = String.raw`@layer stratakit.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,var(--stratakit-color-bg-glow-on-surface-accent-active-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-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-primary))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}}@layer base{.🥝ChevronDown{rotate:var(--🥝ChevronDown-rotate)}@media (prefers-reduced-motion:no-preference){.🥝ChevronDown{transition:rotate .15s ease-in-out}}}.🥝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!important}.🥝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-control-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);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;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-control-dropdown-base);border-radius:8px;flex-direction:column;display:flex;overflow:auto}}@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}.🥝DropdownMenuItem.🥝ListItem:where([data-has-popover-open]:not(:active)){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@layer base{.🥝DropdownMenuItemChevron.🥝ListItemDecoration{min-inline-size:var(--🥝Icon-size,1rem);margin-inline-end:-4px}}@layer base{.🥝DropdownMenuGroup{flex-direction:column;display:flex}.🥝DropdownMenuGroup:before,.🥝DropdownMenuGroup:after{content:"";color:var(--stratakit-color-border-page-base);block-size:1px;margin-block:var(--stratakit-space-x1);border-image:linear-gradient(currentColor 0 0) 0 fill//0 100cqi}.🥝DropdownMenuGroup:where(:nth-child(1 of :is(.🥝DropdownMenuGroup,.🥝DropdownMenuItem))):before,.🥝DropdownMenuGroup:where(:not(:has(+.🥝DropdownMenuItem))):after{content:unset}@supports not selector(:has(+ *)){.🥝DropdownMenuGroup:where(.🥝DropdownMenuGroup+.🥝DropdownMenuGroup):before{content:unset}}}@layer base{.🥝DropdownMenuGroupLabel{padding-inline:var(--stratakit-space-x2);color:var(--stratakit-color-text-neutral-secondary);align-items:center;min-block-size:1.75rem;font-weight:500;display:flex}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}.🥝DropdownMenuGroup:before,.🥝DropdownMenuGroup:after{color:canvastext;forced-color-adjust:none}}@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{.🥝NavigationListRoot{position:relative}}@layer modifiers{.🥝NavigationListRoot:where([data-_sk-indented]):before{content:"";border-inline-start:1px solid var(--stratakit-color-border-page-base);border-radius:4px;position:absolute;inset-block:0;inset-inline-start:var(--stratakit-space-x4)}}@layer base{.🥝NavigationListItemAction{align-items:center;gap:var(--stratakit-space-x2);min-block-size:2rem;inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;padding-inline:var(--stratakit-space-x2);padding-block:var(--stratakit-space-x1);font-size:var(--stratakit-font-size-12);cursor:pointer;color:var(--🌀NavigationListAnchor-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationListAnchor-state--disabled,var(--stratakit-color-text-neutral-disabled));background-color:var(--🌀NavigationListAnchor-state--default,transparent)var(--🌀NavigationListAnchor-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationListAnchor-state--disabled,transparent);--🥝Icon-color:var(--🌀NavigationListAnchor-state--default,var(--stratakit-color-icon-neutral-secondary))var(--🌀NavigationListAnchor-state--hover,var(---✨icon--hover))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-icon-neutral-primary))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationListAnchor-state--disabled,var(--stratakit-color-icon-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;line-height:1.2;text-decoration:none;display:flex;position:relative}}@layer modifiers{:where(.🥝NavigationListItem[data-_sk-indented]) .🥝NavigationListItemAction:before{content:"";inline-size:var(--stratakit-space-x4);display:inline-block}}@layer states{@media (any-hover:hover){.🥝NavigationListItemAction:where(:hover){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--hover)}}.🥝NavigationListItemAction:where(:active){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--pressed)}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--active)}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{content:"";color:var(--stratakit-color-border-accent-strong);border-radius:inherit;will-change:transform;border:1px solid;position:absolute;inset:0}:where(.🥝NavigationListItem[data-_sk-indented]) .🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{inset:unset;block-size:1rem;inline-size:2px;background-color:currentColor;border:none;inset-inline-start:var(--stratakit-space-x4);transform:translate(-.5px)}.🥝NavigationListItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--disabled);cursor:not-allowed}}@layer base.🌀{.🥝NavigationListItemAction{--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--default);--🌀NavigationListAnchor-state--default:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--hover:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--pressed:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--active:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--disabled:var(--🌀NavigationListAnchor-state, )}}@layer base{.🥝NavigationListSubgroupChevron{margin-inline-start:auto}}@layer modifiers{:where(.🥝NavigationListSubgroupButton[aria-expanded=true]) .🥝NavigationListSubgroupChevron{--🥝ChevronDown-rotate:180deg}}@media (forced-colors:active){.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{color:selecteditemtext}.🥝NavigationListItemAction:where(:disabled,[aria-disabled=true]){color:graytext}}@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:"";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:not([data-_sk-expanded=true])) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-pressed=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-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-primary))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}}@media (forced-colors:active){.🥝NavigationRailItemAction:where([aria-current]:not([aria-current=false])){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem;border-color:linktext}}@layer base{.🥝Popover{background:var(--stratakit-color-bg-elevation-level-1);box-shadow:var(--stratakit-shadow-control-dropdown-base);min-inline-size:min(95vi,164px);max-inline-size:var(--popover-available-width);max-block-size:var(--popover-available-height);padding:var(--stratakit-space-x1);border-radius:8px;overflow:auto}}@media (forced-colors:active){.🥝Popover{border:1px solid}}@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(--stratakit-color-bg-page-base);background-image:linear-gradient(var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,var(--stratakit-color-bg-glow-on-surface-accent-active-hover))0 0);--🥝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-control-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-primary))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-primary))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)}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])){position:relative}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])):after{content:"";background-color:var(--🥝Icon-color);clip-path:polygon(100% 0,100% 100%,0 100%);forced-color-adjust:none;width:3px;height:3px;position:absolute;inset-block-end:4px;inset-inline-end:4px}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}.🥝ToolbarItem.🥝IconButton{--🥝Icon-color:currentColor}}@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!important}.🥝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
package/dist/DEV/~utils.useInit.js CHANGED
@@ -5,11 +5,11 @@ import {
5
5
  } from "@stratakit/foundations/secret-internals";
6
6
  import css from "./styles.css.js";
7
7
  const packageName = "@stratakit/structures";
8
- const key = `${packageName}@${"0.5.4"}`;
8
+ const key = `${packageName}@${"0.5.6"}`;
9
9
  function useInit() {
10
10
  const rootContext = useSafeContext(RootContext);
11
11
  if (!rootContext.versions?.has(packageName))
12
- rootContext.versions?.set(packageName, "0.5.4");
12
+ rootContext.versions?.set(packageName, "0.5.6");
13
13
  const { rootNode, loadStyles } = rootContext;
14
14
  React.useInsertionEffect(() => {
15
15
  if (!rootNode || !loadStyles) return;
package/dist/DropdownMenu.js CHANGED
@@ -241,12 +241,16 @@ const DropdownMenuSubmenu = forwardRef((props, forwardedRef) => {
241
241
  }, [store, setStore]);
242
242
  const parent = useMenuContext();
243
243
  const popoverElement = useStoreState(parent, "popoverElement");
244
+ const portalElement = React.useCallback(() => {
245
+ if (!popoverElement?.isConnected) return null;
246
+ return popoverElement;
247
+ }, [popoverElement]);
244
248
  return /* @__PURE__ */ jsx(MenuProvider, {
245
249
  store,
246
250
  children: /* @__PURE__ */ jsx(Menu, {
247
251
  store,
248
252
  portal: true,
249
- portalElement: popoverElement,
253
+ portalElement,
250
254
  preserveTabOrder: false,
251
255
  ...props,
252
256
  gutter: 2,
package/dist/TreeItem.js CHANGED
@@ -203,14 +203,15 @@ function useRenderActions() {
203
203
  if (!el || renderActions) {
204
204
  return;
205
205
  }
206
- const observer = new IntersectionObserver((t22) => {
207
- const [entry] = t22;
208
- if (!entry.isIntersecting) {
209
- return;
206
+ const observer = new IntersectionObserver((entries) => {
207
+ for (const entry of entries) {
208
+ if (!entry.isIntersecting) {
209
+ continue;
210
+ }
211
+ React.startTransition(() => {
212
+ setRenderActions(true);
213
+ });
210
214
  }
211
- React.startTransition(() => {
212
- setRenderActions(true);
213
- });
214
215
  });
215
216
  observer.observe(el);
216
217
  return () => {
package/dist/styles.css.js CHANGED
@@ -1,4 +1,4 @@
1
- // inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
1
+ // inline-css:/home/runner/work/stratakit/stratakit/packages/structures/src/styles.css
2
2
  var styles_default = String.raw`@layer stratakit.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,var(--stratakit-color-bg-glow-on-surface-accent-active-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-primary))var(--🌀ListItem-state--pressed,var(--stratakit-color-icon-neutral-primary))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}}@layer base{.🥝ChevronDown{rotate:var(--🥝ChevronDown-rotate)}@media (prefers-reduced-motion:no-preference){.🥝ChevronDown{transition:rotate .15s ease-in-out}}}.🥝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!important}.🥝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-control-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);padding-block-end:var(--stratakit-space-x5);padding-inline:var(--stratakit-space-x5)}}@layer modifiers{@media (height>=15em){.🥝DialogContent{overflow-block:auto;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-control-dropdown-base);border-radius:8px;flex-direction:column;display:flex;overflow:auto}}@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}.🥝DropdownMenuItem.🥝ListItem:where([data-has-popover-open]:not(:active)){--🌀ListItem-state:var(--🌀ListItem-state--hover)}}@layer base{.🥝DropdownMenuItemDot.🥝Dot{align-self:center}}@layer base{.🥝DropdownMenuCheckmark{visibility:var(--🥝DropdownMenuCheckmark-visibility)}}@layer base{.🥝DropdownMenuItemShortcuts{margin-inline-start:var(--stratakit-space-x2)}}@layer base{.🥝DropdownMenuItemChevron.🥝ListItemDecoration{min-inline-size:var(--🥝Icon-size,1rem);margin-inline-end:-4px}}@layer base{.🥝DropdownMenuGroup{flex-direction:column;display:flex}.🥝DropdownMenuGroup:before,.🥝DropdownMenuGroup:after{content:"";color:var(--stratakit-color-border-page-base);block-size:1px;margin-block:var(--stratakit-space-x1);border-image:linear-gradient(currentColor 0 0) 0 fill//0 100cqi}.🥝DropdownMenuGroup:where(:nth-child(1 of :is(.🥝DropdownMenuGroup,.🥝DropdownMenuItem))):before,.🥝DropdownMenuGroup:where(:not(:has(+.🥝DropdownMenuItem))):after{content:unset}@supports not selector(:has(+ *)){.🥝DropdownMenuGroup:where(.🥝DropdownMenuGroup+.🥝DropdownMenuGroup):before{content:unset}}}@layer base{.🥝DropdownMenuGroupLabel{padding-inline:var(--stratakit-space-x2);color:var(--stratakit-color-text-neutral-secondary);align-items:center;min-block-size:1.75rem;font-weight:500;display:flex}}@media (forced-colors:active){.🥝DropdownMenu{border:1px solid}.🥝DropdownMenuGroup:before,.🥝DropdownMenuGroup:after{color:canvastext;forced-color-adjust:none}}@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{.🥝NavigationListRoot{position:relative}}@layer modifiers{.🥝NavigationListRoot:where([data-_sk-indented]):before{content:"";border-inline-start:1px solid var(--stratakit-color-border-page-base);border-radius:4px;position:absolute;inset-block:0;inset-inline-start:var(--stratakit-space-x4)}}@layer base{.🥝NavigationListItemAction{align-items:center;gap:var(--stratakit-space-x2);min-block-size:2rem;inline-size:-webkit-fill-available;inline-size:-moz-available;inline-size:stretch;padding-inline:var(--stratakit-space-x2);padding-block:var(--stratakit-space-x1);font-size:var(--stratakit-font-size-12);cursor:pointer;color:var(--🌀NavigationListAnchor-state--default,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--hover,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-text-neutral-primary))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-text-accent-strong))var(--🌀NavigationListAnchor-state--disabled,var(--stratakit-color-text-neutral-disabled));background-color:var(--🌀NavigationListAnchor-state--default,transparent)var(--🌀NavigationListAnchor-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-bg-glow-on-surface-neutral-pressed))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀NavigationListAnchor-state--disabled,transparent);--🥝Icon-color:var(--🌀NavigationListAnchor-state--default,var(--stratakit-color-icon-neutral-secondary))var(--🌀NavigationListAnchor-state--hover,var(---✨icon--hover))var(--🌀NavigationListAnchor-state--pressed,var(--stratakit-color-icon-neutral-primary))var(--🌀NavigationListAnchor-state--active,var(--stratakit-color-icon-accent-strong))var(--🌀NavigationListAnchor-state--disabled,var(--stratakit-color-icon-neutral-disabled));-webkit-tap-highlight-color:var(--stratakit-color-bg-glow-on-surface-neutral-pressed);border-radius:4px;line-height:1.2;text-decoration:none;display:flex;position:relative}}@layer modifiers{:where(.🥝NavigationListItem[data-_sk-indented]) .🥝NavigationListItemAction:before{content:"";inline-size:var(--stratakit-space-x4);display:inline-block}}@layer states{@media (any-hover:hover){.🥝NavigationListItemAction:where(:hover){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--hover)}}.🥝NavigationListItemAction:where(:active){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--pressed)}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--active)}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{content:"";color:var(--stratakit-color-border-accent-strong);border-radius:inherit;will-change:transform;border:1px solid;position:absolute;inset:0}:where(.🥝NavigationListItem[data-_sk-indented]) .🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{inset:unset;block-size:1rem;inline-size:2px;background-color:currentColor;border:none;inset-inline-start:var(--stratakit-space-x4);transform:translate(-.5px)}.🥝NavigationListItemAction:where(:disabled,[aria-disabled=true]){--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--disabled);cursor:not-allowed}}@layer base.🌀{.🥝NavigationListItemAction{--🌀NavigationListAnchor-state:var(--🌀NavigationListAnchor-state--default);--🌀NavigationListAnchor-state--default:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--hover:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--pressed:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--active:var(--🌀NavigationListAnchor-state, );--🌀NavigationListAnchor-state--disabled:var(--🌀NavigationListAnchor-state, )}}@layer base{.🥝NavigationListSubgroupChevron{margin-inline-start:auto}}@layer modifiers{:where(.🥝NavigationListSubgroupButton[aria-expanded=true]) .🥝NavigationListSubgroupChevron{--🥝ChevronDown-rotate:180deg}}@media (forced-colors:active){.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem}.🥝NavigationListItemAction:where([aria-current]:not([aria-current=false])):after{color:selecteditemtext}.🥝NavigationListItemAction:where(:disabled,[aria-disabled=true]){color:graytext}}@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:"";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:not([data-_sk-expanded=true])) .🥝NavigationRailToggleButton{position:absolute;inset-inline-end:0;translate:50%}.🥝NavigationRailToggleButton:where([aria-pressed=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-primary))var(--🌀NavigationRailItemAction-state--pressed,var(--stratakit-color-icon-neutral-primary))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}}@media (forced-colors:active){.🥝NavigationRailItemAction:where([aria-current]:not([aria-current=false])){forced-color-adjust:none;color:selecteditemtext;background-color:selecteditem;border-color:linktext}}@layer base{.🥝Popover{background:var(--stratakit-color-bg-elevation-level-1);box-shadow:var(--stratakit-shadow-control-dropdown-base);min-inline-size:min(95vi,164px);max-inline-size:var(--popover-available-width);max-block-size:var(--popover-available-height);padding:var(--stratakit-space-x1);border-radius:8px;overflow:auto}}@media (forced-colors:active){.🥝Popover{border:1px solid}}@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(--stratakit-color-bg-page-base);background-image:linear-gradient(var(--🌀TableCell-state--default,transparent)var(--🌀TableCell-state--hover,var(--stratakit-color-bg-glow-on-surface-neutral-hover))var(--🌀TableCell-state--active,var(--stratakit-color-bg-glow-on-surface-accent-pressed))var(--🌀TableCell-state--active-hover,var(--stratakit-color-bg-glow-on-surface-accent-active-hover))0 0);--🥝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-control-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-primary))var(--🌀Button-state--pressed,var(--stratakit-color-icon-neutral-primary))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)}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])){position:relative}.🥝ToolbarItem.🥝IconButton:where([aria-haspopup]:not([aria-haspopup=false])):after{content:"";background-color:var(--🥝Icon-color);clip-path:polygon(100% 0,100% 100%,0 100%);forced-color-adjust:none;width:3px;height:3px;position:absolute;inset-block-end:4px;inset-inline-end:4px}}@media (forced-colors:active){.🥝Toolbar{border:1px solid}.🥝ToolbarItem.🥝IconButton{--🥝Icon-color:currentColor}}@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!important}.🥝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
package/dist/~utils.useInit.js CHANGED
@@ -3,12 +3,12 @@ import * as React from "react";
3
3
  import { RootContext, useSafeContext } from "@stratakit/foundations/secret-internals";
4
4
  import css from "./styles.css.js";
5
5
  const packageName = "@stratakit/structures";
6
- const key = `${packageName}@${"0.5.4"}`;
6
+ const key = `${packageName}@${"0.5.6"}`;
7
7
  function useInit() {
8
8
  const $ = _c(4);
9
9
  const rootContext = useSafeContext(RootContext);
10
10
  if (!rootContext.versions?.has(packageName)) {
11
- rootContext.versions?.set(packageName, "0.5.4");
11
+ rootContext.versions?.set(packageName, "0.5.6");
12
12
  }
13
13
  const {
14
14
  rootNode,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stratakit/structures",
3
3
  "type": "module",
4
- "version": "0.5.4",
4
+ "version": "0.5.6",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
7
7
  "types": "./dist/index.d.ts",
@@ -99,10 +99,10 @@
99
99
  ],
100
100
  "description": "Medium-sized component structures for the Strata design system",
101
101
  "author": "Bentley Systems",
102
- "homepage": "https://github.com/iTwin/design-system",
102
+ "homepage": "https://github.com/iTwin/stratakit",
103
103
  "repository": {
104
104
  "type": "git",
105
- "url": "https://github.com/iTwin/design-system.git",
105
+ "url": "https://github.com/iTwin/stratakit.git",
106
106
  "directory": "packages/structures"
107
107
  },
108
108
  "keywords": [
@@ -121,20 +121,20 @@
121
121
  "dependencies": {
122
122
  "@ariakit/react": "^0.4.20",
123
123
  "@stratakit/bricks": "^0.5.4",
124
- "@stratakit/foundations": "^0.4.4",
124
+ "@stratakit/foundations": "^0.4.7",
125
125
  "classnames": "^2.5.1",
126
126
  "react-compiler-runtime": "^1.0.0",
127
- "zustand": "^5.0.9"
127
+ "zustand": "^5.0.11"
128
128
  },
129
129
  "devDependencies": {
130
- "@types/node": "^22.19.1",
131
- "@types/react": "^19.2.7",
130
+ "@types/node": "^22.19.13",
131
+ "@types/react": "^19.2.14",
132
132
  "@types/react-dom": "^19.2.3",
133
- "esbuild": "^0.27.0",
134
- "react": "^19.2.1",
135
- "react-dom": "^19.2.1",
133
+ "esbuild": "^0.27.3",
134
+ "react": "^19.2.4",
135
+ "react-dom": "^19.2.4",
136
136
  "typescript": "~5.9.3",
137
- "@stratakit/foundations": "0.4.4"
137
+ "@stratakit/foundations": "0.4.7"
138
138
  },
139
139
  "peerDependencies": {
140
140
  "react": ">=18.0.0",