nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.4

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 (138) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +229 -1
  3. data/README.md +25 -10
  4. data/STYLE_GUIDE.md +47 -5
  5. data/app/assets/stylesheets/nitro_kit-tailwind-v4.css +3 -3
  6. data/app/assets/stylesheets/nitro_kit.css +2820 -1816
  7. data/app/components/nitro_kit/accordion.rb +2 -26
  8. data/app/components/nitro_kit/alert.rb +1 -11
  9. data/app/components/nitro_kit/app_navigation.rb +45 -11
  10. data/app/components/nitro_kit/app_shell.rb +1 -7
  11. data/app/components/nitro_kit/appearance_picker.rb +11 -12
  12. data/app/components/nitro_kit/avatar.rb +6 -1
  13. data/app/components/nitro_kit/avatar_stack.rb +3 -0
  14. data/app/components/nitro_kit/badge.rb +13 -4
  15. data/app/components/nitro_kit/button_group.rb +2 -2
  16. data/app/components/nitro_kit/checkbox.rb +7 -4
  17. data/app/components/nitro_kit/checkbox_group.rb +0 -25
  18. data/app/components/nitro_kit/combobox.rb +4 -33
  19. data/app/components/nitro_kit/command_palette.rb +42 -59
  20. data/app/components/nitro_kit/component.rb +57 -5
  21. data/app/components/nitro_kit/danger_zone.rb +5 -1
  22. data/app/components/nitro_kit/data_section.rb +28 -4
  23. data/app/components/nitro_kit/details_table.rb +19 -8
  24. data/app/components/nitro_kit/dialog.rb +23 -19
  25. data/app/components/nitro_kit/dropdown.rb +1 -6
  26. data/app/components/nitro_kit/dropzone.rb +4 -15
  27. data/app/components/nitro_kit/empty_state.rb +21 -2
  28. data/app/components/nitro_kit/field.rb +35 -11
  29. data/app/components/nitro_kit/form_builder.rb +1 -2
  30. data/app/components/nitro_kit/progressive_image.rb +2 -2
  31. data/app/components/nitro_kit/radio_button.rb +7 -4
  32. data/app/components/nitro_kit/radio_button_group.rb +0 -25
  33. data/app/components/nitro_kit/select.rb +4 -17
  34. data/app/components/nitro_kit/settings_layout.rb +17 -4
  35. data/app/components/nitro_kit/{form_section.rb → settings_section.rb} +18 -11
  36. data/app/components/nitro_kit/sheet.rb +29 -20
  37. data/app/components/nitro_kit/stat_grid.rb +18 -2
  38. data/app/components/nitro_kit/table.rb +22 -3
  39. data/app/components/nitro_kit/tabs.rb +2 -13
  40. data/app/components/nitro_kit/toast.rb +4 -2
  41. data/app/components/nitro_kit/toolbar.rb +2 -0
  42. data/app/components/nitro_kit/tooltip.rb +7 -10
  43. data/app/javascript/controllers/nk/app_shell_controller.js +3 -3
  44. data/app/javascript/controllers/nk/appearance_controller.js +6 -0
  45. data/app/javascript/controllers/nk/combobox_controller.js +51 -1
  46. data/app/javascript/controllers/nk/command_palette_controller.js +25 -11
  47. data/app/javascript/controllers/nk/dialog_controller.js +54 -0
  48. data/app/javascript/controllers/nk/dropdown_controller.js +45 -0
  49. data/app/javascript/controllers/nk/dropzone_controller.js +2 -2
  50. data/app/javascript/controllers/nk/progressive_image_controller.js +11 -7
  51. data/app/javascript/controllers/nk/tabs_controller.js +21 -2
  52. data/app/javascript/controllers/nk/tooltip_controller.js +9 -0
  53. data/config/locales/en.yml +4 -1
  54. data/docs/agent_guide.md +63 -123
  55. data/docs/agent_native_spec.md +72 -383
  56. data/docs/browser_support.md +82 -0
  57. data/docs/component_contracts.md +108 -82
  58. data/docs/customization.md +689 -91
  59. data/docs/hotwire.md +50 -76
  60. data/docs/initialization_prompt.md +26 -31
  61. data/docs/migration_1_to_2.md +88 -30
  62. data/docs/patterns/application_foundation.md +45 -119
  63. data/docs/patterns/crud_resource.md +44 -126
  64. data/docs/patterns/destructive_action.md +45 -77
  65. data/docs/patterns/flash_and_toast.md +18 -36
  66. data/docs/patterns/inline_edit.md +21 -44
  67. data/docs/patterns/queryable_collection.md +65 -161
  68. data/docs/patterns/resource_form.md +33 -81
  69. data/docs/rails_conventions.md +38 -75
  70. data/docs/rails_integration.md +96 -446
  71. data/lib/generators/nitro_kit/upgrade_smoke_tests_generator.rb +12 -0
  72. data/lib/nitro_kit/installation.rb +20 -7
  73. data/lib/nitro_kit/migration_inventory.rb +275 -8
  74. data/lib/nitro_kit/upgrade_smoke_test.rb +10 -12
  75. data/lib/nitro_kit/version.rb +1 -1
  76. data/lib/rails/commands/nitro_kit/nitro_kit_command.rb +10 -3
  77. data/plugins/nitro-kit/skills/nitro-kit-hotwire/SKILL.md +4 -0
  78. data/plugins/nitro-kit/skills/nitro-kit-rails/SKILL.md +13 -1
  79. data/plugins/nitro-kit/skills/nitro-kit-ui/SKILL.md +32 -15
  80. data/src/stylesheets/nitro_kit/components/accordion.css +44 -44
  81. data/src/stylesheets/nitro_kit/components/alert.css +27 -36
  82. data/src/stylesheets/nitro_kit/components/app_navigation.css +92 -20
  83. data/src/stylesheets/nitro_kit/components/app_shell.css +199 -196
  84. data/src/stylesheets/nitro_kit/components/appearance_picker.css +61 -39
  85. data/src/stylesheets/nitro_kit/components/auth_shell.css +2 -2
  86. data/src/stylesheets/nitro_kit/components/avatar.css +15 -11
  87. data/src/stylesheets/nitro_kit/components/avatar_stack.css +48 -29
  88. data/src/stylesheets/nitro_kit/components/badge.css +13 -9
  89. data/src/stylesheets/nitro_kit/components/button.css +121 -79
  90. data/src/stylesheets/nitro_kit/components/button_group.css +19 -14
  91. data/src/stylesheets/nitro_kit/components/card.css +12 -6
  92. data/src/stylesheets/nitro_kit/components/checkbox.css +54 -67
  93. data/src/stylesheets/nitro_kit/components/checkbox_group.css +16 -16
  94. data/src/stylesheets/nitro_kit/components/combobox.css +39 -29
  95. data/src/stylesheets/nitro_kit/components/command_palette.css +110 -51
  96. data/src/stylesheets/nitro_kit/components/container.css +6 -6
  97. data/src/stylesheets/nitro_kit/components/control_group.css +61 -67
  98. data/src/stylesheets/nitro_kit/components/danger_zone.css +8 -8
  99. data/src/stylesheets/nitro_kit/components/data_section.css +4 -4
  100. data/src/stylesheets/nitro_kit/components/details_table.css +17 -15
  101. data/src/stylesheets/nitro_kit/components/dialog.css +8 -5
  102. data/src/stylesheets/nitro_kit/components/dropdown.css +36 -30
  103. data/src/stylesheets/nitro_kit/components/dropzone.css +78 -35
  104. data/src/stylesheets/nitro_kit/components/empty_state.css +7 -7
  105. data/src/stylesheets/nitro_kit/components/field.css +32 -28
  106. data/src/stylesheets/nitro_kit/components/field_group.css +13 -0
  107. data/src/stylesheets/nitro_kit/components/fieldset.css +8 -2
  108. data/src/stylesheets/nitro_kit/components/flex.css +1 -1
  109. data/src/stylesheets/nitro_kit/components/grid.css +1 -1
  110. data/src/stylesheets/nitro_kit/components/icon.css +5 -5
  111. data/src/stylesheets/nitro_kit/components/input.css +42 -8
  112. data/src/stylesheets/nitro_kit/components/layout.css +165 -165
  113. data/src/stylesheets/nitro_kit/components/page_header.css +7 -7
  114. data/src/stylesheets/nitro_kit/components/pagination.css +58 -49
  115. data/src/stylesheets/nitro_kit/components/pagination_bar.css +9 -9
  116. data/src/stylesheets/nitro_kit/components/palette.css +145 -77
  117. data/src/stylesheets/nitro_kit/components/progressive_image.css +45 -55
  118. data/src/stylesheets/nitro_kit/components/radio_button.css +48 -46
  119. data/src/stylesheets/nitro_kit/components/radio_button_group.css +49 -49
  120. data/src/stylesheets/nitro_kit/components/rich_text_area.css +16 -1
  121. data/src/stylesheets/nitro_kit/components/select.css +24 -15
  122. data/src/stylesheets/nitro_kit/components/settings_layout.css +26 -23
  123. data/src/stylesheets/nitro_kit/components/settings_section.css +84 -0
  124. data/src/stylesheets/nitro_kit/components/sheet.css +30 -10
  125. data/src/stylesheets/nitro_kit/components/stat_grid.css +11 -10
  126. data/src/stylesheets/nitro_kit/components/switch.css +60 -62
  127. data/src/stylesheets/nitro_kit/components/table.css +43 -35
  128. data/src/stylesheets/nitro_kit/components/tabs.css +48 -40
  129. data/src/stylesheets/nitro_kit/components/textarea.css +20 -5
  130. data/src/stylesheets/nitro_kit/components/toast.css +11 -47
  131. data/src/stylesheets/nitro_kit/components/toolbar.css +16 -41
  132. data/src/stylesheets/nitro_kit/components/tooltip.css +38 -29
  133. data/src/stylesheets/nitro_kit/components/typeset.css +150 -4
  134. data/src/stylesheets/nitro_kit/reset.css +15 -15
  135. data/src/stylesheets/nitro_kit/tokens.css +501 -79
  136. metadata +4 -4
  137. data/docs/new_app_strategy.md +0 -22
  138. data/src/stylesheets/nitro_kit/components/form_section.css +0 -71
data/src/stylesheets/nitro_kit/components/app_shell.css CHANGED
@@ -24,15 +24,15 @@
24
24
  color: var(--nk-color-primary-foreground);
25
25
  text-decoration: none;
26
26
  background: var(--nk-color-primary);
27
- border-radius: var(--nk-radius-md);
27
+ border-radius: var(--nk-radius-lg);
28
28
  outline: var(--nk-focus-width) solid var(--nk-color-focus);
29
29
  transform: translateY(calc(-100% - (var(--nk-space) * 4)));
30
30
  transition: transform var(--nk-duration-fast) var(--nk-ease);
31
31
  }
32
32
 
33
33
  :where(
34
- [data-nk="app-shell"] > [data-slot="app-shell-skip-link"]:focus-visible
35
- ) {
34
+ [data-nk="app-shell"] > [data-slot="app-shell-skip-link"]:focus-visible
35
+ ) {
36
36
  transform: translateY(0);
37
37
  }
38
38
 
@@ -41,10 +41,10 @@
41
41
  }
42
42
 
43
43
  :where(
44
- [data-nk="app-shell"]
45
- > [data-slot="app-shell-header"]
46
- > [data-slot="app-shell-brand"]
47
- ) {
44
+ [data-nk="app-shell"]
45
+ > [data-slot="app-shell-header"]
46
+ > [data-slot="app-shell-brand"]
47
+ ) {
48
48
  position: sticky;
49
49
  inset-block-start: 0;
50
50
  z-index: 20;
@@ -62,13 +62,13 @@
62
62
  }
63
63
 
64
64
  :where(
65
- [data-nk="app-shell"]
66
- > [data-slot="app-shell-header"]
67
- > [data-slot="app-shell-mobile-trigger"],
68
- [data-nk="app-shell"]
69
- > [data-slot="app-shell-dialog"]
70
- > [data-slot="app-shell-mobile-close"]
71
- ) {
65
+ [data-nk="app-shell"]
66
+ > [data-slot="app-shell-header"]
67
+ > [data-slot="app-shell-mobile-trigger"],
68
+ [data-nk="app-shell"]
69
+ > [data-slot="app-shell-dialog"]
70
+ > [data-slot="app-shell-mobile-close"]
71
+ ) {
72
72
  display: none;
73
73
  align-items: center;
74
74
  justify-content: center;
@@ -79,7 +79,7 @@
79
79
  cursor: pointer;
80
80
  background: transparent;
81
81
  border: 0;
82
- border-radius: var(--nk-radius-md);
82
+ border-radius: var(--nk-radius-lg);
83
83
  transition:
84
84
  background-color var(--nk-duration-fast) var(--nk-ease),
85
85
  scale var(--nk-duration-fast) var(--nk-ease);
@@ -104,13 +104,13 @@
104
104
  }
105
105
 
106
106
  :where(
107
- [data-nk="app-shell"]
108
- > [data-slot="app-shell-sidebar"]
109
- > [data-slot="app-shell-navigation"],
110
- [data-nk="app-shell"]
111
- > [data-slot="app-shell-dialog"]
112
- > [data-slot="app-shell-navigation"]
113
- ) {
107
+ [data-nk="app-shell"]
108
+ > [data-slot="app-shell-sidebar"]
109
+ > [data-slot="app-shell-navigation"],
110
+ [data-nk="app-shell"]
111
+ > [data-slot="app-shell-dialog"]
112
+ > [data-slot="app-shell-navigation"]
113
+ ) {
114
114
  display: flex;
115
115
  flex: 1 1 auto;
116
116
  min-inline-size: 0;
@@ -118,10 +118,10 @@
118
118
  }
119
119
 
120
120
  :where(
121
- [data-nk="app-shell"]
122
- > [data-slot="app-shell-header"]
123
- > [data-slot="app-shell-topbar"]
124
- ) {
121
+ [data-nk="app-shell"]
122
+ > [data-slot="app-shell-header"]
123
+ > [data-slot="app-shell-topbar"]
124
+ ) {
125
125
  position: sticky;
126
126
  inset-block-start: 0;
127
127
  z-index: 20;
@@ -139,19 +139,19 @@
139
139
  }
140
140
 
141
141
  :where(
142
- [data-nk="app-shell"]
143
- > [data-slot="app-shell-header"]
144
- > [data-slot="app-shell-topbar"]:has(> [data-nk="toolbar"])
145
- ) {
142
+ [data-nk="app-shell"]
143
+ > [data-slot="app-shell-header"]
144
+ > [data-slot="app-shell-topbar"]:has(> [data-nk="toolbar"])
145
+ ) {
146
146
  justify-content: stretch;
147
147
  }
148
148
 
149
149
  :where(
150
- [data-nk="app-shell"]
151
- > [data-slot="app-shell-header"]
152
- > [data-slot="app-shell-topbar"]
153
- > [data-nk="toolbar"]
154
- ) {
150
+ [data-nk="app-shell"]
151
+ > [data-slot="app-shell-header"]
152
+ > [data-slot="app-shell-topbar"]
153
+ > [data-nk="toolbar"]
154
+ ) {
155
155
  flex: 1 1 auto;
156
156
  }
157
157
 
@@ -179,28 +179,29 @@
179
179
 
180
180
  @layer nitro-kit.variant {
181
181
  :where(
182
- [data-nk="app-shell"][data-layout="sidebar"]
183
- > [data-slot="app-shell-header"]
184
- > [data-slot="app-shell-topbar"]
185
- ) {
182
+ [data-nk="app-shell"][data-layout="sidebar"]
183
+ > [data-slot="app-shell-header"]
184
+ > [data-slot="app-shell-topbar"]
185
+ ) {
186
186
  display: none;
187
187
  }
188
188
 
189
189
  :where(
190
- [data-nk="app-shell"][data-layout="sidebar"] > [data-slot="app-shell-main"]
191
- ) {
190
+ [data-nk="app-shell"][data-layout="sidebar"]
191
+ > [data-slot="app-shell-main"]
192
+ ) {
192
193
  grid-row: 1 / 3;
193
194
  }
194
195
 
195
196
  :where(
196
- [data-nk="app-shell"]:is(
197
- [data-layout="sidebar"],
198
- [data-layout="hybrid"]
199
- ):not(
200
- :has(> [data-slot="app-shell-header"] > [data-slot="app-shell-brand"])
201
- )
202
- > [data-slot="app-shell-sidebar"]
203
- ) {
197
+ [data-nk="app-shell"]:is(
198
+ [data-layout="sidebar"],
199
+ [data-layout="hybrid"]
200
+ ):not(
201
+ :has(> [data-slot="app-shell-header"] > [data-slot="app-shell-brand"])
202
+ )
203
+ > [data-slot="app-shell-sidebar"]
204
+ ) {
204
205
  inset-block-start: 0;
205
206
  grid-row: 1 / 3;
206
207
  block-size: 100vh;
@@ -212,17 +213,17 @@
212
213
  }
213
214
 
214
215
  :where(
215
- [data-nk="app-shell"][data-layout="topbar"]
216
- > [data-slot="app-shell-sidebar"]
217
- ) {
216
+ [data-nk="app-shell"][data-layout="topbar"]
217
+ > [data-slot="app-shell-sidebar"]
218
+ ) {
218
219
  display: contents;
219
220
  }
220
221
 
221
222
  :where(
222
- [data-nk="app-shell"][data-layout="topbar"]
223
- > [data-slot="app-shell-sidebar"]
224
- > [data-slot="app-shell-navigation"]
225
- ) {
223
+ [data-nk="app-shell"][data-layout="topbar"]
224
+ > [data-slot="app-shell-sidebar"]
225
+ > [data-slot="app-shell-navigation"]
226
+ ) {
226
227
  position: sticky;
227
228
  inset-block-start: 0;
228
229
  z-index: 20;
@@ -234,47 +235,47 @@
234
235
  }
235
236
 
236
237
  :where(
237
- [data-nk="app-shell"][data-layout="topbar"]
238
- > [data-slot="app-shell-header"]
239
- > [data-slot="app-shell-brand"]
240
- ) {
238
+ [data-nk="app-shell"][data-layout="topbar"]
239
+ > [data-slot="app-shell-header"]
240
+ > [data-slot="app-shell-brand"]
241
+ ) {
241
242
  grid-column: 1;
242
243
  background: var(--nk-app-shell-background);
243
244
  border-inline-end: 0;
244
245
  }
245
246
 
246
247
  :where(
247
- [data-nk="app-shell"][data-layout="topbar"]
248
- > [data-slot="app-shell-header"]
249
- > [data-slot="app-shell-topbar"]
250
- ) {
248
+ [data-nk="app-shell"][data-layout="topbar"]
249
+ > [data-slot="app-shell-header"]
250
+ > [data-slot="app-shell-topbar"]
251
+ ) {
251
252
  grid-column: 3;
252
253
  }
253
254
 
254
255
  :where(
255
- [data-nk="app-shell"][data-layout="topbar"] > [data-slot="app-shell-main"]
256
- ) {
256
+ [data-nk="app-shell"][data-layout="topbar"] > [data-slot="app-shell-main"]
257
+ ) {
257
258
  grid-row: 2;
258
259
  grid-column: 1 / -1;
259
260
  }
260
261
 
261
262
  :where(
262
- [data-nk="app-shell"][data-layout="topbar"]
263
- > [data-slot="app-shell-sidebar"]
264
- > [data-slot="app-shell-navigation"]
265
- > [data-nk="app-navigation"]
266
- ) {
263
+ [data-nk="app-shell"][data-layout="topbar"]
264
+ > [data-slot="app-shell-sidebar"]
265
+ > [data-slot="app-shell-navigation"]
266
+ > [data-nk="app-navigation"]
267
+ ) {
267
268
  flex-direction: row;
268
269
  align-items: stretch;
269
270
  }
270
271
 
271
272
  :where(
272
- [data-nk="app-shell"][data-layout="topbar"]
273
- > [data-slot="app-shell-sidebar"]
274
- > [data-slot="app-shell-navigation"]
275
- > [data-nk="app-navigation"]
276
- > [data-slot="app-navigation-body"]
277
- ) {
273
+ [data-nk="app-shell"][data-layout="topbar"]
274
+ > [data-slot="app-shell-sidebar"]
275
+ > [data-slot="app-shell-navigation"]
276
+ > [data-nk="app-navigation"]
277
+ > [data-slot="app-navigation-body"]
278
+ ) {
278
279
  flex-direction: row;
279
280
  align-items: center;
280
281
  padding-block: calc(var(--nk-space) * 2);
@@ -282,23 +283,23 @@
282
283
  }
283
284
 
284
285
  :where(
285
- [data-nk="app-shell"][data-layout="topbar"]
286
- > [data-slot="app-shell-sidebar"]
287
- > [data-slot="app-shell-navigation"]
288
- > [data-nk="app-navigation"]
289
- [data-slot="app-navigation-section"]
290
- ) {
286
+ [data-nk="app-shell"][data-layout="topbar"]
287
+ > [data-slot="app-shell-sidebar"]
288
+ > [data-slot="app-shell-navigation"]
289
+ > [data-nk="app-navigation"]
290
+ [data-slot="app-navigation-section"]
291
+ ) {
291
292
  flex-direction: row;
292
293
  align-items: center;
293
294
  }
294
295
 
295
296
  :where(
296
- [data-nk="app-shell"][data-layout="topbar"]
297
- > [data-slot="app-shell-sidebar"]
298
- > [data-slot="app-shell-navigation"]
299
- > [data-nk="app-navigation"]
300
- [data-slot="app-navigation-section-label"]
301
- ) {
297
+ [data-nk="app-shell"][data-layout="topbar"]
298
+ > [data-slot="app-shell-sidebar"]
299
+ > [data-slot="app-shell-navigation"]
300
+ > [data-nk="app-navigation"]
301
+ [data-slot="app-navigation-section-label"]
302
+ ) {
302
303
  position: absolute;
303
304
  inline-size: 1px;
304
305
  block-size: 1px;
@@ -311,24 +312,24 @@
311
312
  }
312
313
 
313
314
  :where(
314
- [data-nk="app-shell"][data-layout="topbar"]
315
- > [data-slot="app-shell-sidebar"]
316
- > [data-slot="app-shell-navigation"]
317
- > [data-nk="app-navigation"]
318
- [data-slot="app-navigation-divider"]
319
- ) {
315
+ [data-nk="app-shell"][data-layout="topbar"]
316
+ > [data-slot="app-shell-sidebar"]
317
+ > [data-slot="app-shell-navigation"]
318
+ > [data-nk="app-navigation"]
319
+ [data-slot="app-navigation-divider"]
320
+ ) {
320
321
  inline-size: var(--nk-border-width);
321
322
  block-size: calc(var(--nk-control-height-md) - (var(--nk-space) * 2));
322
323
  margin: calc(var(--nk-space) * 2);
323
324
  }
324
325
 
325
326
  :where(
326
- [data-nk="app-shell"][data-layout="topbar"]
327
- > [data-slot="app-shell-sidebar"]
328
- > [data-slot="app-shell-navigation"]
329
- > [data-nk="app-navigation"]
330
- [data-slot="app-navigation-spacer"]
331
- ) {
327
+ [data-nk="app-shell"][data-layout="topbar"]
328
+ > [data-slot="app-shell-sidebar"]
329
+ > [data-slot="app-shell-navigation"]
330
+ > [data-nk="app-navigation"]
331
+ [data-slot="app-navigation-spacer"]
332
+ ) {
332
333
  flex-basis: calc(var(--nk-space) * 4);
333
334
  min-inline-size: calc(var(--nk-space) * 4);
334
335
  min-block-size: 0;
@@ -338,41 +339,43 @@
338
339
  @layer nitro-kit.state {
339
340
  @media (hover: hover) {
340
341
  :where(
341
- [data-nk="app-shell"]
342
- > [data-slot="app-shell-header"]
343
- > [data-slot="app-shell-mobile-trigger"]:hover,
344
- [data-nk="app-shell"]
345
- > [data-slot="app-shell-dialog"]
346
- > [data-slot="app-shell-mobile-close"]:hover
347
- ) {
342
+ [data-nk="app-shell"]
343
+ > [data-slot="app-shell-header"]
344
+ > [data-slot="app-shell-mobile-trigger"]:hover,
345
+ [data-nk="app-shell"]
346
+ > [data-slot="app-shell-dialog"]
347
+ > [data-slot="app-shell-mobile-close"]:hover
348
+ ) {
348
349
  background: var(--nk-app-shell-sidebar-accent);
349
350
  }
350
351
  }
351
352
 
352
353
  :where(
353
- [data-nk="app-shell"]
354
- > [data-slot="app-shell-header"]
355
- > [data-slot="app-shell-mobile-trigger"]:active,
356
- [data-nk="app-shell"]
357
- > [data-slot="app-shell-dialog"]
358
- > [data-slot="app-shell-mobile-close"]:active
359
- ) {
354
+ [data-nk="app-shell"]
355
+ > [data-slot="app-shell-header"]
356
+ > [data-slot="app-shell-mobile-trigger"]:active,
357
+ [data-nk="app-shell"]
358
+ > [data-slot="app-shell-dialog"]
359
+ > [data-slot="app-shell-mobile-close"]:active
360
+ ) {
360
361
  scale: 0.96;
361
362
  }
362
363
 
363
364
  :where(
364
- [data-nk="app-shell"]
365
- > [data-slot="app-shell-header"]
366
- > [data-slot="app-shell-mobile-trigger"]:focus-visible,
367
- [data-nk="app-shell"]
368
- > [data-slot="app-shell-dialog"]
369
- > [data-slot="app-shell-mobile-close"]:focus-visible
370
- ) {
365
+ [data-nk="app-shell"]
366
+ > [data-slot="app-shell-header"]
367
+ > [data-slot="app-shell-mobile-trigger"]:focus-visible,
368
+ [data-nk="app-shell"]
369
+ > [data-slot="app-shell-dialog"]
370
+ > [data-slot="app-shell-mobile-close"]:focus-visible
371
+ ) {
371
372
  outline: var(--nk-focus-width) solid var(--nk-color-focus);
372
373
  outline-offset: var(--nk-focus-offset);
373
374
  }
375
+ }
374
376
 
375
- @media (max-width: 48rem) {
377
+ @layer nitro-kit.compound {
378
+ @media (width < 48rem) {
376
379
  :where([data-nk="app-shell"]) {
377
380
  grid-template-rows: auto auto minmax(0, 1fr);
378
381
  grid-template-columns: minmax(0, 1fr);
@@ -395,13 +398,13 @@
395
398
  }
396
399
 
397
400
  :where(
398
- [data-nk="app-shell"]
399
- > [data-slot="app-shell-header"]
400
- > [data-slot="app-shell-brand"],
401
- [data-nk="app-shell"]
402
- > [data-slot="app-shell-header"]
403
- > [data-slot="app-shell-topbar"]
404
- ) {
401
+ [data-nk="app-shell"]
402
+ > [data-slot="app-shell-header"]
403
+ > [data-slot="app-shell-brand"],
404
+ [data-nk="app-shell"]
405
+ > [data-slot="app-shell-header"]
406
+ > [data-slot="app-shell-topbar"]
407
+ ) {
405
408
  position: static;
406
409
  display: flex;
407
410
  min-block-size: auto;
@@ -411,36 +414,36 @@
411
414
  }
412
415
 
413
416
  :where(
414
- [data-nk="app-shell"]
415
- > [data-slot="app-shell-header"]
416
- > [data-slot="app-shell-brand"]
417
- ) {
417
+ [data-nk="app-shell"]
418
+ > [data-slot="app-shell-header"]
419
+ > [data-slot="app-shell-brand"]
420
+ ) {
418
421
  flex: 1 1 auto;
419
422
  order: 0;
420
423
  }
421
424
 
422
425
  :where(
423
- [data-nk="app-shell"]
424
- > [data-slot="app-shell-header"]
425
- > [data-slot="app-shell-topbar"]
426
- ) {
426
+ [data-nk="app-shell"]
427
+ > [data-slot="app-shell-header"]
428
+ > [data-slot="app-shell-topbar"]
429
+ ) {
427
430
  flex: 0 0 auto;
428
431
  order: 1;
429
432
  }
430
433
 
431
434
  :where(
432
- [data-nk="app-shell"]
433
- > [data-slot="app-shell-header"]
434
- > [data-slot="app-shell-topbar"]:has(> [data-nk="toolbar"])
435
- ) {
435
+ [data-nk="app-shell"]
436
+ > [data-slot="app-shell-header"]
437
+ > [data-slot="app-shell-topbar"]:has(> [data-nk="toolbar"])
438
+ ) {
436
439
  flex: 1 1 auto;
437
440
  }
438
441
 
439
442
  :where(
440
- [data-nk="app-shell"][data-enhanced]
441
- > [data-slot="app-shell-header"]
442
- > [data-slot="app-shell-mobile-trigger"]
443
- ) {
443
+ [data-nk="app-shell"][data-enhanced]
444
+ > [data-slot="app-shell-header"]
445
+ > [data-slot="app-shell-mobile-trigger"]
446
+ ) {
444
447
  display: inline-flex;
445
448
  flex: 0 0 auto;
446
449
  order: -1;
@@ -460,30 +463,30 @@
460
463
  }
461
464
 
462
465
  :where(
463
- [data-nk="app-shell"]
464
- > [data-slot="app-shell-sidebar"]
465
- > [data-slot="app-shell-navigation"]
466
- ) {
466
+ [data-nk="app-shell"]
467
+ > [data-slot="app-shell-sidebar"]
468
+ > [data-slot="app-shell-navigation"]
469
+ ) {
467
470
  min-block-size: auto;
468
471
  }
469
472
 
470
473
  :where(
471
- [data-nk="app-shell"][data-layout="topbar"]
472
- > [data-slot="app-shell-sidebar"]
473
- > [data-slot="app-shell-navigation"]
474
- > [data-nk="app-navigation"]
475
- ) {
474
+ [data-nk="app-shell"][data-layout="topbar"]
475
+ > [data-slot="app-shell-sidebar"]
476
+ > [data-slot="app-shell-navigation"]
477
+ > [data-nk="app-navigation"]
478
+ ) {
476
479
  flex-direction: column;
477
480
  align-items: stretch;
478
481
  }
479
482
 
480
483
  :where(
481
- [data-nk="app-shell"][data-layout="topbar"]
482
- > [data-slot="app-shell-sidebar"]
483
- > [data-slot="app-shell-navigation"]
484
- > [data-nk="app-navigation"]
485
- > [data-slot="app-navigation-body"]
486
- ) {
484
+ [data-nk="app-shell"][data-layout="topbar"]
485
+ > [data-slot="app-shell-sidebar"]
486
+ > [data-slot="app-shell-navigation"]
487
+ > [data-nk="app-navigation"]
488
+ > [data-slot="app-navigation-body"]
489
+ ) {
487
490
  flex-direction: column;
488
491
  align-items: stretch;
489
492
  padding: calc(var(--nk-space) * 3);
@@ -491,23 +494,23 @@
491
494
  }
492
495
 
493
496
  :where(
494
- [data-nk="app-shell"][data-layout="topbar"]
495
- > [data-slot="app-shell-sidebar"]
496
- > [data-slot="app-shell-navigation"]
497
- > [data-nk="app-navigation"]
498
- [data-slot="app-navigation-section"]
499
- ) {
497
+ [data-nk="app-shell"][data-layout="topbar"]
498
+ > [data-slot="app-shell-sidebar"]
499
+ > [data-slot="app-shell-navigation"]
500
+ > [data-nk="app-navigation"]
501
+ [data-slot="app-navigation-section"]
502
+ ) {
500
503
  flex-direction: column;
501
504
  align-items: stretch;
502
505
  }
503
506
 
504
507
  :where(
505
- [data-nk="app-shell"][data-layout="topbar"]
506
- > [data-slot="app-shell-sidebar"]
507
- > [data-slot="app-shell-navigation"]
508
- > [data-nk="app-navigation"]
509
- [data-slot="app-navigation-section-label"]
510
- ) {
508
+ [data-nk="app-shell"][data-layout="topbar"]
509
+ > [data-slot="app-shell-sidebar"]
510
+ > [data-slot="app-shell-navigation"]
511
+ > [data-nk="app-navigation"]
512
+ [data-slot="app-navigation-section-label"]
513
+ ) {
511
514
  position: static;
512
515
  inline-size: auto;
513
516
  block-size: auto;
@@ -520,15 +523,15 @@
520
523
  }
521
524
 
522
525
  :where(
523
- [data-nk="app-shell"][data-enhanced] > [data-slot="app-shell-sidebar"]
524
- ) {
526
+ [data-nk="app-shell"][data-enhanced] > [data-slot="app-shell-sidebar"]
527
+ ) {
525
528
  display: none;
526
529
  }
527
530
 
528
531
  :where(
529
- [data-nk="app-shell"][data-enhanced]
530
- > [data-slot="app-shell-dialog"][open]
531
- ) {
532
+ [data-nk="app-shell"][data-enhanced]
533
+ > [data-slot="app-shell-dialog"][open]
534
+ ) {
532
535
  --_nk-app-shell-dialog-enter-x: -100%;
533
536
 
534
537
  position: fixed;
@@ -539,7 +542,7 @@
539
542
  flex-direction: column;
540
543
  inline-size: min(
541
544
  var(--nk-app-shell-sidebar-width),
542
- calc(100vw - (var(--nk-space) * 12))
545
+ calc(100% - (var(--nk-space) * 12))
543
546
  );
544
547
  max-inline-size: 100%;
545
548
  block-size: 100vh;
@@ -553,18 +556,18 @@
553
556
  }
554
557
 
555
558
  :where(
556
- [dir="rtl"]
557
- [data-nk="app-shell"][data-enhanced]
558
- > [data-slot="app-shell-dialog"][open]
559
- ) {
559
+ [dir="rtl"]
560
+ [data-nk="app-shell"][data-enhanced]
561
+ > [data-slot="app-shell-dialog"][open]
562
+ ) {
560
563
  --_nk-app-shell-dialog-enter-x: 100%;
561
564
  }
562
565
 
563
566
  :where(
564
- [data-nk="app-shell"][data-enhanced]
565
- > [data-slot="app-shell-dialog"][open]
566
- > [data-slot="app-shell-mobile-close"]
567
- ) {
567
+ [data-nk="app-shell"][data-enhanced]
568
+ > [data-slot="app-shell-dialog"][open]
569
+ > [data-slot="app-shell-mobile-close"]
570
+ ) {
568
571
  display: inline-flex;
569
572
  flex: 0 0 auto;
570
573
  align-self: flex-end;
@@ -589,15 +592,15 @@
589
592
 
590
593
  @media (prefers-reduced-motion: reduce) {
591
594
  :where(
592
- [data-nk="app-shell"] > [data-slot="app-shell-skip-link"],
593
- [data-nk="app-shell"] > [data-slot="app-shell-dialog"],
594
- [data-nk="app-shell"]
595
- > [data-slot="app-shell-header"]
596
- > [data-slot="app-shell-mobile-trigger"],
597
- [data-nk="app-shell"]
598
- > [data-slot="app-shell-dialog"]
599
- > [data-slot="app-shell-mobile-close"]
600
- ) {
595
+ [data-nk="app-shell"] > [data-slot="app-shell-skip-link"],
596
+ [data-nk="app-shell"] > [data-slot="app-shell-dialog"],
597
+ [data-nk="app-shell"]
598
+ > [data-slot="app-shell-header"]
599
+ > [data-slot="app-shell-mobile-trigger"],
600
+ [data-nk="app-shell"]
601
+ > [data-slot="app-shell-dialog"]
602
+ > [data-slot="app-shell-mobile-close"]
603
+ ) {
601
604
  animation-duration: 0.01ms;
602
605
  transition-duration: 0.01ms;
603
606
  }