@navikt/ds-css 7.28.0 → 7.29.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 (127) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/config/_mappings.js +1 -0
  3. package/darkside/index.css +1 -0
  4. package/darkside/link-card.darkside.css +29 -8
  5. package/darkside/process.darkside.css +153 -0
  6. package/darkside/table.darkside.css +4 -5
  7. package/darkside/tooltip.darkside.css +1 -1
  8. package/dist/component/linkcard.css +27 -10
  9. package/dist/component/linkcard.min.css +1 -1
  10. package/dist/component/process.css +153 -0
  11. package/dist/component/process.min.css +1 -0
  12. package/dist/components.css +186 -10
  13. package/dist/components.min.css +1 -1
  14. package/dist/darkside/component/linkcard.css +25 -9
  15. package/dist/darkside/component/linkcard.min.css +1 -1
  16. package/dist/darkside/component/process.css +148 -0
  17. package/dist/darkside/component/process.min.css +1 -0
  18. package/dist/darkside/component/table.css +4 -4
  19. package/dist/darkside/component/table.min.css +1 -1
  20. package/dist/darkside/component/tooltip.css +2 -2
  21. package/dist/darkside/component/tooltip.min.css +1 -1
  22. package/dist/darkside/components.css +178 -15
  23. package/dist/darkside/components.min.css +1 -1
  24. package/dist/darkside/global/tokens.css +1 -1
  25. package/dist/darkside/global/tokens.min.css +1 -1
  26. package/dist/darkside/index.css +179 -16
  27. package/dist/darkside/index.min.css +1 -1
  28. package/dist/darkside/version/{7.28.0 → 7.29.0}/component/linkcard.css +25 -9
  29. package/dist/darkside/version/7.29.0/component/linkcard.min.css +1 -0
  30. package/dist/darkside/version/7.29.0/component/process.css +148 -0
  31. package/dist/darkside/version/7.29.0/component/process.min.css +1 -0
  32. package/dist/darkside/version/{7.28.0 → 7.29.0}/component/table.css +4 -4
  33. package/dist/darkside/version/7.29.0/component/table.min.css +1 -0
  34. package/dist/darkside/version/{7.28.0 → 7.29.0}/component/tooltip.css +2 -2
  35. package/dist/darkside/version/{7.28.0 → 7.29.0}/component/tooltip.min.css +1 -1
  36. package/dist/darkside/version/{7.28.0 → 7.29.0}/components.css +178 -15
  37. package/dist/darkside/version/{7.28.0 → 7.29.0}/components.min.css +1 -1
  38. package/dist/darkside/version/{7.28.0 → 7.29.0}/global/tokens.css +1 -1
  39. package/dist/darkside/version/{7.28.0 → 7.29.0}/global/tokens.min.css +1 -1
  40. package/dist/darkside/version/{7.28.0 → 7.29.0}/index.css +179 -16
  41. package/dist/darkside/version/{7.28.0 → 7.29.0}/index.min.css +1 -1
  42. package/dist/global/tokens.css +1 -1
  43. package/dist/global/tokens.min.css +1 -1
  44. package/dist/index.css +187 -11
  45. package/dist/index.min.css +2 -2
  46. package/index.css +1 -0
  47. package/link-card.css +32 -10
  48. package/package.json +8 -5
  49. package/process.css +153 -0
  50. package/dist/darkside/version/7.28.0/component/linkcard.min.css +0 -1
  51. package/dist/darkside/version/7.28.0/component/table.min.css +0 -1
  52. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/accordion.css +0 -0
  53. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/accordion.min.css +0 -0
  54. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/actionmenu.css +0 -0
  55. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/actionmenu.min.css +0 -0
  56. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/alert.css +0 -0
  57. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/alert.min.css +0 -0
  58. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/button.css +0 -0
  59. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/button.min.css +0 -0
  60. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/chat.css +0 -0
  61. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/chat.min.css +0 -0
  62. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/chips.css +0 -0
  63. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/chips.min.css +0 -0
  64. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/copybutton.css +0 -0
  65. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/copybutton.min.css +0 -0
  66. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/date.css +0 -0
  67. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/date.min.css +0 -0
  68. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/dropdown.css +0 -0
  69. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/dropdown.min.css +0 -0
  70. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/expansioncard.css +0 -0
  71. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/expansioncard.min.css +0 -0
  72. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/form.css +0 -0
  73. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/form.min.css +0 -0
  74. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/guidepanel.css +0 -0
  75. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/guidepanel.min.css +0 -0
  76. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/helptext.css +0 -0
  77. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/helptext.min.css +0 -0
  78. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/internalheader.css +0 -0
  79. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/internalheader.min.css +0 -0
  80. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/link.css +0 -0
  81. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/link.min.css +0 -0
  82. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/linkanchor.css +0 -0
  83. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/linkanchor.min.css +0 -0
  84. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/linkpanel.css +0 -0
  85. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/linkpanel.min.css +0 -0
  86. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/list.css +0 -0
  87. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/list.min.css +0 -0
  88. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/loader.css +0 -0
  89. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/loader.min.css +0 -0
  90. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/modal.css +0 -0
  91. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/modal.min.css +0 -0
  92. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/pagination.css +0 -0
  93. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/pagination.min.css +0 -0
  94. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/panel.css +0 -0
  95. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/panel.min.css +0 -0
  96. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/popover.css +0 -0
  97. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/popover.min.css +0 -0
  98. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/primitives.css +0 -0
  99. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/primitives.min.css +0 -0
  100. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/progressbar.css +0 -0
  101. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/progressbar.min.css +0 -0
  102. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/readmore.css +0 -0
  103. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/readmore.min.css +0 -0
  104. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/skeleton.css +0 -0
  105. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/skeleton.min.css +0 -0
  106. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/stepper.css +0 -0
  107. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/stepper.min.css +0 -0
  108. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/tabs.css +0 -0
  109. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/tabs.min.css +0 -0
  110. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/tag.css +0 -0
  111. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/tag.min.css +0 -0
  112. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/theme.css +0 -0
  113. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/theme.min.css +0 -0
  114. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/timeline.css +0 -0
  115. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/timeline.min.css +0 -0
  116. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/togglegroup.css +0 -0
  117. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/togglegroup.min.css +0 -0
  118. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/typography.css +0 -0
  119. /package/dist/darkside/version/{7.28.0 → 7.29.0}/component/typography.min.css +0 -0
  120. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/baseline.css +0 -0
  121. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/baseline.min.css +0 -0
  122. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/fonts.css +0 -0
  123. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/fonts.min.css +0 -0
  124. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/print.css +0 -0
  125. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/print.min.css +0 -0
  126. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/reset.css +0 -0
  127. /package/dist/darkside/version/{7.28.0 → 7.29.0}/global/reset.min.css +0 -0
@@ -8,10 +8,10 @@
8
8
  border: 1px solid var(--ax-border-subtleA);
9
9
  padding: var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);
10
10
  cursor: pointer;
11
- grid-template: "image image" min-content
12
- "icon title" min-content
13
- "icon description" min-content
14
- "icon footer"
11
+ grid-template: "image image image" min-content
12
+ "icon title arrow" min-content
13
+ "icon description arrow" min-content
14
+ "icon footer arrow"
15
15
  / auto 1fr;
16
16
  align-items: center;
17
17
  text-decoration: none;
@@ -22,6 +22,13 @@
22
22
  position: relative;
23
23
  }
24
24
 
25
+ .aksel-link-card[data-align-arrow="baseline"] {
26
+ grid-template-areas: "image image image"
27
+ "icon title arrow"
28
+ "icon description description"
29
+ "icon footer footer";
30
+ }
31
+
25
32
  .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) {
26
33
  grid-template-rows: auto 1fr;
27
34
  }
@@ -30,7 +37,7 @@
30
37
  align-items: center;
31
38
  }
32
39
 
33
- .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__icon {
40
+ .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__icon, .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer))[data-align-arrow="baseline"] .aksel-link-card__arrow {
34
41
  align-self: center;
35
42
  }
36
43
 
@@ -46,13 +53,9 @@
46
53
 
47
54
  .aksel-link-card__title {
48
55
  color: var(--ax-text-subtle);
49
- justify-content: space-between;
50
- align-items: flex-start;
51
- gap: var(--ax-space-8);
52
56
  -webkit-hyphens: auto;
53
57
  hyphens: auto;
54
58
  grid-area: title;
55
- display: flex;
56
59
  }
57
60
 
58
61
  .aksel-link-card[data-color="neutral"] .aksel-link-card__title, .aksel-link-card__title[data-color="neutral"] {
@@ -105,4 +108,17 @@
105
108
  height: 100%;
106
109
  display: block;
107
110
  }
111
+
112
+ .aksel-link-card__arrow {
113
+ grid-area: arrow;
114
+ margin-inline-start: var(--ax-space-8);
115
+ }
116
+
117
+ .aksel-link-card[data-align-arrow="baseline"] .aksel-link-card__arrow {
118
+ align-self: baseline;
119
+ }
120
+
121
+ .aksel-link-card[data-align-arrow="center"] .aksel-link-card__arrow {
122
+ align-self: center;
123
+ }
108
124
  }
@@ -1 +1 @@
1
- @layer aksel.components{.aksel-link-card{--__axc-link-card-padding-block: var(--ax-space-16);--__axc-link-card-padding-inline: var(--ax-space-20);border-radius:var(--ax-border-radius-xlarge);color:var(--ax-text-neutral);background-color:var(--ax-bg-raised);border:1px solid var(--ax-border-subtleA);padding:var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);cursor:pointer;grid-template:"image image" min-content "icon title" min-content "icon description" min-content "icon footer" / auto 1fr;align-items:center;text-decoration:none;transition-property:border-color,box-shadow,transform,background-color;transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,0,1);display:grid;position:relative}.aksel-link-card:not(:has(.aksel-link-card__description,.aksel-link-card__footer)){grid-template-rows:auto 1fr}.aksel-link-card:not(:has(.aksel-link-card__description,.aksel-link-card__footer)) .aksel-link-card__title{align-items:center}.aksel-link-card:not(:has(.aksel-link-card__description,.aksel-link-card__footer)) .aksel-link-card__icon{align-self:center}.aksel-link-card:hover{border-color:var(--ax-border-default);box-shadow:0 0 0 1px var(--ax-border-default)}.aksel-link-card--small{--__axc-link-card-padding-block: var(--ax-space-12);--__axc-link-card-padding-inline: var(--ax-space-16)}.aksel-link-card__title{color:var(--ax-text-subtle);justify-content:space-between;align-items:flex-start;gap:var(--ax-space-8);-webkit-hyphens:auto;hyphens:auto;grid-area:title;display:flex}.aksel-link-card[data-color=neutral] .aksel-link-card__title,.aksel-link-card__title[data-color=neutral]{color:var(--ax-text-default)}.aksel-link-card__description{grid-area:description;margin-block-start:var(--ax-space-4)}.aksel-link-card__footer{align-self:flex-end;gap:var(--ax-space-8);flex-wrap:wrap;grid-area:footer;margin-block-start:var(--ax-space-16);display:flex}.aksel-link-card__icon{width:max-content;height:max-content;color:var(--ax-text-default);grid-area:icon;place-content:center;align-self:flex-start;margin-inline-end:var(--ax-space-16);display:grid}.aksel-link-card--small .aksel-link-card__icon{margin-inline-end:var(--ax-space-12)}.aksel-link-card__image-container{margin-block:calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);margin-inline:calc(var(--__axc-link-card-padding-inline) * 1 * -1);border-radius:calc(var(--ax-border-radius-xlarge) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0;grid-area:image;position:relative;overflow:hidden}.aksel-link-card__image-container :is(img,picture){object-fit:cover;max-width:100%;height:100%;display:block}}
1
+ @layer aksel.components{.aksel-link-card{--__axc-link-card-padding-block: var(--ax-space-16);--__axc-link-card-padding-inline: var(--ax-space-20);border-radius:var(--ax-border-radius-xlarge);color:var(--ax-text-neutral);background-color:var(--ax-bg-raised);border:1px solid var(--ax-border-subtleA);padding:var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);cursor:pointer;grid-template:"image image image" min-content "icon title arrow" min-content "icon description arrow" min-content "icon footer arrow" / auto 1fr;align-items:center;text-decoration:none;transition-property:border-color,box-shadow,transform,background-color;transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,0,1);display:grid;position:relative}.aksel-link-card[data-align-arrow=baseline]{grid-template-areas:"image image image" "icon title arrow" "icon description description" "icon footer footer"}.aksel-link-card:not(:has(.aksel-link-card__description,.aksel-link-card__footer)){grid-template-rows:auto 1fr}.aksel-link-card:not(:has(.aksel-link-card__description,.aksel-link-card__footer)) .aksel-link-card__title{align-items:center}.aksel-link-card:not(:has(.aksel-link-card__description,.aksel-link-card__footer)) .aksel-link-card__icon,.aksel-link-card:not(:has(.aksel-link-card__description,.aksel-link-card__footer))[data-align-arrow=baseline] .aksel-link-card__arrow{align-self:center}.aksel-link-card:hover{border-color:var(--ax-border-default);box-shadow:0 0 0 1px var(--ax-border-default)}.aksel-link-card--small{--__axc-link-card-padding-block: var(--ax-space-12);--__axc-link-card-padding-inline: var(--ax-space-16)}.aksel-link-card__title{color:var(--ax-text-subtle);-webkit-hyphens:auto;hyphens:auto;grid-area:title}.aksel-link-card[data-color=neutral] .aksel-link-card__title,.aksel-link-card__title[data-color=neutral]{color:var(--ax-text-default)}.aksel-link-card__description{grid-area:description;margin-block-start:var(--ax-space-4)}.aksel-link-card__footer{align-self:flex-end;gap:var(--ax-space-8);flex-wrap:wrap;grid-area:footer;margin-block-start:var(--ax-space-16);display:flex}.aksel-link-card__icon{width:max-content;height:max-content;color:var(--ax-text-default);grid-area:icon;place-content:center;align-self:flex-start;margin-inline-end:var(--ax-space-16);display:grid}.aksel-link-card--small .aksel-link-card__icon{margin-inline-end:var(--ax-space-12)}.aksel-link-card__image-container{margin-block:calc(var(--__axc-link-card-padding-block) * -1) var(--__axc-link-card-padding-block);margin-inline:calc(var(--__axc-link-card-padding-inline) * 1 * -1);border-radius:calc(var(--ax-border-radius-xlarge) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0;grid-area:image;position:relative;overflow:hidden}.aksel-link-card__image-container :is(img,picture){object-fit:cover;max-width:100%;height:100%;display:block}.aksel-link-card__arrow{grid-area:arrow;margin-inline-start:var(--ax-space-8)}.aksel-link-card[data-align-arrow=baseline] .aksel-link-card__arrow{align-self:baseline}.aksel-link-card[data-align-arrow=center] .aksel-link-card__arrow{align-self:center}}
@@ -0,0 +1,148 @@
1
+ @layer aksel.components {
2
+ .aksel-process {
3
+ --__axc-process-circle-base: 2rem;
4
+ --__axc-process-circle-large: var(--__axc-process-circle-base);
5
+ --__axc-process-circle-small: 1rem;
6
+ --__axc-process-circle-size: var(--__axc-process-circle-large);
7
+ --__axc-process-border-width: 2px;
8
+ margin: 0;
9
+ padding: 0;
10
+ list-style: none;
11
+ }
12
+
13
+ .aksel-process__event {
14
+ grid-template-rows: [line-1] auto [step-start] var(--__axc-process-circle-size) [line-2 step-end] auto;
15
+ grid-template-columns: var(--__axc-process-circle-base) auto;
16
+ justify-items: flex-start;
17
+ display: grid;
18
+ }
19
+
20
+ .aksel-process__event[data-dot="true"] {
21
+ --__axc-process-circle-size: var(--__axc-process-circle-small);
22
+ margin-block-start: calc((var(--__axc-process-circle-small) / 2) * -1);
23
+ }
24
+
25
+ .aksel-process__event[data-dot="true"] .aksel-process__line {
26
+ margin-block-start: calc(var(--__axc-process-circle-size) / 2);
27
+ }
28
+
29
+ .aksel-process__event[data-dot="true"] .aksel-process__bullet {
30
+ --__axc-process-circle-size: var(--__axc-process-circle-small);
31
+ margin-top: calc((var(--__axc-process-circle-large) - var(--__axc-process-circle-small)) / 2);
32
+ }
33
+
34
+ .aksel-process__line {
35
+ border: calc(var(--__axc-process-border-width) / 2) solid;
36
+ border-color: var(--ax-border-neutral-subtle);
37
+ grid-area: line-2 / 1;
38
+ justify-self: center;
39
+ width: 0;
40
+ min-height: 2rem;
41
+ }
42
+
43
+ .aksel-process__event[data-status="active"] .aksel-process__line {
44
+ border-color: var(--ax-border-default);
45
+ border-image: linear-gradient(to bottom, var(--ax-border-default) 50%, var(--ax-border-neutral-subtle) 90%);
46
+ border-image-slice: 1;
47
+ }
48
+
49
+ .aksel-process__event[data-status="completed"] .aksel-process__line {
50
+ border-color: var(--ax-border-default);
51
+ }
52
+
53
+ .aksel-process__event:not([data-status="active"]) .aksel-process__line {
54
+ border-image: ;
55
+ }
56
+
57
+ .aksel-process__event:last-of-type .aksel-process__line {
58
+ display: none;
59
+ }
60
+
61
+ .aksel-process__item {
62
+ grid-area: 2 / 1 / -1 / -1;
63
+ grid-template-columns: [bullet] var(--__axc-process-circle-base) [content] auto;
64
+ gap: var(--ax-space-16);
65
+ padding: var(--__axc-process-border-width);
66
+ margin: calc(var(--__axc-process-border-width) * -1) calc(var(--__axc-process-border-width) * -1) var(--ax-space-16);
67
+ justify-content: flex-start;
68
+ width: 100%;
69
+ display: grid;
70
+ }
71
+
72
+ .aksel-process__event:last-child .aksel-process__item {
73
+ margin-bottom: 0;
74
+ }
75
+
76
+ .aksel-process__bullet {
77
+ width: var(--__axc-process-circle-size);
78
+ height: var(--__axc-process-circle-size);
79
+ border-radius: var(--ax-radius-full);
80
+ border: var(--__axc-process-border-width) solid;
81
+ color: var(--ax-text-neutral-subtle);
82
+ border-color: var(--ax-border-neutral-subtleA);
83
+ grid-column: bullet;
84
+ place-self: baseline center;
85
+ place-items: center;
86
+ line-height: 1;
87
+ transition-property: background, border-color;
88
+ transition-duration: 70ms;
89
+ transition-timing-function: linear;
90
+ display: inline-grid;
91
+ }
92
+
93
+ .aksel-process__bullet svg {
94
+ height: min(calc(var(--__axc-process-circle-size) * .75), 1.5rem);
95
+ width: min(calc(var(--__axc-process-circle-size) * .75), 1.5rem);
96
+ }
97
+
98
+ .aksel-process__event:is([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
99
+ color: var(--ax-text-contrast);
100
+ background: var(--ax-bg-strong);
101
+ border-color: rgba(0, 0, 0, 0);
102
+ }
103
+
104
+ .aksel-process__event[data-status="active"] .aksel-process__bullet {
105
+ outline: 4px solid var(--ax-bg-moderate);
106
+ }
107
+
108
+ .aksel-process__event[data-status="uncompleted"] .aksel-process__bullet {
109
+ transition: none;
110
+ }
111
+
112
+ .aksel-process__body {
113
+ grid-column: content;
114
+ }
115
+
116
+ .aksel-process__title {
117
+ padding-block: .16rem var(--ax-space-4);
118
+ }
119
+
120
+ .aksel-process__event[data-status="active"] .aksel-process__title:has( + .aksel-process__active-label) {
121
+ padding-block-end: 0;
122
+ }
123
+
124
+ .aksel-process__active-label {
125
+ margin-block: 0 var(--ax-space-4);
126
+ color: var(--ax-text-subtle);
127
+ }
128
+
129
+ .aksel-process__active-label:last-of-type {
130
+ margin-block-end: 0;
131
+ }
132
+
133
+ @media (forced-colors: active) {
134
+ .aksel-process__bullet {
135
+ transition: none;
136
+ }
137
+
138
+ .aksel-process__event:is([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
139
+ color: buttonface;
140
+ background-color: buttontext;
141
+ outline-color: buttontext;
142
+ }
143
+
144
+ .aksel-process__event[data-status="active"] .aksel-process__line {
145
+ border-image: ;
146
+ }
147
+ }
148
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-process{--__axc-process-circle-base: 2rem;--__axc-process-circle-large: var(--__axc-process-circle-base);--__axc-process-circle-small: 1rem;--__axc-process-circle-size: var(--__axc-process-circle-large);--__axc-process-border-width: 2px;margin:0;padding:0;list-style:none}.aksel-process__event{grid-template-rows:[line-1] auto [step-start] var(--__axc-process-circle-size) [line-2 step-end] auto;grid-template-columns:var(--__axc-process-circle-base) auto;justify-items:flex-start;display:grid}.aksel-process__event[data-dot=true]{--__axc-process-circle-size: var(--__axc-process-circle-small);margin-block-start:calc((var(--__axc-process-circle-small) / 2) * -1)}.aksel-process__event[data-dot=true] .aksel-process__line{margin-block-start:calc(var(--__axc-process-circle-size) / 2)}.aksel-process__event[data-dot=true] .aksel-process__bullet{--__axc-process-circle-size: var(--__axc-process-circle-small);margin-top:calc((var(--__axc-process-circle-large) - var(--__axc-process-circle-small)) / 2)}.aksel-process__line{border:calc(var(--__axc-process-border-width) / 2) solid;border-color:var(--ax-border-neutral-subtle);grid-area:line-2 / 1;justify-self:center;width:0;min-height:2rem}.aksel-process__event[data-status=active] .aksel-process__line{border-color:var(--ax-border-default);border-image:linear-gradient(to bottom,var(--ax-border-default) 50%,var(--ax-border-neutral-subtle) 90%);border-image-slice:1}.aksel-process__event[data-status=completed] .aksel-process__line{border-color:var(--ax-border-default)}.aksel-process__event:not([data-status=active]) .aksel-process__line{border-image:}.aksel-process__event:last-of-type .aksel-process__line{display:none}.aksel-process__item{grid-area:2 / 1 / -1 / -1;grid-template-columns:[bullet] var(--__axc-process-circle-base) [content] auto;gap:var(--ax-space-16);padding:var(--__axc-process-border-width);margin:calc(var(--__axc-process-border-width) * -1) calc(var(--__axc-process-border-width) * -1) var(--ax-space-16);justify-content:flex-start;width:100%;display:grid}.aksel-process__event:last-child .aksel-process__item{margin-bottom:0}.aksel-process__bullet{width:var(--__axc-process-circle-size);height:var(--__axc-process-circle-size);border-radius:var(--ax-radius-full);border:var(--__axc-process-border-width) solid;color:var(--ax-text-neutral-subtle);border-color:var(--ax-border-neutral-subtleA);grid-column:bullet;place-self:baseline center;place-items:center;line-height:1;transition-property:background,border-color;transition-duration:70ms;transition-timing-function:linear;display:inline-grid}.aksel-process__bullet svg{height:min(calc(var(--__axc-process-circle-size) * .75),1.5rem);width:min(calc(var(--__axc-process-circle-size) * .75),1.5rem)}.aksel-process__event:is([data-status=completed],[data-status=active]) .aksel-process__bullet{color:var(--ax-text-contrast);background:var(--ax-bg-strong);border-color:#0000}.aksel-process__event[data-status=active] .aksel-process__bullet{outline:4px solid var(--ax-bg-moderate)}.aksel-process__event[data-status=uncompleted] .aksel-process__bullet{transition:none}.aksel-process__body{grid-column:content}.aksel-process__title{padding-block:.16rem var(--ax-space-4)}.aksel-process__event[data-status=active] .aksel-process__title:has(+.aksel-process__active-label){padding-block-end:0}.aksel-process__active-label{margin-block:0 var(--ax-space-4);color:var(--ax-text-subtle)}.aksel-process__active-label:last-of-type{margin-block-end:0}@media (forced-colors: active){.aksel-process__bullet{transition:none}.aksel-process__event:is([data-status=completed],[data-status=active]) .aksel-process__bullet{color:buttonface;background-color:buttontext;outline-color:buttontext}.aksel-process__event[data-status=active] .aksel-process__line{border-image:}}}
@@ -116,19 +116,19 @@
116
116
  padding: var(--ax-space-4) var(--ax-space-8);
117
117
  }
118
118
 
119
- .aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__input {
119
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input {
120
120
  top: -.75rem;
121
121
  }
122
122
 
123
- .aksel-table :not(.aksel-checkboxes) > .aksel-checkbox--small .aksel-checkbox__input {
123
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox--small .aksel-checkbox__input {
124
124
  top: -.375rem;
125
125
  }
126
126
 
127
- .aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__label {
127
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__label {
128
128
  padding: 0;
129
129
  }
130
130
 
131
- .aksel-table .aksel-checkbox__input:focus + .aksel-checkbox__label:after, .aksel-table .aksel-radio__input:focus + .aksel-radio__label:after {
131
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input:focus + .aksel-checkbox__label:after {
132
132
  height: 100%;
133
133
  }
134
134
 
@@ -1 +1 @@
1
- @layer aksel.components{.aksel-table{border-collapse:collapse;width:100%;display:table}.aksel-table.aksel-table--sticky-header{border-collapse:separate;border-spacing:0}.aksel-table__header{display:table-header-group}.aksel-table--sticky-header .aksel-table__header{z-index:10;background-color:var(--ax-bg-default);box-sizing:border-box;position:sticky;top:0}.aksel-table__body{display:table-row-group}.aksel-table__body .aksel-table__row--shade-on-hover:hover{background-color:var(--ax-bg-neutral-moderate-hoverA);transition:background-color 70ms cubic-bezier(.2,0,0,1)}.aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__row{display:table-row}.aksel-table__row:has(+.aksel-table__row--selected) :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.aksel-table__row--selected{background-color:var(--ax-bg-softA);box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default)}.aksel-table__row--selected:first-of-type{box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default),inset 0 1px 0 0 var(--ax-border-default)}.aksel-table__row--selected+.aksel-table__expanded-row{background-color:var(--ax-bg-softA);box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default)}.aksel-table__row--selected+.aksel-table__expanded-row .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__row--selected :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.aksel-table__row--selected.aksel-table__expandable-row--open :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:#0000}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n+1):not(.aksel-table__row--selected)){background-color:#0000}.aksel-table--zebra-stripes .aksel-table__body .aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__row--selected+.aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-softA)}.aksel-table__header-cell,.aksel-table__data-cell{padding:var(--ax-space-12) var(--ax-space-8);border-bottom:1px solid var(--ax-border-neutral-subtleA);text-align:left;display:table-cell}.aksel-table__header .aksel-table__header-cell,.aksel-table__header .aksel-table__data-cell{border-bottom-width:2px}.aksel-table__header-cell--align-right,.aksel-table__data-cell--align-right{text-align:right}.aksel-table__header-cell--align-center,.aksel-table__data-cell--align-center{text-align:center}:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell{border-bottom-color:#0000}.aksel-table--large .aksel-table__header-cell,.aksel-table--large .aksel-table__data-cell{padding:var(--ax-space-16) var(--ax-space-8)}.aksel-table--small .aksel-table__header-cell,.aksel-table--small .aksel-table__data-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox .aksel-checkbox__input{top:-.75rem}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox--small .aksel-checkbox__input{top:-.375rem}.aksel-table :not(.aksel-checkboxes)>.aksel-checkbox .aksel-checkbox__label{padding:0}.aksel-table .aksel-checkbox__input:focus+.aksel-checkbox__label:after,.aksel-table .aksel-radio__input:focus+.aksel-radio__label:after{height:100%}.aksel-table__header-cell[aria-sort]{padding:0}.aksel-table__sort-button{appearance:none;color:var(--ax-text-subtle);cursor:pointer;padding:var(--ax-space-16) var(--ax-space-12);gap:var(--ax-space-4);width:100%;line-height:inherit;font-weight:inherit;background:none;border:none;align-items:center;margin:0;display:flex}.aksel-table--small .aksel-table__sort-button{padding:var(--ax-space-8) var(--ax-space-12)}.aksel-table__sort-button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__sort-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-5px}.aksel-table__header-cell[aria-sort=ascending] .aksel-table__sort-button,.aksel-table__header-cell[aria-sort=descending] .aksel-table__sort-button{background-color:var(--ax-bg-moderate-pressedA);color:var(--ax-text-default)}.aksel-table__header-cell--align-right .aksel-table__sort-button{justify-content:flex-end}.aksel-table__header-cell--align-center .aksel-table__sort-button{justify-content:center}.aksel-table__sort-button svg{flex-shrink:0;font-size:1.5rem}.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell,.aksel-table__header-cell){transition:border-bottom-color .15s cubic-bezier(.95,.05,.8,.04)}.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover{cursor:pointer}.aksel-table__expandable-row--open :where(.aksel-table__data-cell,.aksel-table__header-cell){border-bottom-color:#0000}.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open{border-color:#0000}.aksel-table__toggle-expand-cell{width:3rem;padding:0}.aksel-table--large .aksel-table__toggle-expand-cell{padding:0 var(--ax-space-8)}.aksel-table--small .aksel-table__toggle-expand-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-radius-4);background:none;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}.aksel-table__expandable-icon{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover{cursor:pointer}.aksel-table__toggle-expand-button:hover,.aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover,:scope .aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,:scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button){background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__toggle-expand-cell--open>:where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon){transform:rotateX(180deg)}.aksel-table__toggle-expand-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-table__expanded-row-cell{padding:0}.aksel-table__expanded-row-cell:empty{display:none}.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),.aksel-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-table__expanded-row:has(+.aksel-table__row--selected) .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__expanded-row-content{--__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);padding-block:var(--ax-space-16)}.aksel-table--small .aksel-table__expanded-row-content{padding-block:var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-both{padding-inline:var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-left{padding-inline:var(--__ac-table-expanded-row-pi) var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-right{padding-inline:var(--ax-space-8) var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-none{padding-inline:var(--ax-space-8)}}
1
+ @layer aksel.components{.aksel-table{border-collapse:collapse;width:100%;display:table}.aksel-table.aksel-table--sticky-header{border-collapse:separate;border-spacing:0}.aksel-table__header{display:table-header-group}.aksel-table--sticky-header .aksel-table__header{z-index:10;background-color:var(--ax-bg-default);box-sizing:border-box;position:sticky;top:0}.aksel-table__body{display:table-row-group}.aksel-table__body .aksel-table__row--shade-on-hover:hover{background-color:var(--ax-bg-neutral-moderate-hoverA);transition:background-color 70ms cubic-bezier(.2,0,0,1)}.aksel-table__body .aksel-table__row--shade-on-hover.aksel-table__row--selected:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__row{display:table-row}.aksel-table__row:has(+.aksel-table__row--selected) :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.aksel-table__row--selected{background-color:var(--ax-bg-softA);box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default)}.aksel-table__row--selected:first-of-type{box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default),inset 0 1px 0 0 var(--ax-border-default)}.aksel-table__row--selected+.aksel-table__expanded-row{background-color:var(--ax-bg-softA);box-shadow:inset 1px 0 0 0 var(--ax-border-default),inset -1px 0 0 0 var(--ax-border-default)}.aksel-table__row--selected+.aksel-table__expanded-row .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__row--selected :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:var(--ax-border-default)}.aksel-table__row--selected.aksel-table__expandable-row--open :is(.aksel-table__header-cell,.aksel-table__data-cell){border-color:#0000}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__row:nth-child(odd):not(.aksel-table__row--selected)){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__body :where(.aksel-table__expandable-row:nth-child(4n+1):not(.aksel-table__row--selected)){background-color:#0000}.aksel-table--zebra-stripes .aksel-table__body .aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-neutral-softA)}.aksel-table--zebra-stripes .aksel-table__row--selected+.aksel-table__expanded-row:nth-child(4n){background-color:var(--ax-bg-softA)}.aksel-table__header-cell,.aksel-table__data-cell{padding:var(--ax-space-12) var(--ax-space-8);border-bottom:1px solid var(--ax-border-neutral-subtleA);text-align:left;display:table-cell}.aksel-table__header .aksel-table__header-cell,.aksel-table__header .aksel-table__data-cell{border-bottom-width:2px}.aksel-table__header-cell--align-right,.aksel-table__data-cell--align-right{text-align:right}.aksel-table__header-cell--align-center,.aksel-table__data-cell--align-center{text-align:center}:where(.aksel-table__expandable-row--open:hover) .aksel-table__data-cell{border-bottom-color:#0000}.aksel-table--large .aksel-table__header-cell,.aksel-table--large .aksel-table__data-cell{padding:var(--ax-space-16) var(--ax-space-8)}.aksel-table--small .aksel-table__header-cell,.aksel-table--small .aksel-table__data-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input{top:-.75rem}.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox--small .aksel-checkbox__input{top:-.375rem}.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__label{padding:0}.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input:focus+.aksel-checkbox__label:after{height:100%}.aksel-table__header-cell[aria-sort]{padding:0}.aksel-table__sort-button{appearance:none;color:var(--ax-text-subtle);cursor:pointer;padding:var(--ax-space-16) var(--ax-space-12);gap:var(--ax-space-4);width:100%;line-height:inherit;font-weight:inherit;background:none;border:none;align-items:center;margin:0;display:flex}.aksel-table--small .aksel-table__sort-button{padding:var(--ax-space-8) var(--ax-space-12)}.aksel-table__sort-button:hover{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__sort-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-5px}.aksel-table__header-cell[aria-sort=ascending] .aksel-table__sort-button,.aksel-table__header-cell[aria-sort=descending] .aksel-table__sort-button{background-color:var(--ax-bg-moderate-pressedA);color:var(--ax-text-default)}.aksel-table__header-cell--align-right .aksel-table__sort-button{justify-content:flex-end}.aksel-table__header-cell--align-center .aksel-table__sort-button{justify-content:center}.aksel-table__sort-button svg{flex-shrink:0;font-size:1.5rem}.aksel-table__expandable-row:not(.aksel-table__expandable-row--open) :where(.aksel-table__data-cell,.aksel-table__header-cell){transition:border-bottom-color .15s cubic-bezier(.95,.05,.8,.04)}.aksel-table__expandable-row.aksel-table__expandable-row--clickable:not(.aksel-table__expandable-row--expansion-disabled):hover{cursor:pointer}.aksel-table__expandable-row--open :where(.aksel-table__data-cell,.aksel-table__header-cell){border-bottom-color:#0000}.aksel-table__expandable-row--open .aksel-table__toggle-expand-cell--open{border-color:#0000}.aksel-table__toggle-expand-cell{width:3rem;padding:0}.aksel-table--large .aksel-table__toggle-expand-cell{padding:0 var(--ax-space-8)}.aksel-table--small .aksel-table__toggle-expand-cell{padding:var(--ax-space-4) var(--ax-space-8)}.aksel-table__toggle-expand-button{cursor:pointer;border-radius:var(--ax-radius-4);background:none;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}.aksel-table__expandable-icon{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-table__expandable-row:not(.aksel-table__expandable-row--expansion-disabled) .aksel-table__toggle-expand-cell:hover{cursor:pointer}.aksel-table__toggle-expand-button:hover,.aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,.aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button{background-color:var(--ax-bg-neutral-moderate-hoverA)}.aksel-table__row--selected :is(:scope .aksel-table__toggle-expand-button:hover,:scope .aksel-table__toggle-expand-cell:hover>.aksel-table__toggle-expand-button,:scope .aksel-table__expandable-row--clickable:hover .aksel-table__toggle-expand-button){background-color:var(--ax-bg-moderate-hoverA)}.aksel-table__toggle-expand-cell--open>:where(.aksel-table__toggle-expand-button) :where(.aksel-table__expandable-icon){transform:rotateX(180deg)}.aksel-table__toggle-expand-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-table__expanded-row-cell{padding:0}.aksel-table__expanded-row-cell:empty{display:none}.aksel-table__expanded-row-collapse:not([style*="height: 0px;"]),.aksel-table__expanded-row-collapse[style*="transition:"]{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-table__expanded-row:has(+.aksel-table__row--selected) .aksel-table__expanded-row-collapse{border-color:var(--ax-border-default)}.aksel-table__expanded-row-content{--__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);padding-block:var(--ax-space-16)}.aksel-table--small .aksel-table__expanded-row-content{padding-block:var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-both{padding-inline:var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-left{padding-inline:var(--__ac-table-expanded-row-pi) var(--ax-space-8)}.aksel-table__expanded-row-content--gutter-right{padding-inline:var(--ax-space-8) var(--__ac-table-expanded-row-pi)}.aksel-table__expanded-row-content--gutter-none{padding-inline:var(--ax-space-8)}}
@@ -19,7 +19,7 @@
19
19
  outline: 0;
20
20
  }
21
21
 
22
- .navds-tooltip__arrow {
22
+ .aksel-tooltip__arrow {
23
23
  z-index: -1;
24
24
  background-color: var(--ax-bg-neutral-strong);
25
25
  border-radius: 1px;
@@ -30,7 +30,7 @@
30
30
  }
31
31
 
32
32
  @media (forced-colors: active) {
33
- .navds-tooltip__arrow {
33
+ .aksel-tooltip__arrow {
34
34
  display: none;
35
35
  }
36
36
  }
@@ -1 +1 @@
1
- @layer aksel.components{.aksel-tooltip{z-index:3000;background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast);border-radius:var(--ax-radius-4);padding:0 var(--ax-space-6);text-align:center;box-shadow:var(--ax-shadow-dialog);border:1px solid rgba(0,0,0,0);flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.aksel-tooltip:focus{outline:0}.navds-tooltip__arrow{z-index:-1;background-color:var(--ax-bg-neutral-strong);border-radius:1px;width:.5rem;height:.5rem;position:absolute;transform:rotate(45deg)}@media (forced-colors: active){.navds-tooltip__arrow{display:none}}.aksel-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{0%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{0%{transform:translate(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{0%{transform:translate(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{0%{opacity:.01}to{opacity:1}}.aksel-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.aksel-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-radius-2);background:var(--ax-bg-neutral-moderate);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media (forced-colors: active){.aksel-tooltip__key{outline:1px solid}}}
1
+ @layer aksel.components{.aksel-tooltip{z-index:3000;background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast);border-radius:var(--ax-radius-4);padding:0 var(--ax-space-6);text-align:center;box-shadow:var(--ax-shadow-dialog);border:1px solid rgba(0,0,0,0);flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.aksel-tooltip:focus{outline:0}.aksel-tooltip__arrow{z-index:-1;background-color:var(--ax-bg-neutral-strong);border-radius:1px;width:.5rem;height:.5rem;position:absolute;transform:rotate(45deg)}@media (forced-colors: active){.aksel-tooltip__arrow{display:none}}.aksel-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{0%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{0%{transform:translate(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{0%{transform:translate(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{0%{opacity:.01}to{opacity:1}}.aksel-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.aksel-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-radius-2);background:var(--ax-bg-neutral-moderate);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media (forced-colors: active){.aksel-tooltip__key{outline:1px solid}}}
@@ -3948,10 +3948,10 @@
3948
3948
  border: 1px solid var(--ax-border-subtleA);
3949
3949
  padding: var(--__axc-link-card-padding-block) var(--__axc-link-card-padding-inline);
3950
3950
  cursor: pointer;
3951
- grid-template: "image image" min-content
3952
- "icon title" min-content
3953
- "icon description" min-content
3954
- "icon footer"
3951
+ grid-template: "image image image" min-content
3952
+ "icon title arrow" min-content
3953
+ "icon description arrow" min-content
3954
+ "icon footer arrow"
3955
3955
  / auto 1fr;
3956
3956
  align-items: center;
3957
3957
  text-decoration: none;
@@ -3962,6 +3962,13 @@
3962
3962
  position: relative;
3963
3963
  }
3964
3964
 
3965
+ .aksel-link-card[data-align-arrow="baseline"] {
3966
+ grid-template-areas: "image image image"
3967
+ "icon title arrow"
3968
+ "icon description description"
3969
+ "icon footer footer";
3970
+ }
3971
+
3965
3972
  .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) {
3966
3973
  grid-template-rows: auto 1fr;
3967
3974
  }
@@ -3970,7 +3977,7 @@
3970
3977
  align-items: center;
3971
3978
  }
3972
3979
 
3973
- .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__icon {
3980
+ .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer)) .aksel-link-card__icon, .aksel-link-card:not(:has(.aksel-link-card__description, .aksel-link-card__footer))[data-align-arrow="baseline"] .aksel-link-card__arrow {
3974
3981
  align-self: center;
3975
3982
  }
3976
3983
 
@@ -3986,13 +3993,9 @@
3986
3993
 
3987
3994
  .aksel-link-card__title {
3988
3995
  color: var(--ax-text-subtle);
3989
- justify-content: space-between;
3990
- align-items: flex-start;
3991
- gap: var(--ax-space-8);
3992
3996
  -webkit-hyphens: auto;
3993
3997
  hyphens: auto;
3994
3998
  grid-area: title;
3995
- display: flex;
3996
3999
  }
3997
4000
 
3998
4001
  .aksel-link-card[data-color="neutral"] .aksel-link-card__title, .aksel-link-card__title[data-color="neutral"] {
@@ -4046,6 +4049,19 @@
4046
4049
  display: block;
4047
4050
  }
4048
4051
 
4052
+ .aksel-link-card__arrow {
4053
+ grid-area: arrow;
4054
+ margin-inline-start: var(--ax-space-8);
4055
+ }
4056
+
4057
+ .aksel-link-card[data-align-arrow="baseline"] .aksel-link-card__arrow {
4058
+ align-self: baseline;
4059
+ }
4060
+
4061
+ .aksel-link-card[data-align-arrow="center"] .aksel-link-card__arrow {
4062
+ align-self: center;
4063
+ }
4064
+
4049
4065
  .aksel-loader {
4050
4066
  stroke-width: 6px;
4051
4067
  --__axc-loader-stroke-width: 5.9;
@@ -4767,7 +4783,7 @@
4767
4783
  outline: 0;
4768
4784
  }
4769
4785
 
4770
- .navds-tooltip__arrow {
4786
+ .aksel-tooltip__arrow {
4771
4787
  z-index: -1;
4772
4788
  background-color: var(--ax-bg-neutral-strong);
4773
4789
  border-radius: 1px;
@@ -4778,7 +4794,7 @@
4778
4794
  }
4779
4795
 
4780
4796
  @media (forced-colors: active) {
4781
- .navds-tooltip__arrow {
4797
+ .aksel-tooltip__arrow {
4782
4798
  display: none;
4783
4799
  }
4784
4800
  }
@@ -5254,6 +5270,153 @@
5254
5270
  }
5255
5271
  }
5256
5272
 
5273
+ .aksel-process {
5274
+ --__axc-process-circle-base: 2rem;
5275
+ --__axc-process-circle-large: var(--__axc-process-circle-base);
5276
+ --__axc-process-circle-small: 1rem;
5277
+ --__axc-process-circle-size: var(--__axc-process-circle-large);
5278
+ --__axc-process-border-width: 2px;
5279
+ margin: 0;
5280
+ padding: 0;
5281
+ list-style: none;
5282
+ }
5283
+
5284
+ .aksel-process__event {
5285
+ grid-template-rows: [line-1] auto [step-start] var(--__axc-process-circle-size) [line-2 step-end] auto;
5286
+ grid-template-columns: var(--__axc-process-circle-base) auto;
5287
+ justify-items: flex-start;
5288
+ display: grid;
5289
+ }
5290
+
5291
+ .aksel-process__event[data-dot="true"] {
5292
+ --__axc-process-circle-size: var(--__axc-process-circle-small);
5293
+ margin-block-start: calc((var(--__axc-process-circle-small) / 2) * -1);
5294
+ }
5295
+
5296
+ .aksel-process__event[data-dot="true"] .aksel-process__line {
5297
+ margin-block-start: calc(var(--__axc-process-circle-size) / 2);
5298
+ }
5299
+
5300
+ .aksel-process__event[data-dot="true"] .aksel-process__bullet {
5301
+ --__axc-process-circle-size: var(--__axc-process-circle-small);
5302
+ margin-top: calc((var(--__axc-process-circle-large) - var(--__axc-process-circle-small)) / 2);
5303
+ }
5304
+
5305
+ .aksel-process__line {
5306
+ border: calc(var(--__axc-process-border-width) / 2) solid;
5307
+ border-color: var(--ax-border-neutral-subtle);
5308
+ grid-area: line-2 / 1;
5309
+ justify-self: center;
5310
+ width: 0;
5311
+ min-height: 2rem;
5312
+ }
5313
+
5314
+ .aksel-process__event[data-status="active"] .aksel-process__line {
5315
+ border-color: var(--ax-border-default);
5316
+ border-image: linear-gradient(to bottom, var(--ax-border-default) 50%, var(--ax-border-neutral-subtle) 90%);
5317
+ border-image-slice: 1;
5318
+ }
5319
+
5320
+ .aksel-process__event[data-status="completed"] .aksel-process__line {
5321
+ border-color: var(--ax-border-default);
5322
+ }
5323
+
5324
+ .aksel-process__event:not([data-status="active"]) .aksel-process__line {
5325
+ border-image: ;
5326
+ }
5327
+
5328
+ .aksel-process__event:last-of-type .aksel-process__line {
5329
+ display: none;
5330
+ }
5331
+
5332
+ .aksel-process__item {
5333
+ grid-area: 2 / 1 / -1 / -1;
5334
+ grid-template-columns: [bullet] var(--__axc-process-circle-base) [content] auto;
5335
+ gap: var(--ax-space-16);
5336
+ padding: var(--__axc-process-border-width);
5337
+ margin: calc(var(--__axc-process-border-width) * -1) calc(var(--__axc-process-border-width) * -1) var(--ax-space-16);
5338
+ justify-content: flex-start;
5339
+ width: 100%;
5340
+ display: grid;
5341
+ }
5342
+
5343
+ .aksel-process__event:last-child .aksel-process__item {
5344
+ margin-bottom: 0;
5345
+ }
5346
+
5347
+ .aksel-process__bullet {
5348
+ width: var(--__axc-process-circle-size);
5349
+ height: var(--__axc-process-circle-size);
5350
+ border-radius: var(--ax-radius-full);
5351
+ border: var(--__axc-process-border-width) solid;
5352
+ color: var(--ax-text-neutral-subtle);
5353
+ border-color: var(--ax-border-neutral-subtleA);
5354
+ grid-column: bullet;
5355
+ place-self: baseline center;
5356
+ place-items: center;
5357
+ line-height: 1;
5358
+ transition-property: background, border-color;
5359
+ transition-duration: 70ms;
5360
+ transition-timing-function: linear;
5361
+ display: inline-grid;
5362
+ }
5363
+
5364
+ .aksel-process__bullet svg {
5365
+ height: min(calc(var(--__axc-process-circle-size) * .75), 1.5rem);
5366
+ width: min(calc(var(--__axc-process-circle-size) * .75), 1.5rem);
5367
+ }
5368
+
5369
+ .aksel-process__event:is([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
5370
+ color: var(--ax-text-contrast);
5371
+ background: var(--ax-bg-strong);
5372
+ border-color: rgba(0, 0, 0, 0);
5373
+ }
5374
+
5375
+ .aksel-process__event[data-status="active"] .aksel-process__bullet {
5376
+ outline: 4px solid var(--ax-bg-moderate);
5377
+ }
5378
+
5379
+ .aksel-process__event[data-status="uncompleted"] .aksel-process__bullet {
5380
+ transition: none;
5381
+ }
5382
+
5383
+ .aksel-process__body {
5384
+ grid-column: content;
5385
+ }
5386
+
5387
+ .aksel-process__title {
5388
+ padding-block: .16rem var(--ax-space-4);
5389
+ }
5390
+
5391
+ .aksel-process__event[data-status="active"] .aksel-process__title:has( + .aksel-process__active-label) {
5392
+ padding-block-end: 0;
5393
+ }
5394
+
5395
+ .aksel-process__active-label {
5396
+ margin-block: 0 var(--ax-space-4);
5397
+ color: var(--ax-text-subtle);
5398
+ }
5399
+
5400
+ .aksel-process__active-label:last-of-type {
5401
+ margin-block-end: 0;
5402
+ }
5403
+
5404
+ @media (forced-colors: active) {
5405
+ .aksel-process__bullet {
5406
+ transition: none;
5407
+ }
5408
+
5409
+ .aksel-process__event:is([data-status="completed"], [data-status="active"]) .aksel-process__bullet {
5410
+ color: buttonface;
5411
+ background-color: buttontext;
5412
+ outline-color: buttontext;
5413
+ }
5414
+
5415
+ .aksel-process__event[data-status="active"] .aksel-process__line {
5416
+ border-image: ;
5417
+ }
5418
+ }
5419
+
5257
5420
  .aksel-stepper {
5258
5421
  --__axc-stepper-circle-size: 2rem;
5259
5422
  --__axc-stepper-border-width: 2px;
@@ -5596,19 +5759,19 @@
5596
5759
  padding: var(--ax-space-4) var(--ax-space-8);
5597
5760
  }
5598
5761
 
5599
- .aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__input {
5762
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input {
5600
5763
  top: -.75rem;
5601
5764
  }
5602
5765
 
5603
- .aksel-table :not(.aksel-checkboxes) > .aksel-checkbox--small .aksel-checkbox__input {
5766
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox--small .aksel-checkbox__input {
5604
5767
  top: -.375rem;
5605
5768
  }
5606
5769
 
5607
- .aksel-table :not(.aksel-checkboxes) > .aksel-checkbox .aksel-checkbox__label {
5770
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__label {
5608
5771
  padding: 0;
5609
5772
  }
5610
5773
 
5611
- .aksel-table .aksel-checkbox__input:focus + .aksel-checkbox__label:after, .aksel-table .aksel-radio__input:focus + .aksel-radio__label:after {
5774
+ .aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input:focus + .aksel-checkbox__label:after {
5612
5775
  height: 100%;
5613
5776
  }
5614
5777