@navikt/ds-css 7.7.0 → 7.8.1

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 (214) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/config/bundle.darkside.ts +270 -0
  3. package/config/tests/bundle.test.ts +46 -0
  4. package/darkside/baseline/{utilities.darkside.css → baseline.darkside.css} +9 -0
  5. package/darkside/baseline/tokens.darkside.css +1 -0
  6. package/darkside/button.darkside.css +1 -1
  7. package/darkside/copybutton.darkside.css +1 -1
  8. package/darkside/dropdown.darkside.css +1 -1
  9. package/darkside/form/combobox.darkside.css +1 -22
  10. package/darkside/form/fieldset.darkside.css +1 -1
  11. package/darkside/form/form.darkside.css +2 -2
  12. package/darkside/form/radio-checkbox.darkside.css +1 -1
  13. package/darkside/form/search.darkside.css +6 -2
  14. package/darkside/form/switch.darkside.css +1 -1
  15. package/darkside/guide-panel.darkside.css +78 -60
  16. package/darkside/index.css +9 -11
  17. package/darkside/link.darkside.css +2 -2
  18. package/darkside/table.darkside.css +52 -97
  19. package/darkside/tag.darkside.css +85 -147
  20. package/darkside/timeline.darkside.css +118 -211
  21. package/darkside/tooltip.darkside.css +82 -57
  22. package/darkside/typography.darkside.css +0 -12
  23. package/dist/component/form.css +2 -21
  24. package/dist/component/form.min.css +1 -1
  25. package/dist/component/link.css +1 -1
  26. package/dist/component/link.min.css +1 -1
  27. package/dist/component/table.css +1 -1
  28. package/dist/component/table.min.css +1 -1
  29. package/dist/component/tag.css +12 -6
  30. package/dist/component/tag.min.css +1 -1
  31. package/dist/components.css +17 -990
  32. package/dist/components.min.css +2 -4
  33. package/dist/darkside/component/accordion.css +174 -0
  34. package/dist/darkside/component/accordion.min.css +1 -0
  35. package/dist/darkside/component/actionmenu.css +182 -0
  36. package/dist/darkside/component/actionmenu.min.css +1 -0
  37. package/dist/darkside/component/alert.css +105 -0
  38. package/dist/darkside/component/alert.min.css +1 -0
  39. package/dist/darkside/component/button.css +271 -0
  40. package/dist/darkside/component/button.min.css +1 -0
  41. package/dist/darkside/component/chat.css +103 -0
  42. package/dist/darkside/component/chat.min.css +1 -0
  43. package/dist/darkside/component/chips.css +176 -0
  44. package/dist/darkside/component/chips.min.css +1 -0
  45. package/dist/darkside/component/copybutton.css +176 -0
  46. package/dist/darkside/component/copybutton.min.css +1 -0
  47. package/dist/darkside/component/date.css +262 -0
  48. package/dist/darkside/component/date.min.css +1 -0
  49. package/dist/darkside/component/dropdown.css +92 -0
  50. package/dist/darkside/component/dropdown.min.css +1 -0
  51. package/dist/darkside/component/expansioncard.css +167 -0
  52. package/dist/darkside/component/expansioncard.min.css +1 -0
  53. package/dist/darkside/component/form.css +1871 -0
  54. package/dist/darkside/component/form.min.css +1 -0
  55. package/dist/darkside/component/guidepanel.css +113 -0
  56. package/dist/darkside/component/guidepanel.min.css +1 -0
  57. package/dist/darkside/component/helptext.css +53 -0
  58. package/dist/darkside/component/helptext.min.css +1 -0
  59. package/dist/darkside/component/internalheader.css +100 -0
  60. package/dist/darkside/component/internalheader.min.css +1 -0
  61. package/dist/darkside/component/link.css +60 -0
  62. package/dist/darkside/component/link.min.css +1 -0
  63. package/dist/darkside/component/linkpanel.css +48 -0
  64. package/dist/darkside/component/linkpanel.min.css +1 -0
  65. package/dist/darkside/component/list.css +88 -0
  66. package/dist/darkside/component/list.min.css +1 -0
  67. package/dist/darkside/component/loader.css +119 -0
  68. package/dist/darkside/component/loader.min.css +1 -0
  69. package/dist/darkside/component/modal.css +175 -0
  70. package/dist/darkside/component/modal.min.css +1 -0
  71. package/dist/darkside/component/pagination.css +43 -0
  72. package/dist/darkside/component/pagination.min.css +1 -0
  73. package/dist/darkside/component/panel.css +12 -0
  74. package/dist/darkside/component/panel.min.css +1 -0
  75. package/dist/darkside/component/popover.css +18 -0
  76. package/dist/darkside/component/popover.min.css +1 -0
  77. package/dist/darkside/component/primitives.css +1291 -0
  78. package/dist/darkside/component/primitives.min.css +1 -0
  79. package/dist/darkside/component/progressbar.css +106 -0
  80. package/dist/darkside/component/progressbar.min.css +1 -0
  81. package/dist/darkside/component/readmore.css +95 -0
  82. package/dist/darkside/component/readmore.min.css +1 -0
  83. package/dist/darkside/component/skeleton.css +66 -0
  84. package/dist/darkside/component/skeleton.min.css +1 -0
  85. package/dist/darkside/component/stepper.css +234 -0
  86. package/dist/darkside/component/stepper.min.css +1 -0
  87. package/dist/darkside/component/table.css +225 -0
  88. package/dist/darkside/component/table.min.css +1 -0
  89. package/dist/darkside/component/tabs.css +138 -0
  90. package/dist/darkside/component/tabs.min.css +1 -0
  91. package/dist/darkside/component/tag.css +128 -0
  92. package/dist/darkside/component/tag.min.css +1 -0
  93. package/dist/darkside/component/theme.css +17 -0
  94. package/dist/darkside/component/theme.min.css +1 -0
  95. package/dist/darkside/component/timeline.css +338 -0
  96. package/dist/darkside/component/timeline.min.css +1 -0
  97. package/dist/darkside/component/togglegroup.css +105 -0
  98. package/dist/darkside/component/togglegroup.min.css +1 -0
  99. package/dist/darkside/component/tooltip.css +108 -0
  100. package/dist/darkside/component/tooltip.min.css +1 -0
  101. package/dist/darkside/component/typography.css +242 -0
  102. package/dist/darkside/component/typography.min.css +1 -0
  103. package/dist/darkside/components.css +7471 -0
  104. package/dist/darkside/components.min.css +1 -0
  105. package/dist/darkside/global/baseline.css +47 -0
  106. package/dist/darkside/global/baseline.min.css +1 -0
  107. package/dist/darkside/global/fonts.css +109 -0
  108. package/dist/darkside/global/fonts.min.css +1 -0
  109. package/dist/darkside/global/print.css +52 -0
  110. package/dist/darkside/global/print.min.css +1 -0
  111. package/dist/darkside/global/reset.css +93 -0
  112. package/dist/darkside/global/reset.min.css +1 -0
  113. package/dist/darkside/global/tokens.css +895 -0
  114. package/dist/darkside/global/tokens.min.css +1 -0
  115. package/dist/darkside/index.css +8670 -0
  116. package/dist/darkside/index.min.css +1 -0
  117. package/dist/darkside/version/7.8.1/component/accordion.css +174 -0
  118. package/dist/darkside/version/7.8.1/component/accordion.min.css +1 -0
  119. package/dist/darkside/version/7.8.1/component/actionmenu.css +182 -0
  120. package/dist/darkside/version/7.8.1/component/actionmenu.min.css +1 -0
  121. package/dist/darkside/version/7.8.1/component/alert.css +105 -0
  122. package/dist/darkside/version/7.8.1/component/alert.min.css +1 -0
  123. package/dist/darkside/version/7.8.1/component/button.css +271 -0
  124. package/dist/darkside/version/7.8.1/component/button.min.css +1 -0
  125. package/dist/darkside/version/7.8.1/component/chat.css +103 -0
  126. package/dist/darkside/version/7.8.1/component/chat.min.css +1 -0
  127. package/dist/darkside/version/7.8.1/component/chips.css +176 -0
  128. package/dist/darkside/version/7.8.1/component/chips.min.css +1 -0
  129. package/dist/darkside/version/7.8.1/component/copybutton.css +176 -0
  130. package/dist/darkside/version/7.8.1/component/copybutton.min.css +1 -0
  131. package/dist/darkside/version/7.8.1/component/date.css +262 -0
  132. package/dist/darkside/version/7.8.1/component/date.min.css +1 -0
  133. package/dist/darkside/version/7.8.1/component/dropdown.css +92 -0
  134. package/dist/darkside/version/7.8.1/component/dropdown.min.css +1 -0
  135. package/dist/darkside/version/7.8.1/component/expansioncard.css +167 -0
  136. package/dist/darkside/version/7.8.1/component/expansioncard.min.css +1 -0
  137. package/dist/darkside/version/7.8.1/component/form.css +1871 -0
  138. package/dist/darkside/version/7.8.1/component/form.min.css +1 -0
  139. package/dist/darkside/version/7.8.1/component/guidepanel.css +113 -0
  140. package/dist/darkside/version/7.8.1/component/guidepanel.min.css +1 -0
  141. package/dist/darkside/version/7.8.1/component/helptext.css +53 -0
  142. package/dist/darkside/version/7.8.1/component/helptext.min.css +1 -0
  143. package/dist/darkside/version/7.8.1/component/internalheader.css +100 -0
  144. package/dist/darkside/version/7.8.1/component/internalheader.min.css +1 -0
  145. package/dist/darkside/version/7.8.1/component/link.css +60 -0
  146. package/dist/darkside/version/7.8.1/component/link.min.css +1 -0
  147. package/dist/darkside/version/7.8.1/component/linkpanel.css +48 -0
  148. package/dist/darkside/version/7.8.1/component/linkpanel.min.css +1 -0
  149. package/dist/darkside/version/7.8.1/component/list.css +88 -0
  150. package/dist/darkside/version/7.8.1/component/list.min.css +1 -0
  151. package/dist/darkside/version/7.8.1/component/loader.css +119 -0
  152. package/dist/darkside/version/7.8.1/component/loader.min.css +1 -0
  153. package/dist/darkside/version/7.8.1/component/modal.css +175 -0
  154. package/dist/darkside/version/7.8.1/component/modal.min.css +1 -0
  155. package/dist/darkside/version/7.8.1/component/pagination.css +43 -0
  156. package/dist/darkside/version/7.8.1/component/pagination.min.css +1 -0
  157. package/dist/darkside/version/7.8.1/component/panel.css +12 -0
  158. package/dist/darkside/version/7.8.1/component/panel.min.css +1 -0
  159. package/dist/darkside/version/7.8.1/component/popover.css +18 -0
  160. package/dist/darkside/version/7.8.1/component/popover.min.css +1 -0
  161. package/dist/darkside/version/7.8.1/component/primitives.css +1291 -0
  162. package/dist/darkside/version/7.8.1/component/primitives.min.css +1 -0
  163. package/dist/darkside/version/7.8.1/component/progressbar.css +106 -0
  164. package/dist/darkside/version/7.8.1/component/progressbar.min.css +1 -0
  165. package/dist/darkside/version/7.8.1/component/readmore.css +95 -0
  166. package/dist/darkside/version/7.8.1/component/readmore.min.css +1 -0
  167. package/dist/darkside/version/7.8.1/component/skeleton.css +66 -0
  168. package/dist/darkside/version/7.8.1/component/skeleton.min.css +1 -0
  169. package/dist/darkside/version/7.8.1/component/stepper.css +234 -0
  170. package/dist/darkside/version/7.8.1/component/stepper.min.css +1 -0
  171. package/dist/darkside/version/7.8.1/component/table.css +225 -0
  172. package/dist/darkside/version/7.8.1/component/table.min.css +1 -0
  173. package/dist/darkside/version/7.8.1/component/tabs.css +138 -0
  174. package/dist/darkside/version/7.8.1/component/tabs.min.css +1 -0
  175. package/dist/darkside/version/7.8.1/component/tag.css +128 -0
  176. package/dist/darkside/version/7.8.1/component/tag.min.css +1 -0
  177. package/dist/darkside/version/7.8.1/component/theme.css +17 -0
  178. package/dist/darkside/version/7.8.1/component/theme.min.css +1 -0
  179. package/dist/darkside/version/7.8.1/component/timeline.css +338 -0
  180. package/dist/darkside/version/7.8.1/component/timeline.min.css +1 -0
  181. package/dist/darkside/version/7.8.1/component/togglegroup.css +105 -0
  182. package/dist/darkside/version/7.8.1/component/togglegroup.min.css +1 -0
  183. package/dist/darkside/version/7.8.1/component/tooltip.css +108 -0
  184. package/dist/darkside/version/7.8.1/component/tooltip.min.css +1 -0
  185. package/dist/darkside/version/7.8.1/component/typography.css +242 -0
  186. package/dist/darkside/version/7.8.1/component/typography.min.css +1 -0
  187. package/dist/darkside/version/7.8.1/components.css +7471 -0
  188. package/dist/darkside/version/7.8.1/components.min.css +1 -0
  189. package/dist/darkside/version/7.8.1/global/baseline.css +47 -0
  190. package/dist/darkside/version/7.8.1/global/baseline.min.css +1 -0
  191. package/dist/darkside/version/7.8.1/global/fonts.css +109 -0
  192. package/dist/darkside/version/7.8.1/global/fonts.min.css +1 -0
  193. package/dist/darkside/version/7.8.1/global/print.css +52 -0
  194. package/dist/darkside/version/7.8.1/global/print.min.css +1 -0
  195. package/dist/darkside/version/7.8.1/global/reset.css +93 -0
  196. package/dist/darkside/version/7.8.1/global/reset.min.css +1 -0
  197. package/dist/darkside/version/7.8.1/global/tokens.css +895 -0
  198. package/dist/darkside/version/7.8.1/global/tokens.min.css +1 -0
  199. package/dist/darkside/version/7.8.1/index.css +8670 -0
  200. package/dist/darkside/version/7.8.1/index.min.css +1 -0
  201. package/dist/global/tokens.css +1 -1
  202. package/dist/global/tokens.min.css +1 -1
  203. package/dist/index.css +17 -31
  204. package/dist/index.min.css +2 -2
  205. package/form/combobox.css +2 -22
  206. package/link.css +1 -1
  207. package/package.json +23 -9
  208. package/table.css +1 -1
  209. package/tag.css +12 -6
  210. package/tokens.json +0 -3
  211. package/darkside/index copy.css +0 -37
  212. package/dist/component/index.css +0 -10123
  213. package/dist/component/index.min.css +0 -9
  214. /package/darkside/{baseline/theme.darkside.css → theme.darkside.css} +0 -0
@@ -0,0 +1,225 @@
1
+ @layer aksel.components {
2
+ .navds-table {
3
+ border-collapse: collapse;
4
+ width: 100%;
5
+ display: table;
6
+ }
7
+
8
+ .navds-table__header {
9
+ display: table-header-group;
10
+ }
11
+
12
+ .navds-table__body {
13
+ display: table-row-group;
14
+ }
15
+
16
+ .navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
17
+ background-color: var(--ax-bg-neutral-hoverA);
18
+ transition: background-color 70ms cubic-bezier(.2, 0, 0, 1);
19
+ }
20
+
21
+ .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
22
+ background-color: var(--ax-bg-accent-hoverA);
23
+ }
24
+
25
+ .navds-table__row {
26
+ display: table-row;
27
+ }
28
+
29
+ .navds-table__row--selected {
30
+ background-color: var(--ax-bg-accent);
31
+ }
32
+
33
+ .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
34
+ background-color: var(--ax-bg-neutral);
35
+ }
36
+
37
+ .navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)) {
38
+ background-color: rgba(0, 0, 0, 0);
39
+ }
40
+
41
+ .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
42
+ background-color: var(--ax-bg-neutral);
43
+ }
44
+
45
+ .navds-table__header-cell, .navds-table__data-cell {
46
+ padding: var(--ax-spacing-3) var(--ax-spacing-2);
47
+ border-bottom: 1px solid var(--ax-border-default);
48
+ text-align: left;
49
+ display: table-cell;
50
+ }
51
+
52
+ .navds-table__header .navds-table__header-cell, .navds-table__header .navds-table__data-cell {
53
+ border-bottom-width: 2px;
54
+ }
55
+
56
+ .navds-table__header-cell--align-right, .navds-table__data-cell--align-right {
57
+ text-align: right;
58
+ }
59
+
60
+ .navds-table__header-cell--align-center, .navds-table__data-cell--align-center {
61
+ text-align: center;
62
+ }
63
+
64
+ :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell, :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
65
+ border-color: var(--ax-border-strong);
66
+ }
67
+
68
+ :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
69
+ border-bottom-color: rgba(0, 0, 0, 0);
70
+ }
71
+
72
+ .navds-table--large .navds-table__header-cell, .navds-table--large .navds-table__data-cell {
73
+ padding: var(--ax-spacing-4) var(--ax-spacing-2);
74
+ }
75
+
76
+ .navds-table--small .navds-table__header-cell, .navds-table--small .navds-table__data-cell {
77
+ padding: var(--ax-spacing-1) var(--ax-spacing-2);
78
+ }
79
+
80
+ .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
81
+ top: -.75rem;
82
+ }
83
+
84
+ .navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
85
+ top: -.375rem;
86
+ }
87
+
88
+ .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label, .navds-table__header-cell[aria-sort] {
89
+ padding: 0;
90
+ }
91
+
92
+ .navds-table__sort-button {
93
+ appearance: none;
94
+ color: var(--ax-text-accent);
95
+ cursor: pointer;
96
+ padding: var(--ax-spacing-4) var(--ax-spacing-3);
97
+ gap: var(--ax-spacing-2);
98
+ width: 100%;
99
+ line-height: inherit;
100
+ font-weight: inherit;
101
+ background: none;
102
+ border: none;
103
+ align-items: center;
104
+ margin: 0;
105
+ display: flex;
106
+ }
107
+
108
+ .navds-table--small .navds-table__sort-button {
109
+ padding: var(--ax-spacing-2) var(--ax-spacing-3);
110
+ }
111
+
112
+ .navds-table__sort-button:hover {
113
+ background-color: var(--ax-bg-neutral-hoverA);
114
+ }
115
+
116
+ .navds-table__sort-button:focus-visible {
117
+ outline: 2px solid var(--ax-border-focus);
118
+ outline-offset: -4px;
119
+ }
120
+
121
+ .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button, .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
122
+ background-color: var(--ax-bg-accent-moderate);
123
+ color: var(--ax-text-accent-strong);
124
+ }
125
+
126
+ .navds-table__header-cell--align-right .navds-table__sort-button {
127
+ justify-content: flex-end;
128
+ }
129
+
130
+ .navds-table__header-cell--align-center .navds-table__sort-button {
131
+ justify-content: center;
132
+ }
133
+
134
+ .navds-table__sort-button svg {
135
+ flex-shrink: 0;
136
+ font-size: 1rem;
137
+ }
138
+
139
+ .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
140
+ transition: border-bottom-color .15s cubic-bezier(.95, .05, .8, .04);
141
+ }
142
+
143
+ .navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
144
+ cursor: pointer;
145
+ }
146
+
147
+ .navds-table__expandable-row--open .navds-table__data-cell {
148
+ border-bottom-color: rgba(0, 0, 0, 0);
149
+ }
150
+
151
+ .navds-table__expandable-row--open .navds-table__header-cell {
152
+ border-color: var(--ax-border-default);
153
+ }
154
+
155
+ .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
156
+ border-color: rgba(0, 0, 0, 0);
157
+ }
158
+
159
+ .navds-table__toggle-expand-cell {
160
+ width: 3rem;
161
+ padding: 0;
162
+ }
163
+
164
+ .navds-table--large .navds-table__toggle-expand-cell {
165
+ padding: 0 var(--ax-spacing-2);
166
+ }
167
+
168
+ .navds-table--small .navds-table__toggle-expand-cell {
169
+ padding: var(--ax-spacing-1) var(--ax-spacing-2);
170
+ }
171
+
172
+ .navds-table__toggle-expand-button {
173
+ cursor: pointer;
174
+ border-radius: var(--ax-border-radius-medium);
175
+ background: none;
176
+ border: none;
177
+ place-content: center;
178
+ width: 2rem;
179
+ height: 2rem;
180
+ margin: 0 auto;
181
+ font-size: 1.5rem;
182
+ transition: background-color 70ms cubic-bezier(.2, 0, 0, 1);
183
+ display: grid;
184
+ }
185
+
186
+ .navds-table__expandable-icon {
187
+ transition: transform .25s cubic-bezier(.2, 0, 0, 1);
188
+ }
189
+
190
+ .navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover {
191
+ cursor: pointer;
192
+ }
193
+
194
+ .navds-table__toggle-expand-button:hover, .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button, .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
195
+ background-color: var(--ax-bg-neutral-hoverA);
196
+ }
197
+
198
+ .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
199
+ transform: rotateX(180deg);
200
+ }
201
+
202
+ .navds-table__toggle-expand-button:focus-visible {
203
+ outline: 2px solid var(--ax-border-focus);
204
+ }
205
+
206
+ .navds-table__expanded-row-cell {
207
+ padding: 0;
208
+ }
209
+
210
+ .navds-table__expanded-row-cell:empty {
211
+ display: none;
212
+ }
213
+
214
+ .navds-table__expanded-row-collapse:not([style*="height: 0px;"]), .navds-table__expanded-row-collapse[style*="transition:"] {
215
+ border-bottom: 1px solid var(--ax-border-default);
216
+ }
217
+
218
+ .navds-table__expanded-row-content {
219
+ padding: var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem);
220
+ }
221
+
222
+ .navds-table--small .navds-table__expanded-row-content {
223
+ padding: var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem);
224
+ }
225
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.navds-table{border-collapse:collapse;width:100%;display:table}.navds-table__header{display:table-header-group}.navds-table__body{display:table-row-group}.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover{background-color:var(--ax-bg-neutral-hoverA);transition:background-color 70ms cubic-bezier(.2, 0, 0, 1)}.navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover{background-color:var(--ax-bg-accent-hoverA)}.navds-table__row{display:table-row}.navds-table__row--selected{background-color:var(--ax-bg-accent)}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)){background-color:var(--ax-bg-neutral)}.navds-table--zebra-stripes .navds-table__body :where(.navds-table__expandable-row:nth-child(4n+1):not(.navds-table__row--selected)){background-color:rgba(0,0,0,0)}.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral)}.navds-table__data-cell,.navds-table__header-cell{padding:var(--ax-spacing-3) var(--ax-spacing-2);border-bottom:1px solid var(--ax-border-default);text-align:left;display:table-cell}.navds-table__header .navds-table__data-cell,.navds-table__header .navds-table__header-cell{border-bottom-width:2px}.navds-table__data-cell--align-right,.navds-table__header-cell--align-right{text-align:right}.navds-table__data-cell--align-center,.navds-table__header-cell--align-center{text-align:center}:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell,:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell{border-color:var(--ax-border-strong)}:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell{border-bottom-color:transparent}.navds-table--large .navds-table__data-cell,.navds-table--large .navds-table__header-cell{padding:var(--ax-spacing-4) var(--ax-spacing-2)}.navds-table--small .navds-table__data-cell,.navds-table--small .navds-table__header-cell{padding:var(--ax-spacing-1) var(--ax-spacing-2)}.navds-table :not(.navds-checkboxes)>.navds-checkbox .navds-checkbox__input{top:-.75rem}.navds-table :not(.navds-checkboxes)>.navds-checkbox--small .navds-checkbox__input{top:-.375rem}.navds-table :not(.navds-checkboxes)>.navds-checkbox .navds-checkbox__label,.navds-table__header-cell[aria-sort]{padding:0}.navds-table__sort-button{appearance:none;color:var(--ax-text-accent);cursor:pointer;padding:var(--ax-spacing-4) var(--ax-spacing-3);gap:var(--ax-spacing-2);width:100%;line-height:inherit;font-weight:inherit;background:0 0;border:none;align-items:center;margin:0;display:flex}.navds-table--small .navds-table__sort-button{padding:var(--ax-spacing-2) var(--ax-spacing-3)}.navds-table__sort-button:hover{background-color:var(--ax-bg-neutral-hoverA)}.navds-table__sort-button:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:-4px}.navds-table__header-cell[aria-sort=ascending] .navds-table__sort-button,.navds-table__header-cell[aria-sort=descending] .navds-table__sort-button{background-color:var(--ax-bg-accent-moderate);color:var(--ax-text-accent-strong)}.navds-table__header-cell--align-right .navds-table__sort-button{justify-content:flex-end}.navds-table__header-cell--align-center .navds-table__sort-button{justify-content:center}.navds-table__sort-button svg{flex-shrink:0;font-size:1rem}.navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell{transition:border-bottom-color .15s cubic-bezier(.95, .05, .8, .04)}.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover{cursor:pointer}.navds-table__expandable-row--open .navds-table__data-cell{border-bottom-color:transparent}.navds-table__expandable-row--open .navds-table__header-cell{border-color:var(--ax-border-default)}.navds-table__expandable-row--open .navds-table__toggle-expand-cell--open{border-color:transparent}.navds-table__toggle-expand-cell{width:3rem;padding:0}.navds-table--large .navds-table__toggle-expand-cell{padding:0 var(--ax-spacing-2)}.navds-table--small .navds-table__toggle-expand-cell{padding:var(--ax-spacing-1) var(--ax-spacing-2)}.navds-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-border-radius-medium);background:0 0;border:none;place-content:center;width:2rem;height:2rem;margin:0 auto;font-size:1.5rem;transition:background-color 70ms cubic-bezier(.2, 0, 0, 1);display:grid}.navds-table__expandable-icon{transition:transform .25s cubic-bezier(.2, 0, 0, 1)}.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled) .navds-table__toggle-expand-cell:hover{cursor:pointer}.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button,.navds-table__toggle-expand-button:hover,.navds-table__toggle-expand-cell:hover>.navds-table__toggle-expand-button{background-color:var(--ax-bg-neutral-hoverA)}.navds-table__toggle-expand-cell--open>:where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon){transform:rotateX(180deg)}.navds-table__toggle-expand-button:focus-visible{outline:2px solid var(--ax-border-focus)}.navds-table__expanded-row-cell{padding:0}.navds-table__expanded-row-cell:empty{display:none}.navds-table__expanded-row-collapse:not([style*="height: 0px;"]),.navds-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-default)}.navds-table__expanded-row-content{padding:var(--ax-spacing-4) calc(var(--ax-spacing-2) + 3rem)}.navds-table--small .navds-table__expanded-row-content{padding:var(--ax-spacing-2) calc(var(--ax-spacing-2) + 3rem)}}
@@ -0,0 +1,138 @@
1
+ @layer aksel.components {
2
+ .navds-tabs__tablist-wrapper {
3
+ box-shadow: inset 0 -1px var(--ax-border-neutral-subtle);
4
+ width: 100%;
5
+ display: flex;
6
+ }
7
+
8
+ .navds-tabs__tablist {
9
+ scroll-behavior: smooth;
10
+ -ms-overflow-style: none;
11
+ scrollbar-width: none;
12
+ width: 100%;
13
+ max-width: 100%;
14
+ display: flex;
15
+ overflow-x: scroll;
16
+ }
17
+
18
+ .navds-tabs__tablist::-webkit-scrollbar {
19
+ display: none;
20
+ }
21
+
22
+ .navds-tabs__scroll-button {
23
+ padding: var(--ax-spacing-3) var(--ax-spacing-4);
24
+ cursor: pointer;
25
+ justify-content: center;
26
+ align-items: center;
27
+ width: 2.75rem;
28
+ display: flex;
29
+ }
30
+
31
+ .navds-tabs__scroll-button svg {
32
+ flex-shrink: 0;
33
+ font-size: 1.25rem;
34
+ }
35
+
36
+ .navds-tabs--small .navds-tabs__scroll-button {
37
+ padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
38
+ width: 2rem;
39
+ }
40
+
41
+ .navds-tabs__scroll-button--hidden {
42
+ visibility: hidden;
43
+ }
44
+
45
+ .navds-tabs__tab {
46
+ min-height: 3rem;
47
+ padding: var(--ax-spacing-3) var(--ax-spacing-4);
48
+ color: var(--ax-text-default);
49
+ cursor: pointer;
50
+ --__axc-tabs-line-width: 0;
51
+ --__axc-tabs-line-color: var(--ax-border-neutral-subtle);
52
+ box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
53
+ background: none;
54
+ border: none;
55
+ justify-content: center;
56
+ align-items: center;
57
+ transition: box-shadow .2s cubic-bezier(.2, 0, 0, 1);
58
+ display: inline-flex;
59
+ }
60
+
61
+ .navds-tabs__tab:hover {
62
+ --__axc-tabs-line-width: -4px;
63
+ }
64
+
65
+ .navds-tabs__tab[data-state="active"] {
66
+ --__axc-tabs-line-width: -4px;
67
+ --__axc-tabs-line-color: var(--ax-border-accent-strong);
68
+ }
69
+
70
+ .navds-tabs__tab:focus-visible {
71
+ outline: 2px solid var(--ax-border-focus);
72
+ outline-offset: -2px;
73
+ }
74
+
75
+ .navds-tabs__tab-inner {
76
+ align-items: center;
77
+ gap: var(--ax-spacing-1);
78
+ display: flex;
79
+ }
80
+
81
+ .navds-tabs__tab-inner > * {
82
+ display: inline-flex;
83
+ }
84
+
85
+ .navds-tabs__tab-inner svg {
86
+ flex-shrink: 0;
87
+ }
88
+
89
+ .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
90
+ flex-direction: column;
91
+ gap: 0;
92
+ }
93
+
94
+ .navds-tabs__tab--small {
95
+ min-height: 2rem;
96
+ padding: var(--ax-spacing-1-alt) var(--ax-spacing-4);
97
+ }
98
+
99
+ .navds-tabs__tab-icon--top, .navds-tabs__tab--small.navds-tabs__tab-icon--top {
100
+ padding: var(--ax-spacing-1) var(--ax-spacing-4);
101
+ }
102
+
103
+ :is(.navds-tabs__tab, .navds-tabs__tab--small.navds-tabs__tab--icon-only, .navds-tabs__tab--small.navds-tabs__tab-icon--top) svg {
104
+ font-size: 1.25rem;
105
+ }
106
+
107
+ .navds-tabs__tab--small svg {
108
+ font-size: 1rem;
109
+ }
110
+
111
+ :is(.navds-tabs__tab--icon-only, .navds-tabs__tab-icon--top) svg {
112
+ font-size: 1.5rem;
113
+ }
114
+
115
+ .navds-tabs__tab--fill {
116
+ flex: 100%;
117
+ }
118
+
119
+ .navds-tabs__tabpanel:focus-visible {
120
+ outline: 2px solid var(--ax-border-focus);
121
+ outline-offset: -2px;
122
+ }
123
+
124
+ @media (forced-colors: active) {
125
+ .navds-tabs__tab[data-state="active"] {
126
+ border-bottom: 3px solid canvastext;
127
+ padding-block-end: calc(var(--ax-spacing-3) - 3px);
128
+ }
129
+
130
+ .navds-tabs__tab--small[data-state="active"] {
131
+ padding-block-end: calc(var(--ax-spacing-1-alt) - 3px);
132
+ }
133
+
134
+ .navds-tabs__tab-icon--top[data-state="active"], .navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state="active"] {
135
+ padding-block-end: calc(var(--ax-spacing-1) - 3px);
136
+ }
137
+ }
138
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.navds-tabs__tablist-wrapper{box-shadow:inset 0 -1px var(--ax-border-neutral-subtle);width:100%;display:flex}.navds-tabs__tablist{scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;width:100%;max-width:100%;display:flex;overflow-x:scroll}.navds-tabs__tablist::-webkit-scrollbar{display:none}.navds-tabs__scroll-button{padding:var(--ax-spacing-3) var(--ax-spacing-4);cursor:pointer;justify-content:center;align-items:center;width:2.75rem;display:flex}.navds-tabs__scroll-button svg{flex-shrink:0;font-size:1.25rem}.navds-tabs--small .navds-tabs__scroll-button{padding:var(--ax-spacing-1-alt) var(--ax-spacing-4);width:2rem}.navds-tabs__scroll-button--hidden{visibility:hidden}.navds-tabs__tab{min-height:3rem;padding:var(--ax-spacing-3) var(--ax-spacing-4);color:var(--ax-text-default);cursor:pointer;--__axc-tabs-line-width:0;--__axc-tabs-line-color:var(--ax-border-neutral-subtle);box-shadow:inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);background:0 0;border:none;justify-content:center;align-items:center;transition:box-shadow .2s cubic-bezier(.2, 0, 0, 1);display:inline-flex}.navds-tabs__tab:hover{--__axc-tabs-line-width:-4px}.navds-tabs__tab[data-state=active]{--__axc-tabs-line-width:-4px;--__axc-tabs-line-color:var(--ax-border-accent-strong)}.navds-tabs__tab:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:-2px}.navds-tabs__tab-inner{align-items:center;gap:var(--ax-spacing-1);display:flex}.navds-tabs__tab-inner>*{display:inline-flex}.navds-tabs__tab-inner svg{flex-shrink:0}.navds-tabs__tab-icon--top>.navds-tabs__tab-inner{flex-direction:column;gap:0}.navds-tabs__tab--small{min-height:2rem;padding:var(--ax-spacing-1-alt) var(--ax-spacing-4)}.navds-tabs__tab--small.navds-tabs__tab-icon--top,.navds-tabs__tab-icon--top{padding:var(--ax-spacing-1) var(--ax-spacing-4)}:is(.navds-tabs__tab,.navds-tabs__tab--small.navds-tabs__tab--icon-only,.navds-tabs__tab--small.navds-tabs__tab-icon--top) svg{font-size:1.25rem}.navds-tabs__tab--small svg{font-size:1rem}:is(.navds-tabs__tab--icon-only,.navds-tabs__tab-icon--top) svg{font-size:1.5rem}.navds-tabs__tab--fill{flex:100%}.navds-tabs__tabpanel:focus-visible{outline:2px solid var(--ax-border-focus);outline-offset:-2px}@media (forced-colors:active){.navds-tabs__tab[data-state=active]{border-bottom:3px solid canvastext;padding-block-end:calc(var(--ax-spacing-3) - 3px)}.navds-tabs__tab--small[data-state=active]{padding-block-end:calc(var(--ax-spacing-1-alt) - 3px)}.navds-tabs__tab--small.navds-tabs__tab-icon--top[data-state=active],.navds-tabs__tab-icon--top[data-state=active]{padding-block-end:calc(var(--ax-spacing-1) - 3px)}}}
@@ -0,0 +1,128 @@
1
+ @layer aksel.components {
2
+ .navds-tag {
3
+ --__axc-tag-icon-size: 1.5rem;
4
+ --__axc-tag-icon-margin: -2px;
5
+ --__axc-tag-border: ;
6
+ --__axc-tag-bg: ;
7
+ --__axc-tag-bg-strong: ;
8
+ --__axc-tag-text: ;
9
+ --__axc-tag-text-strong: ;
10
+ border-radius: var(--ax-border-radius-medium);
11
+ padding: var(--ax-spacing-05) var(--ax-spacing-2);
12
+ justify-content: center;
13
+ align-items: center;
14
+ min-height: 2rem;
15
+ line-height: 1;
16
+ display: inline-flex;
17
+ }
18
+
19
+ .navds-tag:has(.navds-tag__icon--left) {
20
+ gap: var(--ax-spacing-05);
21
+ }
22
+
23
+ .navds-tag--info, .navds-tag--alt3 {
24
+ --__axc-tag-border: var(--ax-border-info);
25
+ --__axc-tag-bg: var(--ax-bg-info-moderateA);
26
+ --__axc-tag-bg-strong: var(--ax-bg-info-strong);
27
+ --__axc-tag-text: var(--ax-text-info-strong);
28
+ --__axc-tag-text-strong: var(--ax-text-info-contrast);
29
+ }
30
+
31
+ .navds-tag--success {
32
+ --__axc-tag-border: var(--ax-border-success);
33
+ --__axc-tag-bg: var(--ax-bg-success-moderateA);
34
+ --__axc-tag-bg-strong: var(--ax-bg-success-strong);
35
+ --__axc-tag-text: var(--ax-text-success-strong);
36
+ --__axc-tag-text-strong: var(--ax-text-success-contrast);
37
+ }
38
+
39
+ .navds-tag--warning {
40
+ --__axc-tag-border: var(--ax-border-warning);
41
+ --__axc-tag-bg: var(--ax-bg-warning-moderateA);
42
+ --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
43
+ --__axc-tag-text: var(--ax-text-warning-strong);
44
+ --__axc-tag-text-strong: var(--ax-text-warning-contrast);
45
+ }
46
+
47
+ .navds-tag--error {
48
+ --__axc-tag-border: var(--ax-border-danger);
49
+ --__axc-tag-bg: var(--ax-bg-danger-moderateA);
50
+ --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
51
+ --__axc-tag-text: var(--ax-text-danger-strong);
52
+ --__axc-tag-text-strong: var(--ax-text-danger-contrast);
53
+ }
54
+
55
+ .navds-tag--neutral {
56
+ --__axc-tag-border: var(--ax-border-neutral);
57
+ --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
58
+ --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
59
+ --__axc-tag-text: var(--ax-text-neutral-strong);
60
+ --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
61
+ }
62
+
63
+ .navds-tag--meta-purple, .navds-tag--alt1 {
64
+ --__axc-tag-border: var(--ax-border-meta-purple);
65
+ --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
66
+ --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
67
+ --__axc-tag-text: var(--ax-text-meta-purple-strong);
68
+ --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
69
+ }
70
+
71
+ .navds-tag--meta-lime, .navds-tag--alt2 {
72
+ --__axc-tag-border: var(--ax-border-meta-lime);
73
+ --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
74
+ --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
75
+ --__axc-tag-text: var(--ax-text-meta-lime-strong);
76
+ --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
77
+ }
78
+
79
+ .navds-tag--small {
80
+ min-height: 1.5rem;
81
+ padding: 0 var(--ax-spacing-1-alt);
82
+ --__axc-tag-icon-size: 1.25rem;
83
+ }
84
+
85
+ .navds-tag--xsmall {
86
+ min-height: 1.25rem;
87
+ padding: 0 var(--ax-spacing-1);
88
+ --__axc-tag-icon-size: 1rem;
89
+ --__axc-tag-icon-margin: -1px;
90
+ }
91
+
92
+ .navds-tag__icon--left {
93
+ font-size: var(--__axc-tag-icon-size);
94
+ margin-inline-start: var(--__axc-tag-icon-margin);
95
+ display: flex;
96
+ }
97
+
98
+ .navds-tag--outline {
99
+ box-shadow: inset 0 0 0 1px var(--__axc-tag-border);
100
+ background: var(--__axc-tag-bg);
101
+ color: var(--__axc-tag-text);
102
+ }
103
+
104
+ .navds-tag--moderate {
105
+ background: var(--__axc-tag-bg);
106
+ color: var(--__axc-tag-text);
107
+ }
108
+
109
+ .navds-tag--strong {
110
+ background: var(--__axc-tag-bg-strong);
111
+ color: var(--__axc-tag-text-strong);
112
+ }
113
+
114
+ @media (forced-colors: active) {
115
+ .navds-tag {
116
+ forced-color-adjust: none;
117
+ color: canvastext;
118
+ }
119
+
120
+ .navds-tag--moderate {
121
+ box-shadow: inset 0 0 0 1px var(--__axc-tag-bg-strong);
122
+ }
123
+
124
+ .navds-tag--strong {
125
+ color: canvas;
126
+ }
127
+ }
128
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.navds-tag{--__axc-tag-icon-size:1.5rem;--__axc-tag-icon-margin:-2px;--__axc-tag-border: ;--__axc-tag-bg: ;--__axc-tag-bg-strong: ;--__axc-tag-text: ;--__axc-tag-text-strong: ;border-radius:var(--ax-border-radius-medium);padding:var(--ax-spacing-05) var(--ax-spacing-2);justify-content:center;align-items:center;min-height:2rem;line-height:1;display:inline-flex}.navds-tag:has(.navds-tag__icon--left){gap:var(--ax-spacing-05)}.navds-tag--alt3,.navds-tag--info{--__axc-tag-border:var(--ax-border-info);--__axc-tag-bg:var(--ax-bg-info-moderateA);--__axc-tag-bg-strong:var(--ax-bg-info-strong);--__axc-tag-text:var(--ax-text-info-strong);--__axc-tag-text-strong:var(--ax-text-info-contrast)}.navds-tag--success{--__axc-tag-border:var(--ax-border-success);--__axc-tag-bg:var(--ax-bg-success-moderateA);--__axc-tag-bg-strong:var(--ax-bg-success-strong);--__axc-tag-text:var(--ax-text-success-strong);--__axc-tag-text-strong:var(--ax-text-success-contrast)}.navds-tag--warning{--__axc-tag-border:var(--ax-border-warning);--__axc-tag-bg:var(--ax-bg-warning-moderateA);--__axc-tag-bg-strong:var(--ax-bg-warning-strong);--__axc-tag-text:var(--ax-text-warning-strong);--__axc-tag-text-strong:var(--ax-text-warning-contrast)}.navds-tag--error{--__axc-tag-border:var(--ax-border-danger);--__axc-tag-bg:var(--ax-bg-danger-moderateA);--__axc-tag-bg-strong:var(--ax-bg-danger-strong);--__axc-tag-text:var(--ax-text-danger-strong);--__axc-tag-text-strong:var(--ax-text-danger-contrast)}.navds-tag--neutral{--__axc-tag-border:var(--ax-border-neutral);--__axc-tag-bg:var(--ax-bg-neutral-moderateA);--__axc-tag-bg-strong:var(--ax-bg-neutral-strong);--__axc-tag-text:var(--ax-text-neutral-strong);--__axc-tag-text-strong:var(--ax-text-neutral-contrast)}.navds-tag--alt1,.navds-tag--meta-purple{--__axc-tag-border:var(--ax-border-meta-purple);--__axc-tag-bg:var(--ax-bg-meta-purple-moderateA);--__axc-tag-bg-strong:var(--ax-bg-meta-purple-strong);--__axc-tag-text:var(--ax-text-meta-purple-strong);--__axc-tag-text-strong:var(--ax-text-meta-purple-contrast)}.navds-tag--alt2,.navds-tag--meta-lime{--__axc-tag-border:var(--ax-border-meta-lime);--__axc-tag-bg:var(--ax-bg-meta-lime-moderateA);--__axc-tag-bg-strong:var(--ax-bg-meta-lime-strong);--__axc-tag-text:var(--ax-text-meta-lime-strong);--__axc-tag-text-strong:var(--ax-text-meta-lime-contrast)}.navds-tag--small{min-height:1.5rem;padding:0 var(--ax-spacing-1-alt);--__axc-tag-icon-size:1.25rem}.navds-tag--xsmall{min-height:1.25rem;padding:0 var(--ax-spacing-1);--__axc-tag-icon-size:1rem;--__axc-tag-icon-margin:-1px}.navds-tag__icon--left{font-size:var(--__axc-tag-icon-size);margin-inline-start:var(--__axc-tag-icon-margin);display:flex}.navds-tag--outline{box-shadow:inset 0 0 0 1px var(--__axc-tag-border);background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.navds-tag--moderate{background:var(--__axc-tag-bg);color:var(--__axc-tag-text)}.navds-tag--strong{background:var(--__axc-tag-bg-strong);color:var(--__axc-tag-text-strong)}@media (forced-colors:active){.navds-tag{forced-color-adjust:none;color:canvastext}.navds-tag--moderate{box-shadow:inset 0 0 0 1px var(--__axc-tag-bg-strong)}.navds-tag--strong{color:canvas}}}
@@ -0,0 +1,17 @@
1
+ @layer aksel.components {
2
+ .navds-theme {
3
+ color: var(--ax-text-default);
4
+ }
5
+
6
+ .navds-theme[data-background="true"] {
7
+ background-color: var(--ax-bg-default);
8
+ }
9
+
10
+ .navds-theme.light {
11
+ color-scheme: light;
12
+ }
13
+
14
+ .navds-theme.dark {
15
+ color-scheme: dark;
16
+ }
17
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.navds-theme{color:var(--ax-text-default)}.navds-theme[data-background=true]{background-color:var(--ax-bg-default)}.navds-theme.light{color-scheme:light}.navds-theme.dark{color-scheme:dark}}