nitro_kit 2.0.0.alpha.2 → 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 (124) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +50 -1
  3. data/README.md +23 -4
  4. data/STYLE_GUIDE.md +37 -5
  5. data/app/assets/stylesheets/nitro_kit.css +1714 -1358
  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 +0 -25
  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 +35 -11
  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 +0 -25
  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 +27 -10
  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/patterns/application_foundation.md +6 -4
  60. data/docs/patterns/crud_resource.md +6 -3
  61. data/docs/patterns/destructive_action.md +25 -0
  62. data/docs/patterns/resource_form.md +1 -1
  63. data/docs/rails_conventions.md +4 -1
  64. data/docs/rails_integration.md +39 -11
  65. data/lib/generators/nitro_kit/upgrade_smoke_tests_generator.rb +12 -0
  66. data/lib/nitro_kit/installation.rb +9 -4
  67. data/lib/nitro_kit/migration_inventory.rb +268 -8
  68. data/lib/nitro_kit/upgrade_smoke_test.rb +10 -12
  69. data/lib/nitro_kit/version.rb +1 -1
  70. data/lib/rails/commands/nitro_kit/nitro_kit_command.rb +10 -3
  71. data/plugins/nitro-kit/skills/nitro-kit-hotwire/SKILL.md +4 -0
  72. data/plugins/nitro-kit/skills/nitro-kit-rails/SKILL.md +6 -1
  73. data/plugins/nitro-kit/skills/nitro-kit-ui/SKILL.md +18 -8
  74. data/src/stylesheets/nitro_kit/components/accordion.css +40 -40
  75. data/src/stylesheets/nitro_kit/components/alert.css +9 -9
  76. data/src/stylesheets/nitro_kit/components/app_navigation.css +19 -19
  77. data/src/stylesheets/nitro_kit/components/app_shell.css +196 -193
  78. data/src/stylesheets/nitro_kit/components/appearance_picker.css +41 -31
  79. data/src/stylesheets/nitro_kit/components/avatar.css +3 -3
  80. data/src/stylesheets/nitro_kit/components/avatar_stack.css +36 -19
  81. data/src/stylesheets/nitro_kit/components/button.css +83 -58
  82. data/src/stylesheets/nitro_kit/components/button_group.css +19 -14
  83. data/src/stylesheets/nitro_kit/components/card.css +11 -5
  84. data/src/stylesheets/nitro_kit/components/checkbox.css +40 -36
  85. data/src/stylesheets/nitro_kit/components/checkbox_group.css +13 -13
  86. data/src/stylesheets/nitro_kit/components/combobox.css +33 -23
  87. data/src/stylesheets/nitro_kit/components/command_palette.css +48 -47
  88. data/src/stylesheets/nitro_kit/components/control_group.css +52 -58
  89. data/src/stylesheets/nitro_kit/components/danger_zone.css +3 -3
  90. data/src/stylesheets/nitro_kit/components/data_section.css +1 -1
  91. data/src/stylesheets/nitro_kit/components/details_table.css +13 -13
  92. data/src/stylesheets/nitro_kit/components/dialog.css +6 -3
  93. data/src/stylesheets/nitro_kit/components/dropdown.css +29 -23
  94. data/src/stylesheets/nitro_kit/components/dropzone.css +71 -28
  95. data/src/stylesheets/nitro_kit/components/empty_state.css +6 -6
  96. data/src/stylesheets/nitro_kit/components/field.css +30 -26
  97. data/src/stylesheets/nitro_kit/components/field_group.css +13 -0
  98. data/src/stylesheets/nitro_kit/components/fieldset.css +6 -0
  99. data/src/stylesheets/nitro_kit/components/input.css +9 -2
  100. data/src/stylesheets/nitro_kit/components/layout.css +165 -165
  101. data/src/stylesheets/nitro_kit/components/page_header.css +3 -3
  102. data/src/stylesheets/nitro_kit/components/pagination.css +55 -46
  103. data/src/stylesheets/nitro_kit/components/pagination_bar.css +7 -7
  104. data/src/stylesheets/nitro_kit/components/palette.css +20 -20
  105. data/src/stylesheets/nitro_kit/components/progressive_image.css +44 -54
  106. data/src/stylesheets/nitro_kit/components/radio_button.css +36 -29
  107. data/src/stylesheets/nitro_kit/components/radio_button_group.css +43 -43
  108. data/src/stylesheets/nitro_kit/components/rich_text_area.css +15 -0
  109. data/src/stylesheets/nitro_kit/components/select.css +2 -9
  110. data/src/stylesheets/nitro_kit/components/settings_layout.css +21 -18
  111. data/src/stylesheets/nitro_kit/components/settings_section.css +84 -0
  112. data/src/stylesheets/nitro_kit/components/sheet.css +23 -3
  113. data/src/stylesheets/nitro_kit/components/stat_grid.css +10 -9
  114. data/src/stylesheets/nitro_kit/components/switch.css +37 -33
  115. data/src/stylesheets/nitro_kit/components/table.css +35 -31
  116. data/src/stylesheets/nitro_kit/components/tabs.css +43 -39
  117. data/src/stylesheets/nitro_kit/components/toast.css +20 -9
  118. data/src/stylesheets/nitro_kit/components/toolbar.css +14 -39
  119. data/src/stylesheets/nitro_kit/components/tooltip.css +34 -29
  120. data/src/stylesheets/nitro_kit/components/typeset.css +147 -1
  121. data/src/stylesheets/nitro_kit/reset.css +9 -9
  122. data/src/stylesheets/nitro_kit/tokens.css +8 -9
  123. metadata +4 -3
  124. data/src/stylesheets/nitro_kit/components/form_section.css +0 -71
data/src/stylesheets/nitro_kit/components/pagination.css CHANGED
@@ -17,20 +17,20 @@
17
17
  }
18
18
 
19
19
  :where(
20
- [data-nk="pagination"]
21
- > [data-slot="pagination-list"]
22
- > [data-slot="pagination-item"]
23
- ) {
20
+ [data-nk="pagination"]
21
+ > [data-slot="pagination-list"]
22
+ > [data-slot="pagination-item"]
23
+ ) {
24
24
  display: flex;
25
25
  flex: none;
26
26
  }
27
27
 
28
28
  :where(
29
- [data-nk="pagination"]
30
- > [data-slot="pagination-list"]
31
- > [data-slot="pagination-item"]
32
- > [data-slot="pagination-ellipsis-label"]
33
- ) {
29
+ [data-nk="pagination"]
30
+ > [data-slot="pagination-list"]
31
+ > [data-slot="pagination-item"]
32
+ > [data-slot="pagination-ellipsis-label"]
33
+ ) {
34
34
  position: absolute;
35
35
  width: 1px;
36
36
  height: 1px;
@@ -46,19 +46,19 @@
46
46
 
47
47
  @layer nitro-kit.compound {
48
48
  :where(
49
- [data-nk="pagination"]
50
- > [data-slot="pagination-list"]
51
- > [data-slot="pagination-item"]
52
- > [data-slot="pagination-page"],
53
- [data-nk="pagination"]
54
- > [data-slot="pagination-list"]
55
- > [data-slot="pagination-item"]
56
- > [data-slot="pagination-current"],
57
- [data-nk="pagination"]
58
- > [data-slot="pagination-list"]
59
- > [data-slot="pagination-item"]
60
- > [data-slot="pagination-ellipsis"]
61
- ) {
49
+ [data-nk="pagination"]
50
+ > [data-slot="pagination-list"]
51
+ > [data-slot="pagination-item"]
52
+ > [data-slot="pagination-page"],
53
+ [data-nk="pagination"]
54
+ > [data-slot="pagination-list"]
55
+ > [data-slot="pagination-item"]
56
+ > [data-slot="pagination-current"],
57
+ [data-nk="pagination"]
58
+ > [data-slot="pagination-list"]
59
+ > [data-slot="pagination-item"]
60
+ > [data-slot="pagination-ellipsis"]
61
+ ) {
62
62
  min-inline-size: var(--nk-control-height-md);
63
63
  min-block-size: var(--nk-control-height-md);
64
64
  padding-inline: calc(var(--nk-space) * 2);
@@ -66,24 +66,24 @@
66
66
  }
67
67
 
68
68
  :where(
69
- [data-nk="pagination"]
70
- > [data-slot="pagination-list"]
71
- > [data-slot="pagination-item"]
72
- > [data-slot="pagination-page"]
73
- ) {
69
+ [data-nk="pagination"]
70
+ > [data-slot="pagination-list"]
71
+ > [data-slot="pagination-item"]
72
+ > [data-slot="pagination-page"]
73
+ ) {
74
74
  justify-content: center;
75
75
  }
76
76
 
77
77
  :where(
78
- [data-nk="pagination"]
79
- > [data-slot="pagination-list"]
80
- > [data-slot="pagination-item"]
81
- > [data-slot="pagination-page"][aria-current="page"],
82
- [data-nk="pagination"]
83
- > [data-slot="pagination-list"]
84
- > [data-slot="pagination-item"]
85
- > [data-slot="pagination-current"]
86
- ) {
78
+ [data-nk="pagination"]
79
+ > [data-slot="pagination-list"]
80
+ > [data-slot="pagination-item"]
81
+ > [data-slot="pagination-page"][aria-current="page"],
82
+ [data-nk="pagination"]
83
+ > [data-slot="pagination-list"]
84
+ > [data-slot="pagination-item"]
85
+ > [data-slot="pagination-current"]
86
+ ) {
87
87
  color: var(--nk-color-foreground);
88
88
  cursor: default;
89
89
  background: var(--nk-color-muted);
@@ -92,11 +92,11 @@
92
92
  }
93
93
 
94
94
  :where(
95
- [data-nk="pagination"]
96
- > [data-slot="pagination-list"]
97
- > [data-slot="pagination-item"]
98
- > [data-slot="pagination-current"]
99
- ) {
95
+ [data-nk="pagination"]
96
+ > [data-slot="pagination-list"]
97
+ > [data-slot="pagination-item"]
98
+ > [data-slot="pagination-current"]
99
+ ) {
100
100
  display: inline-grid;
101
101
  place-items: center;
102
102
  font-size: var(--nk-text-sm);
@@ -106,14 +106,23 @@
106
106
  }
107
107
 
108
108
  :where(
109
- [data-nk="pagination"]
110
- > [data-slot="pagination-list"]
111
- > [data-slot="pagination-item"]
112
- > [data-slot="pagination-ellipsis"]
113
- ) {
109
+ [data-nk="pagination"]
110
+ > [data-slot="pagination-list"]
111
+ > [data-slot="pagination-item"]
112
+ > [data-slot="pagination-ellipsis"]
113
+ ) {
114
114
  display: inline-grid;
115
115
  place-items: center;
116
116
  color: var(--nk-color-muted-foreground);
117
117
  user-select: none;
118
118
  }
119
119
  }
120
+
121
+ @layer nitro-kit.state {
122
+ @media (width < 48rem) {
123
+ :where([data-nk="pagination"] > [data-slot="pagination-list"]) {
124
+ inline-size: auto;
125
+ flex-wrap: wrap;
126
+ }
127
+ }
128
+ }
data/src/stylesheets/nitro_kit/components/pagination_bar.css CHANGED
@@ -17,24 +17,24 @@
17
17
  }
18
18
 
19
19
  :where(
20
- [data-nk="pagination-bar"]
21
- > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
22
- ) {
20
+ [data-nk="pagination-bar"]
21
+ > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
22
+ ) {
23
23
  margin-inline-start: auto;
24
24
  }
25
25
  }
26
26
 
27
27
  @layer nitro-kit.state {
28
- @media (max-width: 48rem) {
28
+ @media (width < 48rem) {
29
29
  :where([data-nk="pagination-bar"]) {
30
30
  flex-direction: column;
31
31
  align-items: stretch;
32
32
  }
33
33
 
34
34
  :where(
35
- [data-nk="pagination-bar"]
36
- > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
37
- ) {
35
+ [data-nk="pagination-bar"]
36
+ > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
37
+ ) {
38
38
  margin-inline-start: 0;
39
39
  }
40
40
  }
data/src/stylesheets/nitro_kit/components/palette.css CHANGED
@@ -1,19 +1,19 @@
1
1
  @layer nitro-kit.variant {
2
2
  :where(
3
- [data-nk="badge"][data-color="zinc"],
4
- [data-nk="badge"][data-color="neutral"],
5
- [data-nk="alert"][data-variant="default"]
6
- ) {
3
+ [data-nk="badge"][data-color="zinc"],
4
+ [data-nk="badge"][data-color="neutral"],
5
+ [data-nk="alert"][data-variant="default"]
6
+ ) {
7
7
  --_nk-palette-light: oklch(37% 0.013 285.805);
8
8
  --_nk-palette-dark: oklch(92% 0.004 286.32);
9
9
  --_nk-palette-tint: oklch(70.5% 0.015 286.067);
10
10
  }
11
11
 
12
12
  :where(
13
- [data-nk="badge"][data-color="red"],
14
- [data-nk="badge"][data-color="danger"],
15
- [data-nk="alert"][data-variant="error"]
16
- ) {
13
+ [data-nk="badge"][data-color="red"],
14
+ [data-nk="badge"][data-color="danger"],
15
+ [data-nk="alert"][data-variant="error"]
16
+ ) {
17
17
  --_nk-palette-light: oklch(50.5% 0.213 27.518);
18
18
  --_nk-palette-dark: oklch(88.5% 0.062 18.334);
19
19
  --_nk-palette-tint: oklch(70.4% 0.191 22.216);
@@ -24,10 +24,10 @@
24
24
  --_nk-palette-tint: oklch(75% 0.183 55.934);
25
25
  }
26
26
  :where(
27
- [data-nk="badge"][data-color="amber"],
28
- [data-nk="badge"][data-color="warning"],
29
- [data-nk="alert"][data-variant="warning"]
30
- ) {
27
+ [data-nk="badge"][data-color="amber"],
28
+ [data-nk="badge"][data-color="warning"],
29
+ [data-nk="alert"][data-variant="warning"]
30
+ ) {
31
31
  --_nk-palette-light: oklch(55% 0.163 48.998);
32
32
  --_nk-palette-dark: oklch(92.4% 0.12 95.746);
33
33
  --_nk-palette-tint: oklch(82.8% 0.189 84.429);
@@ -43,10 +43,10 @@
43
43
  --_nk-palette-tint: oklch(84.1% 0.238 128.85);
44
44
  }
45
45
  :where(
46
- [data-nk="badge"][data-color="green"],
47
- [data-nk="badge"][data-color="success"],
48
- [data-nk="alert"][data-variant="success"]
49
- ) {
46
+ [data-nk="badge"][data-color="green"],
47
+ [data-nk="badge"][data-color="success"],
48
+ [data-nk="alert"][data-variant="success"]
49
+ ) {
50
50
  --_nk-palette-light: oklch(44.8% 0.119 151.328);
51
51
  --_nk-palette-dark: oklch(92.5% 0.084 155.995);
52
52
  --_nk-palette-tint: oklch(79.2% 0.209 151.711);
@@ -72,10 +72,10 @@
72
72
  --_nk-palette-tint: oklch(74.6% 0.16 232.661);
73
73
  }
74
74
  :where(
75
- [data-nk="badge"][data-color="blue"],
76
- [data-nk="badge"][data-color="info"],
77
- [data-nk="alert"][data-variant="info"]
78
- ) {
75
+ [data-nk="badge"][data-color="blue"],
76
+ [data-nk="badge"][data-color="info"],
77
+ [data-nk="alert"][data-variant="info"]
78
+ ) {
79
79
  --_nk-palette-light: oklch(42.4% 0.199 265.638);
80
80
  --_nk-palette-dark: oklch(88.2% 0.059 254.128);
81
81
  --_nk-palette-tint: oklch(70.7% 0.165 254.624);
data/src/stylesheets/nitro_kit/components/progressive_image.css CHANGED
@@ -17,15 +17,17 @@
17
17
  pointer-events: none;
18
18
  content: "";
19
19
  border-radius: inherit;
20
- outline: 1px solid oklch(0 0 0 / 10%);
21
- outline-offset: -1px;
20
+ outline: var(--nk-border-width) solid
21
+ color-mix(in oklab, var(--nk-color-foreground) 10%, transparent);
22
+ outline-offset: calc(var(--nk-border-width) * -1);
22
23
  }
23
24
 
24
25
  :where(
25
- [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"],
26
- [data-nk="progressive-image"] > [data-slot="progressive-image-image"],
27
- [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
28
- ) {
26
+ [data-nk="progressive-image"]
27
+ > [data-slot="progressive-image-placeholder"],
28
+ [data-nk="progressive-image"] > [data-slot="progressive-image-image"],
29
+ [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
30
+ ) {
29
31
  grid-area: 1 / 1;
30
32
  inline-size: 100%;
31
33
  block-size: 100%;
@@ -33,15 +35,17 @@
33
35
  }
34
36
 
35
37
  :where(
36
- [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"],
37
- [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
38
- ) {
38
+ [data-nk="progressive-image"]
39
+ > [data-slot="progressive-image-placeholder"],
40
+ [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
41
+ ) {
39
42
  object-fit: cover;
40
43
  }
41
44
 
42
45
  :where(
43
- [data-nk="progressive-image"] > [data-slot="progressive-image-placeholder"]
44
- ) {
46
+ [data-nk="progressive-image"]
47
+ > [data-slot="progressive-image-placeholder"]
48
+ ) {
45
49
  z-index: 1;
46
50
  filter: blur(1rem);
47
51
  opacity: 0;
@@ -49,15 +53,15 @@
49
53
  }
50
54
 
51
55
  :where(
52
- [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
53
- ) {
56
+ [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
57
+ ) {
54
58
  z-index: 2;
55
59
  opacity: 1;
56
60
  }
57
61
 
58
62
  :where(
59
- [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
60
- ) {
63
+ [data-nk="progressive-image"] > [data-slot="progressive-image-fallback"]
64
+ ) {
61
65
  display: grid;
62
66
  min-block-size: 10rem;
63
67
  padding: calc(var(--nk-space) * 6);
@@ -71,68 +75,54 @@
71
75
 
72
76
  @layer nitro-kit.state {
73
77
  :where(
74
- [data-nk="progressive-image"][data-enhanced="true"]
75
- > [data-slot="progressive-image-placeholder"],
76
- [data-nk="progressive-image"][data-enhanced="true"]
77
- > [data-slot="progressive-image-image"]
78
- ) {
78
+ [data-nk="progressive-image"][data-enhanced="true"]
79
+ > [data-slot="progressive-image-placeholder"],
80
+ [data-nk="progressive-image"][data-enhanced="true"]
81
+ > [data-slot="progressive-image-image"]
82
+ ) {
79
83
  transition: opacity var(--nk-duration-slow) var(--nk-ease);
80
84
  }
81
85
 
82
86
  :where(
83
- [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
84
- > [data-slot="progressive-image-placeholder"]
85
- ) {
87
+ [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
88
+ > [data-slot="progressive-image-placeholder"]
89
+ ) {
86
90
  opacity: 1;
87
91
  }
88
92
 
89
93
  :where(
90
- [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
91
- > [data-slot="progressive-image-image"]
92
- ) {
94
+ [data-nk="progressive-image"][data-enhanced="true"][data-state="loading"]
95
+ > [data-slot="progressive-image-image"]
96
+ ) {
93
97
  opacity: 0;
94
98
  }
95
99
 
96
100
  :where(
97
- [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
98
- > [data-slot="progressive-image-image"]
99
- ) {
101
+ [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
102
+ > [data-slot="progressive-image-image"]
103
+ ) {
100
104
  opacity: 1;
101
105
  }
102
106
 
103
107
  :where(
104
- [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
105
- > [data-slot="progressive-image-placeholder"],
106
- [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
107
- > [data-slot="progressive-image-placeholder"],
108
- [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
109
- > [data-slot="progressive-image-image"]
110
- ) {
108
+ [data-nk="progressive-image"][data-enhanced="true"][data-state="loaded"]
109
+ > [data-slot="progressive-image-placeholder"],
110
+ [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
111
+ > [data-slot="progressive-image-placeholder"],
112
+ [data-nk="progressive-image"][data-enhanced="true"][data-state="error"]
113
+ > [data-slot="progressive-image-image"]
114
+ ) {
111
115
  opacity: 0;
112
116
  }
113
117
  }
114
118
 
115
- @layer nitro-kit.state {
116
- :where([data-theme="dark"] [data-nk="progressive-image"])::after {
117
- outline-color: oklch(1 0 0 / 10%);
118
- }
119
-
120
- @media (prefers-color-scheme: dark) {
121
- :where(
122
- :root:not([data-theme="light"]) [data-nk="progressive-image"]
123
- )::after {
124
- outline-color: oklch(1 0 0 / 10%);
125
- }
126
- }
127
- }
128
-
129
119
  @media (prefers-reduced-motion: reduce) {
130
120
  @layer nitro-kit.state {
131
121
  :where(
132
- [data-nk="progressive-image"]
133
- > [data-slot="progressive-image-placeholder"],
134
- [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
135
- ) {
122
+ [data-nk="progressive-image"]
123
+ > [data-slot="progressive-image-placeholder"],
124
+ [data-nk="progressive-image"] > [data-slot="progressive-image-image"]
125
+ ) {
136
126
  transition-duration: 0s;
137
127
  }
138
128
  }
data/src/stylesheets/nitro_kit/components/radio_button.css CHANGED
@@ -16,25 +16,27 @@
16
16
  }
17
17
 
18
18
  :where(
19
- [data-nk="radio-button"][data-size="lg"] > [data-slot="radio-button-label"]
20
- ) {
19
+ [data-nk="radio-button"][data-size="lg"]
20
+ > [data-slot="radio-button-label"]
21
+ ) {
21
22
  grid-template-columns: 1.5rem minmax(0, 1fr);
22
23
  }
23
24
 
24
25
  :where(
25
- [data-nk="radio-button"] [data-slot="radio-button-control"],
26
- [data-nk="radio-button"] [data-slot="radio-button-indicator"]
27
- ) {
26
+ [data-nk="radio-button"] [data-slot="radio-button-control"],
27
+ [data-nk="radio-button"] [data-slot="radio-button-indicator"]
28
+ ) {
28
29
  grid-area: 1 / 1;
29
30
  inline-size: 1.125rem;
30
31
  block-size: 1.125rem;
31
32
  }
32
33
 
33
34
  :where(
34
- [data-nk="radio-button"][data-size="lg"] [data-slot="radio-button-control"],
35
- [data-nk="radio-button"][data-size="lg"]
36
- [data-slot="radio-button-indicator"]
37
- ) {
35
+ [data-nk="radio-button"][data-size="lg"]
36
+ [data-slot="radio-button-control"],
37
+ [data-nk="radio-button"][data-size="lg"]
38
+ [data-slot="radio-button-indicator"]
39
+ ) {
38
40
  inline-size: 1.5rem;
39
41
  block-size: 1.5rem;
40
42
  }
@@ -67,43 +69,48 @@
67
69
 
68
70
  :where([data-nk="radio-button"] [data-slot="radio-button-label-text"]) {
69
71
  display: block;
70
- }
71
-
72
- :where([data-nk="radio-button"] [data-slot="radio-button-content"]) {
73
72
  grid-column: 2;
74
73
  }
75
74
 
76
- :where([data-nk="radio-button"] [data-slot="radio-button-description"]) {
75
+ :where([data-nk="radio-button"] > [data-slot="radio-button-description"]) {
77
76
  display: block;
78
77
  margin-block-start: var(--nk-space);
78
+ padding-inline-start: calc(1.125rem + (var(--nk-space) * 2));
79
79
  color: var(--nk-color-muted-foreground);
80
80
  font-size: var(--nk-text-sm);
81
81
  text-wrap: pretty;
82
82
  }
83
+
84
+ :where(
85
+ [data-nk="radio-button"][data-size="lg"]
86
+ > [data-slot="radio-button-description"]
87
+ ) {
88
+ padding-inline-start: calc(1.5rem + (var(--nk-space) * 2));
89
+ }
83
90
  }
84
91
 
85
92
  @layer nitro-kit.state {
86
93
  :where(
87
- [data-nk="radio-button"]
88
- [data-slot="radio-button-control"]:checked
89
- + [data-slot="radio-button-indicator"]
90
- ) {
94
+ [data-nk="radio-button"]
95
+ [data-slot="radio-button-control"]:checked
96
+ + [data-slot="radio-button-indicator"]
97
+ ) {
91
98
  border-color: var(--nk-color-primary);
92
99
  }
93
100
 
94
101
  :where(
95
- [data-nk="radio-button"]
96
- [data-slot="radio-button-control"]:checked
97
- + [data-slot="radio-button-indicator"]
98
- )::after {
102
+ [data-nk="radio-button"]
103
+ [data-slot="radio-button-control"]:checked
104
+ + [data-slot="radio-button-indicator"]
105
+ )::after {
99
106
  opacity: 1;
100
107
  }
101
108
 
102
109
  :where(
103
- [data-nk="radio-button"]
104
- [data-slot="radio-button-control"]:focus-visible
105
- + [data-slot="radio-button-indicator"]
106
- ) {
110
+ [data-nk="radio-button"]
111
+ [data-slot="radio-button-control"]:focus-visible
112
+ + [data-slot="radio-button-indicator"]
113
+ ) {
107
114
  outline: var(--nk-focus-width) solid var(--nk-color-focus);
108
115
  outline-offset: var(--nk-focus-offset);
109
116
  }
@@ -118,10 +125,10 @@
118
125
  the danger border stands down. `:user-valid` never matches before the user
119
126
  touches the control, so an untouched invalid radio keeps its border. */
120
127
  :where(
121
- [data-nk="radio-button"]
122
- [data-slot="radio-button-control"][aria-invalid="true"]:not(:user-valid)
123
- + [data-slot="radio-button-indicator"]
124
- ) {
128
+ [data-nk="radio-button"]
129
+ [data-slot="radio-button-control"][aria-invalid="true"]:not(:user-valid)
130
+ + [data-slot="radio-button-indicator"]
131
+ ) {
125
132
  border-color: var(--nk-color-danger);
126
133
  }
127
134
  }