@stratakit/structures 0.5.5 → 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 (10) hide show
  1. package/CHANGELOG.md +79 -75
  2. package/dist/AccordionItem.d.ts +6 -6
  3. package/dist/Banner.d.ts +2 -2
  4. package/dist/DEV/TreeItem.js +7 -5
  5. package/dist/DEV/styles.css.js +1 -1
  6. package/dist/DEV/~utils.useInit.js +2 -2
  7. package/dist/TreeItem.js +8 -7
  8. package/dist/styles.css.js +1 -1
  9. package/dist/~utils.useInit.js +2 -2
  10. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,27 +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
+
3
7
  ## 0.5.5
4
8
 
5
- - [#1174](https://github.com/iTwin/design-system/pull/1174): Fixed `DropdownMenu.Submenu` component to avoid removal of parent portal popover when unmounting.
9
+ - [#1174](https://github.com/iTwin/stratakit/pull/1174): Fixed `DropdownMenu.Submenu` component to avoid removal of parent portal popover when unmounting.
6
10
 
7
11
  ## 0.5.4
8
12
 
9
- - [#1122](https://github.com/iTwin/design-system/pull/1122): Moved `@stratakit/foundations` from `peerDependencies` to direct `dependencies`.
10
- - [#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`.
11
15
  - Updated dependencies:
12
16
  - @stratakit/foundations@0.4.4
13
17
  - @stratakit/bricks@0.5.4
14
18
 
15
19
  ## 0.5.3
16
20
 
17
- - [#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.
18
22
  - Updated dependencies:
19
23
  - @stratakit/foundations@0.4.3
20
24
  - @stratakit/bricks@0.5.3
21
25
 
22
26
  ## 0.5.2
23
27
 
24
- - [#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.
25
29
 
26
30
  ```tsx
27
31
  <DropdownMenu.Provider>
@@ -40,12 +44,12 @@
40
44
  </DropdownMenu.Provider>
41
45
  ```
42
46
 
43
- - [#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.
44
- - [#1092](https://github.com/iTwin/design-system/pull/1092): Increased the target size of `NavigationRail.ToggleButton` component.
45
- - [#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`.
46
50
 
47
- - [#1074](https://github.com/iTwin/design-system/pull/1074): Visual updates to `Table` and `Tree` active + hover states.
48
- - [#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.
49
53
 
50
54
  - Updated dependencies:
51
55
  - @stratakit/bricks@0.5.2
@@ -53,7 +57,7 @@
53
57
 
54
58
  ## 0.5.1
55
59
 
56
- - [#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.
57
61
 
58
62
  Includes the following subcomponents:
59
63
  - `<NavigationList.Root>`
@@ -79,11 +83,11 @@
79
83
  />
80
84
  ```
81
85
 
82
- - [#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.
83
87
  - If `selected` is undefined, the `Tree.Item` will expand/collapse when clicked.
84
88
  - If `selected` is defined, the `Tree.Item` will continue to toggle selection when clicked.
85
89
 
86
- - [#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.
87
91
 
88
92
  ```tsx
89
93
  <Popover content={<>Popover content</>}>
@@ -99,11 +103,11 @@
99
103
 
100
104
  ### Breaking changes
101
105
 
102
- - [#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[]`.
103
107
 
104
108
  `items` prop is used to determine error region visibility.
105
109
 
106
- - [#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.
107
111
 
108
112
  ```diff
109
113
  - import * as TreeItem from "@stratakit/structures/TreeItem";
@@ -116,11 +120,11 @@
116
120
  + <Tree.ItemAction />
117
121
  ```
118
122
 
119
- - [#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.
120
124
 
121
125
  ### Non-breaking changes
122
126
 
123
- - [#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.
124
128
  - Updated dependencies:
125
129
  - @stratakit/bricks@0.5.0
126
130
  - @stratakit/foundations@0.4.0
@@ -128,29 +132,29 @@
128
132
  ## 0.4.5
129
133
 
130
134
  - `unstable_NavigationRail` changes:
131
- - [#962](https://github.com/iTwin/design-system/pull/962): Added `expanded` and `setExpanded` props for controlling the expanded/collapsed state.
132
- - [#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.
133
137
  - `unstable_ErrorRegion` changes:
134
- - [#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}`.
135
- - [#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.
136
- - [#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`.
137
- - [#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.
138
- - [#953](https://github.com/iTwin/design-system/pull/953): Changed the default value of `Tabs.Provider`'s `selectOnMove` prop to `false`.
139
- - [#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.
140
144
  - Updated dependencies:
141
145
  - @stratakit/bricks@0.4.5
142
146
  - @stratakit/foundations@0.3.5
143
147
 
144
148
  ## 0.4.4
145
149
 
146
- - [#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`.
147
151
  - Updated dependencies:
148
152
  - @stratakit/bricks@0.4.4
149
153
  - @stratakit/foundations@0.3.4
150
154
 
151
155
  ## 0.4.3
152
156
 
153
- - [#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.
154
158
 
155
159
  ```tsx
156
160
  <DropdownMenu.Provider>
@@ -172,21 +176,21 @@
172
176
  </DropdownMenu.Provider>
173
177
  ```
174
178
 
175
- - [#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.
176
180
  - Updated dependencies:
177
181
  - @stratakit/bricks@0.4.3
178
182
  - @stratakit/foundations@0.3.3
179
183
 
180
184
  ## 0.4.2
181
185
 
182
- - [#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.
183
187
  - Updated dependencies:
184
188
  - @stratakit/bricks@0.4.2
185
189
  - @stratakit/foundations@0.3.2
186
190
 
187
191
  ## 0.4.1
188
192
 
189
- - [#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.
190
194
 
191
195
  ```tsx
192
196
  const [open, setOpen] = useState(false);
@@ -211,7 +215,7 @@
211
215
  </Dialog.Root>
212
216
  ```
213
217
 
214
- - [#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).
215
219
 
216
220
  ```jsx
217
221
  <NavigationRail.Root>
@@ -255,18 +259,18 @@
255
259
 
256
260
  ### Breaking changes
257
261
 
258
- - [#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.
259
263
 
260
264
  `#icon-large` must now be explicitly added to the URL to select the large icons from `@stratakit/icons`. For example:
261
265
 
262
266
  ```diff
263
267
  <Toolbar.Item
264
- - render={<IconButton icon={placeholderIcon} />}
265
- + render={<IconButton icon={`${placeholderIcon}#icon-large`} />}
268
+ - render={<IconButton icon={svgPlaceholder} />}
269
+ + render={<IconButton icon={`${svgPlaceholder}#icon-large`} />}
266
270
  />
267
271
  ```
268
272
 
269
- - [#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`.
270
274
 
271
275
  ```diff
272
276
  - <Tabs.Root>
@@ -279,7 +283,7 @@
279
283
 
280
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.
281
285
 
282
- - [#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`.
283
287
 
284
288
  ```diff
285
289
  - <DropdownMenu.Root>
@@ -294,7 +298,7 @@
294
298
 
295
299
  ### Non-breaking changes
296
300
 
297
- - [#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`.
298
302
 
299
303
  ```tsx
300
304
  <Toolbar.Group variant="solid">
@@ -305,34 +309,34 @@
305
309
  </Toolbar.Group>
306
310
  ```
307
311
 
308
- - [#913](https://github.com/iTwin/design-system/pull/913): Updated internal CSS selectors in every component.
309
- - [#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.
310
- - [#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.
311
315
  - Updated dependencies:
312
316
  - @stratakit/foundations@0.3.0
313
317
  - @stratakit/bricks@0.4.0
314
318
 
315
319
  ## 0.3.2
316
320
 
317
- - [#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.
318
322
  - Replaced hardcoded `rem` spacing values with new `px`-based variables in many components.
319
- - [#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`.
320
324
  - Updated dependencies:
321
325
  - @stratakit/bricks@0.3.4
322
326
  - @stratakit/foundations@0.2.3
323
327
 
324
328
  ## 0.3.1
325
329
 
326
- - [#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.
327
- - [#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.
328
- - [#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.
329
333
 
330
334
  ## 0.3.0
331
335
 
332
336
  ### Breaking changes
333
337
 
334
- - [#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.
335
- - [#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.
336
340
 
337
341
  ```tsx
338
342
  <Tree.Item
@@ -367,7 +371,7 @@
367
371
 
368
372
  ### Non-breaking changes
369
373
 
370
- - [#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.
371
375
 
372
376
  To use the compositional components, import them from the `/unstable_Banner` subpath:
373
377
 
@@ -375,7 +379,7 @@
375
379
  import * as Banner from "@stratakit/structures/unstable_Banner";
376
380
 
377
381
  <Banner.Root>
378
- <Banner.Icon href={placeholderIcon} />
382
+ <Banner.Icon href={svgPlaceholder} />
379
383
  <Banner.Label>Label</Banner.Label>
380
384
  <Banner.Message>Message</Banner.Message>
381
385
  <Banner.Actions>
@@ -385,7 +389,7 @@
385
389
  </Banner.Root>;
386
390
  ```
387
391
 
388
- - [#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>`.
389
393
 
390
394
  The `<AccordionItem.Marker>` is now recommended to be placed _before_ the rest of the header content.
391
395
 
@@ -398,14 +402,14 @@
398
402
  </AccordionItem.Header>
399
403
  ```
400
404
 
401
- - [#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>`.
402
406
 
403
407
  ```tsx
404
408
  <AccordionItem.Header>
405
409
  <AccordionItem.Marker />
406
410
  <AccordionItem.Decoration>
407
- <Icon href={placeholder} />
408
- <Icon href={placeholder} />
411
+ <Icon href={svgPlaceholder} />
412
+ <Icon href={svgPlaceholder} />
409
413
  </AccordionItem.Decoration>
410
414
  <AccordionItem.Button>
411
415
  <AccordionItem.Label>Label</AccordionItem.Label>
@@ -413,11 +417,11 @@
413
417
  </AccordionItem.Header>
414
418
  ```
415
419
 
416
- - [#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>`.
417
421
 
418
- - [#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.
419
423
 
420
- - [#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.
421
425
 
422
426
  ```tsx
423
427
  <Table.Row>
@@ -428,7 +432,7 @@
428
432
  </Table.Row>
429
433
  ```
430
434
 
431
- - [#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`.
432
436
 
433
437
  - Updated dependencies:
434
438
  - @stratakit/bricks@0.3.3
@@ -436,14 +440,14 @@
436
440
 
437
441
  ## 0.2.4
438
442
 
439
- - [#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.
440
444
  - Updated dependencies:
441
445
  - @stratakit/bricks@0.3.2
442
446
  - @stratakit/foundations@0.2.1
443
447
 
444
448
  ## 0.2.3
445
449
 
446
- - [#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.
447
451
 
448
452
  ```tsx
449
453
  // Add end icon to a tab.
@@ -453,7 +457,7 @@
453
457
  </Tabs.Tab>
454
458
  ```
455
459
 
456
- - [#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.
457
461
 
458
462
  ```tsx
459
463
  // Convenience import
@@ -474,7 +478,7 @@
474
478
  </Chip.Root>;
475
479
  ```
476
480
 
477
- 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.
478
482
 
479
483
  APIs exported from the barrel file are not changed in this release. Some exported components are compositional, while others are convenience components.
480
484
 
@@ -485,7 +489,7 @@
485
489
  <Chip />;
486
490
  ```
487
491
 
488
- - [#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.
489
493
 
490
494
  To use the compositional components, import them from the `/Chip` subpath:
491
495
 
@@ -498,9 +502,9 @@
498
502
  </Chip.Root>;
499
503
  ```
500
504
 
501
- - [#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.
502
- - [#781](https://github.com/iTwin/design-system/pull/781): Updated `Chip.Label` component styling when rendered as a button.
503
- - [#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.
504
508
 
505
509
  - Updated dependencies:
506
510
  - @stratakit/foundations@0.2.0
@@ -508,17 +512,17 @@
508
512
 
509
513
  ## 0.2.2
510
514
 
511
- - [#756](https://github.com/iTwin/design-system/pull/756): `DropdownMenu.Button` will now ignore `render={undefined}`.
512
- - [#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.
513
517
  - Updated dependencies:
514
518
  - @stratakit/bricks@0.3.0
515
519
  - @stratakit/foundations@0.1.6
516
520
 
517
521
  ## 0.2.1
518
522
 
519
- - [#736](https://github.com/iTwin/design-system/pull/736): Updated the `label` prop type in the `<Chip />` component from `string` to `ReactNode`.
520
- - [#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`.
521
- - [#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.
522
526
  - Updated dependencies:
523
527
  - @stratakit/foundations@0.1.5
524
528
  - @stratakit/bricks@0.2.1
@@ -527,9 +531,9 @@
527
531
 
528
532
  ### Breaking changes
529
533
 
530
- - [#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`.
531
535
  Renamed `expanded` prop for `unstable_ErrorRegion.Root` to `open`.
532
- - [#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:
533
537
  - `AccordionItem.Trigger` renamed to `AccordionItem.Header` and no longer represents the underlying `<button>` element (see `AccordionItem.Label`).
534
538
  - `AccordionItem.Label` must be wrapped with the new `AccordionItem.Button`.
535
539
 
@@ -547,17 +551,17 @@
547
551
  </AccordionItem.Root>
548
552
  ```
549
553
 
550
- - [#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`.
551
555
 
552
556
  ### Non-breaking changes
553
557
 
554
- - [#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.
555
559
  - Updated dependencies:
556
560
  - @stratakit/foundations@0.1.4
557
561
 
558
562
  ## 0.1.1
559
563
 
560
- - [#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`.
561
565
  - `unstable_AccordionItem`
562
566
  - `unstable_Banner`
563
567
  - `Chip`
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/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.5"}`;
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.5");
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/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.5"}`;
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.5");
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.5",
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.5",
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.3",
135
- "react-dom": "^19.2.3",
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.5"
137
+ "@stratakit/foundations": "0.4.7"
138
138
  },
139
139
  "peerDependencies": {
140
140
  "react": ">=18.0.0",