@navikt/ds-css 7.15.0 → 7.16.0

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 (257) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/darkside/accordion.darkside.css +23 -23
  3. package/darkside/action-menu.darkside.css +21 -21
  4. package/darkside/alert.darkside.css +22 -22
  5. package/darkside/baseline/baseline.darkside.css +4 -4
  6. package/darkside/button.darkside.css +47 -47
  7. package/darkside/chat.darkside.css +20 -20
  8. package/darkside/chips.darkside.css +24 -24
  9. package/darkside/copybutton.darkside.css +1 -1
  10. package/darkside/date.darkside.css +33 -33
  11. package/darkside/dropdown.darkside.css +9 -9
  12. package/darkside/expansioncard.darkside.css +20 -20
  13. package/darkside/form/combobox.darkside.css +69 -69
  14. package/darkside/form/confirmation-panel.darkside.css +5 -5
  15. package/darkside/form/error-summary.darkside.css +8 -8
  16. package/darkside/form/fieldset.darkside.css +11 -11
  17. package/darkside/form/file-upload.darkside.css +26 -26
  18. package/darkside/form/form-progress.darkside.css +6 -6
  19. package/darkside/form/form-summary.darkside.css +15 -15
  20. package/darkside/form/form.darkside.css +8 -8
  21. package/darkside/form/radio-checkbox.darkside.css +80 -80
  22. package/darkside/form/search.darkside.css +30 -30
  23. package/darkside/form/select.darkside.css +11 -11
  24. package/darkside/form/switch.darkside.css +61 -61
  25. package/darkside/form/text-field.darkside.css +6 -6
  26. package/darkside/form/textarea.darkside.css +15 -15
  27. package/darkside/guide-panel.darkside.css +15 -15
  28. package/darkside/help-text.darkside.css +10 -10
  29. package/darkside/internalheader.darkside.css +9 -9
  30. package/darkside/link-panel.darkside.css +6 -6
  31. package/darkside/link.darkside.css +9 -9
  32. package/darkside/list.darkside.css +14 -14
  33. package/darkside/loader.darkside.css +21 -21
  34. package/darkside/modal.darkside.css +25 -25
  35. package/darkside/pagination.darkside.css +7 -7
  36. package/darkside/panel.darkside.css +2 -2
  37. package/darkside/popover.darkside.css +4 -4
  38. package/darkside/primitives/base.darkside.css +150 -150
  39. package/darkside/primitives/bleed.darkside.css +12 -12
  40. package/darkside/primitives/box.darkside.css +10 -10
  41. package/darkside/primitives/hgrid.darkside.css +13 -13
  42. package/darkside/primitives/page.darkside.css +12 -12
  43. package/darkside/primitives/responsive.darkside.css +10 -10
  44. package/darkside/primitives/stack.darkside.css +28 -28
  45. package/darkside/progress-bar.darkside.css +12 -12
  46. package/darkside/read-more.darkside.css +15 -15
  47. package/darkside/skeleton.darkside.css +10 -10
  48. package/darkside/stepper.darkside.css +38 -38
  49. package/darkside/table.darkside.css +69 -69
  50. package/darkside/tabs.darkside.css +23 -23
  51. package/darkside/tag.darkside.css +21 -21
  52. package/darkside/theme.darkside.css +1 -1
  53. package/darkside/timeline.darkside.css +60 -62
  54. package/darkside/toggle-group.darkside.css +13 -13
  55. package/darkside/tooltip.darkside.css +7 -7
  56. package/darkside/typography.darkside.css +47 -47
  57. package/dist/darkside/component/accordion.css +25 -25
  58. package/dist/darkside/component/accordion.min.css +1 -1
  59. package/dist/darkside/component/actionmenu.css +27 -27
  60. package/dist/darkside/component/actionmenu.min.css +1 -1
  61. package/dist/darkside/component/alert.css +20 -20
  62. package/dist/darkside/component/alert.min.css +1 -1
  63. package/dist/darkside/component/button.css +55 -55
  64. package/dist/darkside/component/button.min.css +1 -1
  65. package/dist/darkside/component/chat.css +16 -16
  66. package/dist/darkside/component/chat.min.css +1 -1
  67. package/dist/darkside/component/chips.css +33 -33
  68. package/dist/darkside/component/chips.min.css +1 -1
  69. package/dist/darkside/component/copybutton.css +1 -1
  70. package/dist/darkside/component/copybutton.min.css +1 -1
  71. package/dist/darkside/component/date.css +44 -44
  72. package/dist/darkside/component/date.min.css +1 -1
  73. package/dist/darkside/component/dropdown.css +13 -13
  74. package/dist/darkside/component/dropdown.min.css +1 -1
  75. package/dist/darkside/component/expansioncard.css +26 -26
  76. package/dist/darkside/component/expansioncard.min.css +1 -1
  77. package/dist/darkside/component/form.css +326 -326
  78. package/dist/darkside/component/form.min.css +1 -1
  79. package/dist/darkside/component/guidepanel.css +20 -20
  80. package/dist/darkside/component/guidepanel.min.css +1 -1
  81. package/dist/darkside/component/helptext.css +9 -9
  82. package/dist/darkside/component/helptext.min.css +1 -1
  83. package/dist/darkside/component/internalheader.css +13 -13
  84. package/dist/darkside/component/internalheader.min.css +1 -1
  85. package/dist/darkside/component/link.css +12 -12
  86. package/dist/darkside/component/link.min.css +1 -1
  87. package/dist/darkside/component/linkpanel.css +7 -7
  88. package/dist/darkside/component/linkpanel.min.css +1 -1
  89. package/dist/darkside/component/list.css +15 -15
  90. package/dist/darkside/component/list.min.css +1 -1
  91. package/dist/darkside/component/loader.css +17 -17
  92. package/dist/darkside/component/loader.min.css +1 -1
  93. package/dist/darkside/component/modal.css +25 -25
  94. package/dist/darkside/component/modal.min.css +1 -1
  95. package/dist/darkside/component/pagination.css +8 -8
  96. package/dist/darkside/component/pagination.min.css +1 -1
  97. package/dist/darkside/component/panel.css +2 -2
  98. package/dist/darkside/component/panel.min.css +1 -1
  99. package/dist/darkside/component/popover.css +4 -4
  100. package/dist/darkside/component/popover.min.css +1 -1
  101. package/dist/darkside/component/primitives.css +235 -235
  102. package/dist/darkside/component/primitives.min.css +1 -1
  103. package/dist/darkside/component/progressbar.css +11 -11
  104. package/dist/darkside/component/progressbar.min.css +1 -1
  105. package/dist/darkside/component/readmore.css +16 -16
  106. package/dist/darkside/component/readmore.min.css +1 -1
  107. package/dist/darkside/component/skeleton.css +12 -12
  108. package/dist/darkside/component/skeleton.min.css +1 -1
  109. package/dist/darkside/component/stepper.css +37 -37
  110. package/dist/darkside/component/stepper.min.css +1 -1
  111. package/dist/darkside/component/table.css +55 -55
  112. package/dist/darkside/component/table.min.css +1 -1
  113. package/dist/darkside/component/tabs.css +25 -25
  114. package/dist/darkside/component/tabs.min.css +1 -1
  115. package/dist/darkside/component/tag.css +18 -18
  116. package/dist/darkside/component/tag.min.css +1 -1
  117. package/dist/darkside/component/theme.css +4 -4
  118. package/dist/darkside/component/theme.min.css +1 -1
  119. package/dist/darkside/component/timeline.css +58 -59
  120. package/dist/darkside/component/timeline.min.css +1 -1
  121. package/dist/darkside/component/togglegroup.css +19 -19
  122. package/dist/darkside/component/togglegroup.min.css +1 -1
  123. package/dist/darkside/component/tooltip.css +9 -9
  124. package/dist/darkside/component/tooltip.min.css +1 -1
  125. package/dist/darkside/component/typography.css +48 -48
  126. package/dist/darkside/component/typography.min.css +1 -1
  127. package/dist/darkside/components.css +1265 -1266
  128. package/dist/darkside/components.min.css +1 -1
  129. package/dist/darkside/global/baseline.css +3 -3
  130. package/dist/darkside/global/baseline.min.css +1 -1
  131. package/dist/darkside/global/tokens.css +1 -1
  132. package/dist/darkside/global/tokens.min.css +1 -1
  133. package/dist/darkside/index.css +1269 -1270
  134. package/dist/darkside/index.min.css +1 -1
  135. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/accordion.css +25 -25
  136. package/dist/darkside/version/7.16.0/component/accordion.min.css +1 -0
  137. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/actionmenu.css +27 -27
  138. package/dist/darkside/version/7.16.0/component/actionmenu.min.css +1 -0
  139. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/alert.css +20 -20
  140. package/dist/darkside/version/7.16.0/component/alert.min.css +1 -0
  141. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/button.css +55 -55
  142. package/dist/darkside/version/7.16.0/component/button.min.css +1 -0
  143. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/chat.css +16 -16
  144. package/dist/darkside/version/7.16.0/component/chat.min.css +1 -0
  145. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/chips.css +33 -33
  146. package/dist/darkside/version/7.16.0/component/chips.min.css +1 -0
  147. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/copybutton.css +1 -1
  148. package/dist/darkside/version/7.16.0/component/copybutton.min.css +1 -0
  149. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/date.css +44 -44
  150. package/dist/darkside/version/7.16.0/component/date.min.css +1 -0
  151. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/dropdown.css +13 -13
  152. package/dist/darkside/version/7.16.0/component/dropdown.min.css +1 -0
  153. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/expansioncard.css +26 -26
  154. package/dist/darkside/version/7.16.0/component/expansioncard.min.css +1 -0
  155. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/form.css +326 -326
  156. package/dist/darkside/version/7.16.0/component/form.min.css +1 -0
  157. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/guidepanel.css +20 -20
  158. package/dist/darkside/version/7.16.0/component/guidepanel.min.css +1 -0
  159. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/helptext.css +9 -9
  160. package/dist/darkside/version/7.16.0/component/helptext.min.css +1 -0
  161. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/internalheader.css +13 -13
  162. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/internalheader.min.css +1 -1
  163. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/link.css +12 -12
  164. package/dist/darkside/version/7.16.0/component/link.min.css +1 -0
  165. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/linkpanel.css +7 -7
  166. package/dist/darkside/version/7.16.0/component/linkpanel.min.css +1 -0
  167. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/list.css +15 -15
  168. package/dist/darkside/version/7.16.0/component/list.min.css +1 -0
  169. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/loader.css +17 -17
  170. package/dist/darkside/version/7.16.0/component/loader.min.css +1 -0
  171. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/modal.css +25 -25
  172. package/dist/darkside/version/7.16.0/component/modal.min.css +1 -0
  173. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/pagination.css +8 -8
  174. package/dist/darkside/version/7.16.0/component/pagination.min.css +1 -0
  175. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/panel.css +2 -2
  176. package/dist/darkside/version/7.16.0/component/panel.min.css +1 -0
  177. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/popover.css +4 -4
  178. package/dist/darkside/version/7.16.0/component/popover.min.css +1 -0
  179. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/primitives.css +235 -235
  180. package/dist/darkside/version/7.16.0/component/primitives.min.css +1 -0
  181. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/progressbar.css +11 -11
  182. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/progressbar.min.css +1 -1
  183. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/readmore.css +16 -16
  184. package/dist/darkside/version/7.16.0/component/readmore.min.css +1 -0
  185. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/skeleton.css +12 -12
  186. package/dist/darkside/version/7.16.0/component/skeleton.min.css +1 -0
  187. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/stepper.css +37 -37
  188. package/dist/darkside/version/7.16.0/component/stepper.min.css +1 -0
  189. package/dist/darkside/version/7.16.0/component/table.css +254 -0
  190. package/dist/darkside/version/7.16.0/component/table.min.css +1 -0
  191. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/tabs.css +25 -25
  192. package/dist/darkside/version/7.16.0/component/tabs.min.css +1 -0
  193. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/tag.css +18 -18
  194. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/tag.min.css +1 -1
  195. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/theme.css +4 -4
  196. package/dist/darkside/version/7.16.0/component/theme.min.css +1 -0
  197. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/timeline.css +58 -59
  198. package/dist/darkside/version/7.16.0/component/timeline.min.css +1 -0
  199. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/togglegroup.css +19 -19
  200. package/dist/darkside/version/7.16.0/component/togglegroup.min.css +1 -0
  201. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/tooltip.css +9 -9
  202. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/tooltip.min.css +1 -1
  203. package/dist/darkside/version/{7.15.0 → 7.16.0}/component/typography.css +48 -48
  204. package/dist/darkside/version/7.16.0/component/typography.min.css +1 -0
  205. package/dist/darkside/version/{7.15.0 → 7.16.0}/components.css +1265 -1266
  206. package/dist/darkside/version/7.16.0/components.min.css +1 -0
  207. package/dist/darkside/version/{7.15.0 → 7.16.0}/global/baseline.css +3 -3
  208. package/dist/darkside/version/{7.15.0 → 7.16.0}/global/baseline.min.css +1 -1
  209. package/dist/darkside/version/{7.15.0 → 7.16.0}/global/tokens.css +1 -1
  210. package/dist/darkside/version/{7.15.0 → 7.16.0}/global/tokens.min.css +1 -1
  211. package/dist/darkside/version/{7.15.0 → 7.16.0}/index.css +1269 -1270
  212. package/dist/darkside/version/7.16.0/index.min.css +1 -0
  213. package/dist/global/tokens.css +1 -1
  214. package/dist/global/tokens.min.css +1 -1
  215. package/dist/index.css +1 -1
  216. package/dist/index.min.css +1 -1
  217. package/package.json +2 -2
  218. package/dist/darkside/version/7.15.0/component/accordion.min.css +0 -1
  219. package/dist/darkside/version/7.15.0/component/actionmenu.min.css +0 -1
  220. package/dist/darkside/version/7.15.0/component/alert.min.css +0 -1
  221. package/dist/darkside/version/7.15.0/component/button.min.css +0 -1
  222. package/dist/darkside/version/7.15.0/component/chat.min.css +0 -1
  223. package/dist/darkside/version/7.15.0/component/chips.min.css +0 -1
  224. package/dist/darkside/version/7.15.0/component/copybutton.min.css +0 -1
  225. package/dist/darkside/version/7.15.0/component/date.min.css +0 -1
  226. package/dist/darkside/version/7.15.0/component/dropdown.min.css +0 -1
  227. package/dist/darkside/version/7.15.0/component/expansioncard.min.css +0 -1
  228. package/dist/darkside/version/7.15.0/component/form.min.css +0 -1
  229. package/dist/darkside/version/7.15.0/component/guidepanel.min.css +0 -1
  230. package/dist/darkside/version/7.15.0/component/helptext.min.css +0 -1
  231. package/dist/darkside/version/7.15.0/component/link.min.css +0 -1
  232. package/dist/darkside/version/7.15.0/component/linkpanel.min.css +0 -1
  233. package/dist/darkside/version/7.15.0/component/list.min.css +0 -1
  234. package/dist/darkside/version/7.15.0/component/loader.min.css +0 -1
  235. package/dist/darkside/version/7.15.0/component/modal.min.css +0 -1
  236. package/dist/darkside/version/7.15.0/component/pagination.min.css +0 -1
  237. package/dist/darkside/version/7.15.0/component/panel.min.css +0 -1
  238. package/dist/darkside/version/7.15.0/component/popover.min.css +0 -1
  239. package/dist/darkside/version/7.15.0/component/primitives.min.css +0 -1
  240. package/dist/darkside/version/7.15.0/component/readmore.min.css +0 -1
  241. package/dist/darkside/version/7.15.0/component/skeleton.min.css +0 -1
  242. package/dist/darkside/version/7.15.0/component/stepper.min.css +0 -1
  243. package/dist/darkside/version/7.15.0/component/table.css +0 -254
  244. package/dist/darkside/version/7.15.0/component/table.min.css +0 -1
  245. package/dist/darkside/version/7.15.0/component/tabs.min.css +0 -1
  246. package/dist/darkside/version/7.15.0/component/theme.min.css +0 -1
  247. package/dist/darkside/version/7.15.0/component/timeline.min.css +0 -1
  248. package/dist/darkside/version/7.15.0/component/togglegroup.min.css +0 -1
  249. package/dist/darkside/version/7.15.0/component/typography.min.css +0 -1
  250. package/dist/darkside/version/7.15.0/components.min.css +0 -1
  251. package/dist/darkside/version/7.15.0/index.min.css +0 -1
  252. /package/dist/darkside/version/{7.15.0 → 7.16.0}/global/fonts.css +0 -0
  253. /package/dist/darkside/version/{7.15.0 → 7.16.0}/global/fonts.min.css +0 -0
  254. /package/dist/darkside/version/{7.15.0 → 7.16.0}/global/print.css +0 -0
  255. /package/dist/darkside/version/{7.15.0 → 7.16.0}/global/print.min.css +0 -0
  256. /package/dist/darkside/version/{7.15.0 → 7.16.0}/global/reset.css +0 -0
  257. /package/dist/darkside/version/{7.15.0 → 7.16.0}/global/reset.min.css +0 -0
@@ -1,5 +1,5 @@
1
1
  @layer aksel.components {
2
- .navds-button {
2
+ .aksel-button {
3
3
  --__axc-button-icon-size: 1.5rem;
4
4
  --__axc-button-icon-margin: -4px;
5
5
  --__axc-button-border-color: transparent;
@@ -17,255 +17,255 @@
17
17
  display: inline-flex;
18
18
  }
19
19
 
20
- .navds-button:focus-visible {
20
+ .aksel-button:focus-visible {
21
21
  outline: 3px solid var(--ax-border-focus);
22
22
  outline-offset: 3px;
23
23
  }
24
24
 
25
- .navds-button--small, .navds-button--xsmall {
25
+ .aksel-button--small, .aksel-button--xsmall {
26
26
  --__axc-button-icon-margin: -2px;
27
27
  }
28
28
 
29
- .navds-button--small {
29
+ .aksel-button--small {
30
30
  padding: var(--ax-space-4) var(--ax-space-12);
31
31
  gap: var(--ax-space-6);
32
32
  min-width: 2rem;
33
33
  min-height: 2rem;
34
34
  }
35
35
 
36
- .navds-button--xsmall {
36
+ .aksel-button--xsmall {
37
37
  padding: var(--ax-space-2) var(--ax-space-8);
38
38
  gap: var(--ax-space-4);
39
39
  --__axc-button-icon-size: 1.25rem;
40
40
  }
41
41
 
42
- .navds-button--icon-only {
42
+ .aksel-button--icon-only {
43
43
  padding: var(--ax-space-12);
44
44
  }
45
45
 
46
- .navds-button--icon-only.navds-button--small {
46
+ .aksel-button--icon-only.aksel-button--small {
47
47
  padding: var(--ax-space-4);
48
48
  }
49
49
 
50
- .navds-button--icon-only.navds-button--xsmall {
50
+ .aksel-button--icon-only.aksel-button--xsmall {
51
51
  padding: var(--ax-space-2);
52
52
  }
53
53
 
54
54
  @supports not selector(:focus-visible) {
55
- .navds-button:focus {
55
+ .aksel-button:focus {
56
56
  outline: 3px solid var(--ax-border-focus);
57
57
  }
58
58
  }
59
59
 
60
- .navds-button__icon {
60
+ .aksel-button__icon {
61
61
  font-size: var(--__axc-button-icon-size);
62
62
  display: flex;
63
63
  }
64
64
 
65
- .navds-button__icon:first-child {
65
+ .aksel-button__icon:first-child {
66
66
  margin-left: var(--__axc-button-icon-margin);
67
67
  }
68
68
 
69
- .navds-button__icon:last-child {
69
+ .aksel-button__icon:last-child {
70
70
  margin-right: var(--__axc-button-icon-margin);
71
71
  }
72
72
 
73
- .navds-button--icon-only .navds-button__icon {
73
+ .aksel-button--icon-only .aksel-button__icon {
74
74
  margin: 0;
75
75
  }
76
76
 
77
- .navds-button--primary {
77
+ .aksel-button--primary {
78
78
  background-color: var(--ax-bg-accent-strong);
79
79
  color: var(--ax-text-accent-contrast);
80
80
  }
81
81
 
82
- .navds-button--primary:hover {
82
+ .aksel-button--primary:hover {
83
83
  background-color: var(--ax-bg-accent-strong-hover);
84
84
  }
85
85
 
86
- .navds-button--primary:active {
86
+ .aksel-button--primary:active {
87
87
  background-color: var(--ax-bg-accent-strong-pressed);
88
88
  }
89
89
 
90
- .navds-button--primary:is(:disabled, .navds-button--disabled) {
90
+ .aksel-button--primary:is(:disabled, .aksel-button--disabled) {
91
91
  background-color: var(--ax-bg-accent-strong);
92
92
  }
93
93
 
94
94
  @media (forced-colors: active) {
95
- .navds-button--primary:not(:disabled) {
95
+ .aksel-button--primary:not(:disabled) {
96
96
  color: highlighttext;
97
97
  background-color: highlight;
98
98
  }
99
99
 
100
- .navds-button--primary span {
100
+ .aksel-button--primary span {
101
101
  forced-color-adjust: none;
102
102
  }
103
103
  }
104
104
 
105
- .navds-button--primary-neutral {
105
+ .aksel-button--primary-neutral {
106
106
  background-color: var(--ax-bg-neutral-strong);
107
107
  color: var(--ax-text-neutral-contrast);
108
108
  }
109
109
 
110
- .navds-button--primary-neutral:hover {
110
+ .aksel-button--primary-neutral:hover {
111
111
  background-color: var(--ax-bg-neutral-strong-hover);
112
112
  }
113
113
 
114
- .navds-button--primary-neutral:active {
114
+ .aksel-button--primary-neutral:active {
115
115
  background-color: var(--ax-bg-neutral-strong-pressed);
116
116
  }
117
117
 
118
- .navds-button--primary-neutral:is(:disabled, .navds-button--disabled) {
118
+ .aksel-button--primary-neutral:is(:disabled, .aksel-button--disabled) {
119
119
  background-color: var(--ax-bg-neutral-strong);
120
120
  }
121
121
 
122
- .navds-button--secondary {
122
+ .aksel-button--secondary {
123
123
  --__axc-button-border-color: var(--ax-border-accent);
124
124
  color: var(--ax-text-accent-subtle);
125
125
  background-color: rgba(0, 0, 0, 0);
126
126
  }
127
127
 
128
- .navds-button--secondary:hover {
128
+ .aksel-button--secondary:hover {
129
129
  --__axc-button-border-color: var(--ax-border-accent-strong);
130
130
  background-color: var(--ax-bg-accent-moderate-hoverA);
131
131
  }
132
132
 
133
- .navds-button--secondary:active {
133
+ .aksel-button--secondary:active {
134
134
  background-color: var(--ax-bg-accent-moderate-pressedA);
135
135
  }
136
136
 
137
- .navds-button--secondary:is(:disabled, .navds-button--disabled) {
137
+ .aksel-button--secondary:is(:disabled, .aksel-button--disabled) {
138
138
  --__axc-button-border-color: var(--ax-border-accent);
139
139
  color: var(--ax-text-accent-subtle);
140
140
  background-color: rgba(0, 0, 0, 0);
141
141
  }
142
142
 
143
- .navds-button--secondary-neutral {
143
+ .aksel-button--secondary-neutral {
144
144
  --__axc-button-border-color: var(--ax-border-neutral);
145
145
  color: var(--ax-text-neutral);
146
146
  background-color: rgba(0, 0, 0, 0);
147
147
  }
148
148
 
149
- .navds-button--secondary-neutral:hover {
149
+ .aksel-button--secondary-neutral:hover {
150
150
  --__axc-button-border-color: var(--ax-border-neutral-strong);
151
151
  background-color: var(--ax-bg-neutral-moderate-hoverA);
152
152
  }
153
153
 
154
- .navds-button--secondary-neutral:active {
154
+ .aksel-button--secondary-neutral:active {
155
155
  background-color: var(--ax-bg-neutral-moderate-pressedA);
156
156
  }
157
157
 
158
- .navds-button--secondary-neutral:is(:disabled, .navds-button--disabled) {
158
+ .aksel-button--secondary-neutral:is(:disabled, .aksel-button--disabled) {
159
159
  --__axc-button-border-color: var(--ax-border-neutral);
160
160
  color: var(--ax-text-neutral);
161
161
  background-color: rgba(0, 0, 0, 0);
162
162
  }
163
163
 
164
- .navds-button--tertiary {
164
+ .aksel-button--tertiary {
165
165
  color: var(--ax-text-accent-subtle);
166
166
  background-color: rgba(0, 0, 0, 0);
167
167
  }
168
168
 
169
- .navds-button--tertiary:hover {
169
+ .aksel-button--tertiary:hover {
170
170
  background-color: var(--ax-bg-accent-moderate-hoverA);
171
171
  }
172
172
 
173
- .navds-button--tertiary:active {
173
+ .aksel-button--tertiary:active {
174
174
  background-color: var(--ax-bg-accent-moderate-pressedA);
175
175
  }
176
176
 
177
- .navds-button--tertiary:is(:disabled, .navds-button--disabled) {
177
+ .aksel-button--tertiary:is(:disabled, .aksel-button--disabled) {
178
178
  color: var(--ax-text-accent-subtle);
179
179
  background-color: rgba(0, 0, 0, 0);
180
180
  }
181
181
 
182
- .navds-button--tertiary-neutral {
182
+ .aksel-button--tertiary-neutral {
183
183
  color: var(--ax-text-neutral);
184
184
  background-color: rgba(0, 0, 0, 0);
185
185
  }
186
186
 
187
- .navds-button--tertiary-neutral:hover {
187
+ .aksel-button--tertiary-neutral:hover {
188
188
  background-color: var(--ax-bg-neutral-moderate-hoverA);
189
189
  }
190
190
 
191
- .navds-button--tertiary-neutral:active {
191
+ .aksel-button--tertiary-neutral:active {
192
192
  background-color: var(--ax-bg-neutral-moderate-pressedA);
193
193
  }
194
194
 
195
- .navds-button--tertiary-neutral:is(:disabled, .navds-button--disabled) {
195
+ .aksel-button--tertiary-neutral:is(:disabled, .aksel-button--disabled) {
196
196
  color: var(--ax-text-neutral);
197
197
  background-color: rgba(0, 0, 0, 0);
198
198
  }
199
199
 
200
- .navds-button--danger {
200
+ .aksel-button--danger {
201
201
  background-color: var(--ax-bg-danger-strong);
202
202
  color: var(--ax-text-danger-contrast);
203
203
  }
204
204
 
205
- .navds-button--danger:hover {
205
+ .aksel-button--danger:hover {
206
206
  background-color: var(--ax-bg-danger-strong-hover);
207
207
  }
208
208
 
209
- .navds-button--danger:active {
209
+ .aksel-button--danger:active {
210
210
  background-color: var(--ax-bg-danger-strong-pressed);
211
211
  }
212
212
 
213
- .navds-button--danger:is(:disabled, .navds-button--disabled) {
213
+ .aksel-button--danger:is(:disabled, .aksel-button--disabled) {
214
214
  background-color: var(--ax-bg-danger-strong);
215
215
  }
216
216
 
217
- .navds-button:where(:disabled, .navds-button--disabled) {
217
+ .aksel-button:where(:disabled, .aksel-button--disabled) {
218
218
  cursor: not-allowed;
219
219
  }
220
220
 
221
- .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
221
+ .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
222
222
  opacity: var(--ax-opacity-disabled);
223
223
  }
224
224
 
225
- .navds-button > .navds-loader {
225
+ .aksel-button > .aksel-loader {
226
226
  position: absolute;
227
227
  }
228
228
 
229
- .navds-button .navds-loader .navds-loader__foreground {
229
+ .aksel-button .aksel-loader .aksel-loader__foreground {
230
230
  stroke: currentColor;
231
231
  }
232
232
 
233
- .navds-button--primary .navds-loader .navds-loader__background, .navds-button--danger .navds-loader .navds-loader__background {
233
+ .aksel-button--primary .aksel-loader .aksel-loader__background, .aksel-button--danger .aksel-loader .aksel-loader__background {
234
234
  stroke: rgba(255, 255, 255, .3);
235
235
  }
236
236
 
237
- .navds-button--loading > :not(.navds-loader) {
237
+ .aksel-button--loading > :not(.aksel-loader) {
238
238
  visibility: hidden;
239
239
  }
240
240
 
241
241
  @media (forced-colors: active) {
242
- .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
242
+ .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
243
243
  opacity: 1;
244
244
  color: graytext;
245
245
  }
246
246
 
247
- .navds-button {
247
+ .aksel-button {
248
248
  color: buttontext;
249
249
  background-color: buttonface;
250
250
  border: 1px solid rgba(0, 0, 0, 0);
251
251
  }
252
252
 
253
- .navds-button:not(:disabled):hover {
253
+ .aksel-button:not(:disabled):hover {
254
254
  color: highlight;
255
255
  box-shadow: none;
256
256
  background-color: highlighttext;
257
257
  border-color: highlight;
258
258
  }
259
259
 
260
- .navds-button:not(:disabled):hover span {
260
+ .aksel-button:not(:disabled):hover span {
261
261
  forced-color-adjust: none;
262
262
  }
263
263
 
264
- .navds-button .navds-loader .navds-loader__foreground {
264
+ .aksel-button .aksel-loader .aksel-loader__foreground {
265
265
  stroke: canvas;
266
266
  }
267
267
 
268
- .navds-button--primary .navds-loader .navds-loader__background, .navds-button--danger .navds-loader .navds-loader__background {
268
+ .aksel-button--primary .aksel-loader .aksel-loader__background, .aksel-button--danger .aksel-loader .aksel-loader__background {
269
269
  stroke: canvastext;
270
270
  }
271
271
  }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-button{--__axc-button-icon-size:1.5rem;--__axc-button-icon-margin:-4px;--__axc-button-border-color:transparent;--__axc-button-border-width:2px;padding:var(--ax-space-12) var(--ax-space-20);border-radius:var(--ax-border-radius-large);cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-8);box-shadow:inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);background:0 0;border:none;text-decoration:none;display:inline-flex}.aksel-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-button--small,.aksel-button--xsmall{--__axc-button-icon-margin:-2px}.aksel-button--small{padding:var(--ax-space-4) var(--ax-space-12);gap:var(--ax-space-6);min-width:2rem;min-height:2rem}.aksel-button--xsmall{padding:var(--ax-space-2) var(--ax-space-8);gap:var(--ax-space-4);--__axc-button-icon-size:1.25rem}.aksel-button--icon-only{padding:var(--ax-space-12)}.aksel-button--icon-only.aksel-button--small{padding:var(--ax-space-4)}.aksel-button--icon-only.aksel-button--xsmall{padding:var(--ax-space-2)}@supports not selector(:focus-visible){.aksel-button:focus{outline:3px solid var(--ax-border-focus)}}.aksel-button__icon{font-size:var(--__axc-button-icon-size);display:flex}.aksel-button__icon:first-child{margin-left:var(--__axc-button-icon-margin)}.aksel-button__icon:last-child{margin-right:var(--__axc-button-icon-margin)}.aksel-button--icon-only .aksel-button__icon{margin:0}.aksel-button--primary{background-color:var(--ax-bg-accent-strong);color:var(--ax-text-accent-contrast)}.aksel-button--primary:hover{background-color:var(--ax-bg-accent-strong-hover)}.aksel-button--primary:active{background-color:var(--ax-bg-accent-strong-pressed)}.aksel-button--primary:is(:disabled,.aksel-button--disabled){background-color:var(--ax-bg-accent-strong)}@media (forced-colors:active){.aksel-button--primary:not(:disabled){color:highlighttext;background-color:highlight}.aksel-button--primary span{forced-color-adjust:none}}.aksel-button--primary-neutral{background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast)}.aksel-button--primary-neutral:hover{background-color:var(--ax-bg-neutral-strong-hover)}.aksel-button--primary-neutral:active{background-color:var(--ax-bg-neutral-strong-pressed)}.aksel-button--primary-neutral:is(:disabled,.aksel-button--disabled){background-color:var(--ax-bg-neutral-strong)}.aksel-button--secondary{--__axc-button-border-color:var(--ax-border-accent);color:var(--ax-text-accent-subtle);background-color:rgba(0,0,0,0)}.aksel-button--secondary:hover{--__axc-button-border-color:var(--ax-border-accent-strong);background-color:var(--ax-bg-accent-moderate-hoverA)}.aksel-button--secondary:active{background-color:var(--ax-bg-accent-moderate-pressedA)}.aksel-button--secondary:is(:disabled,.aksel-button--disabled){--__axc-button-border-color:var(--ax-border-accent);color:var(--ax-text-accent-subtle);background-color:rgba(0,0,0,0)}.aksel-button--secondary-neutral{--__axc-button-border-color:var(--ax-border-neutral);color:var(--ax-text-neutral);background-color:rgba(0,0,0,0)}.aksel-button--secondary-neutral:hover{--__axc-button-border-color:var(--ax-border-neutral-strong);background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-button--secondary-neutral:active{background-color:var(--ax-bg-neutral-moderate-pressedA)}.aksel-button--secondary-neutral:is(:disabled,.aksel-button--disabled){--__axc-button-border-color:var(--ax-border-neutral);color:var(--ax-text-neutral);background-color:rgba(0,0,0,0)}.aksel-button--tertiary{color:var(--ax-text-accent-subtle);background-color:rgba(0,0,0,0)}.aksel-button--tertiary:hover{background-color:var(--ax-bg-accent-moderate-hoverA)}.aksel-button--tertiary:active{background-color:var(--ax-bg-accent-moderate-pressedA)}.aksel-button--tertiary:is(:disabled,.aksel-button--disabled){color:var(--ax-text-accent-subtle);background-color:rgba(0,0,0,0)}.aksel-button--tertiary-neutral{color:var(--ax-text-neutral);background-color:rgba(0,0,0,0)}.aksel-button--tertiary-neutral:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-button--tertiary-neutral:active{background-color:var(--ax-bg-neutral-moderate-pressedA)}.aksel-button--tertiary-neutral:is(:disabled,.aksel-button--disabled){color:var(--ax-text-neutral);background-color:rgba(0,0,0,0)}.aksel-button--danger{background-color:var(--ax-bg-danger-strong);color:var(--ax-text-danger-contrast)}.aksel-button--danger:hover{background-color:var(--ax-bg-danger-strong-hover)}.aksel-button--danger:active{background-color:var(--ax-bg-danger-strong-pressed)}.aksel-button--danger:is(:disabled,.aksel-button--disabled){background-color:var(--ax-bg-danger-strong)}.aksel-button:where(:disabled,.aksel-button--disabled){cursor:not-allowed}.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:var(--ax-opacity-disabled)}.aksel-button>.aksel-loader{position:absolute}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:currentColor}.aksel-button--danger .aksel-loader .aksel-loader__background,.aksel-button--primary .aksel-loader .aksel-loader__background{stroke:rgba(255,255,255,.3)}.aksel-button--loading>:not(.aksel-loader){visibility:hidden}@media (forced-colors:active){.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:1;color:graytext}.aksel-button{color:buttontext;background-color:buttonface;border:1px solid transparent}.aksel-button:not(:disabled):hover{color:highlight;box-shadow:none;background-color:highlighttext;border-color:highlight}.aksel-button:not(:disabled):hover span{forced-color-adjust:none}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:canvas}.aksel-button--danger .aksel-loader .aksel-loader__background,.aksel-button--primary .aksel-loader .aksel-loader__background{stroke:canvastext}}}
@@ -1,25 +1,25 @@
1
1
  @layer aksel.components {
2
- .navds-chat {
2
+ .aksel-chat {
3
3
  align-items: flex-end;
4
4
  gap: var(--ax-space-12);
5
5
  max-width: 40.75rem;
6
6
  display: flex;
7
7
  }
8
8
 
9
- .navds-chat--right {
9
+ .aksel-chat--right {
10
10
  flex-direction: row-reverse;
11
11
  }
12
12
 
13
- .navds-chat--right .navds-chat__bubble-wrapper {
13
+ .aksel-chat--right .aksel-chat__bubble-wrapper {
14
14
  align-items: flex-end;
15
15
  }
16
16
 
17
- .navds-chat--right .navds-chat__bubble {
17
+ .aksel-chat--right .aksel-chat__bubble {
18
18
  border-radius: var(--ax-border-radius-xlarge);
19
19
  border-bottom-right-radius: var(--ax-border-radius-small);
20
20
  }
21
21
 
22
- .navds-chat__avatar {
22
+ .aksel-chat__avatar {
23
23
  background-color: var(--ax-bg-raised);
24
24
  border-radius: var(--ax-border-radius-full);
25
25
  border: 1px solid var(--ax-border-neutral-subtleA);
@@ -36,14 +36,14 @@
36
36
  overflow: hidden;
37
37
  }
38
38
 
39
- .navds-chat__avatar svg {
39
+ .aksel-chat__avatar svg {
40
40
  align-self: center;
41
41
  width: 100%;
42
42
  max-width: 1.5rem;
43
43
  max-height: 1.5rem;
44
44
  }
45
45
 
46
- .navds-chat__bubble-wrapper {
46
+ .aksel-chat__bubble-wrapper {
47
47
  gap: var(--ax-space-12);
48
48
  flex-direction: column;
49
49
  margin: 0;
@@ -52,7 +52,7 @@
52
52
  display: flex;
53
53
  }
54
54
 
55
- .navds-chat__bubble {
55
+ .aksel-chat__bubble {
56
56
  padding: var(--ax-space-16) var(--ax-space-20);
57
57
  background-color: var(--ax-bg-raised);
58
58
  gap: var(--ax-space-8);
@@ -64,19 +64,19 @@
64
64
  display: flex;
65
65
  }
66
66
 
67
- .navds-chat--small .navds-chat__bubble {
67
+ .aksel-chat--small .aksel-chat__bubble {
68
68
  padding: var(--ax-space-12) var(--ax-space-16);
69
69
  }
70
70
 
71
- .navds-chat--info .navds-chat__bubble, .navds-chat--info .navds-chat__avatar {
71
+ .aksel-chat--info .aksel-chat__bubble, .aksel-chat--info .aksel-chat__avatar {
72
72
  background-color: var(--ax-bg-info-moderate);
73
73
  }
74
74
 
75
- .navds-chat--neutral .navds-chat__bubble, .navds-chat--neutral .navds-chat__avatar {
75
+ .aksel-chat--neutral .aksel-chat__bubble, .aksel-chat--neutral .aksel-chat__avatar {
76
76
  background-color: var(--ax-bg-neutral-moderateA);
77
77
  }
78
78
 
79
- .navds-chat__top-text {
79
+ .aksel-chat__top-text {
80
80
  color: var(--ax-text-neutral);
81
81
  gap: var(--ax-space-8);
82
82
  align-items: baseline;
@@ -85,19 +85,19 @@
85
85
  display: flex;
86
86
  }
87
87
 
88
- .navds-chat--right .navds-chat__top-text {
88
+ .aksel-chat--right .aksel-chat__top-text {
89
89
  align-self: flex-end;
90
90
  }
91
91
 
92
- .navds-chat--top-text-left .navds-chat__top-text {
92
+ .aksel-chat--top-text-left .aksel-chat__top-text {
93
93
  align-self: flex-start;
94
94
  }
95
95
 
96
- .navds-chat--top-text-right .navds-chat__top-text, .navds-chat--left .navds-chat__top-text--right {
96
+ .aksel-chat--top-text-right .aksel-chat__top-text, .aksel-chat--left .aksel-chat__top-text--right {
97
97
  align-self: flex-end;
98
98
  }
99
99
 
100
- .navds-chat--right .navds-chat__top-text--left {
100
+ .aksel-chat--right .aksel-chat__top-text--left {
101
101
  align-self: flex-start;
102
102
  }
103
103
  }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-chat{align-items:flex-end;gap:var(--ax-space-12);max-width:40.75rem;display:flex}.aksel-chat--right{flex-direction:row-reverse}.aksel-chat--right .aksel-chat__bubble-wrapper{align-items:flex-end}.aksel-chat--right .aksel-chat__bubble{border-radius:var(--ax-border-radius-xlarge);border-bottom-right-radius:var(--ax-border-radius-small)}.aksel-chat__avatar{background-color:var(--ax-bg-raised);border-radius:var(--ax-border-radius-full);border:1px solid var(--ax-border-neutral-subtleA);color:var(--ax-text-neutral);letter-spacing:.024rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.06rem;line-height:2.5rem;display:flex;overflow:hidden}.aksel-chat__avatar svg{align-self:center;width:100%;max-width:1.5rem;max-height:1.5rem}.aksel-chat__bubble-wrapper{gap:var(--ax-space-12);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.aksel-chat__bubble{padding:var(--ax-space-16) var(--ax-space-20);background-color:var(--ax-bg-raised);gap:var(--ax-space-8);border-radius:var(--ax-border-radius-xlarge);border-bottom-left-radius:var(--ax-border-radius-small);border:1px solid var(--ax-border-neutral-subtleA);flex-direction:column;width:fit-content;display:flex}.aksel-chat--small .aksel-chat__bubble{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-chat--info .aksel-chat__avatar,.aksel-chat--info .aksel-chat__bubble{background-color:var(--ax-bg-info-moderate)}.aksel-chat--neutral .aksel-chat__avatar,.aksel-chat--neutral .aksel-chat__bubble{background-color:var(--ax-bg-neutral-moderateA)}.aksel-chat__top-text{color:var(--ax-text-neutral);gap:var(--ax-space-8);align-items:baseline;margin:0;font-weight:400;display:flex}.aksel-chat--right .aksel-chat__top-text{align-self:flex-end}.aksel-chat--top-text-left .aksel-chat__top-text{align-self:flex-start}.aksel-chat--left .aksel-chat__top-text--right,.aksel-chat--top-text-right .aksel-chat__top-text{align-self:flex-end}.aksel-chat--right .aksel-chat__top-text--left{align-self:flex-start}}
@@ -1,5 +1,5 @@
1
1
  @layer aksel.components {
2
- .navds-chips {
2
+ .aksel-chips {
3
3
  gap: var(--ax-space-8);
4
4
  flex-wrap: wrap;
5
5
  margin: 0;
@@ -8,14 +8,14 @@
8
8
  display: flex;
9
9
  }
10
10
 
11
- .navds-chips li {
11
+ .aksel-chips li {
12
12
  margin: 0;
13
13
  padding: 0;
14
14
  list-style: none;
15
15
  display: block;
16
16
  }
17
17
 
18
- .navds-chips__chip {
18
+ .aksel-chips__chip {
19
19
  all: unset;
20
20
  cursor: pointer;
21
21
  justify-content: center;
@@ -29,109 +29,109 @@
29
29
  display: flex;
30
30
  }
31
31
 
32
- .navds-chips__chip:focus-visible {
32
+ .aksel-chips__chip:focus-visible {
33
33
  outline: 3px solid var(--ax-border-focus);
34
34
  outline-offset: 3px;
35
35
  }
36
36
 
37
- .navds-chips--readonly .navds-chips__chip {
37
+ .aksel-chips--readonly .aksel-chips__chip {
38
38
  background-color: var(--ax-bg-neutral-moderateA);
39
39
  }
40
40
 
41
- .navds-chips--small .navds-chips__chip {
41
+ .aksel-chips--small .aksel-chips__chip {
42
42
  min-height: 1.5rem;
43
43
  padding: 0 var(--ax-space-8);
44
44
  }
45
45
 
46
- .navds-chips--small .navds-chips__toggle-icon {
46
+ .aksel-chips--small .aksel-chips__toggle-icon {
47
47
  width: 1rem;
48
48
  height: 1rem;
49
49
  }
50
50
 
51
- .navds-chips--small .navds-chips__toggle--with-checkmark {
51
+ .aksel-chips--small .aksel-chips__toggle--with-checkmark {
52
52
  padding-left: var(--ax-space-4);
53
53
  }
54
54
 
55
- .navds-chips--small .navds-chips__removable-icon {
55
+ .aksel-chips--small .aksel-chips__removable-icon {
56
56
  width: 1.25rem;
57
57
  height: 1.25rem;
58
58
  }
59
59
 
60
- .navds-chips--small .navds-chips__removable-icon > svg {
60
+ .aksel-chips--small .aksel-chips__removable-icon > svg {
61
61
  width: 1rem;
62
62
  }
63
63
 
64
- .navds-chips--small .navds-chips--icon-right {
64
+ .aksel-chips--small .aksel-chips--icon-right {
65
65
  padding-right: var(--ax-space-2);
66
66
  }
67
67
 
68
- .navds-chips__toggle--action {
68
+ .aksel-chips__toggle--action {
69
69
  box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
70
70
  background-color: var(--ax-bg-accent-moderate);
71
71
  color: var(--ax-text-accent);
72
72
  }
73
73
 
74
- .navds-chips__toggle--action:hover {
74
+ .aksel-chips__toggle--action:hover {
75
75
  background-color: var(--ax-bg-accent-moderate-hover);
76
76
  }
77
77
 
78
- .navds-chips__toggle--action[data-pressed="true"] {
78
+ .aksel-chips__toggle--action[data-pressed="true"] {
79
79
  box-shadow: none;
80
80
  background-color: var(--ax-bg-accent-strong-pressed);
81
81
  color: var(--ax-text-accent-contrast);
82
82
  }
83
83
 
84
- .navds-chips__toggle--action[data-pressed="true"]:hover {
84
+ .aksel-chips__toggle--action[data-pressed="true"]:hover {
85
85
  background-color: var(--ax-bg-accent-strong-hover);
86
86
  }
87
87
 
88
- .navds-chips__toggle--neutral {
88
+ .aksel-chips__toggle--neutral {
89
89
  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
90
90
  background-color: var(--ax-bg-neutral-moderate);
91
91
  color: var(--ax-text-neutral);
92
92
  }
93
93
 
94
- .navds-chips__toggle--neutral:hover {
94
+ .aksel-chips__toggle--neutral:hover {
95
95
  background-color: var(--ax-bg-neutral-moderate-hover);
96
96
  }
97
97
 
98
- .navds-chips__toggle--neutral[data-pressed="true"] {
98
+ .aksel-chips__toggle--neutral[data-pressed="true"] {
99
99
  box-shadow: none;
100
100
  background-color: var(--ax-bg-neutral-strong-pressed);
101
101
  color: var(--ax-text-neutral-contrast);
102
102
  }
103
103
 
104
- .navds-chips__toggle--neutral[data-pressed="true"]:hover {
104
+ .aksel-chips__toggle--neutral[data-pressed="true"]:hover {
105
105
  background-color: var(--ax-bg-neutral-strong-hover);
106
106
  }
107
107
 
108
- .navds-chips--medium .navds-chips__toggle--with-checkmark {
108
+ .aksel-chips--medium .aksel-chips__toggle--with-checkmark {
109
109
  padding-left: var(--ax-space-6);
110
110
  }
111
111
 
112
- .navds-chips__removable {
112
+ .aksel-chips__removable {
113
113
  gap: 0;
114
114
  }
115
115
 
116
- .navds-chips__removable--action {
116
+ .aksel-chips__removable--action {
117
117
  background: var(--ax-bg-accent-strong-pressed);
118
118
  color: var(--ax-text-accent-contrast);
119
119
  }
120
120
 
121
- .navds-chips__removable--action:hover {
121
+ .aksel-chips__removable--action:hover {
122
122
  background: var(--ax-bg-accent-strong-hover);
123
123
  }
124
124
 
125
- .navds-chips__removable--neutral {
125
+ .aksel-chips__removable--neutral {
126
126
  background: var(--ax-bg-neutral-strong-pressed);
127
127
  color: var(--ax-text-neutral-contrast);
128
128
  }
129
129
 
130
- .navds-chips__removable--neutral:hover {
130
+ .aksel-chips__removable--neutral:hover {
131
131
  background: var(--ax-bg-neutral-strong-hover);
132
132
  }
133
133
 
134
- .navds-chips__removable-icon {
134
+ .aksel-chips__removable-icon {
135
135
  border-radius: var(--ax-border-radius-full);
136
136
  place-items: center;
137
137
  width: 1.5rem;
@@ -140,35 +140,35 @@
140
140
  display: grid;
141
141
  }
142
142
 
143
- .navds-chips--icon-left {
143
+ .aksel-chips--icon-left {
144
144
  padding-left: var(--ax-space-6);
145
145
  }
146
146
 
147
- .navds-chips--icon-right {
147
+ .aksel-chips--icon-right {
148
148
  padding-right: var(--ax-space-6);
149
149
  }
150
150
 
151
151
  @media (forced-colors: active) {
152
- .navds-chips__chip {
152
+ .aksel-chips__chip {
153
153
  border: 1px solid rgba(0, 0, 0, 0);
154
154
  }
155
155
 
156
- .navds-chips__chip:hover {
156
+ .aksel-chips__chip:hover {
157
157
  color: highlight;
158
158
  background-color: highlighttext;
159
159
  }
160
160
 
161
- .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
161
+ .aksel-chips__chip:where([data-pressed="true"], :active, :hover) > span {
162
162
  forced-color-adjust: none;
163
163
  }
164
164
 
165
- .navds-chips__toggle[data-pressed="true"] {
165
+ .aksel-chips__toggle[data-pressed="true"] {
166
166
  color: selecteditemtext;
167
167
  background-color: selecteditem;
168
168
  border: 1px solid selecteditem;
169
169
  }
170
170
 
171
- .navds-chips__toggle[data-pressed="true"]:hover {
171
+ .aksel-chips__toggle[data-pressed="true"]:hover {
172
172
  color: selecteditem;
173
173
  background-color: selecteditemtext;
174
174
  }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-chips{gap:var(--ax-space-8);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.aksel-chips li{margin:0;padding:0;list-style:none;display:block}.aksel-chips__chip{all:unset;cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-2);padding:0 var(--ax-space-12);border-radius:var(--ax-border-radius-full);min-height:2rem;margin:0;text-decoration:none;display:flex}.aksel-chips__chip:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-chips--readonly .aksel-chips__chip{background-color:var(--ax-bg-neutral-moderateA)}.aksel-chips--small .aksel-chips__chip{min-height:1.5rem;padding:0 var(--ax-space-8)}.aksel-chips--small .aksel-chips__toggle-icon{width:1rem;height:1rem}.aksel-chips--small .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-4)}.aksel-chips--small .aksel-chips__removable-icon{width:1.25rem;height:1.25rem}.aksel-chips--small .aksel-chips__removable-icon>svg{width:1rem}.aksel-chips--small .aksel-chips--icon-right{padding-right:var(--ax-space-2)}.aksel-chips__toggle--action{box-shadow:inset 0 0 0 1px var(--ax-border-accent-subtleA);background-color:var(--ax-bg-accent-moderate);color:var(--ax-text-accent)}.aksel-chips__toggle--action:hover{background-color:var(--ax-bg-accent-moderate-hover)}.aksel-chips__toggle--action[data-pressed=true]{box-shadow:none;background-color:var(--ax-bg-accent-strong-pressed);color:var(--ax-text-accent-contrast)}.aksel-chips__toggle--action[data-pressed=true]:hover{background-color:var(--ax-bg-accent-strong-hover)}.aksel-chips__toggle--neutral{box-shadow:inset 0 0 0 1px var(--ax-border-neutral-subtleA);background-color:var(--ax-bg-neutral-moderate);color:var(--ax-text-neutral)}.aksel-chips__toggle--neutral:hover{background-color:var(--ax-bg-neutral-moderate-hover)}.aksel-chips__toggle--neutral[data-pressed=true]{box-shadow:none;background-color:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-chips__toggle--neutral[data-pressed=true]:hover{background-color:var(--ax-bg-neutral-strong-hover)}.aksel-chips--medium .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-6)}.aksel-chips__removable{gap:0}.aksel-chips__removable--action{background:var(--ax-bg-accent-strong-pressed);color:var(--ax-text-accent-contrast)}.aksel-chips__removable--action:hover{background:var(--ax-bg-accent-strong-hover)}.aksel-chips__removable--neutral{background:var(--ax-bg-neutral-strong-pressed);color:var(--ax-text-neutral-contrast)}.aksel-chips__removable--neutral:hover{background:var(--ax-bg-neutral-strong-hover)}.aksel-chips__removable-icon{border-radius:var(--ax-border-radius-full);place-items:center;width:1.5rem;height:1.5rem;font-size:1.25rem;display:grid}.aksel-chips--icon-left{padding-left:var(--ax-space-6)}.aksel-chips--icon-right{padding-right:var(--ax-space-6)}@media (forced-colors:active){.aksel-chips__chip{border:1px solid transparent}.aksel-chips__chip:hover{color:highlight;background-color:highlighttext}.aksel-chips__chip:where([data-pressed=true],:active,:hover)>span{forced-color-adjust:none}.aksel-chips__toggle[data-pressed=true]{color:selecteditemtext;background-color:selecteditem;border:1px solid selecteditem}.aksel-chips__toggle[data-pressed=true]:hover{color:selecteditem;background-color:selecteditemtext}}}
@@ -1,5 +1,5 @@
1
1
  @layer aksel.components {
2
- .navds-copybutton[data-active="true"] .navds-copybutton__icon {
2
+ .aksel-copybutton[data-active="true"] .aksel-copybutton__icon {
3
3
  animation: 2s cubic-bezier(.05, .7, .1, 1) akselCopyButtonIconAnimation;
4
4
  }
5
5
 
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-copybutton[data-active=true] .aksel-copybutton__icon{animation:2s cubic-bezier(.05,.7,.1,1) akselCopyButtonIconAnimation}@keyframes akselCopyButtonIconAnimation{8%{transform:translateY(0)}17%{transform:translateY(-10%)}25%{transform:translateY(2%)}30%{transform:translateY(0)}}}