@dataengineeringformachinelearning/viking-ui 4.0.2 → 4.0.4

package/dist/viking-components.css

@@ -1008,7 +1008,7 @@ button.viking-btn {
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -1017,8 +1017,12 @@ button.viking-btn {
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 }
 .viking-btn:focus-visible,
 a.viking-btn:focus-visible,
@@ -1027,6 +1031,30 @@ button.viking-btn:focus-visible {
   outline-offset: var(--viking-ring-offset);
   z-index: 1;
 }
+.viking-btn::before,
+a.viking-btn::before,
+button.viking-btn::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto 1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+.viking-btn::after,
+a.viking-btn::after,
+button.viking-btn::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 18%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
 .viking-btn:disabled, .viking-btn[aria-busy=true],
 a.viking-btn:disabled,
 a.viking-btn[aria-busy=true],
@@ -1037,19 +1065,44 @@ button.viking-btn[aria-busy=true] {
   transform: none !important;
   box-shadow: none !important;
 }
-.viking-btn[aria-busy=true] .viking-btn-label,
+.viking-btn[aria-busy=true]::before, .viking-btn[aria-busy=true] .viking-btn-label,
+a.viking-btn[aria-busy=true]::before,
 a.viking-btn[aria-busy=true] .viking-btn-label,
+button.viking-btn[aria-busy=true]::before,
 button.viking-btn[aria-busy=true] .viking-btn-label {
   opacity: 0.85;
+  transform: translateY(1px);
 }
 .viking-btn viking-icon,
 .viking-btn .viking-icon,
+.viking-btn [data-viking-icon],
 a.viking-btn viking-icon,
 a.viking-btn .viking-icon,
+a.viking-btn [data-viking-icon],
 button.viking-btn viking-icon,
-button.viking-btn .viking-icon {
+button.viking-btn .viking-icon,
+button.viking-btn [data-viking-icon] {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
   pointer-events: none;
+  flex: 0 0 auto;
+}
+.viking-btn .viking-btn-label,
+a.viking-btn .viking-btn-label,
+button.viking-btn .viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .viking-btn-primary,
@@ -1066,7 +1119,7 @@ button.viking-btn-primary {
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -1075,8 +1128,12 @@ button.viking-btn-primary {
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 }
 .viking-btn-primary:focus-visible,
 a.viking-btn-primary:focus-visible,
@@ -1085,6 +1142,30 @@ button.viking-btn-primary:focus-visible {
   outline-offset: var(--viking-ring-offset);
   z-index: 1;
 }
+.viking-btn-primary::before,
+a.viking-btn-primary::before,
+button.viking-btn-primary::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto 1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+.viking-btn-primary::after,
+a.viking-btn-primary::after,
+button.viking-btn-primary::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 18%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
 .viking-btn-primary:disabled, .viking-btn-primary[aria-busy=true],
 a.viking-btn-primary:disabled,
 a.viking-btn-primary[aria-busy=true],
@@ -1095,19 +1176,44 @@ button.viking-btn-primary[aria-busy=true] {
   transform: none !important;
   box-shadow: none !important;
 }
-.viking-btn-primary[aria-busy=true] .viking-btn-label,
+.viking-btn-primary[aria-busy=true]::before, .viking-btn-primary[aria-busy=true] .viking-btn-label,
+a.viking-btn-primary[aria-busy=true]::before,
 a.viking-btn-primary[aria-busy=true] .viking-btn-label,
+button.viking-btn-primary[aria-busy=true]::before,
 button.viking-btn-primary[aria-busy=true] .viking-btn-label {
   opacity: 0.85;
+  transform: translateY(1px);
 }
 .viking-btn-primary viking-icon,
 .viking-btn-primary .viking-icon,
+.viking-btn-primary [data-viking-icon],
 a.viking-btn-primary viking-icon,
 a.viking-btn-primary .viking-icon,
+a.viking-btn-primary [data-viking-icon],
 button.viking-btn-primary viking-icon,
-button.viking-btn-primary .viking-icon {
+button.viking-btn-primary .viking-icon,
+button.viking-btn-primary [data-viking-icon] {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
   pointer-events: none;
+  flex: 0 0 auto;
+}
+.viking-btn-primary .viking-btn-label,
+a.viking-btn-primary .viking-btn-label,
+button.viking-btn-primary .viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 .viking-btn-primary,
 a.viking-btn-primary,
@@ -1130,7 +1236,8 @@ button.viking-btn-primary:hover:not(:disabled):not([aria-busy=true]) {
 a.viking-btn-primary:active:not(:disabled):not([aria-busy=true]),
 button.viking-btn-primary:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
 }
 
 .viking-btn-secondary,
@@ -1147,7 +1254,7 @@ button.viking-btn-secondary {
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -1156,8 +1263,12 @@ button.viking-btn-secondary {
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 }
 .viking-btn-secondary:focus-visible,
 a.viking-btn-secondary:focus-visible,
@@ -1166,6 +1277,30 @@ button.viking-btn-secondary:focus-visible {
   outline-offset: var(--viking-ring-offset);
   z-index: 1;
 }
+.viking-btn-secondary::before,
+a.viking-btn-secondary::before,
+button.viking-btn-secondary::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto 1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+.viking-btn-secondary::after,
+a.viking-btn-secondary::after,
+button.viking-btn-secondary::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 18%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
 .viking-btn-secondary:disabled, .viking-btn-secondary[aria-busy=true],
 a.viking-btn-secondary:disabled,
 a.viking-btn-secondary[aria-busy=true],
@@ -1176,19 +1311,44 @@ button.viking-btn-secondary[aria-busy=true] {
   transform: none !important;
   box-shadow: none !important;
 }
-.viking-btn-secondary[aria-busy=true] .viking-btn-label,
+.viking-btn-secondary[aria-busy=true]::before, .viking-btn-secondary[aria-busy=true] .viking-btn-label,
+a.viking-btn-secondary[aria-busy=true]::before,
 a.viking-btn-secondary[aria-busy=true] .viking-btn-label,
+button.viking-btn-secondary[aria-busy=true]::before,
 button.viking-btn-secondary[aria-busy=true] .viking-btn-label {
   opacity: 0.85;
+  transform: translateY(1px);
 }
 .viking-btn-secondary viking-icon,
 .viking-btn-secondary .viking-icon,
+.viking-btn-secondary [data-viking-icon],
 a.viking-btn-secondary viking-icon,
 a.viking-btn-secondary .viking-icon,
+a.viking-btn-secondary [data-viking-icon],
 button.viking-btn-secondary viking-icon,
-button.viking-btn-secondary .viking-icon {
+button.viking-btn-secondary .viking-icon,
+button.viking-btn-secondary [data-viking-icon] {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
   pointer-events: none;
+  flex: 0 0 auto;
+}
+.viking-btn-secondary .viking-btn-label,
+a.viking-btn-secondary .viking-btn-label,
+button.viking-btn-secondary .viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 .viking-btn-secondary,
 a.viking-btn-secondary,
@@ -1211,7 +1371,8 @@ button.viking-btn-secondary:hover:not(:disabled):not([aria-busy=true]) {
 a.viking-btn-secondary:active:not(:disabled):not([aria-busy=true]),
 button.viking-btn-secondary:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
 }
 
 .viking-btn-outline,
@@ -1228,7 +1389,7 @@ button.viking-btn-outline {
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -1237,8 +1398,12 @@ button.viking-btn-outline {
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 }
 .viking-btn-outline:focus-visible,
 a.viking-btn-outline:focus-visible,
@@ -1247,6 +1412,30 @@ button.viking-btn-outline:focus-visible {
   outline-offset: var(--viking-ring-offset);
   z-index: 1;
 }
+.viking-btn-outline::before,
+a.viking-btn-outline::before,
+button.viking-btn-outline::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto 1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+.viking-btn-outline::after,
+a.viking-btn-outline::after,
+button.viking-btn-outline::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 18%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
 .viking-btn-outline:disabled, .viking-btn-outline[aria-busy=true],
 a.viking-btn-outline:disabled,
 a.viking-btn-outline[aria-busy=true],
@@ -1257,19 +1446,44 @@ button.viking-btn-outline[aria-busy=true] {
   transform: none !important;
   box-shadow: none !important;
 }
-.viking-btn-outline[aria-busy=true] .viking-btn-label,
+.viking-btn-outline[aria-busy=true]::before, .viking-btn-outline[aria-busy=true] .viking-btn-label,
+a.viking-btn-outline[aria-busy=true]::before,
 a.viking-btn-outline[aria-busy=true] .viking-btn-label,
+button.viking-btn-outline[aria-busy=true]::before,
 button.viking-btn-outline[aria-busy=true] .viking-btn-label {
   opacity: 0.85;
+  transform: translateY(1px);
 }
 .viking-btn-outline viking-icon,
 .viking-btn-outline .viking-icon,
+.viking-btn-outline [data-viking-icon],
 a.viking-btn-outline viking-icon,
 a.viking-btn-outline .viking-icon,
+a.viking-btn-outline [data-viking-icon],
 button.viking-btn-outline viking-icon,
-button.viking-btn-outline .viking-icon {
+button.viking-btn-outline .viking-icon,
+button.viking-btn-outline [data-viking-icon] {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
   pointer-events: none;
+  flex: 0 0 auto;
+}
+.viking-btn-outline .viking-btn-label,
+a.viking-btn-outline .viking-btn-label,
+button.viking-btn-outline .viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 .viking-btn-outline,
 a.viking-btn-outline,
@@ -1292,7 +1506,8 @@ button.viking-btn-outline:hover:not(:disabled):not([aria-busy=true]) {
 a.viking-btn-outline:active:not(:disabled):not([aria-busy=true]),
 button.viking-btn-outline:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  border-color: var(--viking-border-strong);
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
 }
 
 .viking-btn-danger,
@@ -1309,7 +1524,7 @@ button.viking-btn-danger {
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -1318,8 +1533,12 @@ button.viking-btn-danger {
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 }
 .viking-btn-danger:focus-visible,
 a.viking-btn-danger:focus-visible,
@@ -1328,6 +1547,30 @@ button.viking-btn-danger:focus-visible {
   outline-offset: var(--viking-ring-offset);
   z-index: 1;
 }
+.viking-btn-danger::before,
+a.viking-btn-danger::before,
+button.viking-btn-danger::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto 1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+.viking-btn-danger::after,
+a.viking-btn-danger::after,
+button.viking-btn-danger::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 18%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
 .viking-btn-danger:disabled, .viking-btn-danger[aria-busy=true],
 a.viking-btn-danger:disabled,
 a.viking-btn-danger[aria-busy=true],
@@ -1338,19 +1581,44 @@ button.viking-btn-danger[aria-busy=true] {
   transform: none !important;
   box-shadow: none !important;
 }
-.viking-btn-danger[aria-busy=true] .viking-btn-label,
+.viking-btn-danger[aria-busy=true]::before, .viking-btn-danger[aria-busy=true] .viking-btn-label,
+a.viking-btn-danger[aria-busy=true]::before,
 a.viking-btn-danger[aria-busy=true] .viking-btn-label,
+button.viking-btn-danger[aria-busy=true]::before,
 button.viking-btn-danger[aria-busy=true] .viking-btn-label {
   opacity: 0.85;
+  transform: translateY(1px);
 }
 .viking-btn-danger viking-icon,
 .viking-btn-danger .viking-icon,
+.viking-btn-danger [data-viking-icon],
 a.viking-btn-danger viking-icon,
 a.viking-btn-danger .viking-icon,
+a.viking-btn-danger [data-viking-icon],
 button.viking-btn-danger viking-icon,
-button.viking-btn-danger .viking-icon {
+button.viking-btn-danger .viking-icon,
+button.viking-btn-danger [data-viking-icon] {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
   pointer-events: none;
+  flex: 0 0 auto;
+}
+.viking-btn-danger .viking-btn-label,
+a.viking-btn-danger .viking-btn-label,
+button.viking-btn-danger .viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 .viking-btn-danger,
 a.viking-btn-danger,
@@ -1373,6 +1641,8 @@ button.viking-btn-danger:hover:not(:disabled):not([aria-busy=true]) {
 a.viking-btn-danger:active:not(:disabled):not([aria-busy=true]),
 button.viking-btn-danger:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
+  background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
   box-shadow: var(--viking-shadow-sm);
 }
 
@@ -1390,7 +1660,7 @@ button.viking-btn-ghost {
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -1399,8 +1669,12 @@ button.viking-btn-ghost {
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 }
 .viking-btn-ghost:focus-visible,
 a.viking-btn-ghost:focus-visible,
@@ -1409,6 +1683,30 @@ button.viking-btn-ghost:focus-visible {
   outline-offset: var(--viking-ring-offset);
   z-index: 1;
 }
+.viking-btn-ghost::before,
+a.viking-btn-ghost::before,
+button.viking-btn-ghost::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto 1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+.viking-btn-ghost::after,
+a.viking-btn-ghost::after,
+button.viking-btn-ghost::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 18%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
 .viking-btn-ghost:disabled, .viking-btn-ghost[aria-busy=true],
 a.viking-btn-ghost:disabled,
 a.viking-btn-ghost[aria-busy=true],
@@ -1419,19 +1717,44 @@ button.viking-btn-ghost[aria-busy=true] {
   transform: none !important;
   box-shadow: none !important;
 }
-.viking-btn-ghost[aria-busy=true] .viking-btn-label,
+.viking-btn-ghost[aria-busy=true]::before, .viking-btn-ghost[aria-busy=true] .viking-btn-label,
+a.viking-btn-ghost[aria-busy=true]::before,
 a.viking-btn-ghost[aria-busy=true] .viking-btn-label,
+button.viking-btn-ghost[aria-busy=true]::before,
 button.viking-btn-ghost[aria-busy=true] .viking-btn-label {
   opacity: 0.85;
+  transform: translateY(1px);
 }
 .viking-btn-ghost viking-icon,
 .viking-btn-ghost .viking-icon,
+.viking-btn-ghost [data-viking-icon],
 a.viking-btn-ghost viking-icon,
 a.viking-btn-ghost .viking-icon,
+a.viking-btn-ghost [data-viking-icon],
 button.viking-btn-ghost viking-icon,
-button.viking-btn-ghost .viking-icon {
+button.viking-btn-ghost .viking-icon,
+button.viking-btn-ghost [data-viking-icon] {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
   pointer-events: none;
+  flex: 0 0 auto;
+}
+.viking-btn-ghost .viking-btn-label,
+a.viking-btn-ghost .viking-btn-label,
+button.viking-btn-ghost .viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 .viking-btn-ghost,
 a.viking-btn-ghost,
@@ -1451,7 +1774,9 @@ button.viking-btn-ghost:hover:not(:disabled):not([aria-busy=true]) {
 .viking-btn-ghost:active:not(:disabled):not([aria-busy=true]),
 a.viking-btn-ghost:active:not(:disabled):not([aria-busy=true]),
 button.viking-btn-ghost:active:not(:disabled):not([aria-busy=true]) {
-  transform: scale(var(--viking-state-active-scale));
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  background: var(--viking-accent-soft);
+  color: var(--viking-accent-strong);
 }
 
 .viking-btn-subtle,
@@ -1468,7 +1793,7 @@ button.viking-btn-subtle {
   gap: var(--viking-space-1);
   min-height: var(--viking-control-height);
   padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius);
+  border-radius: var(--viking-radius-lg);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -1477,8 +1802,12 @@ button.viking-btn-subtle {
   min-width: var(--viking-btn-min-width, 120px);
   white-space: nowrap;
   position: relative;
+  background-clip: padding-box;
+  isolation: isolate;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  box-shadow: var(--viking-shadow-sm);
 }
 .viking-btn-subtle:focus-visible,
 a.viking-btn-subtle:focus-visible,
@@ -1487,6 +1816,30 @@ button.viking-btn-subtle:focus-visible {
   outline-offset: var(--viking-ring-offset);
   z-index: 1;
 }
+.viking-btn-subtle::before,
+a.viking-btn-subtle::before,
+button.viking-btn-subtle::before {
+  content: "";
+  position: absolute;
+  inset: 1px 1px auto 1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 45%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.82;
+  transition: var(--viking-transition-interactive);
+}
+.viking-btn-subtle::after,
+a.viking-btn-subtle::after,
+button.viking-btn-subtle::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--viking-metallic-100) 18%, transparent), transparent);
+  pointer-events: none;
+  opacity: 0.45;
+  transition: var(--viking-transition-interactive);
+}
 .viking-btn-subtle:disabled, .viking-btn-subtle[aria-busy=true],
 a.viking-btn-subtle:disabled,
 a.viking-btn-subtle[aria-busy=true],
@@ -1497,19 +1850,44 @@ button.viking-btn-subtle[aria-busy=true] {
   transform: none !important;
   box-shadow: none !important;
 }
-.viking-btn-subtle[aria-busy=true] .viking-btn-label,
+.viking-btn-subtle[aria-busy=true]::before, .viking-btn-subtle[aria-busy=true] .viking-btn-label,
+a.viking-btn-subtle[aria-busy=true]::before,
 a.viking-btn-subtle[aria-busy=true] .viking-btn-label,
+button.viking-btn-subtle[aria-busy=true]::before,
 button.viking-btn-subtle[aria-busy=true] .viking-btn-label {
   opacity: 0.85;
+  transform: translateY(1px);
 }
 .viking-btn-subtle viking-icon,
 .viking-btn-subtle .viking-icon,
+.viking-btn-subtle [data-viking-icon],
 a.viking-btn-subtle viking-icon,
 a.viking-btn-subtle .viking-icon,
+a.viking-btn-subtle [data-viking-icon],
 button.viking-btn-subtle viking-icon,
-button.viking-btn-subtle .viking-icon {
+button.viking-btn-subtle .viking-icon,
+button.viking-btn-subtle [data-viking-icon] {
   flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--viking-icon-size-md);
+  height: var(--viking-icon-size-md);
+  line-height: 1;
   pointer-events: none;
+  flex: 0 0 auto;
+}
+.viking-btn-subtle .viking-btn-label,
+a.viking-btn-subtle .viking-btn-label,
+button.viking-btn-subtle .viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  line-height: 1.2;
+  min-width: 0;
+  justify-content: center;
+  text-align: center;
+  white-space: nowrap;
 }
 .viking-btn-subtle,
 a.viking-btn-subtle,
@@ -1530,7 +1908,10 @@ button.viking-btn-subtle:hover:not(:disabled):not([aria-busy=true]) {
 .viking-btn-subtle:active:not(:disabled):not([aria-busy=true]),
 a.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]),
 button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
-  transform: scale(var(--viking-state-active-scale));
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: var(--viking-border);
+  background: color-mix(in srgb, var(--viking-accent-soft) 70%, var(--viking-surface));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 24%, transparent);
 }
 
 .viking-btn.viking-outline {
@@ -1548,7 +1929,8 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
 }
 .viking-btn.viking-outline:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  border-color: var(--viking-border-strong);
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
 }
 
 .viking-btn.viking-primary {
@@ -1566,7 +1948,8 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
 }
 .viking-btn.viking-primary:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
 }
 
 .viking-btn.viking-secondary {
@@ -1584,7 +1967,8 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
 }
 .viking-btn.viking-secondary:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent), var(--viking-shadow-sm);
 }
 
 .viking-btn.viking-filled {
@@ -1601,6 +1985,9 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
 }
 .viking-btn.viking-filled:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
+  box-shadow: var(--viking-shadow-sm);
+  border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
+  background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
 }
 
 .viking-btn.viking-danger {
@@ -1618,6 +2005,8 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
 }
 .viking-btn.viking-danger:active:not(:disabled):not([aria-busy=true]) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
+  background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
   box-shadow: var(--viking-shadow-sm);
 }
 
@@ -1633,7 +2022,9 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
   color: var(--viking-accent-strong);
 }
 .viking-btn.viking-ghost:active:not(:disabled):not([aria-busy=true]) {
-  transform: scale(var(--viking-state-active-scale));
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  background: var(--viking-accent-soft);
+  color: var(--viking-accent-strong);
 }
 
 .viking-btn.viking-subtle {
@@ -1649,7 +2040,10 @@ button.viking-btn-subtle:active:not(:disabled):not([aria-busy=true]) {
   border-color: var(--viking-border-strong);
 }
 .viking-btn.viking-subtle:active:not(:disabled):not([aria-busy=true]) {
-  transform: scale(var(--viking-state-active-scale));
+  transform: translateY(0) scale(var(--viking-state-active-scale));
+  border-color: var(--viking-border);
+  background: color-mix(in srgb, var(--viking-accent-soft) 70%, var(--viking-surface));
+  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--viking-black) 24%, transparent);
 }
 
 .viking-btn.viking-compact {