nitro_kit 2.0.0.alpha.3 → 2.0.0.alpha.5

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 (101) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +194 -0
  3. data/README.md +34 -23
  4. data/STYLE_GUIDE.md +10 -0
  5. data/app/assets/stylesheets/nitro_kit-tailwind-v4.css +3 -3
  6. data/app/assets/stylesheets/nitro_kit.css +1220 -572
  7. data/app/components/nitro_kit/accordion.rb +1 -19
  8. data/app/components/nitro_kit/alert.rb +1 -11
  9. data/app/components/nitro_kit/app_navigation.rb +44 -9
  10. data/app/components/nitro_kit/appearance_picker.rb +10 -1
  11. data/app/components/nitro_kit/badge.rb +13 -4
  12. data/app/components/nitro_kit/combobox.rb +1 -17
  13. data/app/components/nitro_kit/command_palette.rb +1 -0
  14. data/app/components/nitro_kit/dropzone.rb +1 -1
  15. data/app/components/nitro_kit/form_builder.rb +1 -1
  16. data/app/components/nitro_kit/select.rb +1 -14
  17. data/app/components/nitro_kit/tabs.rb +1 -0
  18. data/app/javascript/controllers/nk/command_palette_controller.js +4 -0
  19. data/app/javascript/controllers/nk/tabs_controller.js +13 -1
  20. data/docs/agent_guide.md +85 -138
  21. data/docs/agent_native_spec.md +72 -400
  22. data/docs/browser_support.md +77 -188
  23. data/docs/component_contracts.md +56 -36
  24. data/docs/customization.md +675 -89
  25. data/docs/hotwire.md +61 -99
  26. data/docs/initialization_prompt.md +33 -57
  27. data/docs/migration_1_to_2.md +34 -18
  28. data/docs/patterns/application_foundation.md +45 -121
  29. data/docs/patterns/crud_resource.md +44 -129
  30. data/docs/patterns/destructive_action.md +45 -102
  31. data/docs/patterns/flash_and_toast.md +18 -36
  32. data/docs/patterns/inline_edit.md +21 -44
  33. data/docs/patterns/queryable_collection.md +65 -161
  34. data/docs/patterns/resource_form.md +33 -81
  35. data/docs/rails_conventions.md +38 -78
  36. data/docs/rails_integration.md +96 -474
  37. data/lib/nitro_kit/installation.rb +19 -3
  38. data/lib/nitro_kit/migration_inventory.rb +15 -8
  39. data/lib/nitro_kit/version.rb +1 -1
  40. data/plugins/nitro-kit/.codex-plugin/plugin.json +4 -4
  41. data/plugins/nitro-kit/skills/nitro-kit-hotwire/SKILL.md +12 -0
  42. data/plugins/nitro-kit/skills/nitro-kit-hotwire/agents/openai.yaml +1 -1
  43. data/plugins/nitro-kit/skills/nitro-kit-rails/SKILL.md +22 -0
  44. data/plugins/nitro-kit/skills/nitro-kit-rails/agents/openai.yaml +1 -1
  45. data/plugins/nitro-kit/skills/nitro-kit-ui/SKILL.md +33 -11
  46. data/plugins/nitro-kit/skills/nitro-kit-ui/agents/openai.yaml +1 -1
  47. data/src/stylesheets/nitro_kit/components/accordion.css +4 -4
  48. data/src/stylesheets/nitro_kit/components/alert.css +20 -29
  49. data/src/stylesheets/nitro_kit/components/app_navigation.css +74 -2
  50. data/src/stylesheets/nitro_kit/components/app_shell.css +3 -3
  51. data/src/stylesheets/nitro_kit/components/appearance_picker.css +20 -8
  52. data/src/stylesheets/nitro_kit/components/auth_shell.css +2 -2
  53. data/src/stylesheets/nitro_kit/components/avatar.css +12 -8
  54. data/src/stylesheets/nitro_kit/components/avatar_stack.css +12 -10
  55. data/src/stylesheets/nitro_kit/components/badge.css +13 -9
  56. data/src/stylesheets/nitro_kit/components/button.css +42 -25
  57. data/src/stylesheets/nitro_kit/components/card.css +2 -2
  58. data/src/stylesheets/nitro_kit/components/checkbox.css +29 -46
  59. data/src/stylesheets/nitro_kit/components/checkbox_group.css +3 -3
  60. data/src/stylesheets/nitro_kit/components/combobox.css +6 -6
  61. data/src/stylesheets/nitro_kit/components/command_palette.css +62 -4
  62. data/src/stylesheets/nitro_kit/components/container.css +6 -6
  63. data/src/stylesheets/nitro_kit/components/control_group.css +9 -9
  64. data/src/stylesheets/nitro_kit/components/danger_zone.css +6 -6
  65. data/src/stylesheets/nitro_kit/components/data_section.css +4 -4
  66. data/src/stylesheets/nitro_kit/components/details_table.css +7 -5
  67. data/src/stylesheets/nitro_kit/components/dialog.css +3 -3
  68. data/src/stylesheets/nitro_kit/components/dropdown.css +7 -7
  69. data/src/stylesheets/nitro_kit/components/dropzone.css +7 -7
  70. data/src/stylesheets/nitro_kit/components/empty_state.css +4 -4
  71. data/src/stylesheets/nitro_kit/components/field.css +2 -2
  72. data/src/stylesheets/nitro_kit/components/fieldset.css +2 -2
  73. data/src/stylesheets/nitro_kit/components/flex.css +1 -1
  74. data/src/stylesheets/nitro_kit/components/grid.css +1 -1
  75. data/src/stylesheets/nitro_kit/components/icon.css +5 -5
  76. data/src/stylesheets/nitro_kit/components/input.css +33 -6
  77. data/src/stylesheets/nitro_kit/components/page_header.css +4 -4
  78. data/src/stylesheets/nitro_kit/components/pagination.css +3 -3
  79. data/src/stylesheets/nitro_kit/components/pagination_bar.css +2 -2
  80. data/src/stylesheets/nitro_kit/components/palette.css +140 -72
  81. data/src/stylesheets/nitro_kit/components/progressive_image.css +1 -1
  82. data/src/stylesheets/nitro_kit/components/radio_button.css +28 -33
  83. data/src/stylesheets/nitro_kit/components/radio_button_group.css +6 -6
  84. data/src/stylesheets/nitro_kit/components/rich_text_area.css +2 -2
  85. data/src/stylesheets/nitro_kit/components/select.css +24 -8
  86. data/src/stylesheets/nitro_kit/components/settings_layout.css +5 -5
  87. data/src/stylesheets/nitro_kit/components/settings_section.css +2 -2
  88. data/src/stylesheets/nitro_kit/components/sheet.css +10 -10
  89. data/src/stylesheets/nitro_kit/components/stat_grid.css +1 -1
  90. data/src/stylesheets/nitro_kit/components/switch.css +34 -40
  91. data/src/stylesheets/nitro_kit/components/table.css +8 -4
  92. data/src/stylesheets/nitro_kit/components/tabs.css +5 -1
  93. data/src/stylesheets/nitro_kit/components/textarea.css +20 -5
  94. data/src/stylesheets/nitro_kit/components/toast.css +11 -58
  95. data/src/stylesheets/nitro_kit/components/toolbar.css +2 -2
  96. data/src/stylesheets/nitro_kit/components/tooltip.css +4 -0
  97. data/src/stylesheets/nitro_kit/components/typeset.css +4 -4
  98. data/src/stylesheets/nitro_kit/reset.css +6 -6
  99. data/src/stylesheets/nitro_kit/tokens.css +497 -74
  100. metadata +1 -2
  101. data/docs/new_app_strategy.md +0 -22
data/src/stylesheets/nitro_kit/components/container.css CHANGED
@@ -1,25 +1,25 @@
1
1
  @layer nitro-kit.base {
2
2
  :where([data-nk="container"]) {
3
- width: 100%;
4
- min-width: 0;
3
+ inline-size: 100%;
4
+ min-inline-size: 0;
5
5
  margin-inline: auto;
6
6
  }
7
7
  }
8
8
 
9
9
  @layer nitro-kit.size {
10
10
  :where([data-nk="container"][data-size="sm"]) {
11
- max-width: var(--nk-content-sm);
11
+ max-inline-size: var(--nk-content-sm);
12
12
  }
13
13
 
14
14
  :where([data-nk="container"][data-size="md"]) {
15
- max-width: var(--nk-content-md);
15
+ max-inline-size: var(--nk-content-md);
16
16
  }
17
17
 
18
18
  :where([data-nk="container"][data-size="lg"]) {
19
- max-width: var(--nk-content-lg);
19
+ max-inline-size: var(--nk-content-lg);
20
20
  }
21
21
 
22
22
  :where([data-nk="container"][data-size="xl"]) {
23
- max-width: var(--nk-content-xl);
23
+ max-inline-size: var(--nk-content-xl);
24
24
  }
25
25
  }
data/src/stylesheets/nitro_kit/components/control_group.css CHANGED
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
  :where([data-nk="control-group"] > [data-nk="select"] > select) {
55
- height: 100%;
55
+ block-size: 100%;
56
56
  border-radius: 0;
57
57
  }
58
58
 
@@ -73,8 +73,8 @@
73
73
  span[data-slot="control-group-addon"]
74
74
  ):first-child
75
75
  ) {
76
- border-start-start-radius: var(--nk-radius-md);
77
- border-end-start-radius: var(--nk-radius-md);
76
+ border-start-start-radius: var(--nk-radius-lg);
77
+ border-end-start-radius: var(--nk-radius-lg);
78
78
  }
79
79
 
80
80
  :where(
@@ -85,8 +85,8 @@
85
85
  span[data-slot="control-group-addon"]
86
86
  ):last-child
87
87
  ) {
88
- border-start-end-radius: var(--nk-radius-md);
89
- border-end-end-radius: var(--nk-radius-md);
88
+ border-start-end-radius: var(--nk-radius-lg);
89
+ border-end-end-radius: var(--nk-radius-lg);
90
90
  }
91
91
 
92
92
  :where(
@@ -132,12 +132,12 @@
132
132
  }
133
133
 
134
134
  :where([data-nk="control-group"] > [data-nk="select"]:first-child > select) {
135
- border-start-start-radius: var(--nk-radius-md);
136
- border-end-start-radius: var(--nk-radius-md);
135
+ border-start-start-radius: var(--nk-radius-lg);
136
+ border-end-start-radius: var(--nk-radius-lg);
137
137
  }
138
138
 
139
139
  :where([data-nk="control-group"] > [data-nk="select"]:last-child > select) {
140
- border-start-end-radius: var(--nk-radius-md);
141
- border-end-end-radius: var(--nk-radius-md);
140
+ border-start-end-radius: var(--nk-radius-lg);
141
+ border-end-end-radius: var(--nk-radius-lg);
142
142
  }
143
143
  }
data/src/stylesheets/nitro_kit/components/danger_zone.css CHANGED
@@ -5,14 +5,14 @@
5
5
  align-items: end;
6
6
  gap: calc(var(--nk-space) * 5);
7
7
  padding: calc(var(--nk-space) * 6);
8
- color: var(--nk-color-danger-content);
8
+ color: var(--nk-color-destructive-content);
9
9
  background: color-mix(
10
10
  in oklab,
11
- var(--nk-color-danger) 8%,
11
+ var(--nk-color-destructive) 8%,
12
12
  var(--nk-color-surface)
13
13
  );
14
14
  border: var(--nk-border-width) solid
15
- color-mix(in oklab, var(--nk-color-danger) 50%, transparent);
15
+ color-mix(in oklab, var(--nk-color-destructive) 50%, transparent);
16
16
  border-radius: var(--nk-radius-lg);
17
17
  }
18
18
 
@@ -23,14 +23,14 @@
23
23
  }
24
24
 
25
25
  :where([data-nk="danger-zone"] [data-slot="danger-zone-title"]) {
26
- font-size: var(--nk-text-xl);
27
- font-weight: var(--nk-font-weight-bold);
26
+ font-size: var(--nk-title-section-size);
27
+ font-weight: var(--nk-title-section-weight);
28
28
  line-height: var(--nk-leading-tight);
29
29
  text-wrap: balance;
30
30
  }
31
31
 
32
32
  :where([data-nk="danger-zone"] [data-slot="danger-zone-description"]) {
33
- max-width: var(--nk-content-lg);
33
+ max-inline-size: var(--nk-content-lg);
34
34
  font-size: var(--nk-text-sm);
35
35
  line-height: var(--nk-leading-relaxed);
36
36
  text-wrap: pretty;
data/src/stylesheets/nitro_kit/components/data_section.css CHANGED
@@ -19,14 +19,14 @@
19
19
  }
20
20
 
21
21
  :where([data-nk="data-section"] [data-slot="data-section-title"]) {
22
- font-size: var(--nk-text-xl);
23
- font-weight: var(--nk-font-weight-bold);
22
+ font-size: var(--nk-title-section-size);
23
+ font-weight: var(--nk-title-section-weight);
24
24
  line-height: var(--nk-leading-tight);
25
25
  text-wrap: balance;
26
26
  }
27
27
 
28
28
  :where([data-nk="data-section"] [data-slot="data-section-description"]) {
29
- max-width: var(--nk-content-lg);
29
+ max-inline-size: var(--nk-content-lg);
30
30
  color: var(--nk-color-muted-foreground);
31
31
  font-size: var(--nk-text-sm);
32
32
  line-height: var(--nk-leading-relaxed);
@@ -35,6 +35,6 @@
35
35
 
36
36
  :where([data-nk="data-section"] > [data-slot="data-section-table"]),
37
37
  :where([data-nk="data-section"] > [data-slot="data-section-empty-state"]) {
38
- width: 100%;
38
+ inline-size: 100%;
39
39
  }
40
40
  }
data/src/stylesheets/nitro_kit/components/details_table.css CHANGED
@@ -30,11 +30,13 @@
30
30
  text-underline-offset: 0.16em;
31
31
  }
32
32
 
33
- :where(
34
- [data-nk="details-table"] [data-slot="details-table-link"]:hover,
35
- [data-nk="details-table"] [data-slot="details-table-record"]:hover
36
- ) {
37
- text-decoration-color: currentcolor;
33
+ @media (hover: hover) {
34
+ :where(
35
+ [data-nk="details-table"] [data-slot="details-table-link"]:hover,
36
+ [data-nk="details-table"] [data-slot="details-table-record"]:hover
37
+ ) {
38
+ text-decoration-color: currentcolor;
39
+ }
38
40
  }
39
41
 
40
42
  :where([data-nk="details-table"] [data-slot="details-table-file"]) {
data/src/stylesheets/nitro_kit/components/dialog.css CHANGED
@@ -28,8 +28,8 @@
28
28
  }
29
29
 
30
30
  :where([data-nk="dialog"] [data-slot="dialog-title"]) {
31
- font-size: var(--nk-text-lg);
32
- font-weight: var(--nk-font-weight-bold);
31
+ font-size: var(--nk-title-surface-size);
32
+ font-weight: var(--nk-title-surface-weight);
33
33
  line-height: var(--nk-leading-tight);
34
34
  text-wrap: balance;
35
35
  }
@@ -67,7 +67,7 @@
67
67
  @keyframes nk-dialog-enter {
68
68
  from {
69
69
  opacity: 0;
70
- transform: translateY(0.5rem) scale(0.98);
70
+ transform: translateY(calc(var(--nk-space) * 2)) scale(0.98);
71
71
  }
72
72
  to {
73
73
  opacity: 1;
data/src/stylesheets/nitro_kit/components/dropdown.css CHANGED
@@ -9,7 +9,7 @@
9
9
  z-index: 50;
10
10
  display: none;
11
11
  min-inline-size: 12rem;
12
- max-inline-size: min(24rem, calc(100vw - (var(--nk-space) * 8)));
12
+ max-inline-size: min(24rem, calc(100% - (var(--nk-space) * 8)));
13
13
  max-block-size: min(24rem, calc(100dvh - (var(--nk-space) * 8)));
14
14
  inset: var(--nk-space);
15
15
  inset: var(--_nk-overlay-top, var(--nk-space)) auto auto
@@ -56,7 +56,7 @@
56
56
  cursor: pointer;
57
57
  background: transparent;
58
58
  border: 0;
59
- border-radius: var(--nk-radius-md);
59
+ border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
60
60
  transition:
61
61
  color var(--nk-duration-normal) var(--nk-ease),
62
62
  background-color var(--nk-duration-normal) var(--nk-ease);
@@ -86,7 +86,7 @@
86
86
  [data-nk="dropdown"]
87
87
  [data-slot="dropdown-item"][data-variant="destructive"]
88
88
  ) {
89
- color: var(--nk-color-danger-content);
89
+ color: var(--nk-color-destructive-content);
90
90
  }
91
91
 
92
92
  :where(
@@ -117,8 +117,8 @@
117
117
  [aria-disabled="true"]
118
118
  )
119
119
  ) {
120
- color: var(--nk-color-danger-foreground);
121
- background: var(--nk-color-danger);
120
+ color: var(--nk-color-destructive-foreground);
121
+ background: var(--nk-color-destructive);
122
122
  }
123
123
  }
124
124
 
@@ -132,7 +132,7 @@
132
132
  [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
133
133
  ) {
134
134
  cursor: not-allowed;
135
- opacity: 0.6;
135
+ opacity: var(--nk-disabled-opacity);
136
136
  }
137
137
 
138
138
  :where([data-nk="dropdown"] > [data-slot="dropdown-content"]:popover-open) {
@@ -142,7 +142,7 @@
142
142
  @keyframes nk-dropdown-enter {
143
143
  from {
144
144
  opacity: 0;
145
- transform: translateY(-0.25rem) scale(0.98);
145
+ transform: translateY(calc(var(--nk-space) * -1)) scale(0.98);
146
146
  }
147
147
  to {
148
148
  opacity: 1;
data/src/stylesheets/nitro_kit/components/dropzone.css CHANGED
@@ -41,7 +41,7 @@
41
41
  color: var(--nk-color-foreground);
42
42
  background: var(--nk-color-canvas);
43
43
  border: var(--nk-border-width) solid var(--nk-color-border);
44
- border-radius: var(--nk-radius-md);
44
+ border-radius: var(--nk-radius-lg);
45
45
  }
46
46
 
47
47
  :where(
@@ -90,13 +90,13 @@
90
90
  padding: calc(var(--nk-space) * 2);
91
91
  background: var(--nk-color-canvas);
92
92
  border: var(--nk-border-width) solid var(--nk-color-border);
93
- border-radius: var(--nk-radius-md);
93
+ border-radius: var(--nk-radius-lg);
94
94
  }
95
95
 
96
96
  :where([data-nk="dropzone"] [data-slot="dropzone-preview-image"]) {
97
97
  grid-row: span 2;
98
- inline-size: 3rem;
99
- block-size: 3rem;
98
+ inline-size: calc(var(--nk-space) * 12);
99
+ block-size: calc(var(--nk-space) * 12);
100
100
  object-fit: cover;
101
101
  border-radius: var(--nk-radius-sm);
102
102
  }
@@ -152,12 +152,12 @@
152
152
  }
153
153
 
154
154
  :where([data-nk="dropzone"][data-state="error"]) {
155
- border-color: var(--nk-color-danger);
155
+ border-color: var(--nk-color-destructive);
156
156
  }
157
157
 
158
158
  :where([data-nk="dropzone"][data-state="disabled"]) {
159
159
  cursor: not-allowed;
160
- opacity: 0.6;
160
+ opacity: var(--nk-disabled-opacity);
161
161
  }
162
162
 
163
163
  :where(
@@ -186,7 +186,7 @@
186
186
  }
187
187
 
188
188
  :where([data-nk="dropzone"] > [data-slot="dropzone-error"]) {
189
- color: var(--nk-color-danger-content);
189
+ color: var(--nk-color-destructive-content);
190
190
  font-size: var(--nk-text-sm);
191
191
  }
192
192
  }
data/src/stylesheets/nitro_kit/components/empty_state.css CHANGED
@@ -13,15 +13,15 @@
13
13
  }
14
14
 
15
15
  :where([data-nk="empty-state"] > [data-slot="empty-state-icon"]) {
16
- inline-size: 2rem;
17
- block-size: 2rem;
16
+ inline-size: calc(var(--nk-space) * 8);
17
+ block-size: calc(var(--nk-space) * 8);
18
18
  color: var(--nk-color-muted-foreground);
19
19
  }
20
20
 
21
21
  :where([data-nk="empty-state"] > [data-slot="empty-state-title"]) {
22
22
  max-inline-size: var(--nk-content-md);
23
- font-size: var(--nk-text-lg);
24
- font-weight: var(--nk-font-weight-bold);
23
+ font-size: var(--nk-title-surface-size);
24
+ font-weight: var(--nk-title-surface-weight);
25
25
  line-height: var(--nk-leading-tight);
26
26
  text-wrap: balance;
27
27
  }
data/src/stylesheets/nitro_kit/components/field.css CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  :where([data-nk="field"] > [data-slot="field-error"]) {
20
20
  padding: 0;
21
- color: var(--nk-color-danger-content);
21
+ color: var(--nk-color-destructive-content);
22
22
  font-size: var(--nk-text-sm);
23
23
  list-style: none;
24
24
  }
@@ -78,6 +78,6 @@
78
78
  [data-nk="field"][data-state="invalid"]
79
79
  > [data-slot="field-control"][data-nk="input"]
80
80
  ) {
81
- border-color: var(--nk-color-danger);
81
+ border-color: var(--nk-color-destructive);
82
82
  }
83
83
  }
data/src/stylesheets/nitro_kit/components/fieldset.css CHANGED
@@ -8,8 +8,8 @@
8
8
 
9
9
  :where([data-nk="fieldset"] > [data-slot="fieldset-legend"]) {
10
10
  padding: 0;
11
- font-size: var(--nk-text-lg);
12
- font-weight: var(--nk-font-weight-semibold);
11
+ font-size: var(--nk-title-surface-size);
12
+ font-weight: var(--nk-title-surface-weight);
13
13
  line-height: var(--nk-leading-tight);
14
14
  }
15
15
 
data/src/stylesheets/nitro_kit/components/flex.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer nitro-kit.base {
2
2
  :where([data-nk="flex"]) {
3
3
  display: flex;
4
- min-width: 0;
4
+ min-inline-size: 0;
5
5
  flex-direction: var(--_nk-flex-direction);
6
6
  flex-wrap: var(--_nk-flex-wrap);
7
7
  gap: var(--_nk-layout-gap);
data/src/stylesheets/nitro_kit/components/grid.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer nitro-kit.base {
2
2
  :where([data-nk="grid"]) {
3
3
  display: grid;
4
- min-width: 0;
4
+ min-inline-size: 0;
5
5
  grid-template-columns: repeat(var(--_nk-grid-columns), minmax(0, 1fr));
6
6
  gap: var(--_nk-layout-gap);
7
7
  }
data/src/stylesheets/nitro_kit/components/icon.css CHANGED
@@ -9,18 +9,18 @@
9
9
 
10
10
  @layer nitro-kit.size {
11
11
  :where([data-nk="icon"][data-size="xs"]) {
12
- --_nk-icon-size: 0.75rem;
12
+ --_nk-icon-size: var(--nk-icon-size-xs);
13
13
  }
14
14
  :where([data-nk="icon"][data-size="sm"]) {
15
- --_nk-icon-size: 1rem;
15
+ --_nk-icon-size: var(--nk-icon-size-sm);
16
16
  }
17
17
  :where([data-nk="icon"][data-size="md"]) {
18
- --_nk-icon-size: 1.25rem;
18
+ --_nk-icon-size: var(--nk-icon-size-md);
19
19
  }
20
20
  :where([data-nk="icon"][data-size="lg"]) {
21
- --_nk-icon-size: 1.75rem;
21
+ --_nk-icon-size: var(--nk-icon-size-lg);
22
22
  }
23
23
  :where([data-nk="icon"][data-size="xl"]) {
24
- --_nk-icon-size: 2.25rem;
24
+ --_nk-icon-size: var(--nk-icon-size-xl);
25
25
  }
26
26
  }
data/src/stylesheets/nitro_kit/components/input.css CHANGED
@@ -5,20 +5,20 @@
5
5
  display: block;
6
6
  inline-size: 100%;
7
7
  min-block-size: var(--nk-control-height-md);
8
- padding-inline: calc(var(--nk-space) * 3);
8
+ padding-inline: var(--nk-control-padding-inline);
9
9
  color: var(--nk-color-foreground);
10
10
  font-size: var(--nk-text-base);
11
11
  background: var(--nk-color-surface);
12
12
  border: var(--nk-border-width) solid var(--nk-color-border);
13
- border-radius: var(--nk-radius-md);
13
+ border-radius: var(--nk-radius-lg);
14
14
  transition:
15
15
  border-color var(--nk-duration-normal) var(--nk-ease),
16
16
  box-shadow var(--nk-duration-normal) var(--nk-ease);
17
17
  }
18
18
 
19
19
  :where([data-nk="input"][type="checkbox"], [data-nk="input"][type="radio"]) {
20
- inline-size: 1.125rem;
21
- block-size: 1.125rem;
20
+ inline-size: var(--nk-choice-size-md);
21
+ block-size: var(--nk-choice-size-md);
22
22
  accent-color: var(--nk-color-primary);
23
23
  }
24
24
 
@@ -55,6 +55,33 @@
55
55
  border-inline-end: var(--nk-border-width) solid
56
56
  var(--nk-button-default-border);
57
57
  }
58
+
59
+ /* Data-entry controls read --nk-text-base below the md breakpoint, where
60
+ a focused control under 16px would zoom the viewport, and --nk-text-sm
61
+ from md up, beside 14px labels and body text. */
62
+ @media (min-width: 48rem) {
63
+ :where(
64
+ [data-nk="input"]:not(
65
+ [type="checkbox"],
66
+ [type="radio"],
67
+ [type="hidden"]
68
+ )
69
+ ) {
70
+ font-size: var(--nk-text-sm);
71
+ }
72
+ }
73
+
74
+ @media (prefers-reduced-motion: reduce) {
75
+ :where(
76
+ [data-nk="input"]:not(
77
+ [type="checkbox"],
78
+ [type="radio"],
79
+ [type="hidden"]
80
+ )
81
+ ) {
82
+ transition-duration: 0.01ms;
83
+ }
84
+ }
58
85
  }
59
86
 
60
87
  @layer nitro-kit.state {
@@ -78,10 +105,10 @@
78
105
 
79
106
  :where([data-nk="input"]:disabled) {
80
107
  cursor: not-allowed;
81
- opacity: 0.6;
108
+ opacity: var(--nk-disabled-opacity);
82
109
  }
83
110
 
84
111
  :where([data-nk="input"][aria-invalid="true"]) {
85
- border-color: var(--nk-color-danger);
112
+ border-color: var(--nk-color-destructive);
86
113
  }
87
114
  }
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);
data/src/stylesheets/nitro_kit/components/pagination.css CHANGED
@@ -32,8 +32,8 @@
32
32
  > [data-slot="pagination-ellipsis-label"]
33
33
  ) {
34
34
  position: absolute;
35
- width: 1px;
36
- height: 1px;
35
+ inline-size: 1px;
36
+ block-size: 1px;
37
37
  padding: 0;
38
38
  margin: -1px;
39
39
  overflow: hidden;
@@ -102,7 +102,7 @@
102
102
  font-size: var(--nk-text-sm);
103
103
  font-weight: var(--nk-font-weight-medium);
104
104
  border: var(--nk-border-width) solid var(--nk-color-border);
105
- border-radius: var(--nk-radius-md);
105
+ border-radius: var(--nk-radius-lg);
106
106
  }
107
107
 
108
108
  :where(
data/src/stylesheets/nitro_kit/components/pagination_bar.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer nitro-kit.base {
2
2
  :where([data-nk="pagination-bar"]) {
3
3
  display: flex;
4
- min-width: 0;
4
+ min-inline-size: 0;
5
5
  flex-wrap: wrap;
6
6
  align-items: center;
7
7
  justify-content: space-between;
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  :where([data-nk="pagination-bar"] > [data-slot="pagination-bar-summary"]) {
12
- min-width: 0;
12
+ min-inline-size: 0;
13
13
  margin: 0;
14
14
  color: var(--nk-color-muted-foreground);
15
15
  font-size: var(--nk-text-sm);