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/accordion.css CHANGED
@@ -13,13 +13,13 @@
13
13
  }
14
14
 
15
15
  :where(
16
- [data-nk="accordion"]
17
- > [data-slot="accordion-item"]
18
- > [data-slot="accordion-trigger"]
19
- ) {
16
+ [data-nk="accordion"]
17
+ > [data-slot="accordion-item"]
18
+ > [data-slot="accordion-trigger"]
19
+ ) {
20
20
  display: flex;
21
- width: 100%;
22
- min-height: 2.75rem;
21
+ inline-size: 100%;
22
+ min-block-size: var(--nk-control-height-lg);
23
23
  align-items: center;
24
24
  justify-content: space-between;
25
25
  gap: calc(var(--nk-space) * 3);
@@ -35,31 +35,31 @@
35
35
  }
36
36
 
37
37
  :where(
38
- [data-nk="accordion"]
39
- > [data-slot="accordion-item"]
40
- > [data-slot="accordion-trigger"]
41
- )::-webkit-details-marker {
38
+ [data-nk="accordion"]
39
+ > [data-slot="accordion-item"]
40
+ > [data-slot="accordion-trigger"]
41
+ )::-webkit-details-marker {
42
42
  display: none;
43
43
  }
44
44
 
45
45
  :where(
46
- [data-nk="accordion"]
47
- > [data-slot="accordion-item"]
48
- > [data-slot="accordion-trigger"]
49
- > [data-slot="accordion-label"]
50
- ) {
46
+ [data-nk="accordion"]
47
+ > [data-slot="accordion-item"]
48
+ > [data-slot="accordion-trigger"]
49
+ > [data-slot="accordion-label"]
50
+ ) {
51
51
  flex: 1;
52
52
  }
53
53
 
54
54
  :where(
55
- [data-nk="accordion"]
56
- > [data-slot="accordion-item"]
57
- > [data-slot="accordion-trigger"]
58
- > [data-slot="accordion-icon"]
59
- ) {
55
+ [data-nk="accordion"]
56
+ > [data-slot="accordion-item"]
57
+ > [data-slot="accordion-trigger"]
58
+ > [data-slot="accordion-icon"]
59
+ ) {
60
60
  flex: none;
61
- width: 1rem;
62
- height: 1rem;
61
+ inline-size: var(--nk-icon-size-sm);
62
+ block-size: var(--nk-icon-size-sm);
63
63
  color: var(--nk-color-muted-foreground);
64
64
  transition:
65
65
  color var(--nk-duration-fast) var(--nk-ease),
@@ -67,19 +67,19 @@
67
67
  }
68
68
 
69
69
  :where(
70
- [data-nk="accordion"]
71
- > [data-slot="accordion-item"][open]
72
- > [data-slot="accordion-trigger"]
73
- > [data-slot="accordion-icon"]
74
- ) {
70
+ [data-nk="accordion"]
71
+ > [data-slot="accordion-item"][open]
72
+ > [data-slot="accordion-trigger"]
73
+ > [data-slot="accordion-icon"]
74
+ ) {
75
75
  transform: rotate(180deg);
76
76
  }
77
77
 
78
78
  :where(
79
- [data-nk="accordion"]
80
- > [data-slot="accordion-item"]
81
- > [data-slot="accordion-content"]
82
- ) {
79
+ [data-nk="accordion"]
80
+ > [data-slot="accordion-item"]
81
+ > [data-slot="accordion-content"]
82
+ ) {
83
83
  padding-block-end: calc(var(--nk-space) * 4);
84
84
  line-height: var(--nk-leading-normal);
85
85
  color: var(--nk-color-muted-foreground);
@@ -89,30 +89,30 @@
89
89
  @layer nitro-kit.state {
90
90
  @media (hover: hover) {
91
91
  :where(
92
- [data-nk="accordion"]
93
- > [data-slot="accordion-item"]
94
- > [data-slot="accordion-trigger"]:hover
95
- ) {
92
+ [data-nk="accordion"]
93
+ > [data-slot="accordion-item"]
94
+ > [data-slot="accordion-trigger"]:hover
95
+ ) {
96
96
  color: var(--nk-color-primary);
97
97
  }
98
98
  }
99
99
 
100
100
  :where(
101
- [data-nk="accordion"]
102
- > [data-slot="accordion-item"]
103
- > [data-slot="accordion-trigger"]:focus-visible
104
- ) {
101
+ [data-nk="accordion"]
102
+ > [data-slot="accordion-item"]
103
+ > [data-slot="accordion-trigger"]:focus-visible
104
+ ) {
105
105
  outline: var(--nk-focus-width) solid var(--nk-color-focus);
106
106
  outline-offset: var(--nk-focus-offset);
107
107
  }
108
108
 
109
109
  @media (prefers-reduced-motion: reduce) {
110
110
  :where(
111
- [data-nk="accordion"]
112
- > [data-slot="accordion-item"]
113
- > [data-slot="accordion-trigger"]
114
- > [data-slot="accordion-icon"]
115
- ) {
111
+ [data-nk="accordion"]
112
+ > [data-slot="accordion-item"]
113
+ > [data-slot="accordion-trigger"]
114
+ > [data-slot="accordion-icon"]
115
+ ) {
116
116
  transition-duration: 0.01ms;
117
117
  }
118
118
  }
data/src/stylesheets/nitro_kit/components/alert.css CHANGED
@@ -3,11 +3,10 @@
3
3
  --_nk-alert-background: var(--nk-color-surface);
4
4
  --_nk-alert-border: var(--nk-color-border);
5
5
  --_nk-alert-foreground: var(--nk-color-foreground);
6
- --_nk-alert-tint-strength: 12%;
7
6
 
8
7
  position: relative;
9
8
  display: grid;
10
- width: 100%;
9
+ inline-size: 100%;
11
10
  gap: calc(var(--nk-space) * 2);
12
11
  padding: calc(var(--nk-space) * 4);
13
12
  font-size: var(--nk-text-sm);
@@ -20,8 +19,8 @@
20
19
  }
21
20
 
22
21
  :where([data-nk="alert"] > [data-slot="alert-title"]) {
23
- font-size: var(--nk-text-base);
24
- font-weight: var(--nk-font-weight-semibold);
22
+ font-size: var(--nk-title-compact-size);
23
+ font-weight: var(--nk-title-compact-weight);
25
24
  line-height: var(--nk-leading-tight);
26
25
  text-wrap: balance;
27
26
  }
@@ -30,53 +29,45 @@
30
29
  grid-template-columns: auto minmax(0, 1fr);
31
30
  }
32
31
 
32
+ /* Centered on the title first line, whatever size the title role
33
+ resolves to, instead of a hand-tuned nudge for one size. */
33
34
  :where([data-nk="alert"] > [data-slot="alert-icon"]) {
35
+ --_nk-alert-icon-size: var(--nk-icon-size-md);
36
+
34
37
  grid-row: 1 / -1;
35
- width: 1.25rem;
36
- height: 1.25rem;
37
- margin-block-start: 0.0625rem;
38
+ inline-size: var(--_nk-alert-icon-size);
39
+ block-size: var(--_nk-alert-icon-size);
40
+ margin-block-start: calc(
41
+ (
42
+ var(--nk-title-compact-size) * var(--nk-leading-tight) -
43
+ var(--_nk-alert-icon-size)
44
+ ) / 2
45
+ );
38
46
  }
39
47
 
40
48
  :where(
41
- [data-nk="alert"]:has(> [data-slot="alert-icon"])
42
- > [data-slot="alert-title"],
43
- [data-nk="alert"]:has(> [data-slot="alert-icon"])
44
- > [data-slot="alert-description"]
45
- ) {
49
+ [data-nk="alert"]:has(> [data-slot="alert-icon"])
50
+ > [data-slot="alert-title"],
51
+ [data-nk="alert"]:has(> [data-slot="alert-icon"])
52
+ > [data-slot="alert-description"]
53
+ ) {
46
54
  grid-column: 2;
47
55
  }
48
56
 
49
57
  :where([data-nk="alert"] > [data-slot="alert-description"]) {
50
- max-width: var(--nk-content-lg);
58
+ max-inline-size: var(--nk-content-lg);
51
59
  color: var(--_nk-alert-foreground);
52
60
  text-wrap: pretty;
53
61
  }
54
62
  }
55
63
 
56
64
  @layer nitro-kit.variant {
65
+ /* Colour, tint strength, and appearance switching all come from the shared
66
+ semantic palette, so an Alert and a Toast of the same variant render
67
+ identically. */
57
68
  :where([data-nk="alert"][data-variant]) {
58
- --_nk-alert-background: color-mix(
59
- in oklab,
60
- var(--_nk-palette-tint) var(--_nk-alert-tint-strength),
61
- transparent
62
- );
63
- --_nk-alert-border: color-mix(
64
- in oklab,
65
- var(--_nk-palette-tint) 45%,
66
- transparent
67
- );
68
- --_nk-alert-foreground: var(--_nk-palette-light);
69
- }
70
-
71
- :where([data-theme="dark"] [data-nk="alert"][data-variant]) {
72
- --_nk-alert-foreground: var(--_nk-palette-dark);
73
- --_nk-alert-tint-strength: 20%;
74
- }
75
-
76
- @media (prefers-color-scheme: dark) {
77
- :where(:root:not([data-theme]) [data-nk="alert"][data-variant]) {
78
- --_nk-alert-foreground: var(--_nk-palette-dark);
79
- --_nk-alert-tint-strength: 20%;
80
- }
69
+ --_nk-alert-background: var(--_nk-semantic-surface);
70
+ --_nk-alert-border: var(--_nk-semantic-border);
71
+ --_nk-alert-foreground: var(--_nk-semantic-content);
81
72
  }
82
73
  }
data/src/stylesheets/nitro_kit/components/app_navigation.css CHANGED
@@ -12,9 +12,9 @@
12
12
  }
13
13
 
14
14
  :where(
15
- [data-nk="app-navigation"] > [data-slot="app-navigation-header"],
16
- [data-nk="app-navigation"] > [data-slot="app-navigation-footer"]
17
- ) {
15
+ [data-nk="app-navigation"] > [data-slot="app-navigation-header"],
16
+ [data-nk="app-navigation"] > [data-slot="app-navigation-footer"]
17
+ ) {
18
18
  flex: 0 0 auto;
19
19
  }
20
20
 
@@ -44,9 +44,9 @@
44
44
  }
45
45
 
46
46
  :where(
47
- [data-nk="app-navigation"] [data-slot="app-navigation-section"],
48
- [data-nk="app-navigation"] [data-slot="app-navigation-section-list"]
49
- ) {
47
+ [data-nk="app-navigation"] [data-slot="app-navigation-section"],
48
+ [data-nk="app-navigation"] [data-slot="app-navigation-section-list"]
49
+ ) {
50
50
  display: flex;
51
51
  flex: 0 0 auto;
52
52
  flex-direction: column;
@@ -55,8 +55,8 @@
55
55
  }
56
56
 
57
57
  :where(
58
- [data-nk="app-navigation"] [data-slot="app-navigation-section-label"]
59
- ) {
58
+ [data-nk="app-navigation"] [data-slot="app-navigation-section-label"]
59
+ ) {
60
60
  display: block;
61
61
  margin: calc(var(--nk-space) * 4) calc(var(--nk-space) * 2) var(--nk-space);
62
62
  color: var(--nk-color-muted-foreground);
@@ -65,6 +65,58 @@
65
65
  line-height: var(--nk-leading-tight);
66
66
  }
67
67
 
68
+ /* A collapsible label is a row like the items around it: same height,
69
+ same inline padding, symmetric block margins, and the same hover
70
+ treatment, so the disclosure target is as easy to hit as a destination. */
71
+ :where(
72
+ [data-nk="app-navigation"]
73
+ summary[data-slot="app-navigation-section-label"]
74
+ ) {
75
+ display: flex;
76
+ gap: var(--nk-space);
77
+ align-items: center;
78
+ min-block-size: var(--nk-control-height-md);
79
+ margin: var(--nk-space) 0;
80
+ padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
81
+ list-style: none;
82
+ user-select: none;
83
+ cursor: pointer;
84
+ border-radius: var(--nk-radius-lg);
85
+ transition:
86
+ color var(--nk-duration-normal) var(--nk-ease),
87
+ background-color var(--nk-duration-normal) var(--nk-ease);
88
+ }
89
+
90
+ :where(
91
+ [data-nk="app-navigation"]
92
+ summary[data-slot="app-navigation-section-label"]::-webkit-details-marker
93
+ ) {
94
+ display: none;
95
+ }
96
+
97
+ :where([data-nk="app-navigation"] [data-slot="app-navigation-section-icon"]) {
98
+ flex: none;
99
+ inline-size: var(--nk-icon-size-xs);
100
+ block-size: var(--nk-icon-size-xs);
101
+ transition: transform var(--nk-duration-fast) var(--nk-ease);
102
+ }
103
+
104
+ :where(
105
+ [data-nk="app-navigation"]
106
+ [data-slot="app-navigation-section-disclosure"]:not([open])
107
+ [data-slot="app-navigation-section-icon"]
108
+ ) {
109
+ transform: rotate(-90deg);
110
+ }
111
+
112
+ @media (prefers-reduced-motion: reduce) {
113
+ :where(
114
+ [data-nk="app-navigation"] [data-slot="app-navigation-section-icon"]
115
+ ) {
116
+ transition-duration: 0.01ms;
117
+ }
118
+ }
119
+
68
120
  :where([data-nk="app-navigation"] [data-slot="app-navigation-item"]) {
69
121
  flex: 0 0 auto;
70
122
  min-inline-size: 0;
@@ -80,7 +132,7 @@
80
132
  font-weight: var(--nk-font-weight-medium);
81
133
  line-height: var(--nk-leading-tight);
82
134
  text-decoration: none;
83
- border-radius: var(--nk-radius-md);
135
+ border-radius: var(--nk-radius-lg);
84
136
  transition:
85
137
  color var(--nk-duration-normal) var(--nk-ease),
86
138
  background-color var(--nk-duration-normal) var(--nk-ease);
@@ -95,9 +147,10 @@
95
147
  }
96
148
 
97
149
  :where(
98
- [data-nk="app-navigation"] [data-slot="app-navigation-item-icon"],
99
- [data-nk="app-navigation"] [data-slot="app-navigation-item-badge"]
100
- ) {
150
+ [data-nk="app-navigation"] [data-slot="app-navigation-item-icon"],
151
+ [data-nk="app-navigation"] [data-slot="app-navigation-item-icon-end"],
152
+ [data-nk="app-navigation"] [data-slot="app-navigation-item-badge"]
153
+ ) {
101
154
  flex: 0 0 auto;
102
155
  }
103
156
 
@@ -124,26 +177,45 @@
124
177
 
125
178
  @layer nitro-kit.state {
126
179
  :where(
127
- [data-nk="app-navigation"]
128
- [data-slot="app-navigation-item-link"][data-state="current"]
129
- ) {
180
+ [data-nk="app-navigation"]
181
+ [data-slot="app-navigation-item-link"][aria-current]
182
+ ) {
130
183
  color: var(--nk-app-shell-sidebar-accent-foreground);
131
184
  background: var(--nk-app-shell-sidebar-accent);
132
185
  }
133
186
 
134
187
  @media (hover: hover) {
135
188
  :where(
136
- [data-nk="app-navigation"] [data-slot="app-navigation-item-link"]:hover
137
- ) {
189
+ [data-nk="app-navigation"] [data-slot="app-navigation-item-link"]:hover,
190
+ [data-nk="app-navigation"]
191
+ summary[data-slot="app-navigation-section-label"]:hover
192
+ ) {
138
193
  color: var(--nk-app-shell-sidebar-accent-foreground);
139
194
  background: var(--nk-app-shell-sidebar-accent);
140
195
  }
141
196
  }
142
197
 
143
198
  :where(
144
- [data-nk="app-navigation"]
145
- [data-slot="app-navigation-item-link"]:focus-visible
146
- ) {
199
+ [data-nk="app-navigation"]
200
+ summary[data-slot="app-navigation-section-label"]:focus-visible
201
+ ) {
202
+ outline: var(--nk-focus-width) solid var(--nk-color-focus);
203
+ outline-offset: calc(var(--nk-focus-offset) * -1);
204
+ }
205
+
206
+ @media (prefers-reduced-motion: reduce) {
207
+ :where(
208
+ [data-nk="app-navigation"]
209
+ summary[data-slot="app-navigation-section-label"]
210
+ ) {
211
+ transition-duration: 0.01ms;
212
+ }
213
+ }
214
+
215
+ :where(
216
+ [data-nk="app-navigation"]
217
+ [data-slot="app-navigation-item-link"]:focus-visible
218
+ ) {
147
219
  outline: var(--nk-focus-width) solid var(--nk-color-focus);
148
220
  outline-offset: calc(var(--nk-focus-offset) * -1);
149
221
  }