@navikt/ds-css 7.33.5 → 7.34.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 (132) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/alert.css +255 -0
  3. package/config/_mappings.js +16 -0
  4. package/darkside/alert.darkside.css +99 -0
  5. package/darkside/index.css +1 -0
  6. package/darkside/inline-message.darkside.css +15 -0
  7. package/darkside/stepper.darkside.css +1 -1
  8. package/darkside/tooltip.darkside.css +1 -1
  9. package/dist/component/alert.css +226 -0
  10. package/dist/component/alert.min.css +1 -1
  11. package/dist/component/inlinemessage.css +45 -0
  12. package/dist/component/inlinemessage.min.css +1 -0
  13. package/dist/components.css +272 -0
  14. package/dist/components.min.css +2 -2
  15. package/dist/darkside/component/alert.css +95 -0
  16. package/dist/darkside/component/alert.min.css +1 -1
  17. package/dist/darkside/component/inlinemessage.css +17 -0
  18. package/dist/darkside/component/inlinemessage.min.css +1 -0
  19. package/dist/darkside/component/stepper.css +1 -1
  20. package/dist/darkside/component/stepper.min.css +1 -1
  21. package/dist/darkside/component/tooltip.css +1 -1
  22. package/dist/darkside/component/tooltip.min.css +1 -1
  23. package/dist/darkside/components.css +113 -2
  24. package/dist/darkside/components.min.css +1 -1
  25. package/dist/darkside/global/tokens.css +1 -1
  26. package/dist/darkside/global/tokens.min.css +1 -1
  27. package/dist/darkside/index.css +114 -3
  28. package/dist/darkside/index.min.css +1 -1
  29. package/dist/darkside/version/7.34.0/component/alert.css +170 -0
  30. package/dist/darkside/version/7.34.0/component/alert.min.css +1 -0
  31. package/dist/darkside/version/7.34.0/component/inlinemessage.css +17 -0
  32. package/dist/darkside/version/7.34.0/component/inlinemessage.min.css +1 -0
  33. package/dist/darkside/version/{7.33.5 → 7.34.0}/component/stepper.css +1 -1
  34. package/dist/darkside/version/7.34.0/component/stepper.min.css +1 -0
  35. package/dist/darkside/version/{7.33.5 → 7.34.0}/component/tooltip.css +1 -1
  36. package/dist/darkside/version/7.34.0/component/tooltip.min.css +1 -0
  37. package/dist/darkside/version/{7.33.5 → 7.34.0}/components.css +113 -2
  38. package/dist/darkside/version/7.34.0/components.min.css +1 -0
  39. package/dist/darkside/version/{7.33.5 → 7.34.0}/global/tokens.css +1 -1
  40. package/dist/darkside/version/{7.33.5 → 7.34.0}/global/tokens.min.css +1 -1
  41. package/dist/darkside/version/{7.33.5 → 7.34.0}/index.css +114 -3
  42. package/dist/darkside/version/{7.33.5 → 7.34.0}/index.min.css +1 -1
  43. package/dist/global/tokens.css +2 -2
  44. package/dist/global/tokens.min.css +1 -1
  45. package/dist/index.css +274 -2
  46. package/dist/index.min.css +3 -3
  47. package/index.css +1 -0
  48. package/inline-message.css +45 -0
  49. package/package.json +2 -2
  50. package/dist/darkside/version/7.33.5/component/alert.css +0 -75
  51. package/dist/darkside/version/7.33.5/component/alert.min.css +0 -1
  52. package/dist/darkside/version/7.33.5/component/stepper.min.css +0 -1
  53. package/dist/darkside/version/7.33.5/component/tooltip.min.css +0 -1
  54. package/dist/darkside/version/7.33.5/components.min.css +0 -1
  55. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/accordion.css +0 -0
  56. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/accordion.min.css +0 -0
  57. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/actionmenu.css +0 -0
  58. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/actionmenu.min.css +0 -0
  59. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/button.css +0 -0
  60. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/button.min.css +0 -0
  61. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/chat.css +0 -0
  62. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/chat.min.css +0 -0
  63. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/chips.css +0 -0
  64. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/chips.min.css +0 -0
  65. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/copybutton.css +0 -0
  66. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/copybutton.min.css +0 -0
  67. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/date.css +0 -0
  68. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/date.min.css +0 -0
  69. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/dropdown.css +0 -0
  70. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/dropdown.min.css +0 -0
  71. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/expansioncard.css +0 -0
  72. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/expansioncard.min.css +0 -0
  73. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/form.css +0 -0
  74. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/form.min.css +0 -0
  75. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/guidepanel.css +0 -0
  76. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/guidepanel.min.css +0 -0
  77. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/helptext.css +0 -0
  78. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/helptext.min.css +0 -0
  79. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/internalheader.css +0 -0
  80. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/internalheader.min.css +0 -0
  81. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/link.css +0 -0
  82. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/link.min.css +0 -0
  83. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/linkanchor.css +0 -0
  84. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/linkanchor.min.css +0 -0
  85. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/linkcard.css +0 -0
  86. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/linkcard.min.css +0 -0
  87. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/linkpanel.css +0 -0
  88. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/linkpanel.min.css +0 -0
  89. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/list.css +0 -0
  90. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/list.min.css +0 -0
  91. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/loader.css +0 -0
  92. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/loader.min.css +0 -0
  93. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/modal.css +0 -0
  94. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/modal.min.css +0 -0
  95. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/pagination.css +0 -0
  96. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/pagination.min.css +0 -0
  97. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/panel.css +0 -0
  98. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/panel.min.css +0 -0
  99. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/popover.css +0 -0
  100. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/popover.min.css +0 -0
  101. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/primitives.css +0 -0
  102. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/primitives.min.css +0 -0
  103. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/process.css +0 -0
  104. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/process.min.css +0 -0
  105. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/progressbar.css +0 -0
  106. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/progressbar.min.css +0 -0
  107. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/readmore.css +0 -0
  108. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/readmore.min.css +0 -0
  109. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/skeleton.css +0 -0
  110. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/skeleton.min.css +0 -0
  111. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/table.css +0 -0
  112. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/table.min.css +0 -0
  113. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/tabs.css +0 -0
  114. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/tabs.min.css +0 -0
  115. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/tag.css +0 -0
  116. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/tag.min.css +0 -0
  117. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/theme.css +0 -0
  118. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/theme.min.css +0 -0
  119. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/timeline.css +0 -0
  120. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/timeline.min.css +0 -0
  121. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/togglegroup.css +0 -0
  122. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/togglegroup.min.css +0 -0
  123. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/typography.css +0 -0
  124. /package/dist/darkside/version/{7.33.5 → 7.34.0}/component/typography.min.css +0 -0
  125. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/baseline.css +0 -0
  126. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/baseline.min.css +0 -0
  127. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/fonts.css +0 -0
  128. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/fonts.min.css +0 -0
  129. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/print.css +0 -0
  130. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/print.min.css +0 -0
  131. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/reset.css +0 -0
  132. /package/dist/darkside/version/{7.33.5 → 7.34.0}/global/reset.min.css +0 -0
@@ -0,0 +1,170 @@
1
+ @layer aksel.components {
2
+ .aksel-alert {
3
+ border-radius: var(--ax-radius-12);
4
+ padding: var(--ax-space-16) var(--ax-space-20);
5
+ gap: var(--ax-space-12);
6
+ border: 1px solid;
7
+ border-color: var(--ax-border-default);
8
+ background-color: var(--ax-bg-moderate);
9
+ align-items: center;
10
+ display: flex;
11
+ }
12
+
13
+ .aksel-alert > .aksel-alert__icon {
14
+ color: var(--ax-text-decoration);
15
+ }
16
+
17
+ @media (forced-colors: active) {
18
+ .aksel-alert {
19
+ color: canvastext;
20
+ background-color: canvas;
21
+ border: 1px solid canvastext;
22
+ }
23
+ }
24
+
25
+ .aksel-alert__wrapper--maxwidth {
26
+ max-width: 43.5rem;
27
+ }
28
+
29
+ .aksel-alert__icon {
30
+ height: var(--ax-font-line-height-xlarge);
31
+ flex-shrink: 0;
32
+ align-self: flex-start;
33
+ font-size: 1.5rem;
34
+ }
35
+
36
+ .aksel-alert--small {
37
+ padding: var(--ax-space-12) var(--ax-space-16);
38
+ gap: var(--ax-space-8);
39
+ }
40
+
41
+ .aksel-alert--small > .aksel-alert__icon {
42
+ height: var(--ax-font-line-height-large);
43
+ margin-block-start: 0;
44
+ }
45
+
46
+ .aksel-alert--full-width {
47
+ border-radius: 0;
48
+ }
49
+
50
+ .aksel-alert--inline {
51
+ background-color: rgba(0, 0, 0, 0);
52
+ border: none;
53
+ padding: 0;
54
+ }
55
+
56
+ .aksel-alert__button-wrapper {
57
+ flex-flow: row;
58
+ flex: 1;
59
+ justify-content: flex-end;
60
+ align-self: flex-start;
61
+ display: flex;
62
+ }
63
+
64
+ .aksel-alert--close-button > .aksel-alert__wrapper, .aksel-alert--close-button > .aksel-alert__icon {
65
+ margin-block-start: var(--ax-space-2);
66
+ }
67
+
68
+ .aksel-alert--close-button.aksel-alert--small {
69
+ align-items: flex-start;
70
+ }
71
+
72
+ .aksel-alert--close-button.aksel-alert--small > .aksel-alert__wrapper, .aksel-alert--close-button.aksel-alert--small > .aksel-alert__icon {
73
+ margin-block-start: var(--ax-space-4);
74
+ }
75
+
76
+ .aksel-base-alert {
77
+ border-radius: var(--ax-radius-12);
78
+ --__axc-base-alert-pi: var(--ax-space-20);
79
+ --__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
80
+ --__axc-base-alert-title-pb: var(--ax-space-2);
81
+ --__axc-base-alert-header-max-width: 37.5rem;
82
+ height: fit-content;
83
+ display: grid;
84
+ overflow: clip;
85
+ }
86
+
87
+ .aksel-base-alert[data-size="small"] {
88
+ --__axc-base-alert-pi: var(--ax-space-16);
89
+ --__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
90
+ --__axc-base-alert-title-pb: var(--ax-space-4);
91
+ }
92
+
93
+ .aksel-base-alert[data-variant="moderate"] {
94
+ outline: 1px solid var(--ax-border-default);
95
+ outline-offset: -1px;
96
+ }
97
+
98
+ .aksel-base-alert[data-variant="strong"] {
99
+ outline: 4px solid var(--ax-border-default);
100
+ outline-offset: -4px;
101
+ }
102
+
103
+ .aksel-base-alert[data-variant="strong"][data-color="neutral"] {
104
+ outline-color: var(--ax-border-strong);
105
+ }
106
+
107
+ .aksel-base-alert[data-global="true"] {
108
+ border-radius: 0;
109
+ }
110
+
111
+ .aksel-base-alert__header {
112
+ align-items: flex-start;
113
+ gap: var(--ax-space-8);
114
+ padding: var(--ax-space-8) var(--__axc-base-alert-pi);
115
+ border-bottom: 1px solid;
116
+ display: flex;
117
+ }
118
+
119
+ .aksel-base-alert[data-global="true"] .aksel-base-alert__header {
120
+ padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
121
+ }
122
+
123
+ .aksel-base-alert[data-variant="moderate"] .aksel-base-alert__header {
124
+ background: var(--ax-bg-moderate);
125
+ color: var(--ax-text-default);
126
+ border-color: var(--ax-border-subtleA);
127
+ }
128
+
129
+ .aksel-base-alert[data-variant="strong"] .aksel-base-alert__header {
130
+ background: var(--ax-bg-strong);
131
+ color: var(--ax-text-contrast);
132
+ border-bottom: none;
133
+ }
134
+
135
+ .aksel-base-alert__header:only-child {
136
+ border-bottom: none;
137
+ }
138
+
139
+ .aksel-base-alert__icon {
140
+ margin-top: var(--ax-space-4);
141
+ font-size: 1.5rem;
142
+ display: grid;
143
+ }
144
+
145
+ .aksel-base-alert__title {
146
+ padding-block: var(--__axc-base-alert-title-pb);
147
+ }
148
+
149
+ .aksel-base-alert__content {
150
+ padding: var(--__axc-base-alert-content-p);
151
+ background-color: var(--ax-bg-default);
152
+ }
153
+
154
+ .aksel-base-alert[data-global="true"] .aksel-base-alert__content {
155
+ padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
156
+ }
157
+
158
+ .aksel-base-alert__close-button {
159
+ z-index: 1;
160
+ margin-left: auto;
161
+ }
162
+
163
+ .aksel-base-alert__close-button:focus-visible {
164
+ outline-color: var(--ax-bg-default);
165
+ }
166
+
167
+ .aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button {
168
+ color: var(--ax-text-neutral-contrast);
169
+ }
170
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-alert{border-radius:var(--ax-radius-12);padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-12);border:1px solid;border-color:var(--ax-border-default);background-color:var(--ax-bg-moderate);align-items:center;display:flex}.aksel-alert>.aksel-alert__icon{color:var(--ax-text-decoration)}@media(forced-colors:active){.aksel-alert{color:canvastext;background-color:canvas;border:1px solid canvastext}}.aksel-alert__wrapper--maxwidth{max-width:43.5rem}.aksel-alert__icon{height:var(--ax-font-line-height-xlarge);flex-shrink:0;align-self:flex-start;font-size:1.5rem}.aksel-alert--small{padding:var(--ax-space-12) var(--ax-space-16);gap:var(--ax-space-8)}.aksel-alert--small>.aksel-alert__icon{height:var(--ax-font-line-height-large);margin-block-start:0}.aksel-alert--full-width{border-radius:0}.aksel-alert--inline{background-color:#0000;border:none;padding:0}.aksel-alert__button-wrapper{flex-flow:row;flex:1;justify-content:flex-end;align-self:flex-start;display:flex}.aksel-alert--close-button>.aksel-alert__wrapper,.aksel-alert--close-button>.aksel-alert__icon{margin-block-start:var(--ax-space-2)}.aksel-alert--close-button.aksel-alert--small{align-items:flex-start}.aksel-alert--close-button.aksel-alert--small>.aksel-alert__wrapper,.aksel-alert--close-button.aksel-alert--small>.aksel-alert__icon{margin-block-start:var(--ax-space-4)}.aksel-base-alert{border-radius:var(--ax-radius-12);--__axc-base-alert-pi: var(--ax-space-20);--__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);--__axc-base-alert-title-pb: var(--ax-space-2);--__axc-base-alert-header-max-width: 37.5rem;height:fit-content;display:grid;overflow:clip}.aksel-base-alert[data-size=small]{--__axc-base-alert-pi: var(--ax-space-16);--__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);--__axc-base-alert-title-pb: var(--ax-space-4)}.aksel-base-alert[data-variant=moderate]{outline:1px solid var(--ax-border-default);outline-offset:-1px}.aksel-base-alert[data-variant=strong]{outline:4px solid var(--ax-border-default);outline-offset:-4px}.aksel-base-alert[data-variant=strong][data-color=neutral]{outline-color:var(--ax-border-strong)}.aksel-base-alert[data-global=true]{border-radius:0}.aksel-base-alert__header{align-items:flex-start;gap:var(--ax-space-8);padding:var(--ax-space-8) var(--__axc-base-alert-pi);border-bottom:1px solid;display:flex}.aksel-base-alert[data-global=true] .aksel-base-alert__header{padding-inline:max(var(--__axc-base-alert-pi),calc((100% - var(--__axc-base-alert-header-max-width)) / 2))}.aksel-base-alert[data-variant=moderate] .aksel-base-alert__header{background:var(--ax-bg-moderate);color:var(--ax-text-default);border-color:var(--ax-border-subtleA)}.aksel-base-alert[data-variant=strong] .aksel-base-alert__header{background:var(--ax-bg-strong);color:var(--ax-text-contrast);border-bottom:none}.aksel-base-alert__header:only-child{border-bottom:none}.aksel-base-alert__icon{margin-top:var(--ax-space-4);font-size:1.5rem;display:grid}.aksel-base-alert__title{padding-block:var(--__axc-base-alert-title-pb)}.aksel-base-alert__content{padding:var(--__axc-base-alert-content-p);background-color:var(--ax-bg-default)}.aksel-base-alert[data-global=true] .aksel-base-alert__content{padding-inline:max(var(--__axc-base-alert-pi),calc((100% - var(--__axc-base-alert-header-max-width)) / 2))}.aksel-base-alert__close-button{z-index:1;margin-left:auto}.aksel-base-alert__close-button:focus-visible{outline-color:var(--ax-bg-default)}.aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button{color:var(--ax-text-neutral-contrast)}}
@@ -0,0 +1,17 @@
1
+ @layer aksel.components {
2
+ .aksel-inline-message {
3
+ gap: var(--ax-space-4);
4
+ color: var(--ax-text-default);
5
+ display: flex;
6
+ }
7
+
8
+ .aksel-inline-message__icon {
9
+ color: var(--ax-text-subtle);
10
+ flex: none;
11
+ font-size: 1.5rem;
12
+ }
13
+
14
+ .aksel-inline-message[data-size="small"] .aksel-inline-message__icon {
15
+ font-size: 1.25rem;
16
+ }
17
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-inline-message{gap:var(--ax-space-4);color:var(--ax-text-default);display:flex}.aksel-inline-message__icon{color:var(--ax-text-subtle);flex:none;font-size:1.5rem}.aksel-inline-message[data-size=small] .aksel-inline-message__icon{font-size:1.25rem}}
@@ -28,7 +28,7 @@
28
28
  justify-self: center;
29
29
  }
30
30
 
31
- .aksel-stepper__item--non-interactive .aksel-stepper__line {
31
+ .aksel-stepper__item[data-interactive="false"] .aksel-stepper__line {
32
32
  background-color: var(--ax-border-neutral-strong);
33
33
  }
34
34
 
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-stepper{--__axc-stepper-circle-size: 2rem;--__axc-stepper-border-width: 2px;--__axc-stepper-line-length: 1rem;color:var(--ax-text-subtle);font-weight:var(--ax-font-weight-bold);margin:0;padding-left:0;line-height:1;list-style:none}.aksel-stepper__item{grid-template-rows:[line-1] auto [step-start] var(--__axc-stepper-circle-size) [line-2 step-end] auto;grid-template-columns:var(--__axc-stepper-circle-size) auto;justify-items:flex-start;gap:var(--ax-space-8);display:grid}.aksel-stepper__line{background-color:var(--ax-border-default);width:var(--__axc-stepper-border-width);height:100%;min-height:var(--__axc-stepper-line-length);grid-column:1;justify-self:center}.aksel-stepper__item[data-interactive=false] .aksel-stepper__line{background-color:var(--ax-border-neutral-strong)}.aksel-stepper__item:has(+.aksel-stepper__item>.aksel-stepper__step[data-interactive=false]) .aksel-stepper__line--2{background-color:var(--ax-border-neutral-strong)}.aksel-stepper__line--1{grid-row:line-1;display:none}.aksel-stepper__line--2{grid-row:line-2}.aksel-stepper__item:last-of-type .aksel-stepper__line--2{display:none}.aksel-stepper__step{grid-area:2 / 1 / -1 / -1;grid-template-columns:[circle] var(--__axc-stepper-circle-size) [content] auto;gap:var(--ax-space-8);cursor:pointer;padding:var(--__axc-stepper-border-width);margin:calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1) var(--__axc-stepper-circle-size);justify-content:flex-start;width:100%;display:grid}.aksel-stepper__step:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;isolation:isolate}.aksel-stepper__item:last-child .aksel-stepper__step{margin-bottom:0}.aksel-stepper__step:is(button){appearance:none;font:inherit;color:inherit;text-align:inherit;background-color:#0000;border:none}.aksel-stepper__circle{width:var(--__axc-stepper-circle-size);height:var(--__axc-stepper-circle-size);border:var(--__axc-stepper-border-width) solid currentColor;border-radius:var(--ax-radius-full);grid-column:circle;place-content:center;place-items:center;line-height:1;display:inline-grid}.aksel-stepper__circle--success{font-size:calc(var(--__axc-stepper-circle-size) * .75);background:none}.aksel-stepper__step[data-interactive=true]{color:var(--ax-text-subtle);border-radius:var(--ax-radius-4);text-decoration:none}.aksel-stepper__step[data-interactive=true] .aksel-stepper__content{text-underline-offset:.1em;text-decoration:underline;text-decoration-thickness:.05em}:is(.aksel-stepper__step[data-interactive=true]:hover,.aksel-stepper__step[data-interactive=true]:active) .aksel-stepper__content{text-decoration-thickness:.111em}.aksel-stepper__step[data-interactive=true] .aksel-stepper__circle{color:var(--ax-text-subtle);border-color:var(--ax-border-strong)}.aksel-stepper__step[data-interactive=true][data-active=true] .aksel-stepper__content{text-decoration:none}.aksel-stepper__step[data-interactive=true][data-active=true] .aksel-stepper__circle{color:var(--ax-text-contrast);background-color:var(--ax-bg-strong-pressed);border-color:var(--ax-bg-strong-pressed)}.aksel-stepper__step[data-interactive=true][data-active=false]:hover .aksel-stepper__circle{background-color:var(--ax-bg-moderate-hoverA);border-color:var(--ax-border-strong)}.aksel-stepper__step[data-interactive=false]{color:var(--ax-text-neutral-subtle);cursor:default}.aksel-stepper__step[data-interactive=false] .aksel-stepper__circle{border-color:var(--ax-border-neutral-strong)}.aksel-stepper__step[data-interactive=false][data-active=true] .aksel-stepper__circle{color:var(--ax-text-neutral-contrast);background-color:var(--ax-bg-neutral-strong-pressed);border-color:var(--ax-bg-neutral-strong-pressed)}.aksel-stepper__content{grid-column:content;min-width:fit-content;padding-top:.16rem;line-height:1.5}.aksel-stepper[data-orientation=horizontal]{text-align:center;align-items:flex-start;display:flex}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line{height:var(--__axc-stepper-border-width);grid-row:1;align-self:center;width:100%;min-height:auto;display:block}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line--1{grid-column:line-1}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line--2{grid-column:line-2}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item{grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--__axc-stepper-circle-size) auto;flex:100%}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item:first-of-type .aksel-stepper__line--1,.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item:last-of-type .aksel-stepper__line--2{visibility:hidden}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__step{grid-area:1 / step / -1;grid-template-rows:[circle] var(--__axc-stepper-circle-size) [content] auto;grid-template-columns:[content-start] auto [circle] var(--__axc-stepper-circle-size) [content-end] auto;place-items:center;margin-bottom:0;display:grid}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__circle{grid-area:circle / 2}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__content{grid-area:content / 1 / content / -1;max-width:24ch}@media(forced-colors:active){.aksel-stepper__circle.aksel-stepper__circle{outline-offset:2px;border:0;outline:2px solid buttontext}.aksel-stepper__line.aksel-stepper__line{background-color:buttontext}.aksel-stepper__step[data-active=true][data-interactive] .aksel-stepper__circle{forced-color-adjust:none;color:highlighttext;background-color:highlight}}}
@@ -1,6 +1,6 @@
1
1
  @layer aksel.components {
2
2
  .aksel-tooltip {
3
- z-index: 3000;
3
+ z-index: 2147483647;
4
4
  background-color: var(--ax-bg-neutral-strong);
5
5
  color: var(--ax-text-neutral-contrast);
6
6
  border-radius: var(--ax-radius-4);
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-tooltip{z-index:2147483647;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}}}
@@ -2703,6 +2703,101 @@
2703
2703
  margin-block-start: var(--ax-space-4);
2704
2704
  }
2705
2705
 
2706
+ .aksel-base-alert {
2707
+ border-radius: var(--ax-radius-12);
2708
+ --__axc-base-alert-pi: var(--ax-space-20);
2709
+ --__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
2710
+ --__axc-base-alert-title-pb: var(--ax-space-2);
2711
+ --__axc-base-alert-header-max-width: 37.5rem;
2712
+ height: fit-content;
2713
+ display: grid;
2714
+ overflow: clip;
2715
+ }
2716
+
2717
+ .aksel-base-alert[data-size="small"] {
2718
+ --__axc-base-alert-pi: var(--ax-space-16);
2719
+ --__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
2720
+ --__axc-base-alert-title-pb: var(--ax-space-4);
2721
+ }
2722
+
2723
+ .aksel-base-alert[data-variant="moderate"] {
2724
+ outline: 1px solid var(--ax-border-default);
2725
+ outline-offset: -1px;
2726
+ }
2727
+
2728
+ .aksel-base-alert[data-variant="strong"] {
2729
+ outline: 4px solid var(--ax-border-default);
2730
+ outline-offset: -4px;
2731
+ }
2732
+
2733
+ .aksel-base-alert[data-variant="strong"][data-color="neutral"] {
2734
+ outline-color: var(--ax-border-strong);
2735
+ }
2736
+
2737
+ .aksel-base-alert[data-global="true"] {
2738
+ border-radius: 0;
2739
+ }
2740
+
2741
+ .aksel-base-alert__header {
2742
+ align-items: flex-start;
2743
+ gap: var(--ax-space-8);
2744
+ padding: var(--ax-space-8) var(--__axc-base-alert-pi);
2745
+ border-bottom: 1px solid;
2746
+ display: flex;
2747
+ }
2748
+
2749
+ .aksel-base-alert[data-global="true"] .aksel-base-alert__header {
2750
+ padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
2751
+ }
2752
+
2753
+ .aksel-base-alert[data-variant="moderate"] .aksel-base-alert__header {
2754
+ background: var(--ax-bg-moderate);
2755
+ color: var(--ax-text-default);
2756
+ border-color: var(--ax-border-subtleA);
2757
+ }
2758
+
2759
+ .aksel-base-alert[data-variant="strong"] .aksel-base-alert__header {
2760
+ background: var(--ax-bg-strong);
2761
+ color: var(--ax-text-contrast);
2762
+ border-bottom: none;
2763
+ }
2764
+
2765
+ .aksel-base-alert__header:only-child {
2766
+ border-bottom: none;
2767
+ }
2768
+
2769
+ .aksel-base-alert__icon {
2770
+ margin-top: var(--ax-space-4);
2771
+ font-size: 1.5rem;
2772
+ display: grid;
2773
+ }
2774
+
2775
+ .aksel-base-alert__title {
2776
+ padding-block: var(--__axc-base-alert-title-pb);
2777
+ }
2778
+
2779
+ .aksel-base-alert__content {
2780
+ padding: var(--__axc-base-alert-content-p);
2781
+ background-color: var(--ax-bg-default);
2782
+ }
2783
+
2784
+ .aksel-base-alert[data-global="true"] .aksel-base-alert__content {
2785
+ padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
2786
+ }
2787
+
2788
+ .aksel-base-alert__close-button {
2789
+ z-index: 1;
2790
+ margin-left: auto;
2791
+ }
2792
+
2793
+ .aksel-base-alert__close-button:focus-visible {
2794
+ outline-color: var(--ax-bg-default);
2795
+ }
2796
+
2797
+ .aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button {
2798
+ color: var(--ax-text-neutral-contrast);
2799
+ }
2800
+
2706
2801
  .aksel-chat {
2707
2802
  align-items: flex-end;
2708
2803
  gap: var(--ax-space-12);
@@ -3687,6 +3782,22 @@
3687
3782
  }
3688
3783
  }
3689
3784
 
3785
+ .aksel-inline-message {
3786
+ gap: var(--ax-space-4);
3787
+ color: var(--ax-text-default);
3788
+ display: flex;
3789
+ }
3790
+
3791
+ .aksel-inline-message__icon {
3792
+ color: var(--ax-text-subtle);
3793
+ flex: none;
3794
+ font-size: 1.5rem;
3795
+ }
3796
+
3797
+ .aksel-inline-message[data-size="small"] .aksel-inline-message__icon {
3798
+ font-size: 1.25rem;
3799
+ }
3800
+
3690
3801
  .aksel-internalheader {
3691
3802
  background: var(--ax-bg-raised);
3692
3803
  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
@@ -4751,7 +4862,7 @@
4751
4862
  }
4752
4863
 
4753
4864
  .aksel-tooltip {
4754
- z-index: 3000;
4865
+ z-index: 2147483647;
4755
4866
  background-color: var(--ax-bg-neutral-strong);
4756
4867
  color: var(--ax-text-neutral-contrast);
4757
4868
  border-radius: var(--ax-radius-4);
@@ -5482,7 +5593,7 @@
5482
5593
  justify-self: center;
5483
5594
  }
5484
5595
 
5485
- .aksel-stepper__item--non-interactive .aksel-stepper__line {
5596
+ .aksel-stepper__item[data-interactive="false"] .aksel-stepper__line {
5486
5597
  background-color: var(--ax-border-neutral-strong);
5487
5598
  }
5488
5599