@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

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 (246) hide show
  1. package/README.md +35 -11
  2. package/dist/README.md +35 -11
  3. package/dist/design-tokens.css +300 -85
  4. package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs +135 -70
  5. package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs.map +1 -1
  6. package/dist/icons.js +306 -0
  7. package/dist/package.json +24 -5
  8. package/{src/lib/site-drakkar/site-drakkar.config.ts → dist/site-drakkar.js} +64 -130
  9. package/dist/src/tokens/viking-tokens.json +9 -7
  10. package/dist/types/dataengineeringformachinelearning-viking-ui.d.ts +98 -4
  11. package/dist/viking-components.css +161 -70
  12. package/dist/viking-tokens.json +9 -7
  13. package/dist/viking-ui-elements.js +45 -33
  14. package/dist/viking-ui.css +1 -1
  15. package/dist/web-components.js +46 -36
  16. package/package.json +30 -8
  17. package/dist/scripts/build-web-components.mjs +0 -37
  18. package/dist/src/web/badge/viking-badge-wc.ts +0 -116
  19. package/dist/src/web/button/viking-button-wc.ts +0 -165
  20. package/dist/src/web/callout/viking-callout-wc.ts +0 -105
  21. package/dist/src/web/card/viking-card-wc.ts +0 -70
  22. package/dist/src/web/core/base.ts +0 -56
  23. package/dist/src/web/core/dom.ts +0 -53
  24. package/dist/src/web/core/icons-inline.ts +0 -44
  25. package/dist/src/web/core/styles.ts +0 -1261
  26. package/dist/src/web/core/types.ts +0 -19
  27. package/dist/src/web/field/viking-field-wc.ts +0 -154
  28. package/dist/src/web/index.ts +0 -73
  29. package/dist/src/web/input/viking-input-wc.ts +0 -211
  30. package/dist/src/web/modal/viking-modal-wc.ts +0 -187
  31. package/dist/src/web/search-palette/viking-search-palette-wc.ts +0 -494
  32. package/dist/src/web/select/viking-select-wc.ts +0 -218
  33. package/dist/src/web/suite-header/viking-suite-header-wc.ts +0 -729
  34. package/dist/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
  35. package/dist/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
  36. package/dist/src/web/types.ts +0 -37
  37. package/dist/src/web/web-components.spec.ts +0 -297
  38. package/src/assets/drakkar-favicon.svg +0 -17
  39. package/src/assets/fonts/inter/InterVariable-Italic.woff2 +0 -0
  40. package/src/assets/fonts/inter/InterVariable.woff2 +0 -0
  41. package/src/core/brand/deml-lockup.svg +0 -5
  42. package/src/core/brand/deml-mark-compact.svg +0 -4
  43. package/src/core/brand/deml-mark-filled.svg +0 -3
  44. package/src/core/brand/deml-mark-outline.svg +0 -4
  45. package/src/core/brand-icons.ts +0 -62
  46. package/src/core/icons.spec.ts +0 -52
  47. package/src/core/icons.ts +0 -206
  48. package/src/core/integration-brand-icons.ts +0 -77
  49. package/src/core/lucide-paths.generated.ts +0 -130
  50. package/src/core/types.ts +0 -85
  51. package/src/core/uid.ts +0 -7
  52. package/src/elements/button/viking-button.ts +0 -201
  53. package/src/elements/card/viking-card.ts +0 -60
  54. package/src/elements/core/dom.ts +0 -33
  55. package/src/elements/core/styles.ts +0 -28
  56. package/src/elements/modal/viking-modal.ts +0 -154
  57. package/src/index.ts +0 -1
  58. package/src/lib/accordion/accordion.ts +0 -126
  59. package/src/lib/app-header/app-header.scss +0 -274
  60. package/src/lib/app-header/app-header.ts +0 -43
  61. package/src/lib/app-sidebar/app-sidebar.scss +0 -415
  62. package/src/lib/app-sidebar/app-sidebar.ts +0 -29
  63. package/src/lib/auth-panel/auth-panel.spec.ts +0 -132
  64. package/src/lib/auth-panel/auth-panel.ts +0 -228
  65. package/src/lib/autocomplete/autocomplete.ts +0 -223
  66. package/src/lib/avatar/avatar.ts +0 -126
  67. package/src/lib/badge/badge.ts +0 -182
  68. package/src/lib/bar/bar.ts +0 -31
  69. package/src/lib/brand/brand.ts +0 -60
  70. package/src/lib/breadcrumbs/breadcrumbs.ts +0 -81
  71. package/src/lib/button/button-group.ts +0 -40
  72. package/src/lib/button/button.scss +0 -119
  73. package/src/lib/button/button.ts +0 -98
  74. package/src/lib/calendar/calendar.ts +0 -253
  75. package/src/lib/callout/callout.ts +0 -211
  76. package/src/lib/card/card-title.spec.ts +0 -27
  77. package/src/lib/card/card-title.ts +0 -50
  78. package/src/lib/card/card.ts +0 -198
  79. package/src/lib/carousel/carousel.ts +0 -206
  80. package/src/lib/chart/chart-zoom.spec.ts +0 -65
  81. package/src/lib/chart/chart-zoom.ts +0 -71
  82. package/src/lib/chart/chart.ts +0 -1257
  83. package/src/lib/chart-card-header/chart-card-header.ts +0 -80
  84. package/src/lib/chart-empty-state/chart-empty-state.ts +0 -146
  85. package/src/lib/chart-panel/chart-panel.ts +0 -133
  86. package/src/lib/checkbox/checkbox.ts +0 -139
  87. package/src/lib/color-picker/color-picker.ts +0 -148
  88. package/src/lib/command/command.ts +0 -260
  89. package/src/lib/composer/composer.ts +0 -180
  90. package/src/lib/confirm-dialog/confirm-dialog.ts +0 -163
  91. package/src/lib/confirm-dialog/dialog.service.ts +0 -79
  92. package/src/lib/context/context.ts +0 -75
  93. package/src/lib/core/brand-icons.ts +0 -62
  94. package/src/lib/core/cva.ts +0 -33
  95. package/src/lib/core/icons.ts +0 -206
  96. package/src/lib/core/integration-brand-icons.ts +0 -77
  97. package/src/lib/core/lucide-paths.generated.ts +0 -130
  98. package/src/lib/date-picker/date-picker.ts +0 -139
  99. package/src/lib/dropdown/dropdown.ts +0 -188
  100. package/src/lib/editor/editor.ts +0 -170
  101. package/src/lib/empty-state/empty-state.ts +0 -100
  102. package/src/lib/fab/fab.ts +0 -76
  103. package/src/lib/field/field.ts +0 -111
  104. package/src/lib/file-upload/file-upload.ts +0 -208
  105. package/src/lib/footer/footer.scss +0 -155
  106. package/src/lib/footer/footer.ts +0 -28
  107. package/src/lib/form-section/form-section.ts +0 -200
  108. package/src/lib/forms.spec.ts +0 -92
  109. package/src/lib/gauge-arc/gauge-arc.ts +0 -85
  110. package/src/lib/hud-panel/hud-panel.ts +0 -27
  111. package/src/lib/icon/icon.ts +0 -284
  112. package/src/lib/icon-badge/icon-badge.ts +0 -87
  113. package/src/lib/icon-heading/icon-heading.spec.ts +0 -32
  114. package/src/lib/icon-heading/icon-heading.ts +0 -38
  115. package/src/lib/icon-text/icon-text.ts +0 -120
  116. package/src/lib/input/input.ts +0 -119
  117. package/src/lib/kanban/kanban.ts +0 -211
  118. package/src/lib/kbd/kbd.ts +0 -32
  119. package/src/lib/label/label.ts +0 -39
  120. package/src/lib/loading-overlay/loading-overlay.ts +0 -80
  121. package/src/lib/menubar/menubar.ts +0 -77
  122. package/src/lib/metric-card/metric-card.ts +0 -33
  123. package/src/lib/modal/modal.ts +0 -207
  124. package/src/lib/native-select/native-select.ts +0 -124
  125. package/src/lib/navbar/navbar.ts +0 -124
  126. package/src/lib/navigation-menu/navigation-menu.ts +0 -116
  127. package/src/lib/otp-input/otp-input.ts +0 -164
  128. package/src/lib/page-back-link/page-back-link.ts +0 -74
  129. package/src/lib/page-header/page-header.ts +0 -70
  130. package/src/lib/pagination/pagination.ts +0 -157
  131. package/src/lib/pillbox/pillbox.ts +0 -157
  132. package/src/lib/popover/popover.ts +0 -92
  133. package/src/lib/profile/profile.ts +0 -73
  134. package/src/lib/progress/progress.ts +0 -123
  135. package/src/lib/radio/radio.ts +0 -132
  136. package/src/lib/ring-gauge/ring-gauge.ts +0 -75
  137. package/src/lib/scroll-area/scroll-area.ts +0 -57
  138. package/src/lib/search-palette/search-palette.scss +0 -288
  139. package/src/lib/search-palette/search-palette.ts +0 -114
  140. package/src/lib/select/select.ts +0 -292
  141. package/src/lib/separator/separator.ts +0 -59
  142. package/src/lib/sheet/sheet.ts +0 -192
  143. package/src/lib/sidebar-nav/sidebar-nav.scss +0 -218
  144. package/src/lib/sidebar-nav/sidebar-nav.ts +0 -158
  145. package/src/lib/site-drakkar/site-footer.ts +0 -129
  146. package/src/lib/site-drakkar/site-navbar.scss +0 -2
  147. package/src/lib/site-drakkar/site-navbar.ts +0 -277
  148. package/src/lib/site-drakkar/suite-search-items.spec.ts +0 -61
  149. package/src/lib/site-drakkar/suite-search-items.ts +0 -246
  150. package/src/lib/skeleton/skeleton.ts +0 -51
  151. package/src/lib/slider/slider.ts +0 -133
  152. package/src/lib/spinner/spinner.ts +0 -75
  153. package/src/lib/status-metric-row/status-metric-row.ts +0 -74
  154. package/src/lib/suite-search-palette/suite-search-palette.ts +0 -95
  155. package/src/lib/switch/switch.ts +0 -131
  156. package/src/lib/table/table.ts +0 -137
  157. package/src/lib/tabs/tab-panel.ts +0 -61
  158. package/src/lib/tabs/tab.ts +0 -107
  159. package/src/lib/tabs/tabs.ts +0 -109
  160. package/src/lib/textarea/textarea.ts +0 -103
  161. package/src/lib/theme-toggle/theme-toggle.spec.ts +0 -40
  162. package/src/lib/theme-toggle/theme-toggle.ts +0 -39
  163. package/src/lib/time-picker/time-picker.ts +0 -197
  164. package/src/lib/timeline/timeline.ts +0 -152
  165. package/src/lib/toast/toast.ts +0 -196
  166. package/src/lib/toggle/toggle-group.ts +0 -60
  167. package/src/lib/toggle/toggle.ts +0 -101
  168. package/src/lib/tooltip/tooltip.ts +0 -119
  169. package/src/lib/typography/heading.ts +0 -52
  170. package/src/lib/typography/text.ts +0 -51
  171. package/src/lib/uptime-bar/uptime-bar.ts +0 -55
  172. package/src/lib/verification-code-field/verification-code-field.ts +0 -149
  173. package/src/lib/whitepaper-cta/whitepaper-cta.scss +0 -130
  174. package/src/lib/whitepaper-cta/whitepaper-cta.ts +0 -78
  175. package/src/lib/wizard/wizard.ts +0 -80
  176. package/src/public-api.ts +0 -172
  177. package/src/styles/_buttons.scss +0 -386
  178. package/src/styles/_component-primitives.scss +0 -183
  179. package/src/styles/_drakkar-buttons.scss +0 -85
  180. package/src/styles/_fonts.scss +0 -22
  181. package/src/styles/_forms.scss +0 -66
  182. package/src/styles/_input.scss +0 -106
  183. package/src/styles/_layout-enforcement.scss +0 -229
  184. package/src/styles/_layout-rhythm.scss +0 -158
  185. package/src/styles/_legacy-aliases.scss +0 -212
  186. package/src/styles/_series-colors.scss +0 -24
  187. package/src/styles/_static-primitives.scss +0 -857
  188. package/src/styles/_typography.scss +0 -87
  189. package/src/styles/_variables.scss +0 -527
  190. package/src/styles/components/a11y.scss +0 -90
  191. package/src/styles/components/badges.scss +0 -102
  192. package/src/styles/components/extracted-utilities.scss +0 -459
  193. package/src/styles/components/footer.scss +0 -155
  194. package/src/styles/components/icon-heading.scss +0 -47
  195. package/src/styles/components/icon-inline.scss +0 -101
  196. package/src/styles/components/layout.scss +0 -59
  197. package/src/styles/components/utilities.scss +0 -131
  198. package/src/styles/components/viking-inspired.scss +0 -204
  199. package/src/styles/components/whitepaper-cta.scss +0 -130
  200. package/src/styles/components-bundle.scss +0 -9
  201. package/src/styles/components.scss +0 -442
  202. package/src/styles/deml-components.scss +0 -10
  203. package/src/styles/index.scss +0 -8
  204. package/src/styles/layout-shell.scss +0 -111
  205. package/src/styles/page-shell.scss +0 -859
  206. package/src/styles/static-navbar.scss +0 -1215
  207. package/src/styles/surfaces/backend.scss +0 -154
  208. package/src/styles/surfaces/docs-global.scss +0 -73
  209. package/src/styles/surfaces/docs-shell.scss +0 -437
  210. package/src/styles/surfaces/docs-showcase.scss +0 -1153
  211. package/src/styles/surfaces/marketing-cta.scss +0 -62
  212. package/src/styles/surfaces/marketing-docs-bento.scss +0 -67
  213. package/src/styles/surfaces/marketing-global.scss +0 -748
  214. package/src/styles/surfaces/marketing-landing.scss +0 -1526
  215. package/src/styles/surfaces/marketing-publication.scss +0 -535
  216. package/src/styles/surfaces/marketing-theme.scss +0 -14
  217. package/src/styles/surfaces/swagger-ui.scss +0 -922
  218. package/src/styles/tokens-export.scss +0 -18
  219. package/src/styles/tokens.scss +0 -5
  220. package/src/styles/viking-ui-bundle.scss +0 -23
  221. package/src/styles/viking-ui.scss +0 -270
  222. package/src/tokens/series-presets.ts +0 -15
  223. package/src/tokens/tailwind.preset.js +0 -209
  224. package/src/tokens/viking-tokens.json +0 -318
  225. package/src/viking-ui.spec.ts +0 -416
  226. package/src/web/badge/viking-badge-wc.ts +0 -116
  227. package/src/web/button/viking-button-wc.ts +0 -165
  228. package/src/web/callout/viking-callout-wc.ts +0 -105
  229. package/src/web/card/viking-card-wc.ts +0 -70
  230. package/src/web/core/base.ts +0 -56
  231. package/src/web/core/dom.ts +0 -53
  232. package/src/web/core/icons-inline.ts +0 -44
  233. package/src/web/core/styles.ts +0 -1261
  234. package/src/web/core/types.ts +0 -19
  235. package/src/web/field/viking-field-wc.ts +0 -154
  236. package/src/web/index.ts +0 -73
  237. package/src/web/input/viking-input-wc.ts +0 -211
  238. package/src/web/modal/viking-modal-wc.ts +0 -187
  239. package/src/web/search-palette/viking-search-palette-wc.ts +0 -494
  240. package/src/web/select/viking-select-wc.ts +0 -218
  241. package/src/web/suite-header/viking-suite-header-wc.ts +0 -729
  242. package/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
  243. package/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
  244. package/src/web/types.ts +0 -37
  245. package/src/web/web-components.spec.ts +0 -297
  246. package/src/web-components/index.ts +0 -1
package/dist/viking-components.css CHANGED
@@ -997,6 +997,11 @@
997
997
  .viking-btn,
998
998
  a.viking-btn,
999
999
  button.viking-btn {
1000
+ --viking-btn-depth-shadow: var(--viking-shadow-sm);
1001
+ --viking-btn-hover-shadow: var(--viking-shadow-hover);
1002
+ --viking-btn-press-shadow:
1003
+ inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
1004
+ var(--viking-shadow-xs);
1000
1005
  font-family: var(--viking-font-family);
1001
1006
  font-size: var(--viking-font-size-ui);
1002
1007
  font-weight: var(--viking-font-weight-semibold);
@@ -1005,10 +1010,10 @@ button.viking-btn {
1005
1010
  display: inline-flex;
1006
1011
  align-items: center;
1007
1012
  justify-content: center;
1008
- gap: var(--viking-space-1);
1013
+ gap: var(--viking-space-1-5);
1009
1014
  min-height: var(--viking-control-height);
1010
- padding: 0 var(--viking-control-padding-x);
1011
- border-radius: var(--viking-radius-lg);
1015
+ padding: var(--viking-space-half) var(--viking-control-padding-x);
1016
+ border-radius: var(--viking-radius-md);
1012
1017
  border: 1px solid transparent;
1013
1018
  cursor: pointer;
1014
1019
  text-decoration: none;
@@ -1022,7 +1027,7 @@ button.viking-btn {
1022
1027
  user-select: none;
1023
1028
  -webkit-tap-highlight-color: transparent;
1024
1029
  overflow: hidden;
1025
- box-shadow: var(--viking-shadow-sm);
1030
+ box-shadow: var(--viking-btn-depth-shadow);
1026
1031
  }
1027
1032
  .viking-btn:focus-visible,
1028
1033
  a.viking-btn:focus-visible,
@@ -1040,7 +1045,7 @@ button.viking-btn::before {
1040
1045
  height: 1px;
1041
1046
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
1042
1047
  pointer-events: none;
1043
- opacity: 0.82;
1048
+ opacity: 0.88;
1044
1049
  transition: var(--viking-transition-interactive);
1045
1050
  }
1046
1051
  .viking-btn::after,
@@ -1070,9 +1075,14 @@ a.viking-btn[aria-busy=true]::before,
1070
1075
  a.viking-btn[aria-busy=true] .viking-btn-label,
1071
1076
  button.viking-btn[aria-busy=true]::before,
1072
1077
  button.viking-btn[aria-busy=true] .viking-btn-label {
1073
- opacity: 0.85;
1078
+ opacity: 0.78;
1074
1079
  transform: translateY(1px);
1075
1080
  }
1081
+ .viking-btn[aria-busy=true],
1082
+ a.viking-btn[aria-busy=true],
1083
+ button.viking-btn[aria-busy=true] {
1084
+ cursor: wait;
1085
+ }
1076
1086
  .viking-btn viking-icon,
1077
1087
  .viking-btn .viking-icon,
1078
1088
  .viking-btn [data-viking-icon],
@@ -1091,6 +1101,7 @@ button.viking-btn [data-viking-icon] {
1091
1101
  line-height: 1;
1092
1102
  pointer-events: none;
1093
1103
  flex: 0 0 auto;
1104
+ margin-block: calc(var(--viking-space-half) * -1);
1094
1105
  }
1095
1106
  .viking-btn .viking-btn-label,
1096
1107
  a.viking-btn .viking-btn-label,
@@ -1108,6 +1119,11 @@ button.viking-btn .viking-btn-label {
1108
1119
  .viking-btn-primary,
1109
1120
  a.viking-btn-primary,
1110
1121
  button.viking-btn-primary {
1122
+ --viking-btn-depth-shadow: var(--viking-shadow-sm);
1123
+ --viking-btn-hover-shadow: var(--viking-shadow-hover);
1124
+ --viking-btn-press-shadow:
1125
+ inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
1126
+ var(--viking-shadow-xs);
1111
1127
  font-family: var(--viking-font-family);
1112
1128
  font-size: var(--viking-font-size-ui);
1113
1129
  font-weight: var(--viking-font-weight-semibold);
@@ -1116,10 +1132,10 @@ button.viking-btn-primary {
1116
1132
  display: inline-flex;
1117
1133
  align-items: center;
1118
1134
  justify-content: center;
1119
- gap: var(--viking-space-1);
1135
+ gap: var(--viking-space-1-5);
1120
1136
  min-height: var(--viking-control-height);
1121
- padding: 0 var(--viking-control-padding-x);
1122
- border-radius: var(--viking-radius-lg);
1137
+ padding: var(--viking-space-half) var(--viking-control-padding-x);
1138
+ border-radius: var(--viking-radius-md);
1123
1139
  border: 1px solid transparent;
1124
1140
  cursor: pointer;
1125
1141
  text-decoration: none;
@@ -1133,7 +1149,7 @@ button.viking-btn-primary {
1133
1149
  user-select: none;
1134
1150
  -webkit-tap-highlight-color: transparent;
1135
1151
  overflow: hidden;
1136
- box-shadow: var(--viking-shadow-sm);
1152
+ box-shadow: var(--viking-btn-depth-shadow);
1137
1153
  }
1138
1154
  .viking-btn-primary:focus-visible,
1139
1155
  a.viking-btn-primary:focus-visible,
@@ -1151,7 +1167,7 @@ button.viking-btn-primary::before {
1151
1167
  height: 1px;
1152
1168
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
1153
1169
  pointer-events: none;
1154
- opacity: 0.82;
1170
+ opacity: 0.88;
1155
1171
  transition: var(--viking-transition-interactive);
1156
1172
  }
1157
1173
  .viking-btn-primary::after,
@@ -1181,9 +1197,14 @@ a.viking-btn-primary[aria-busy=true]::before,
1181
1197
  a.viking-btn-primary[aria-busy=true] .viking-btn-label,
1182
1198
  button.viking-btn-primary[aria-busy=true]::before,
1183
1199
  button.viking-btn-primary[aria-busy=true] .viking-btn-label {
1184
- opacity: 0.85;
1200
+ opacity: 0.78;
1185
1201
  transform: translateY(1px);
1186
1202
  }
1203
+ .viking-btn-primary[aria-busy=true],
1204
+ a.viking-btn-primary[aria-busy=true],
1205
+ button.viking-btn-primary[aria-busy=true] {
1206
+ cursor: wait;
1207
+ }
1187
1208
  .viking-btn-primary viking-icon,
1188
1209
  .viking-btn-primary .viking-icon,
1189
1210
  .viking-btn-primary [data-viking-icon],
@@ -1202,6 +1223,7 @@ button.viking-btn-primary [data-viking-icon] {
1202
1223
  line-height: 1;
1203
1224
  pointer-events: none;
1204
1225
  flex: 0 0 auto;
1226
+ margin-block: calc(var(--viking-space-half) * -1);
1205
1227
  }
1206
1228
  .viking-btn-primary .viking-btn-label,
1207
1229
  a.viking-btn-primary .viking-btn-label,
@@ -1221,7 +1243,7 @@ button.viking-btn-primary {
1221
1243
  background: var(--viking-accent);
1222
1244
  color: var(--viking-accent-content);
1223
1245
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
1224
- box-shadow: var(--viking-shadow-sm);
1246
+ box-shadow: var(--viking-btn-depth-shadow), inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 12%, transparent);
1225
1247
  }
1226
1248
  .viking-btn-primary:hover:not(:disabled):not([aria-busy=true]),
1227
1249
  a.viking-btn-primary:hover:not(:disabled):not([aria-busy=true]),
@@ -1229,7 +1251,7 @@ button.viking-btn-primary:hover:not(:disabled):not([aria-busy=true]) {
1229
1251
  background: var(--viking-accent-hover);
1230
1252
  border-color: var(--viking-accent-hover);
1231
1253
  color: var(--viking-accent-content);
1232
- box-shadow: var(--viking-shadow-hover);
1254
+ box-shadow: var(--viking-btn-hover-shadow);
1233
1255
  transform: translateY(var(--viking-state-hover-lift));
1234
1256
  }
1235
1257
  .viking-btn-primary:active:not(:disabled):not([aria-busy=true]),
@@ -1237,12 +1259,17 @@ a.viking-btn-primary:active:not(:disabled):not([aria-busy=true]),
1237
1259
  button.viking-btn-primary:active:not(:disabled):not([aria-busy=true]) {
1238
1260
  transform: translateY(0) scale(var(--viking-state-active-scale));
1239
1261
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
1240
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
1262
+ box-shadow: var(--viking-btn-press-shadow);
1241
1263
  }
1242
1264
 
1243
1265
  .viking-btn-secondary,
1244
1266
  a.viking-btn-secondary,
1245
1267
  button.viking-btn-secondary {
1268
+ --viking-btn-depth-shadow: var(--viking-shadow-sm);
1269
+ --viking-btn-hover-shadow: var(--viking-shadow-hover);
1270
+ --viking-btn-press-shadow:
1271
+ inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
1272
+ var(--viking-shadow-xs);
1246
1273
  font-family: var(--viking-font-family);
1247
1274
  font-size: var(--viking-font-size-ui);
1248
1275
  font-weight: var(--viking-font-weight-semibold);
@@ -1251,10 +1278,10 @@ button.viking-btn-secondary {
1251
1278
  display: inline-flex;
1252
1279
  align-items: center;
1253
1280
  justify-content: center;
1254
- gap: var(--viking-space-1);
1281
+ gap: var(--viking-space-1-5);
1255
1282
  min-height: var(--viking-control-height);
1256
- padding: 0 var(--viking-control-padding-x);
1257
- border-radius: var(--viking-radius-lg);
1283
+ padding: var(--viking-space-half) var(--viking-control-padding-x);
1284
+ border-radius: var(--viking-radius-md);
1258
1285
  border: 1px solid transparent;
1259
1286
  cursor: pointer;
1260
1287
  text-decoration: none;
@@ -1268,7 +1295,7 @@ button.viking-btn-secondary {
1268
1295
  user-select: none;
1269
1296
  -webkit-tap-highlight-color: transparent;
1270
1297
  overflow: hidden;
1271
- box-shadow: var(--viking-shadow-sm);
1298
+ box-shadow: var(--viking-btn-depth-shadow);
1272
1299
  }
1273
1300
  .viking-btn-secondary:focus-visible,
1274
1301
  a.viking-btn-secondary:focus-visible,
@@ -1286,7 +1313,7 @@ button.viking-btn-secondary::before {
1286
1313
  height: 1px;
1287
1314
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
1288
1315
  pointer-events: none;
1289
- opacity: 0.82;
1316
+ opacity: 0.88;
1290
1317
  transition: var(--viking-transition-interactive);
1291
1318
  }
1292
1319
  .viking-btn-secondary::after,
@@ -1316,9 +1343,14 @@ a.viking-btn-secondary[aria-busy=true]::before,
1316
1343
  a.viking-btn-secondary[aria-busy=true] .viking-btn-label,
1317
1344
  button.viking-btn-secondary[aria-busy=true]::before,
1318
1345
  button.viking-btn-secondary[aria-busy=true] .viking-btn-label {
1319
- opacity: 0.85;
1346
+ opacity: 0.78;
1320
1347
  transform: translateY(1px);
1321
1348
  }
1349
+ .viking-btn-secondary[aria-busy=true],
1350
+ a.viking-btn-secondary[aria-busy=true],
1351
+ button.viking-btn-secondary[aria-busy=true] {
1352
+ cursor: wait;
1353
+ }
1322
1354
  .viking-btn-secondary viking-icon,
1323
1355
  .viking-btn-secondary .viking-icon,
1324
1356
  .viking-btn-secondary [data-viking-icon],
@@ -1337,6 +1369,7 @@ button.viking-btn-secondary [data-viking-icon] {
1337
1369
  line-height: 1;
1338
1370
  pointer-events: none;
1339
1371
  flex: 0 0 auto;
1372
+ margin-block: calc(var(--viking-space-half) * -1);
1340
1373
  }
1341
1374
  .viking-btn-secondary .viking-btn-label,
1342
1375
  a.viking-btn-secondary .viking-btn-label,
@@ -1356,7 +1389,7 @@ button.viking-btn-secondary {
1356
1389
  background: var(--viking-accent-secondary);
1357
1390
  color: var(--viking-accent-secondary-content);
1358
1391
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
1359
- box-shadow: var(--viking-shadow-sm);
1392
+ box-shadow: var(--viking-btn-depth-shadow), inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
1360
1393
  }
1361
1394
  .viking-btn-secondary:hover:not(:disabled):not([aria-busy=true]),
1362
1395
  a.viking-btn-secondary:hover:not(:disabled):not([aria-busy=true]),
@@ -1364,7 +1397,7 @@ button.viking-btn-secondary:hover:not(:disabled):not([aria-busy=true]) {
1364
1397
  background: var(--viking-accent-secondary-hover);
1365
1398
  border-color: var(--viking-accent-secondary-hover);
1366
1399
  color: var(--viking-accent-secondary-content);
1367
- box-shadow: var(--viking-shadow-hover);
1400
+ box-shadow: var(--viking-btn-hover-shadow);
1368
1401
  transform: translateY(var(--viking-state-hover-lift));
1369
1402
  }
1370
1403
  .viking-btn-secondary:active:not(:disabled):not([aria-busy=true]),
@@ -1372,12 +1405,17 @@ a.viking-btn-secondary:active:not(:disabled):not([aria-busy=true]),
1372
1405
  button.viking-btn-secondary:active:not(:disabled):not([aria-busy=true]) {
1373
1406
  transform: translateY(0) scale(var(--viking-state-active-scale));
1374
1407
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
1375
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
1408
+ box-shadow: var(--viking-btn-press-shadow);
1376
1409
  }
1377
1410
 
1378
1411
  .viking-btn-outline,
1379
1412
  a.viking-btn-outline,
1380
1413
  button.viking-btn-outline {
1414
+ --viking-btn-depth-shadow: var(--viking-shadow-sm);
1415
+ --viking-btn-hover-shadow: var(--viking-shadow-hover);
1416
+ --viking-btn-press-shadow:
1417
+ inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
1418
+ var(--viking-shadow-xs);
1381
1419
  font-family: var(--viking-font-family);
1382
1420
  font-size: var(--viking-font-size-ui);
1383
1421
  font-weight: var(--viking-font-weight-semibold);
@@ -1386,10 +1424,10 @@ button.viking-btn-outline {
1386
1424
  display: inline-flex;
1387
1425
  align-items: center;
1388
1426
  justify-content: center;
1389
- gap: var(--viking-space-1);
1427
+ gap: var(--viking-space-1-5);
1390
1428
  min-height: var(--viking-control-height);
1391
- padding: 0 var(--viking-control-padding-x);
1392
- border-radius: var(--viking-radius-lg);
1429
+ padding: var(--viking-space-half) var(--viking-control-padding-x);
1430
+ border-radius: var(--viking-radius-md);
1393
1431
  border: 1px solid transparent;
1394
1432
  cursor: pointer;
1395
1433
  text-decoration: none;
@@ -1403,7 +1441,7 @@ button.viking-btn-outline {
1403
1441
  user-select: none;
1404
1442
  -webkit-tap-highlight-color: transparent;
1405
1443
  overflow: hidden;
1406
- box-shadow: var(--viking-shadow-sm);
1444
+ box-shadow: var(--viking-btn-depth-shadow);
1407
1445
  }
1408
1446
  .viking-btn-outline:focus-visible,
1409
1447
  a.viking-btn-outline:focus-visible,
@@ -1421,7 +1459,7 @@ button.viking-btn-outline::before {
1421
1459
  height: 1px;
1422
1460
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
1423
1461
  pointer-events: none;
1424
- opacity: 0.82;
1462
+ opacity: 0.88;
1425
1463
  transition: var(--viking-transition-interactive);
1426
1464
  }
1427
1465
  .viking-btn-outline::after,
@@ -1451,9 +1489,14 @@ a.viking-btn-outline[aria-busy=true]::before,
1451
1489
  a.viking-btn-outline[aria-busy=true] .viking-btn-label,
1452
1490
  button.viking-btn-outline[aria-busy=true]::before,
1453
1491
  button.viking-btn-outline[aria-busy=true] .viking-btn-label {
1454
- opacity: 0.85;
1492
+ opacity: 0.78;
1455
1493
  transform: translateY(1px);
1456
1494
  }
1495
+ .viking-btn-outline[aria-busy=true],
1496
+ a.viking-btn-outline[aria-busy=true],
1497
+ button.viking-btn-outline[aria-busy=true] {
1498
+ cursor: wait;
1499
+ }
1457
1500
  .viking-btn-outline viking-icon,
1458
1501
  .viking-btn-outline .viking-icon,
1459
1502
  .viking-btn-outline [data-viking-icon],
@@ -1472,6 +1515,7 @@ button.viking-btn-outline [data-viking-icon] {
1472
1515
  line-height: 1;
1473
1516
  pointer-events: none;
1474
1517
  flex: 0 0 auto;
1518
+ margin-block: calc(var(--viking-space-half) * -1);
1475
1519
  }
1476
1520
  .viking-btn-outline .viking-btn-label,
1477
1521
  a.viking-btn-outline .viking-btn-label,
@@ -1491,15 +1535,15 @@ button.viking-btn-outline {
1491
1535
  background: var(--viking-surface);
1492
1536
  color: var(--viking-text);
1493
1537
  border-color: var(--viking-border-strong);
1494
- box-shadow: var(--viking-shadow-sm);
1538
+ box-shadow: var(--viking-btn-depth-shadow);
1495
1539
  }
1496
1540
  .viking-btn-outline:hover:not(:disabled):not([aria-busy=true]),
1497
1541
  a.viking-btn-outline:hover:not(:disabled):not([aria-busy=true]),
1498
1542
  button.viking-btn-outline:hover:not(:disabled):not([aria-busy=true]) {
1499
- background: var(--viking-surface-alt);
1543
+ background: color-mix(in srgb, var(--viking-accent) 5%, var(--viking-surface-alt));
1500
1544
  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
1501
1545
  color: var(--viking-text);
1502
- box-shadow: var(--viking-shadow-md);
1546
+ box-shadow: var(--viking-btn-hover-shadow);
1503
1547
  transform: translateY(var(--viking-state-hover-lift));
1504
1548
  }
1505
1549
  .viking-btn-outline:active:not(:disabled):not([aria-busy=true]),
@@ -1507,12 +1551,17 @@ a.viking-btn-outline:active:not(:disabled):not([aria-busy=true]),
1507
1551
  button.viking-btn-outline:active:not(:disabled):not([aria-busy=true]) {
1508
1552
  transform: translateY(0) scale(var(--viking-state-active-scale));
1509
1553
  border-color: var(--viking-border-strong);
1510
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
1554
+ box-shadow: var(--viking-btn-press-shadow);
1511
1555
  }
1512
1556
 
1513
1557
  .viking-btn-danger,
1514
1558
  a.viking-btn-danger,
1515
1559
  button.viking-btn-danger {
1560
+ --viking-btn-depth-shadow: var(--viking-shadow-sm);
1561
+ --viking-btn-hover-shadow: var(--viking-shadow-hover);
1562
+ --viking-btn-press-shadow:
1563
+ inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
1564
+ var(--viking-shadow-xs);
1516
1565
  font-family: var(--viking-font-family);
1517
1566
  font-size: var(--viking-font-size-ui);
1518
1567
  font-weight: var(--viking-font-weight-semibold);
@@ -1521,10 +1570,10 @@ button.viking-btn-danger {
1521
1570
  display: inline-flex;
1522
1571
  align-items: center;
1523
1572
  justify-content: center;
1524
- gap: var(--viking-space-1);
1573
+ gap: var(--viking-space-1-5);
1525
1574
  min-height: var(--viking-control-height);
1526
- padding: 0 var(--viking-control-padding-x);
1527
- border-radius: var(--viking-radius-lg);
1575
+ padding: var(--viking-space-half) var(--viking-control-padding-x);
1576
+ border-radius: var(--viking-radius-md);
1528
1577
  border: 1px solid transparent;
1529
1578
  cursor: pointer;
1530
1579
  text-decoration: none;
@@ -1538,7 +1587,7 @@ button.viking-btn-danger {
1538
1587
  user-select: none;
1539
1588
  -webkit-tap-highlight-color: transparent;
1540
1589
  overflow: hidden;
1541
- box-shadow: var(--viking-shadow-sm);
1590
+ box-shadow: var(--viking-btn-depth-shadow);
1542
1591
  }
1543
1592
  .viking-btn-danger:focus-visible,
1544
1593
  a.viking-btn-danger:focus-visible,
@@ -1556,7 +1605,7 @@ button.viking-btn-danger::before {
1556
1605
  height: 1px;
1557
1606
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
1558
1607
  pointer-events: none;
1559
- opacity: 0.82;
1608
+ opacity: 0.88;
1560
1609
  transition: var(--viking-transition-interactive);
1561
1610
  }
1562
1611
  .viking-btn-danger::after,
@@ -1586,9 +1635,14 @@ a.viking-btn-danger[aria-busy=true]::before,
1586
1635
  a.viking-btn-danger[aria-busy=true] .viking-btn-label,
1587
1636
  button.viking-btn-danger[aria-busy=true]::before,
1588
1637
  button.viking-btn-danger[aria-busy=true] .viking-btn-label {
1589
- opacity: 0.85;
1638
+ opacity: 0.78;
1590
1639
  transform: translateY(1px);
1591
1640
  }
1641
+ .viking-btn-danger[aria-busy=true],
1642
+ a.viking-btn-danger[aria-busy=true],
1643
+ button.viking-btn-danger[aria-busy=true] {
1644
+ cursor: wait;
1645
+ }
1592
1646
  .viking-btn-danger viking-icon,
1593
1647
  .viking-btn-danger .viking-icon,
1594
1648
  .viking-btn-danger [data-viking-icon],
@@ -1607,6 +1661,7 @@ button.viking-btn-danger [data-viking-icon] {
1607
1661
  line-height: 1;
1608
1662
  pointer-events: none;
1609
1663
  flex: 0 0 auto;
1664
+ margin-block: calc(var(--viking-space-half) * -1);
1610
1665
  }
1611
1666
  .viking-btn-danger .viking-btn-label,
1612
1667
  a.viking-btn-danger .viking-btn-label,
@@ -1626,7 +1681,7 @@ button.viking-btn-danger {
1626
1681
  background: var(--viking-danger);
1627
1682
  color: var(--viking-on-danger);
1628
1683
  border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
1629
- box-shadow: var(--viking-shadow-sm);
1684
+ box-shadow: var(--viking-btn-depth-shadow), inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
1630
1685
  }
1631
1686
  .viking-btn-danger:hover:not(:disabled):not([aria-busy=true]),
1632
1687
  a.viking-btn-danger:hover:not(:disabled):not([aria-busy=true]),
@@ -1634,7 +1689,7 @@ button.viking-btn-danger:hover:not(:disabled):not([aria-busy=true]) {
1634
1689
  background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
1635
1690
  border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
1636
1691
  color: var(--viking-on-danger);
1637
- box-shadow: var(--viking-shadow-hover);
1692
+ box-shadow: var(--viking-btn-hover-shadow);
1638
1693
  transform: translateY(var(--viking-state-hover-lift));
1639
1694
  }
1640
1695
  .viking-btn-danger:active:not(:disabled):not([aria-busy=true]),
@@ -1643,12 +1698,17 @@ button.viking-btn-danger:active:not(:disabled):not([aria-busy=true]) {
1643
1698
  transform: translateY(0) scale(var(--viking-state-active-scale));
1644
1699
  border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
1645
1700
  background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
1646
- box-shadow: var(--viking-shadow-sm);
1701
+ box-shadow: var(--viking-btn-press-shadow);
1647
1702
  }
1648
1703
 
1649
1704
  .viking-btn-ghost,
1650
1705
  a.viking-btn-ghost,
1651
1706
  button.viking-btn-ghost {
1707
+ --viking-btn-depth-shadow: var(--viking-shadow-sm);
1708
+ --viking-btn-hover-shadow: var(--viking-shadow-hover);
1709
+ --viking-btn-press-shadow:
1710
+ inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
1711
+ var(--viking-shadow-xs);
1652
1712
  font-family: var(--viking-font-family);
1653
1713
  font-size: var(--viking-font-size-ui);
1654
1714
  font-weight: var(--viking-font-weight-semibold);
@@ -1657,10 +1717,10 @@ button.viking-btn-ghost {
1657
1717
  display: inline-flex;
1658
1718
  align-items: center;
1659
1719
  justify-content: center;
1660
- gap: var(--viking-space-1);
1720
+ gap: var(--viking-space-1-5);
1661
1721
  min-height: var(--viking-control-height);
1662
- padding: 0 var(--viking-control-padding-x);
1663
- border-radius: var(--viking-radius-lg);
1722
+ padding: var(--viking-space-half) var(--viking-control-padding-x);
1723
+ border-radius: var(--viking-radius-md);
1664
1724
  border: 1px solid transparent;
1665
1725
  cursor: pointer;
1666
1726
  text-decoration: none;
@@ -1674,7 +1734,7 @@ button.viking-btn-ghost {
1674
1734
  user-select: none;
1675
1735
  -webkit-tap-highlight-color: transparent;
1676
1736
  overflow: hidden;
1677
- box-shadow: var(--viking-shadow-sm);
1737
+ box-shadow: var(--viking-btn-depth-shadow);
1678
1738
  }
1679
1739
  .viking-btn-ghost:focus-visible,
1680
1740
  a.viking-btn-ghost:focus-visible,
@@ -1692,7 +1752,7 @@ button.viking-btn-ghost::before {
1692
1752
  height: 1px;
1693
1753
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
1694
1754
  pointer-events: none;
1695
- opacity: 0.82;
1755
+ opacity: 0.88;
1696
1756
  transition: var(--viking-transition-interactive);
1697
1757
  }
1698
1758
  .viking-btn-ghost::after,
@@ -1722,9 +1782,14 @@ a.viking-btn-ghost[aria-busy=true]::before,
1722
1782
  a.viking-btn-ghost[aria-busy=true] .viking-btn-label,
1723
1783
  button.viking-btn-ghost[aria-busy=true]::before,
1724
1784
  button.viking-btn-ghost[aria-busy=true] .viking-btn-label {
1725
- opacity: 0.85;
1785
+ opacity: 0.78;
1726
1786
  transform: translateY(1px);
1727
1787
  }
1788
+ .viking-btn-ghost[aria-busy=true],
1789
+ a.viking-btn-ghost[aria-busy=true],
1790
+ button.viking-btn-ghost[aria-busy=true] {
1791
+ cursor: wait;
1792
+ }
1728
1793
  .viking-btn-ghost viking-icon,
1729
1794
  .viking-btn-ghost .viking-icon,
1730
1795
  .viking-btn-ghost [data-viking-icon],
@@ -1743,6 +1808,7 @@ button.viking-btn-ghost [data-viking-icon] {
1743
1808
  line-height: 1;
1744
1809
  pointer-events: none;
1745
1810
  flex: 0 0 auto;
1811
+ margin-block: calc(var(--viking-space-half) * -1);
1746
1812
  }
1747
1813
  .viking-btn-ghost .viking-btn-label,
1748
1814
  a.viking-btn-ghost .viking-btn-label,
@@ -1770,6 +1836,8 @@ a.viking-btn-ghost:hover:not(:disabled):not([aria-busy=true]),
1770
1836
  button.viking-btn-ghost:hover:not(:disabled):not([aria-busy=true]) {
1771
1837
  background: var(--viking-accent-soft);
1772
1838
  color: var(--viking-accent-strong);
1839
+ border-color: var(--viking-border-subtle);
1840
+ transform: translateY(var(--viking-state-hover-lift));
1773
1841
  }
1774
1842
  .viking-btn-ghost:active:not(:disabled):not([aria-busy=true]),
1775
1843
  a.viking-btn-ghost:active:not(:disabled):not([aria-busy=true]),
@@ -1782,6 +1850,11 @@ button.viking-btn-ghost:active:not(:disabled):not([aria-busy=true]) {
1782
1850
  .viking-btn-subtle,
1783
1851
  a.viking-btn-subtle,
1784
1852
  button.viking-btn-subtle {
1853
+ --viking-btn-depth-shadow: var(--viking-shadow-sm);
1854
+ --viking-btn-hover-shadow: var(--viking-shadow-hover);
1855
+ --viking-btn-press-shadow:
1856
+ inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
1857
+ var(--viking-shadow-xs);
1785
1858
  font-family: var(--viking-font-family);
1786
1859
  font-size: var(--viking-font-size-ui);
1787
1860
  font-weight: var(--viking-font-weight-semibold);
@@ -1790,10 +1863,10 @@ button.viking-btn-subtle {
1790
1863
  display: inline-flex;
1791
1864
  align-items: center;
1792
1865
  justify-content: center;
1793
- gap: var(--viking-space-1);
1866
+ gap: var(--viking-space-1-5);
1794
1867
  min-height: var(--viking-control-height);
1795
- padding: 0 var(--viking-control-padding-x);
1796
- border-radius: var(--viking-radius-lg);
1868
+ padding: var(--viking-space-half) var(--viking-control-padding-x);
1869
+ border-radius: var(--viking-radius-md);
1797
1870
  border: 1px solid transparent;
1798
1871
  cursor: pointer;
1799
1872
  text-decoration: none;
@@ -1807,7 +1880,7 @@ button.viking-btn-subtle {
1807
1880
  user-select: none;
1808
1881
  -webkit-tap-highlight-color: transparent;
1809
1882
  overflow: hidden;
1810
- box-shadow: var(--viking-shadow-sm);
1883
+ box-shadow: var(--viking-btn-depth-shadow);
1811
1884
  }
1812
1885
  .viking-btn-subtle:focus-visible,
1813
1886
  a.viking-btn-subtle:focus-visible,
@@ -1825,7 +1898,7 @@ button.viking-btn-subtle::before {
1825
1898
  height: 1px;
1826
1899
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
1827
1900
  pointer-events: none;
1828
- opacity: 0.82;
1901
+ opacity: 0.88;
1829
1902
  transition: var(--viking-transition-interactive);
1830
1903
  }
1831
1904
  .viking-btn-subtle::after,
@@ -1855,9 +1928,14 @@ a.viking-btn-subtle[aria-busy=true]::before,
1855
1928
  a.viking-btn-subtle[aria-busy=true] .viking-btn-label,
1856
1929
  button.viking-btn-subtle[aria-busy=true]::before,
1857
1930
  button.viking-btn-subtle[aria-busy=true] .viking-btn-label {
1858
- opacity: 0.85;
1931
+ opacity: 0.78;
1859
1932
  transform: translateY(1px);
1860
1933
  }
1934
+ .viking-btn-subtle[aria-busy=true],
1935
+ a.viking-btn-subtle[aria-busy=true],
1936
+ button.viking-btn-subtle[aria-busy=true] {
1937
+ cursor: wait;
1938
+ }
1861
1939
  .viking-btn-subtle viking-icon,
1862
1940
  .viking-btn-subtle .viking-icon,
1863
1941
  .viking-btn-subtle [data-viking-icon],
@@ -1876,6 +1954,7 @@ button.viking-btn-subtle [data-viking-icon] {
1876
1954
  line-height: 1;
1877
1955
  pointer-events: none;
1878
1956
  flex: 0 0 auto;
1957
+ margin-block: calc(var(--viking-space-half) * -1);
1879
1958
  }
1880
1959
  .viking-btn-subtle .viking-btn-label,
1881
1960
  a.viking-btn-subtle .viking-btn-label,
@@ -1918,57 +1997,57 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
1918
1997
  background: var(--viking-surface);
1919
1998
  color: var(--viking-text);
1920
1999
  border-color: var(--viking-border-strong);
1921
- box-shadow: var(--viking-shadow-sm);
2000
+ box-shadow: var(--viking-btn-depth-shadow);
1922
2001
  }
1923
2002
  .viking-btn.viking-outline:hover:not(:disabled):not([aria-busy=true]) {
1924
- background: var(--viking-surface-alt);
2003
+ background: color-mix(in srgb, var(--viking-accent) 5%, var(--viking-surface-alt));
1925
2004
  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
1926
2005
  color: var(--viking-text);
1927
- box-shadow: var(--viking-shadow-md);
2006
+ box-shadow: var(--viking-btn-hover-shadow);
1928
2007
  transform: translateY(var(--viking-state-hover-lift));
1929
2008
  }
1930
2009
  .viking-btn.viking-outline:active:not(:disabled):not([aria-busy=true]) {
1931
2010
  transform: translateY(0) scale(var(--viking-state-active-scale));
1932
2011
  border-color: var(--viking-border-strong);
1933
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
2012
+ box-shadow: var(--viking-btn-press-shadow);
1934
2013
  }
1935
2014
 
1936
2015
  .viking-btn.viking-primary {
1937
2016
  background: var(--viking-accent);
1938
2017
  color: var(--viking-accent-content);
1939
2018
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
1940
- box-shadow: var(--viking-shadow-sm);
2019
+ box-shadow: var(--viking-btn-depth-shadow), inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 12%, transparent);
1941
2020
  }
1942
2021
  .viking-btn.viking-primary:hover:not(:disabled):not([aria-busy=true]) {
1943
2022
  background: var(--viking-accent-hover);
1944
2023
  border-color: var(--viking-accent-hover);
1945
2024
  color: var(--viking-accent-content);
1946
- box-shadow: var(--viking-shadow-hover);
2025
+ box-shadow: var(--viking-btn-hover-shadow);
1947
2026
  transform: translateY(var(--viking-state-hover-lift));
1948
2027
  }
1949
2028
  .viking-btn.viking-primary:active:not(:disabled):not([aria-busy=true]) {
1950
2029
  transform: translateY(0) scale(var(--viking-state-active-scale));
1951
2030
  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
1952
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
2031
+ box-shadow: var(--viking-btn-press-shadow);
1953
2032
  }
1954
2033
 
1955
2034
  .viking-btn.viking-secondary {
1956
2035
  background: var(--viking-accent-secondary);
1957
2036
  color: var(--viking-accent-secondary-content);
1958
2037
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
1959
- box-shadow: var(--viking-shadow-sm);
2038
+ box-shadow: var(--viking-btn-depth-shadow), inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
1960
2039
  }
1961
2040
  .viking-btn.viking-secondary:hover:not(:disabled):not([aria-busy=true]) {
1962
2041
  background: var(--viking-accent-secondary-hover);
1963
2042
  border-color: var(--viking-accent-secondary-hover);
1964
2043
  color: var(--viking-accent-secondary-content);
1965
- box-shadow: var(--viking-shadow-hover);
2044
+ box-shadow: var(--viking-btn-hover-shadow);
1966
2045
  transform: translateY(var(--viking-state-hover-lift));
1967
2046
  }
1968
2047
  .viking-btn.viking-secondary:active:not(:disabled):not([aria-busy=true]) {
1969
2048
  transform: translateY(0) scale(var(--viking-state-active-scale));
1970
2049
  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
1971
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
2050
+ box-shadow: var(--viking-btn-press-shadow);
1972
2051
  }
1973
2052
 
1974
2053
  .viking-btn.viking-filled {
@@ -1980,12 +2059,12 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
1980
2059
  .viking-btn.viking-filled:hover:not(:disabled):not([aria-busy=true]) {
1981
2060
  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
1982
2061
  background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
1983
- box-shadow: var(--viking-shadow-sm);
2062
+ box-shadow: var(--viking-btn-depth-shadow);
1984
2063
  transform: translateY(var(--viking-state-hover-lift));
1985
2064
  }
1986
2065
  .viking-btn.viking-filled:active:not(:disabled):not([aria-busy=true]) {
1987
2066
  transform: translateY(0) scale(var(--viking-state-active-scale));
1988
- box-shadow: var(--viking-shadow-sm);
2067
+ box-shadow: var(--viking-btn-press-shadow);
1989
2068
  border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
1990
2069
  background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
1991
2070
  }
@@ -1994,20 +2073,20 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
1994
2073
  background: var(--viking-danger);
1995
2074
  color: var(--viking-on-danger);
1996
2075
  border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
1997
- box-shadow: var(--viking-shadow-sm);
2076
+ box-shadow: var(--viking-btn-depth-shadow), inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
1998
2077
  }
1999
2078
  .viking-btn.viking-danger:hover:not(:disabled):not([aria-busy=true]) {
2000
2079
  background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
2001
2080
  border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
2002
2081
  color: var(--viking-on-danger);
2003
- box-shadow: var(--viking-shadow-hover);
2082
+ box-shadow: var(--viking-btn-hover-shadow);
2004
2083
  transform: translateY(var(--viking-state-hover-lift));
2005
2084
  }
2006
2085
  .viking-btn.viking-danger:active:not(:disabled):not([aria-busy=true]) {
2007
2086
  transform: translateY(0) scale(var(--viking-state-active-scale));
2008
2087
  border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
2009
2088
  background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
2010
- box-shadow: var(--viking-shadow-sm);
2089
+ box-shadow: var(--viking-btn-press-shadow);
2011
2090
  }
2012
2091
 
2013
2092
  .viking-btn.viking-ghost {
@@ -2020,6 +2099,8 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
2020
2099
  .viking-btn.viking-ghost:hover:not(:disabled):not([aria-busy=true]) {
2021
2100
  background: var(--viking-accent-soft);
2022
2101
  color: var(--viking-accent-strong);
2102
+ border-color: var(--viking-border-subtle);
2103
+ transform: translateY(var(--viking-state-hover-lift));
2023
2104
  }
2024
2105
  .viking-btn.viking-ghost:active:not(:disabled):not([aria-busy=true]) {
2025
2106
  transform: translateY(0) scale(var(--viking-state-active-scale));
@@ -2061,6 +2142,16 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
2061
2142
  line-height: inherit;
2062
2143
  }
2063
2144
 
2145
+ .viking-btn-spinner {
2146
+ flex: 0 0 auto;
2147
+ width: var(--viking-icon-size-sm, 18px);
2148
+ height: var(--viking-icon-size-sm, 18px);
2149
+ border: 2px solid currentColor;
2150
+ border-right-color: transparent;
2151
+ border-radius: var(--viking-radius-pill);
2152
+ animation: viking-spin 0.8s linear infinite;
2153
+ }
2154
+
2064
2155
  .viking-control {
2065
2156
  display: flex;
2066
2157
  align-items: center;