nitro_kit 2.0.0.alpha.1 → 2.0.0.alpha.3

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 (126) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +71 -1
  3. data/README.md +24 -3
  4. data/STYLE_GUIDE.md +37 -5
  5. data/app/assets/stylesheets/nitro_kit.css +1733 -1363
  6. data/app/components/nitro_kit/accordion.rb +1 -7
  7. data/app/components/nitro_kit/app_navigation.rb +1 -2
  8. data/app/components/nitro_kit/app_shell.rb +1 -7
  9. data/app/components/nitro_kit/appearance_picker.rb +1 -11
  10. data/app/components/nitro_kit/avatar.rb +6 -1
  11. data/app/components/nitro_kit/avatar_stack.rb +3 -0
  12. data/app/components/nitro_kit/button_group.rb +2 -2
  13. data/app/components/nitro_kit/checkbox.rb +7 -4
  14. data/app/components/nitro_kit/checkbox_group.rb +5 -27
  15. data/app/components/nitro_kit/combobox.rb +3 -16
  16. data/app/components/nitro_kit/command_palette.rb +41 -59
  17. data/app/components/nitro_kit/component.rb +57 -5
  18. data/app/components/nitro_kit/danger_zone.rb +5 -1
  19. data/app/components/nitro_kit/data_section.rb +28 -4
  20. data/app/components/nitro_kit/details_table.rb +19 -8
  21. data/app/components/nitro_kit/dialog.rb +23 -19
  22. data/app/components/nitro_kit/dropdown.rb +1 -6
  23. data/app/components/nitro_kit/dropzone.rb +3 -14
  24. data/app/components/nitro_kit/empty_state.rb +21 -2
  25. data/app/components/nitro_kit/field.rb +36 -12
  26. data/app/components/nitro_kit/form_builder.rb +0 -1
  27. data/app/components/nitro_kit/progressive_image.rb +2 -2
  28. data/app/components/nitro_kit/radio_button.rb +7 -4
  29. data/app/components/nitro_kit/radio_button_group.rb +5 -27
  30. data/app/components/nitro_kit/select.rb +3 -3
  31. data/app/components/nitro_kit/settings_layout.rb +17 -4
  32. data/app/components/nitro_kit/{form_section.rb → settings_section.rb} +18 -11
  33. data/app/components/nitro_kit/sheet.rb +29 -20
  34. data/app/components/nitro_kit/stat_grid.rb +18 -2
  35. data/app/components/nitro_kit/table.rb +22 -3
  36. data/app/components/nitro_kit/tabs.rb +1 -13
  37. data/app/components/nitro_kit/toast.rb +4 -2
  38. data/app/components/nitro_kit/toolbar.rb +2 -0
  39. data/app/components/nitro_kit/tooltip.rb +7 -10
  40. data/app/javascript/controllers/nk/app_shell_controller.js +3 -3
  41. data/app/javascript/controllers/nk/appearance_controller.js +6 -0
  42. data/app/javascript/controllers/nk/combobox_controller.js +51 -1
  43. data/app/javascript/controllers/nk/command_palette_controller.js +21 -11
  44. data/app/javascript/controllers/nk/dialog_controller.js +54 -0
  45. data/app/javascript/controllers/nk/dropdown_controller.js +45 -0
  46. data/app/javascript/controllers/nk/dropzone_controller.js +2 -2
  47. data/app/javascript/controllers/nk/progressive_image_controller.js +11 -7
  48. data/app/javascript/controllers/nk/tabs_controller.js +8 -1
  49. data/app/javascript/controllers/nk/tooltip_controller.js +9 -0
  50. data/config/locales/en.yml +4 -1
  51. data/docs/agent_guide.md +31 -16
  52. data/docs/agent_native_spec.md +29 -12
  53. data/docs/browser_support.md +193 -0
  54. data/docs/component_contracts.md +88 -82
  55. data/docs/customization.md +27 -15
  56. data/docs/hotwire.md +15 -3
  57. data/docs/initialization_prompt.md +31 -6
  58. data/docs/migration_1_to_2.md +61 -19
  59. data/docs/new_app_strategy.md +4 -6
  60. data/docs/patterns/application_foundation.md +6 -4
  61. data/docs/patterns/crud_resource.md +6 -3
  62. data/docs/patterns/destructive_action.md +25 -0
  63. data/docs/patterns/resource_form.md +1 -1
  64. data/docs/rails_conventions.md +4 -1
  65. data/docs/rails_integration.md +39 -11
  66. data/lib/generators/nitro_kit/upgrade_smoke_tests_generator.rb +12 -0
  67. data/lib/nitro_kit/installation.rb +9 -4
  68. data/lib/nitro_kit/migration_inventory.rb +268 -8
  69. data/lib/nitro_kit/upgrade_smoke_test.rb +12 -14
  70. data/lib/nitro_kit/version.rb +1 -1
  71. data/lib/rails/commands/nitro_kit/nitro_kit_command.rb +10 -3
  72. data/plugins/nitro-kit/skills/nitro-kit-hotwire/SKILL.md +4 -0
  73. data/plugins/nitro-kit/skills/nitro-kit-rails/SKILL.md +6 -1
  74. data/plugins/nitro-kit/skills/nitro-kit-ui/SKILL.md +18 -8
  75. data/src/stylesheets/nitro_kit/components/accordion.css +40 -40
  76. data/src/stylesheets/nitro_kit/components/alert.css +10 -10
  77. data/src/stylesheets/nitro_kit/components/app_navigation.css +19 -19
  78. data/src/stylesheets/nitro_kit/components/app_shell.css +196 -193
  79. data/src/stylesheets/nitro_kit/components/appearance_picker.css +41 -31
  80. data/src/stylesheets/nitro_kit/components/avatar.css +3 -3
  81. data/src/stylesheets/nitro_kit/components/avatar_stack.css +36 -19
  82. data/src/stylesheets/nitro_kit/components/button.css +83 -58
  83. data/src/stylesheets/nitro_kit/components/button_group.css +19 -14
  84. data/src/stylesheets/nitro_kit/components/card.css +11 -5
  85. data/src/stylesheets/nitro_kit/components/checkbox.css +40 -36
  86. data/src/stylesheets/nitro_kit/components/checkbox_group.css +13 -13
  87. data/src/stylesheets/nitro_kit/components/combobox.css +33 -23
  88. data/src/stylesheets/nitro_kit/components/command_palette.css +48 -47
  89. data/src/stylesheets/nitro_kit/components/control_group.css +52 -58
  90. data/src/stylesheets/nitro_kit/components/danger_zone.css +3 -3
  91. data/src/stylesheets/nitro_kit/components/data_section.css +1 -1
  92. data/src/stylesheets/nitro_kit/components/details_table.css +13 -13
  93. data/src/stylesheets/nitro_kit/components/dialog.css +6 -3
  94. data/src/stylesheets/nitro_kit/components/dropdown.css +29 -23
  95. data/src/stylesheets/nitro_kit/components/dropzone.css +78 -26
  96. data/src/stylesheets/nitro_kit/components/empty_state.css +6 -6
  97. data/src/stylesheets/nitro_kit/components/field.css +30 -26
  98. data/src/stylesheets/nitro_kit/components/field_group.css +13 -0
  99. data/src/stylesheets/nitro_kit/components/fieldset.css +6 -0
  100. data/src/stylesheets/nitro_kit/components/input.css +9 -2
  101. data/src/stylesheets/nitro_kit/components/layout.css +165 -165
  102. data/src/stylesheets/nitro_kit/components/page_header.css +8 -9
  103. data/src/stylesheets/nitro_kit/components/pagination.css +55 -46
  104. data/src/stylesheets/nitro_kit/components/pagination_bar.css +7 -7
  105. data/src/stylesheets/nitro_kit/components/palette.css +21 -21
  106. data/src/stylesheets/nitro_kit/components/progressive_image.css +44 -54
  107. data/src/stylesheets/nitro_kit/components/radio_button.css +36 -29
  108. data/src/stylesheets/nitro_kit/components/radio_button_group.css +43 -43
  109. data/src/stylesheets/nitro_kit/components/rich_text_area.css +15 -0
  110. data/src/stylesheets/nitro_kit/components/select.css +2 -9
  111. data/src/stylesheets/nitro_kit/components/settings_layout.css +21 -18
  112. data/src/stylesheets/nitro_kit/components/settings_section.css +84 -0
  113. data/src/stylesheets/nitro_kit/components/sheet.css +23 -3
  114. data/src/stylesheets/nitro_kit/components/stat_grid.css +10 -9
  115. data/src/stylesheets/nitro_kit/components/switch.css +37 -33
  116. data/src/stylesheets/nitro_kit/components/table.css +37 -27
  117. data/src/stylesheets/nitro_kit/components/tabs.css +43 -39
  118. data/src/stylesheets/nitro_kit/components/toast.css +20 -9
  119. data/src/stylesheets/nitro_kit/components/toolbar.css +14 -39
  120. data/src/stylesheets/nitro_kit/components/tooltip.css +34 -29
  121. data/src/stylesheets/nitro_kit/components/typeset.css +147 -1
  122. data/src/stylesheets/nitro_kit/reset.css +9 -9
  123. data/src/stylesheets/nitro_kit/tokens.css +11 -12
  124. metadata +4 -4
  125. data/docs/implementation_plan.md +0 -279
  126. data/src/stylesheets/nitro_kit/components/form_section.css +0 -71
data/src/stylesheets/nitro_kit/components/layout.css CHANGED
@@ -45,395 +45,395 @@
45
45
 
46
46
  @media (min-width: 40rem) {
47
47
  :where(
48
- [data-nk="flex"][data-gap~="sm:0"],
49
- [data-nk="grid"][data-gap~="sm:0"]
50
- ) {
48
+ [data-nk="flex"][data-gap~="sm:0"],
49
+ [data-nk="grid"][data-gap~="sm:0"]
50
+ ) {
51
51
  --_nk-layout-gap: 0;
52
52
  }
53
53
 
54
54
  :where(
55
- [data-nk="flex"][data-gap~="sm:1"],
56
- [data-nk="grid"][data-gap~="sm:1"]
57
- ) {
55
+ [data-nk="flex"][data-gap~="sm:1"],
56
+ [data-nk="grid"][data-gap~="sm:1"]
57
+ ) {
58
58
  --_nk-layout-gap: var(--nk-space);
59
59
  }
60
60
 
61
61
  :where(
62
- [data-nk="flex"][data-gap~="sm:2"],
63
- [data-nk="grid"][data-gap~="sm:2"]
64
- ) {
62
+ [data-nk="flex"][data-gap~="sm:2"],
63
+ [data-nk="grid"][data-gap~="sm:2"]
64
+ ) {
65
65
  --_nk-layout-gap: calc(var(--nk-space) * 2);
66
66
  }
67
67
 
68
68
  :where(
69
- [data-nk="flex"][data-gap~="sm:3"],
70
- [data-nk="grid"][data-gap~="sm:3"]
71
- ) {
69
+ [data-nk="flex"][data-gap~="sm:3"],
70
+ [data-nk="grid"][data-gap~="sm:3"]
71
+ ) {
72
72
  --_nk-layout-gap: calc(var(--nk-space) * 3);
73
73
  }
74
74
 
75
75
  :where(
76
- [data-nk="flex"][data-gap~="sm:4"],
77
- [data-nk="grid"][data-gap~="sm:4"]
78
- ) {
76
+ [data-nk="flex"][data-gap~="sm:4"],
77
+ [data-nk="grid"][data-gap~="sm:4"]
78
+ ) {
79
79
  --_nk-layout-gap: calc(var(--nk-space) * 4);
80
80
  }
81
81
 
82
82
  :where(
83
- [data-nk="flex"][data-gap~="sm:5"],
84
- [data-nk="grid"][data-gap~="sm:5"]
85
- ) {
83
+ [data-nk="flex"][data-gap~="sm:5"],
84
+ [data-nk="grid"][data-gap~="sm:5"]
85
+ ) {
86
86
  --_nk-layout-gap: calc(var(--nk-space) * 5);
87
87
  }
88
88
 
89
89
  :where(
90
- [data-nk="flex"][data-gap~="sm:6"],
91
- [data-nk="grid"][data-gap~="sm:6"]
92
- ) {
90
+ [data-nk="flex"][data-gap~="sm:6"],
91
+ [data-nk="grid"][data-gap~="sm:6"]
92
+ ) {
93
93
  --_nk-layout-gap: calc(var(--nk-space) * 6);
94
94
  }
95
95
 
96
96
  :where(
97
- [data-nk="flex"][data-gap~="sm:8"],
98
- [data-nk="grid"][data-gap~="sm:8"]
99
- ) {
97
+ [data-nk="flex"][data-gap~="sm:8"],
98
+ [data-nk="grid"][data-gap~="sm:8"]
99
+ ) {
100
100
  --_nk-layout-gap: calc(var(--nk-space) * 8);
101
101
  }
102
102
 
103
103
  :where(
104
- [data-nk="flex"][data-gap~="sm:10"],
105
- [data-nk="grid"][data-gap~="sm:10"]
106
- ) {
104
+ [data-nk="flex"][data-gap~="sm:10"],
105
+ [data-nk="grid"][data-gap~="sm:10"]
106
+ ) {
107
107
  --_nk-layout-gap: calc(var(--nk-space) * 10);
108
108
  }
109
109
 
110
110
  :where(
111
- [data-nk="flex"][data-gap~="sm:12"],
112
- [data-nk="grid"][data-gap~="sm:12"]
113
- ) {
111
+ [data-nk="flex"][data-gap~="sm:12"],
112
+ [data-nk="grid"][data-gap~="sm:12"]
113
+ ) {
114
114
  --_nk-layout-gap: calc(var(--nk-space) * 12);
115
115
  }
116
116
 
117
117
  :where(
118
- [data-nk="flex"][data-gap~="sm:16"],
119
- [data-nk="grid"][data-gap~="sm:16"]
120
- ) {
118
+ [data-nk="flex"][data-gap~="sm:16"],
119
+ [data-nk="grid"][data-gap~="sm:16"]
120
+ ) {
121
121
  --_nk-layout-gap: calc(var(--nk-space) * 16);
122
122
  }
123
123
  }
124
124
 
125
125
  @media (min-width: 48rem) {
126
126
  :where(
127
- [data-nk="flex"][data-gap~="md:0"],
128
- [data-nk="grid"][data-gap~="md:0"]
129
- ) {
127
+ [data-nk="flex"][data-gap~="md:0"],
128
+ [data-nk="grid"][data-gap~="md:0"]
129
+ ) {
130
130
  --_nk-layout-gap: 0;
131
131
  }
132
132
 
133
133
  :where(
134
- [data-nk="flex"][data-gap~="md:1"],
135
- [data-nk="grid"][data-gap~="md:1"]
136
- ) {
134
+ [data-nk="flex"][data-gap~="md:1"],
135
+ [data-nk="grid"][data-gap~="md:1"]
136
+ ) {
137
137
  --_nk-layout-gap: var(--nk-space);
138
138
  }
139
139
 
140
140
  :where(
141
- [data-nk="flex"][data-gap~="md:2"],
142
- [data-nk="grid"][data-gap~="md:2"]
143
- ) {
141
+ [data-nk="flex"][data-gap~="md:2"],
142
+ [data-nk="grid"][data-gap~="md:2"]
143
+ ) {
144
144
  --_nk-layout-gap: calc(var(--nk-space) * 2);
145
145
  }
146
146
 
147
147
  :where(
148
- [data-nk="flex"][data-gap~="md:3"],
149
- [data-nk="grid"][data-gap~="md:3"]
150
- ) {
148
+ [data-nk="flex"][data-gap~="md:3"],
149
+ [data-nk="grid"][data-gap~="md:3"]
150
+ ) {
151
151
  --_nk-layout-gap: calc(var(--nk-space) * 3);
152
152
  }
153
153
 
154
154
  :where(
155
- [data-nk="flex"][data-gap~="md:4"],
156
- [data-nk="grid"][data-gap~="md:4"]
157
- ) {
155
+ [data-nk="flex"][data-gap~="md:4"],
156
+ [data-nk="grid"][data-gap~="md:4"]
157
+ ) {
158
158
  --_nk-layout-gap: calc(var(--nk-space) * 4);
159
159
  }
160
160
 
161
161
  :where(
162
- [data-nk="flex"][data-gap~="md:5"],
163
- [data-nk="grid"][data-gap~="md:5"]
164
- ) {
162
+ [data-nk="flex"][data-gap~="md:5"],
163
+ [data-nk="grid"][data-gap~="md:5"]
164
+ ) {
165
165
  --_nk-layout-gap: calc(var(--nk-space) * 5);
166
166
  }
167
167
 
168
168
  :where(
169
- [data-nk="flex"][data-gap~="md:6"],
170
- [data-nk="grid"][data-gap~="md:6"]
171
- ) {
169
+ [data-nk="flex"][data-gap~="md:6"],
170
+ [data-nk="grid"][data-gap~="md:6"]
171
+ ) {
172
172
  --_nk-layout-gap: calc(var(--nk-space) * 6);
173
173
  }
174
174
 
175
175
  :where(
176
- [data-nk="flex"][data-gap~="md:8"],
177
- [data-nk="grid"][data-gap~="md:8"]
178
- ) {
176
+ [data-nk="flex"][data-gap~="md:8"],
177
+ [data-nk="grid"][data-gap~="md:8"]
178
+ ) {
179
179
  --_nk-layout-gap: calc(var(--nk-space) * 8);
180
180
  }
181
181
 
182
182
  :where(
183
- [data-nk="flex"][data-gap~="md:10"],
184
- [data-nk="grid"][data-gap~="md:10"]
185
- ) {
183
+ [data-nk="flex"][data-gap~="md:10"],
184
+ [data-nk="grid"][data-gap~="md:10"]
185
+ ) {
186
186
  --_nk-layout-gap: calc(var(--nk-space) * 10);
187
187
  }
188
188
 
189
189
  :where(
190
- [data-nk="flex"][data-gap~="md:12"],
191
- [data-nk="grid"][data-gap~="md:12"]
192
- ) {
190
+ [data-nk="flex"][data-gap~="md:12"],
191
+ [data-nk="grid"][data-gap~="md:12"]
192
+ ) {
193
193
  --_nk-layout-gap: calc(var(--nk-space) * 12);
194
194
  }
195
195
 
196
196
  :where(
197
- [data-nk="flex"][data-gap~="md:16"],
198
- [data-nk="grid"][data-gap~="md:16"]
199
- ) {
197
+ [data-nk="flex"][data-gap~="md:16"],
198
+ [data-nk="grid"][data-gap~="md:16"]
199
+ ) {
200
200
  --_nk-layout-gap: calc(var(--nk-space) * 16);
201
201
  }
202
202
  }
203
203
 
204
204
  @media (min-width: 64rem) {
205
205
  :where(
206
- [data-nk="flex"][data-gap~="lg:0"],
207
- [data-nk="grid"][data-gap~="lg:0"]
208
- ) {
206
+ [data-nk="flex"][data-gap~="lg:0"],
207
+ [data-nk="grid"][data-gap~="lg:0"]
208
+ ) {
209
209
  --_nk-layout-gap: 0;
210
210
  }
211
211
 
212
212
  :where(
213
- [data-nk="flex"][data-gap~="lg:1"],
214
- [data-nk="grid"][data-gap~="lg:1"]
215
- ) {
213
+ [data-nk="flex"][data-gap~="lg:1"],
214
+ [data-nk="grid"][data-gap~="lg:1"]
215
+ ) {
216
216
  --_nk-layout-gap: var(--nk-space);
217
217
  }
218
218
 
219
219
  :where(
220
- [data-nk="flex"][data-gap~="lg:2"],
221
- [data-nk="grid"][data-gap~="lg:2"]
222
- ) {
220
+ [data-nk="flex"][data-gap~="lg:2"],
221
+ [data-nk="grid"][data-gap~="lg:2"]
222
+ ) {
223
223
  --_nk-layout-gap: calc(var(--nk-space) * 2);
224
224
  }
225
225
 
226
226
  :where(
227
- [data-nk="flex"][data-gap~="lg:3"],
228
- [data-nk="grid"][data-gap~="lg:3"]
229
- ) {
227
+ [data-nk="flex"][data-gap~="lg:3"],
228
+ [data-nk="grid"][data-gap~="lg:3"]
229
+ ) {
230
230
  --_nk-layout-gap: calc(var(--nk-space) * 3);
231
231
  }
232
232
 
233
233
  :where(
234
- [data-nk="flex"][data-gap~="lg:4"],
235
- [data-nk="grid"][data-gap~="lg:4"]
236
- ) {
234
+ [data-nk="flex"][data-gap~="lg:4"],
235
+ [data-nk="grid"][data-gap~="lg:4"]
236
+ ) {
237
237
  --_nk-layout-gap: calc(var(--nk-space) * 4);
238
238
  }
239
239
 
240
240
  :where(
241
- [data-nk="flex"][data-gap~="lg:5"],
242
- [data-nk="grid"][data-gap~="lg:5"]
243
- ) {
241
+ [data-nk="flex"][data-gap~="lg:5"],
242
+ [data-nk="grid"][data-gap~="lg:5"]
243
+ ) {
244
244
  --_nk-layout-gap: calc(var(--nk-space) * 5);
245
245
  }
246
246
 
247
247
  :where(
248
- [data-nk="flex"][data-gap~="lg:6"],
249
- [data-nk="grid"][data-gap~="lg:6"]
250
- ) {
248
+ [data-nk="flex"][data-gap~="lg:6"],
249
+ [data-nk="grid"][data-gap~="lg:6"]
250
+ ) {
251
251
  --_nk-layout-gap: calc(var(--nk-space) * 6);
252
252
  }
253
253
 
254
254
  :where(
255
- [data-nk="flex"][data-gap~="lg:8"],
256
- [data-nk="grid"][data-gap~="lg:8"]
257
- ) {
255
+ [data-nk="flex"][data-gap~="lg:8"],
256
+ [data-nk="grid"][data-gap~="lg:8"]
257
+ ) {
258
258
  --_nk-layout-gap: calc(var(--nk-space) * 8);
259
259
  }
260
260
 
261
261
  :where(
262
- [data-nk="flex"][data-gap~="lg:10"],
263
- [data-nk="grid"][data-gap~="lg:10"]
264
- ) {
262
+ [data-nk="flex"][data-gap~="lg:10"],
263
+ [data-nk="grid"][data-gap~="lg:10"]
264
+ ) {
265
265
  --_nk-layout-gap: calc(var(--nk-space) * 10);
266
266
  }
267
267
 
268
268
  :where(
269
- [data-nk="flex"][data-gap~="lg:12"],
270
- [data-nk="grid"][data-gap~="lg:12"]
271
- ) {
269
+ [data-nk="flex"][data-gap~="lg:12"],
270
+ [data-nk="grid"][data-gap~="lg:12"]
271
+ ) {
272
272
  --_nk-layout-gap: calc(var(--nk-space) * 12);
273
273
  }
274
274
 
275
275
  :where(
276
- [data-nk="flex"][data-gap~="lg:16"],
277
- [data-nk="grid"][data-gap~="lg:16"]
278
- ) {
276
+ [data-nk="flex"][data-gap~="lg:16"],
277
+ [data-nk="grid"][data-gap~="lg:16"]
278
+ ) {
279
279
  --_nk-layout-gap: calc(var(--nk-space) * 16);
280
280
  }
281
281
  }
282
282
 
283
283
  @media (min-width: 80rem) {
284
284
  :where(
285
- [data-nk="flex"][data-gap~="xl:0"],
286
- [data-nk="grid"][data-gap~="xl:0"]
287
- ) {
285
+ [data-nk="flex"][data-gap~="xl:0"],
286
+ [data-nk="grid"][data-gap~="xl:0"]
287
+ ) {
288
288
  --_nk-layout-gap: 0;
289
289
  }
290
290
 
291
291
  :where(
292
- [data-nk="flex"][data-gap~="xl:1"],
293
- [data-nk="grid"][data-gap~="xl:1"]
294
- ) {
292
+ [data-nk="flex"][data-gap~="xl:1"],
293
+ [data-nk="grid"][data-gap~="xl:1"]
294
+ ) {
295
295
  --_nk-layout-gap: var(--nk-space);
296
296
  }
297
297
 
298
298
  :where(
299
- [data-nk="flex"][data-gap~="xl:2"],
300
- [data-nk="grid"][data-gap~="xl:2"]
301
- ) {
299
+ [data-nk="flex"][data-gap~="xl:2"],
300
+ [data-nk="grid"][data-gap~="xl:2"]
301
+ ) {
302
302
  --_nk-layout-gap: calc(var(--nk-space) * 2);
303
303
  }
304
304
 
305
305
  :where(
306
- [data-nk="flex"][data-gap~="xl:3"],
307
- [data-nk="grid"][data-gap~="xl:3"]
308
- ) {
306
+ [data-nk="flex"][data-gap~="xl:3"],
307
+ [data-nk="grid"][data-gap~="xl:3"]
308
+ ) {
309
309
  --_nk-layout-gap: calc(var(--nk-space) * 3);
310
310
  }
311
311
 
312
312
  :where(
313
- [data-nk="flex"][data-gap~="xl:4"],
314
- [data-nk="grid"][data-gap~="xl:4"]
315
- ) {
313
+ [data-nk="flex"][data-gap~="xl:4"],
314
+ [data-nk="grid"][data-gap~="xl:4"]
315
+ ) {
316
316
  --_nk-layout-gap: calc(var(--nk-space) * 4);
317
317
  }
318
318
 
319
319
  :where(
320
- [data-nk="flex"][data-gap~="xl:5"],
321
- [data-nk="grid"][data-gap~="xl:5"]
322
- ) {
320
+ [data-nk="flex"][data-gap~="xl:5"],
321
+ [data-nk="grid"][data-gap~="xl:5"]
322
+ ) {
323
323
  --_nk-layout-gap: calc(var(--nk-space) * 5);
324
324
  }
325
325
 
326
326
  :where(
327
- [data-nk="flex"][data-gap~="xl:6"],
328
- [data-nk="grid"][data-gap~="xl:6"]
329
- ) {
327
+ [data-nk="flex"][data-gap~="xl:6"],
328
+ [data-nk="grid"][data-gap~="xl:6"]
329
+ ) {
330
330
  --_nk-layout-gap: calc(var(--nk-space) * 6);
331
331
  }
332
332
 
333
333
  :where(
334
- [data-nk="flex"][data-gap~="xl:8"],
335
- [data-nk="grid"][data-gap~="xl:8"]
336
- ) {
334
+ [data-nk="flex"][data-gap~="xl:8"],
335
+ [data-nk="grid"][data-gap~="xl:8"]
336
+ ) {
337
337
  --_nk-layout-gap: calc(var(--nk-space) * 8);
338
338
  }
339
339
 
340
340
  :where(
341
- [data-nk="flex"][data-gap~="xl:10"],
342
- [data-nk="grid"][data-gap~="xl:10"]
343
- ) {
341
+ [data-nk="flex"][data-gap~="xl:10"],
342
+ [data-nk="grid"][data-gap~="xl:10"]
343
+ ) {
344
344
  --_nk-layout-gap: calc(var(--nk-space) * 10);
345
345
  }
346
346
 
347
347
  :where(
348
- [data-nk="flex"][data-gap~="xl:12"],
349
- [data-nk="grid"][data-gap~="xl:12"]
350
- ) {
348
+ [data-nk="flex"][data-gap~="xl:12"],
349
+ [data-nk="grid"][data-gap~="xl:12"]
350
+ ) {
351
351
  --_nk-layout-gap: calc(var(--nk-space) * 12);
352
352
  }
353
353
 
354
354
  :where(
355
- [data-nk="flex"][data-gap~="xl:16"],
356
- [data-nk="grid"][data-gap~="xl:16"]
357
- ) {
355
+ [data-nk="flex"][data-gap~="xl:16"],
356
+ [data-nk="grid"][data-gap~="xl:16"]
357
+ ) {
358
358
  --_nk-layout-gap: calc(var(--nk-space) * 16);
359
359
  }
360
360
  }
361
361
 
362
362
  @media (min-width: 96rem) {
363
363
  :where(
364
- [data-nk="flex"][data-gap~="2xl:0"],
365
- [data-nk="grid"][data-gap~="2xl:0"]
366
- ) {
364
+ [data-nk="flex"][data-gap~="2xl:0"],
365
+ [data-nk="grid"][data-gap~="2xl:0"]
366
+ ) {
367
367
  --_nk-layout-gap: 0;
368
368
  }
369
369
 
370
370
  :where(
371
- [data-nk="flex"][data-gap~="2xl:1"],
372
- [data-nk="grid"][data-gap~="2xl:1"]
373
- ) {
371
+ [data-nk="flex"][data-gap~="2xl:1"],
372
+ [data-nk="grid"][data-gap~="2xl:1"]
373
+ ) {
374
374
  --_nk-layout-gap: var(--nk-space);
375
375
  }
376
376
 
377
377
  :where(
378
- [data-nk="flex"][data-gap~="2xl:2"],
379
- [data-nk="grid"][data-gap~="2xl:2"]
380
- ) {
378
+ [data-nk="flex"][data-gap~="2xl:2"],
379
+ [data-nk="grid"][data-gap~="2xl:2"]
380
+ ) {
381
381
  --_nk-layout-gap: calc(var(--nk-space) * 2);
382
382
  }
383
383
 
384
384
  :where(
385
- [data-nk="flex"][data-gap~="2xl:3"],
386
- [data-nk="grid"][data-gap~="2xl:3"]
387
- ) {
385
+ [data-nk="flex"][data-gap~="2xl:3"],
386
+ [data-nk="grid"][data-gap~="2xl:3"]
387
+ ) {
388
388
  --_nk-layout-gap: calc(var(--nk-space) * 3);
389
389
  }
390
390
 
391
391
  :where(
392
- [data-nk="flex"][data-gap~="2xl:4"],
393
- [data-nk="grid"][data-gap~="2xl:4"]
394
- ) {
392
+ [data-nk="flex"][data-gap~="2xl:4"],
393
+ [data-nk="grid"][data-gap~="2xl:4"]
394
+ ) {
395
395
  --_nk-layout-gap: calc(var(--nk-space) * 4);
396
396
  }
397
397
 
398
398
  :where(
399
- [data-nk="flex"][data-gap~="2xl:5"],
400
- [data-nk="grid"][data-gap~="2xl:5"]
401
- ) {
399
+ [data-nk="flex"][data-gap~="2xl:5"],
400
+ [data-nk="grid"][data-gap~="2xl:5"]
401
+ ) {
402
402
  --_nk-layout-gap: calc(var(--nk-space) * 5);
403
403
  }
404
404
 
405
405
  :where(
406
- [data-nk="flex"][data-gap~="2xl:6"],
407
- [data-nk="grid"][data-gap~="2xl:6"]
408
- ) {
406
+ [data-nk="flex"][data-gap~="2xl:6"],
407
+ [data-nk="grid"][data-gap~="2xl:6"]
408
+ ) {
409
409
  --_nk-layout-gap: calc(var(--nk-space) * 6);
410
410
  }
411
411
 
412
412
  :where(
413
- [data-nk="flex"][data-gap~="2xl:8"],
414
- [data-nk="grid"][data-gap~="2xl:8"]
415
- ) {
413
+ [data-nk="flex"][data-gap~="2xl:8"],
414
+ [data-nk="grid"][data-gap~="2xl:8"]
415
+ ) {
416
416
  --_nk-layout-gap: calc(var(--nk-space) * 8);
417
417
  }
418
418
 
419
419
  :where(
420
- [data-nk="flex"][data-gap~="2xl:10"],
421
- [data-nk="grid"][data-gap~="2xl:10"]
422
- ) {
420
+ [data-nk="flex"][data-gap~="2xl:10"],
421
+ [data-nk="grid"][data-gap~="2xl:10"]
422
+ ) {
423
423
  --_nk-layout-gap: calc(var(--nk-space) * 10);
424
424
  }
425
425
 
426
426
  :where(
427
- [data-nk="flex"][data-gap~="2xl:12"],
428
- [data-nk="grid"][data-gap~="2xl:12"]
429
- ) {
427
+ [data-nk="flex"][data-gap~="2xl:12"],
428
+ [data-nk="grid"][data-gap~="2xl:12"]
429
+ ) {
430
430
  --_nk-layout-gap: calc(var(--nk-space) * 12);
431
431
  }
432
432
 
433
433
  :where(
434
- [data-nk="flex"][data-gap~="2xl:16"],
435
- [data-nk="grid"][data-gap~="2xl:16"]
436
- ) {
434
+ [data-nk="flex"][data-gap~="2xl:16"],
435
+ [data-nk="grid"][data-gap~="2xl:16"]
436
+ ) {
437
437
  --_nk-layout-gap: calc(var(--nk-space) * 16);
438
438
  }
439
439
  }
data/src/stylesheets/nitro_kit/components/page_header.css CHANGED
@@ -40,22 +40,21 @@
40
40
  }
41
41
 
42
42
  /* Every text slot owns the first column, so the eyebrow, title, and
43
- description each keep a row of their own. Sparse auto-placement then
44
- lands the actions in the last of those rows. No row span is declared:
45
- a span resolves against explicit rows this grid does not have, which is
46
- what used to seat the actions beside the eyebrow and push the title down
47
- onto a line of its own. */
43
+ description each keep a row of their own. Actions explicitly occupy
44
+ the first row so their top edge aligns with the header instead of
45
+ dropping beside the final line of supporting text. */
48
46
  :where(
49
- [data-nk="page-header"]:has(> [data-slot="page-header-actions"])
50
- > :not([data-slot="page-header-actions"])
51
- ) {
47
+ [data-nk="page-header"]:has(> [data-slot="page-header-actions"])
48
+ > :not([data-slot="page-header-actions"])
49
+ ) {
52
50
  grid-column: 1;
53
51
  }
54
52
 
55
53
  :where([data-nk="page-header"] > [data-slot="page-header-actions"]) {
56
54
  grid-column: 2;
55
+ grid-row: 1;
57
56
  justify-self: end;
58
- align-self: end;
57
+ align-self: start;
59
58
  margin-block-start: 0;
60
59
  }
61
60
  }