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/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
@@ -13,15 +13,15 @@
13
13
  }
14
14
 
15
15
  :where([data-nk="page-header"] > [data-slot="page-header-title"]) {
16
- max-width: var(--nk-content-lg);
17
- font-size: var(--nk-text-2xl);
18
- font-weight: var(--nk-font-weight-bold);
16
+ max-inline-size: var(--nk-content-lg);
17
+ font-size: var(--nk-title-page-size);
18
+ font-weight: var(--nk-title-page-weight);
19
19
  line-height: var(--nk-leading-tight);
20
20
  text-wrap: balance;
21
21
  }
22
22
 
23
23
  :where([data-nk="page-header"] > [data-slot="page-header-description"]) {
24
- max-width: var(--nk-content-lg);
24
+ max-inline-size: var(--nk-content-lg);
25
25
  color: var(--nk-color-muted-foreground);
26
26
  font-size: var(--nk-text-sm);
27
27
  line-height: var(--nk-leading-relaxed);
@@ -44,9 +44,9 @@
44
44
  the first row so their top edge aligns with the header instead of
45
45
  dropping beside the final line of supporting text. */
46
46
  :where(
47
- [data-nk="page-header"]:has(> [data-slot="page-header-actions"])
48
- > :not([data-slot="page-header-actions"])
49
- ) {
47
+ [data-nk="page-header"]:has(> [data-slot="page-header-actions"])
48
+ > :not([data-slot="page-header-actions"])
49
+ ) {
50
50
  grid-column: 1;
51
51
  }
52
52